Autolayout (#151)

* wip

* added layout sizing

* layout positioning

* fixes

* fixes

* fixes

* fixes

* fixes

* fixes

.changeset/swift-parents-wait.md

@@ -0,0 +1,5 @@
+---
+"penpot-exporter": minor
+---
+
+Added support for autolayout

plugin-src/findAllTextnodes.ts

@@ -15,7 +15,7 @@ export const findAllTextNodes = async () => {
         extractMissingFonts(node, fonts);
       }
 
-      sleep(0);
+      await sleep(0);
     }
   }
 

plugin-src/transformers/partials/index.ts

@@ -6,6 +6,7 @@ export * from './transformDimensionAndPosition';
 export * from './transformEffects';
 export * from './transformFigmaIds';
 export * from './transformFills';
+export * from './transformLayout';
 export * from './transformProportion';
 export * from './transformRotationAndPosition';
 export * from './transformSceneNode';

plugin-src/transformers/partials/transformLayout.ts

@@ -0,0 +1,44 @@
+import {
+  translateLayoutAlignContent,
+  translateLayoutAlignItems,
+  translateLayoutFlexDir,
+  translateLayoutGap,
+  translateLayoutJustifyContent,
+  translateLayoutJustifyItems,
+  translateLayoutPadding,
+  translateLayoutSizing,
+  translateLayoutWrapType
+} from '@plugin/translators';
+
+import { LayoutAttributes, LayoutChildAttributes } from '@ui/lib/types/shapes/layout';
+
+export const transformAutoLayout = (node: BaseFrameMixin): LayoutAttributes => {
+  return {
+    layout: node.layoutMode !== 'NONE' ? 'flex' : undefined,
+    layoutFlexDir: translateLayoutFlexDir(node.layoutMode),
+    layoutGap: translateLayoutGap(
+      node.layoutMode,
+      node.itemSpacing,
+      node.primaryAxisAlignItems === 'SPACE_BETWEEN'
+    ),
+    layoutWrapType: translateLayoutWrapType(node.layoutWrap),
+    layoutPadding: translateLayoutPadding(node),
+    layoutJustifyContent: translateLayoutJustifyContent(node),
+    layoutJustifyItems: translateLayoutJustifyItems(node),
+    layoutAlignContent: translateLayoutAlignContent(node),
+    layoutAlignItems: translateLayoutAlignItems(node)
+  };
+};
+
+export const transformLayoutAttributes = (
+  node: LayoutMixin
+): Pick<
+  LayoutChildAttributes,
+  'layoutItemH-Sizing' | 'layoutItemV-Sizing' | 'layoutItemAbsolute'
+> => {
+  return {
+    'layoutItemH-Sizing': translateLayoutSizing(node.layoutSizingHorizontal),
+    'layoutItemV-Sizing': translateLayoutSizing(node.layoutSizingVertical),
+    'layoutItemAbsolute': node.layoutPositioning === 'ABSOLUTE'
+  };
+};

plugin-src/transformers/partials/transformVectorPaths.ts

@@ -4,6 +4,7 @@ import {
   transformBlend,
   transformDimensionAndPositionFromVectorPath,
   transformEffects,
+  transformLayoutAttributes,
   transformProportion,
   transformSceneNode,
   transformStrokesFromVector
@@ -110,6 +111,7 @@ const transformVectorPath = (
     ...transformDimensionAndPositionFromVectorPath(vectorPath, baseX, baseY),
     ...transformSceneNode(node),
     ...transformBlend(node),
-    ...transformProportion(node)
+    ...transformProportion(node),
+    ...transformLayoutAttributes(node)
   };
 };

plugin-src/transformers/transformBooleanNode.ts

@@ -5,6 +5,7 @@ import {
   transformEffects,
   transformFigmaIds,
   transformFills,
+  transformLayoutAttributes,
   transformProportion,
   transformSceneNode,
   transformStrokes
@@ -30,6 +31,7 @@ export const transformBooleanNode = async (
     ...transformDimensionAndPosition(node, baseX, baseY),
     ...transformSceneNode(node),
     ...transformBlend(node),
-    ...transformProportion(node)
+    ...transformProportion(node),
+    ...transformLayoutAttributes(node)
   };
 };

plugin-src/transformers/transformComponentNode.ts

@@ -1,5 +1,6 @@
 import { componentsLibrary } from '@plugin/ComponentLibrary';
 import {
+  transformAutoLayout,
   transformBlend,
   transformChildren,
   transformConstraints,
@@ -8,6 +9,7 @@ import {
   transformEffects,
   transformFigmaIds,
   transformFills,
+  transformLayoutAttributes,
   transformProportion,
   transformSceneNode,
   transformStrokes
@@ -32,10 +34,12 @@ export const transformComponentNode = async (
     ...transformSceneNode(node),
     ...transformBlend(node),
     ...transformProportion(node),
+    ...transformLayoutAttributes(node),
     ...transformCornerRadius(node),
     ...(await transformChildren(node, baseX + node.x, baseY + node.y)),
     ...transformDimensionAndPosition(node, baseX, baseY),
-    ...transformConstraints(node)
+    ...transformConstraints(node),
+    ...transformAutoLayout(node)
   });
 
   return {

plugin-src/transformers/transformEllipseNode.ts

@@ -5,6 +5,7 @@ import {
   transformEffects,
   transformFigmaIds,
   transformFills,
+  transformLayoutAttributes,
   transformProportion,
   transformRotationAndPosition,
   transformSceneNode,
@@ -30,6 +31,7 @@ export const transformEllipseNode = (
     ...transformSceneNode(node),
     ...transformBlend(node),
     ...transformProportion(node),
+    ...transformLayoutAttributes(node),
     ...transformConstraints(node)
   };
 };

plugin-src/transformers/transformFrameNode.ts

@@ -1,4 +1,5 @@
 import {
+  transformAutoLayout,
   transformBlend,
   transformChildren,
   transformConstraints,
@@ -7,6 +8,7 @@ import {
   transformEffects,
   transformFigmaIds,
   transformFills,
+  transformLayoutAttributes,
   transformProportion,
   transformSceneNode,
   transformStrokes
@@ -34,9 +36,11 @@ export const transformFrameNode = async (
       // @see: https://forum.figma.com/t/add-a-blendmode-property-for-sectionnode/58560
       ...transformBlend(node),
       ...transformProportion(node),
+      ...transformLayoutAttributes(node),
       ...transformCornerRadius(node),
       ...transformEffects(node),
-      ...transformConstraints(node)
+      ...transformConstraints(node),
+      ...transformAutoLayout(node)
     };
   }
 

plugin-src/transformers/transformInstanceNode.ts

@@ -1,5 +1,6 @@
 import { remoteComponentLibrary } from '@plugin/RemoteComponentLibrary';
 import {
+  transformAutoLayout,
   transformBlend,
   transformChildren,
   transformConstraints,
@@ -8,6 +9,7 @@ import {
   transformEffects,
   transformFigmaIds,
   transformFills,
+  transformLayoutAttributes,
   transformProportion,
   transformSceneNode,
   transformStrokes
@@ -43,9 +45,11 @@ export const transformInstanceNode = async (
     ...transformSceneNode(node),
     ...transformBlend(node),
     ...transformProportion(node),
+    ...transformLayoutAttributes(node),
     ...transformCornerRadius(node),
     ...transformDimensionAndPosition(node, baseX, baseY),
     ...transformConstraints(node),
+    ...transformAutoLayout(node),
     ...(await transformChildren(node, baseX + node.x, baseY + node.y))
   };
 };

plugin-src/transformers/transformPathNode.ts

@@ -5,6 +5,7 @@ import {
   transformEffects,
   transformFigmaIds,
   transformFills,
+  transformLayoutAttributes,
   transformProportion,
   transformSceneNode,
   transformStrokes,
@@ -34,6 +35,7 @@ export const transformPathNode = (
     ...transformSceneNode(node),
     ...transformBlend(node),
     ...transformProportion(node),
+    ...transformLayoutAttributes(node),
     ...transformConstraints(node)
   };
 };

plugin-src/transformers/transformRectangleNode.ts

@@ -6,6 +6,7 @@ import {
   transformEffects,
   transformFigmaIds,
   transformFills,
+  transformLayoutAttributes,
   transformProportion,
   transformRotationAndPosition,
   transformSceneNode,
@@ -31,6 +32,7 @@ export const transformRectangleNode = (
     ...transformSceneNode(node),
     ...transformBlend(node),
     ...transformProportion(node),
+    ...transformLayoutAttributes(node),
     ...transformCornerRadius(node),
     ...transformConstraints(node)
   };

plugin-src/transformers/transformTextNode.ts

@@ -4,6 +4,7 @@ import {
   transformDimensionAndPosition,
   transformEffects,
   transformFigmaIds,
+  transformLayoutAttributes,
   transformProportion,
   transformSceneNode,
   transformStrokes,
@@ -23,6 +24,7 @@ export const transformTextNode = (node: TextNode, baseX: number, baseY: number):
     ...transformSceneNode(node),
     ...transformBlend(node),
     ...transformProportion(node),
+    ...transformLayoutAttributes(node),
     ...transformStrokes(node),
     ...transformConstraints(node)
   };

plugin-src/translators/index.ts

@@ -3,5 +3,6 @@ export * from './translateBlurEffects';
 export * from './translateBoolType';
 export * from './translateChildren';
 export * from './translateConstraints';
+export * from './translateLayout';
 export * from './translateShadowEffects';
 export * from './translateStrokes';

plugin-src/translators/translateLayout.ts

@@ -0,0 +1,127 @@
+import {
+  JustifyAlignContent,
+  JustifyAlignItems,
+  LayoutFlexDir,
+  LayoutGap,
+  LayoutPadding,
+  LayoutSizing,
+  LayoutWrapType
+} from '@ui/lib/types/shapes/layout';
+
+type FigmaLayoutMode = 'NONE' | 'HORIZONTAL' | 'VERTICAL';
+
+type FigmaWrap = 'NO_WRAP' | 'WRAP';
+
+type FigmaLayoutSizing = 'FIXED' | 'HUG' | 'FILL';
+
+export const translateLayoutFlexDir = (layoutMode: FigmaLayoutMode): LayoutFlexDir | undefined => {
+  switch (layoutMode) {
+    case 'HORIZONTAL':
+      return 'row-reverse';
+    case 'VERTICAL':
+      return 'column-reverse';
+    default:
+      return;
+  }
+};
+
+export const translateLayoutGap = (
+  layoutMode: FigmaLayoutMode,
+  itemSpacing: number,
+  auto: boolean = false
+): LayoutGap => {
+  if (auto) {
+    return {
+      rowGap: 0,
+      columnGap: 0
+    };
+  }
+
+  return {
+    rowGap: layoutMode === 'VERTICAL' ? itemSpacing : 0,
+    columnGap: layoutMode === 'HORIZONTAL' ? itemSpacing : 0
+  };
+};
+
+export const translateLayoutWrapType = (wrap: FigmaWrap): LayoutWrapType => {
+  switch (wrap) {
+    case 'NO_WRAP':
+      return 'nowrap';
+    case 'WRAP':
+      return 'wrap';
+  }
+};
+
+export const translateLayoutPadding = (node: BaseFrameMixin): LayoutPadding => {
+  return {
+    p1: node.paddingTop,
+    p2: node.paddingRight,
+    p3: node.paddingBottom,
+    p4: node.paddingLeft
+  };
+};
+
+export const translateLayoutJustifyContent = (node: BaseFrameMixin): JustifyAlignContent => {
+  switch (node.primaryAxisAlignItems) {
+    case 'MIN':
+      return 'start';
+    case 'CENTER':
+      return 'center';
+    case 'MAX':
+      return 'end';
+    case 'SPACE_BETWEEN':
+      return 'space-between';
+    default:
+      return 'stretch';
+  }
+};
+
+export const translateLayoutJustifyItems = (node: BaseFrameMixin): JustifyAlignItems => {
+  switch (node.primaryAxisAlignItems) {
+    case 'MIN':
+      return 'start';
+    case 'CENTER':
+      return 'center';
+    case 'MAX':
+      return 'end';
+    default:
+      return 'stretch';
+  }
+};
+
+export const translateLayoutAlignContent = (node: BaseFrameMixin): JustifyAlignContent => {
+  switch (node.counterAxisAlignItems) {
+    case 'MIN':
+      return 'start';
+    case 'CENTER':
+      return 'center';
+    case 'MAX':
+      return 'end';
+    default:
+      return 'stretch';
+  }
+};
+
+export const translateLayoutAlignItems = (node: BaseFrameMixin): JustifyAlignItems => {
+  switch (node.counterAxisAlignItems) {
+    case 'MIN':
+      return 'start';
+    case 'CENTER':
+      return 'center';
+    case 'MAX':
+      return 'end';
+    default:
+      return 'stretch';
+  }
+};
+
+export const translateLayoutSizing = (sizing: FigmaLayoutSizing): LayoutSizing => {
+  switch (sizing) {
+    case 'FIXED':
+      return 'fix';
+    case 'HUG':
+      return 'auto';
+    case 'FILL':
+      return 'fill';
+  }
+};

ui-src/lib/types/shapes/layout.ts

@@ -2,48 +2,41 @@ import { Uuid } from '@ui/lib/types/utils/uuid';
 
 export const ITEM_MARGIN_SIMPLE_TYPE: unique symbol = Symbol.for('simple');
 export const ITEM_MARGIN_MULTIPLE_TYPE: unique symbol = Symbol.for('multiple');
-export const ITEM_HSIZING_FILL: unique symbol = Symbol.for('fill');
+export const ITEM_SIZING_FILL: unique symbol = Symbol.for('fill');
-export const ITEM_HSIZING_FIX: unique symbol = Symbol.for('fix');
+export const ITEM_SIZING_FIX: unique symbol = Symbol.for('fix');
-export const ITEM_HSIZING_AUTO: unique symbol = Symbol.for('auto');
+export const ITEM_SIZING_AUTO: unique symbol = Symbol.for('auto');
-export const ITEM_VSIZING_FILL: unique symbol = Symbol.for('fill');
-export const ITEM_VSIZING_FIX: unique symbol = Symbol.for('fix');
-export const ITEM_VSIZING_AUTO: unique symbol = Symbol.for('auto');
 export const ITEM_ALIGN_SELF_START: unique symbol = Symbol.for('start');
 export const ITEM_ALIGN_SELF_END: unique symbol = Symbol.for('end');
 export const ITEM_ALIGN_SELF_CENTER: unique symbol = Symbol.for('center');
 export const ITEM_ALIGN_SELF_STRETCH: unique symbol = Symbol.for('stretch');
 
+export type LayoutSizing =
+  | 'fill'
+  | 'fix'
+  | 'auto'
+  | typeof ITEM_SIZING_FILL
+  | typeof ITEM_SIZING_FIX
+  | typeof ITEM_SIZING_AUTO;
+
 export type LayoutChildAttributes = {
-  layoutItemMarginType?:
+  'layoutItemMarginType'?:
     | 'simple'
     | 'multiple'
     | typeof ITEM_MARGIN_SIMPLE_TYPE
     | typeof ITEM_MARGIN_MULTIPLE_TYPE;
-  layoutItemMargin?: {
+  'layoutItemMargin'?: {
     m1?: number;
     m2?: number;
     m3?: number;
     m4?: number;
   };
-  layoutItemMaxH?: number;
+  'layoutItemMaxH'?: number;
-  layoutItemMinH?: number;
+  'layoutItemMinH'?: number;
-  layoutItemMaxW?: number;
+  'layoutItemMaxW'?: number;
-  layoutItemMinW?: number;
+  'layoutItemMinW'?: number;
-  layoutItemHSizing?:
+  'layoutItemH-Sizing'?: LayoutSizing;
-    | 'fill'
+  'layoutItemV-Sizing'?: LayoutSizing;
-    | 'fix'
+  'layoutItemAlignSelf'?:
-    | 'auto'
-    | typeof ITEM_HSIZING_FILL
-    | typeof ITEM_HSIZING_FIX
-    | typeof ITEM_HSIZING_AUTO;
-  layoutItemVSizing?:
-    | 'fill'
-    | 'fix'
-    | 'auto'
-    | typeof ITEM_VSIZING_FILL
-    | typeof ITEM_VSIZING_FIX
-    | typeof ITEM_VSIZING_AUTO;
-  layoutItemAlignSelf?:
     | 'start'
     | 'end'
     | 'center'
@@ -52,11 +45,11 @@ export type LayoutChildAttributes = {
     | typeof ITEM_ALIGN_SELF_END
     | typeof ITEM_ALIGN_SELF_CENTER
     | typeof ITEM_ALIGN_SELF_STRETCH;
-  layoutItemAbsolute?: boolean;
+  'layoutItemAbsolute'?: boolean;
-  layoutItemZIndex?: number;
+  'layoutItemZIndex'?: number;
 };
 
-type JustifyAlignContent =
+export type JustifyAlignContent =
   | 'start'
   | 'center'
   | 'end'
@@ -65,30 +58,38 @@ type JustifyAlignContent =
   | 'space-evenly'
   | 'stretch';
 
-type JustifyAlignItems = 'start' | 'end' | 'center' | 'stretch';
+export type JustifyAlignItems = 'start' | 'end' | 'center' | 'stretch';
+
+export type LayoutFlexDir =
+  | 'row'
+  | 'reverse-row'
+  | 'row-reverse'
+  | 'column'
+  | 'reverse-column'
+  | 'column-reverse';
+
+export type LayoutGap = {
+  rowGap?: number;
+  columnGap?: number;
+};
+
+export type LayoutWrapType = 'wrap' | 'nowrap' | 'no-wrap';
+
+export type LayoutPadding = {
+  p1?: number;
+  p2?: number;
+  p3?: number;
+  p4?: number;
+};
 
 export type LayoutAttributes = {
   layout?: 'flex' | 'grid';
-  layoutFlexDir?:
+  layoutFlexDir?: LayoutFlexDir;
-    | 'row'
+  layoutGap?: LayoutGap;
-    | 'reverse-row'
-    | 'row-reverse'
-    | 'column'
-    | 'reverse-column'
-    | 'column-reverse';
-  layoutGap?: {
-    rowGap?: number;
-    columnGap?: number;
-  };
   layoutGapType?: 'simple' | 'multiple';
-  layoutWrapType?: 'wrap' | 'nowrap' | 'no-wrap';
+  layoutWrapType?: LayoutWrapType;
   layoutPaddingType?: 'simple' | 'multiple';
-  layoutPadding?: {
+  layoutPadding?: LayoutPadding;
-    p1?: number;
-    p2?: number;
-    p3?: number;
-    p4?: number;
-  };
   layoutJustifyContent?: JustifyAlignContent;
   layoutJustifyItems?: JustifyAlignItems;
   layoutAlignContent?: JustifyAlignContent;