From 9053ba9226f6db632c07013b6621a081102d0c3e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alex=20S=C3=A1nchez?= Date: Mon, 10 Jun 2024 16:20:04 +0200 Subject: [PATCH] wip --- plugin-src/transformers/partials/index.ts | 1 + .../transformers/partials/transformLayout.ts | 25 +++++++ plugin-src/transformers/transformFrameNode.ts | 4 +- plugin-src/translators/index.ts | 1 + plugin-src/translators/translateLayout.ts | 75 +++++++++++++++++++ ui-src/lib/types/shapes/layout.ts | 48 +++++++----- 6 files changed, 133 insertions(+), 21 deletions(-) create mode 100644 plugin-src/transformers/partials/transformLayout.ts create mode 100644 plugin-src/translators/translateLayout.ts diff --git a/plugin-src/transformers/partials/index.ts b/plugin-src/transformers/partials/index.ts index 0253b36..f3a171b 100644 --- a/plugin-src/transformers/partials/index.ts +++ b/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'; diff --git a/plugin-src/transformers/partials/transformLayout.ts b/plugin-src/transformers/partials/transformLayout.ts new file mode 100644 index 0000000..29f7245 --- /dev/null +++ b/plugin-src/transformers/partials/transformLayout.ts @@ -0,0 +1,25 @@ +import { + translateLayoutFlexDir, + translateLayoutGap, + translateLayoutJustifyContent, + translateLayoutJustifyItems, + translateLayoutPadding, + translateLayoutWrapType +} from '@plugin/translators'; + +import { LayoutAttributes } from '@ui/lib/types/shapes/layout'; + +export const transformAutoLayout = (node: BaseFrameMixin): LayoutAttributes => { + console.log(node); + return { + layout: node.layoutMode !== 'NONE' ? 'flex' : undefined, + layoutFlexDir: translateLayoutFlexDir(node.layoutMode), + layoutGap: translateLayoutGap(node.layoutMode, node.itemSpacing), + layoutWrapType: translateLayoutWrapType(node.layoutWrap), + layoutPadding: translateLayoutPadding(node), + layoutJustifyContent: translateLayoutJustifyContent(node), + layoutJustifyItems: translateLayoutJustifyItems(node), + layoutAlignContent: translateLayoutJustifyContent(node), + layoutAlignItems: translateLayoutJustifyItems(node) + }; +}; diff --git a/plugin-src/transformers/transformFrameNode.ts b/plugin-src/transformers/transformFrameNode.ts index 57ba08f..fb2b37f 100644 --- a/plugin-src/transformers/transformFrameNode.ts +++ b/plugin-src/transformers/transformFrameNode.ts @@ -1,4 +1,5 @@ import { + transformAutoLayout, transformBlend, transformChildren, transformConstraints, @@ -36,7 +37,8 @@ export const transformFrameNode = async ( ...transformProportion(node), ...transformCornerRadius(node), ...transformEffects(node), - ...transformConstraints(node) + ...transformConstraints(node), + ...transformAutoLayout(node) }; } diff --git a/plugin-src/translators/index.ts b/plugin-src/translators/index.ts index 9d58aa6..4d824cc 100644 --- a/plugin-src/translators/index.ts +++ b/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'; diff --git a/plugin-src/translators/translateLayout.ts b/plugin-src/translators/translateLayout.ts new file mode 100644 index 0000000..b8e11a4 --- /dev/null +++ b/plugin-src/translators/translateLayout.ts @@ -0,0 +1,75 @@ +import { + JustifyAlignContent, + JustifyAlignItems, + LayoutFlexDir, + LayoutGap, + LayoutPadding, + LayoutWrapType +} from '@ui/lib/types/shapes/layout'; + +type FigmaLayoutMode = 'NONE' | 'HORIZONTAL' | 'VERTICAL'; + +type FigmaWrap = 'NO_WRAP' | 'WRAP'; +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): LayoutGap => { + 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.counterAxisAlignItems) { + case 'MIN': + return 'start'; + case 'CENTER': + return 'center'; + case 'MAX': + return 'end'; + default: + return 'stretch'; + } +}; diff --git a/ui-src/lib/types/shapes/layout.ts b/ui-src/lib/types/shapes/layout.ts index c84408f..875fdf3 100644 --- a/ui-src/lib/types/shapes/layout.ts +++ b/ui-src/lib/types/shapes/layout.ts @@ -56,7 +56,7 @@ export type LayoutChildAttributes = { layoutItemZIndex?: number; }; -type JustifyAlignContent = +export type JustifyAlignContent = | 'start' | 'center' | 'end' @@ -65,30 +65,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?: - | 'row' - | 'reverse-row' - | 'row-reverse' - | 'column' - | 'reverse-column' - | 'column-reverse'; - layoutGap?: { - rowGap?: number; - columnGap?: number; - }; + layoutFlexDir?: LayoutFlexDir; + layoutGap?: LayoutGap; layoutGapType?: 'simple' | 'multiple'; - layoutWrapType?: 'wrap' | 'nowrap' | 'no-wrap'; + layoutWrapType?: LayoutWrapType; layoutPaddingType?: 'simple' | 'multiple'; - layoutPadding?: { - p1?: number; - p2?: number; - p3?: number; - p4?: number; - }; + layoutPadding?: LayoutPadding; layoutJustifyContent?: JustifyAlignContent; layoutJustifyItems?: JustifyAlignItems; layoutAlignContent?: JustifyAlignContent;