From 6b2053f36035b4b0349eef93dcefb191b086e6d6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alex=20S=C3=A1nchez?= Date: Fri, 14 Jun 2024 10:15:56 +0200 Subject: [PATCH] fixes --- .changeset/swift-parents-wait.md | 5 +++++ .../transformers/partials/transformLayout.ts | 18 +++++++----------- .../partials/transformVectorPaths.ts | 6 ++---- .../transformers/transformBooleanNode.ts | 6 ++---- .../transformers/transformComponentNode.ts | 6 ++---- .../transformers/transformEllipseNode.ts | 6 ++---- plugin-src/transformers/transformFrameNode.ts | 6 ++---- .../transformers/transformInstanceNode.ts | 6 ++---- plugin-src/transformers/transformPathNode.ts | 6 ++---- .../transformers/transformRectangleNode.ts | 6 ++---- plugin-src/transformers/transformTextNode.ts | 6 ++---- 11 files changed, 30 insertions(+), 47 deletions(-) create mode 100644 .changeset/swift-parents-wait.md diff --git a/.changeset/swift-parents-wait.md b/.changeset/swift-parents-wait.md new file mode 100644 index 00000000..276ad40a --- /dev/null +++ b/.changeset/swift-parents-wait.md @@ -0,0 +1,5 @@ +--- +"penpot-exporter": minor +--- + +Added support for autolayout diff --git a/plugin-src/transformers/partials/transformLayout.ts b/plugin-src/transformers/partials/transformLayout.ts index 2a0e7baf..2869c45a 100644 --- a/plugin-src/transformers/partials/transformLayout.ts +++ b/plugin-src/transformers/partials/transformLayout.ts @@ -30,19 +30,15 @@ export const transformAutoLayout = (node: BaseFrameMixin): LayoutAttributes => { }; }; -export const transformLayoutSizing = ( +export const transformLayoutAttributes = ( node: LayoutMixin -): Pick => { +): Pick< + LayoutChildAttributes, + 'layoutItemH-Sizing' | 'layoutItemV-Sizing' | 'layoutItemAbsolute' +> => { return { 'layoutItemH-Sizing': translateLayoutSizing(node.layoutSizingHorizontal), - 'layoutItemV-Sizing': translateLayoutSizing(node.layoutSizingVertical) - }; -}; - -export const transformAutoLayoutPosition = ( - node: AutoLayoutChildrenMixin -): Pick => { - return { - layoutItemAbsolute: node.layoutPositioning === 'ABSOLUTE' + 'layoutItemV-Sizing': translateLayoutSizing(node.layoutSizingVertical), + 'layoutItemAbsolute': node.layoutPositioning === 'ABSOLUTE' }; }; diff --git a/plugin-src/transformers/partials/transformVectorPaths.ts b/plugin-src/transformers/partials/transformVectorPaths.ts index 0ebdfdf2..680014fc 100644 --- a/plugin-src/transformers/partials/transformVectorPaths.ts +++ b/plugin-src/transformers/partials/transformVectorPaths.ts @@ -1,11 +1,10 @@ import { parseSVG } from 'svg-path-parser'; import { - transformAutoLayoutPosition, transformBlend, transformDimensionAndPositionFromVectorPath, transformEffects, - transformLayoutSizing, + transformLayoutAttributes, transformProportion, transformSceneNode, transformStrokesFromVector @@ -113,7 +112,6 @@ const transformVectorPath = ( ...transformSceneNode(node), ...transformBlend(node), ...transformProportion(node), - ...transformLayoutSizing(node), - ...transformAutoLayoutPosition(node) + ...transformLayoutAttributes(node) }; }; diff --git a/plugin-src/transformers/transformBooleanNode.ts b/plugin-src/transformers/transformBooleanNode.ts index 4cb18e46..b85d260a 100644 --- a/plugin-src/transformers/transformBooleanNode.ts +++ b/plugin-src/transformers/transformBooleanNode.ts @@ -1,12 +1,11 @@ import { - transformAutoLayoutPosition, transformBlend, transformChildren, transformDimensionAndPosition, transformEffects, transformFigmaIds, transformFills, - transformLayoutSizing, + transformLayoutAttributes, transformProportion, transformSceneNode, transformStrokes @@ -33,7 +32,6 @@ export const transformBooleanNode = async ( ...transformSceneNode(node), ...transformBlend(node), ...transformProportion(node), - ...transformLayoutSizing(node), - ...transformAutoLayoutPosition(node) + ...transformLayoutAttributes(node) }; }; diff --git a/plugin-src/transformers/transformComponentNode.ts b/plugin-src/transformers/transformComponentNode.ts index 3c994468..703cf74a 100644 --- a/plugin-src/transformers/transformComponentNode.ts +++ b/plugin-src/transformers/transformComponentNode.ts @@ -1,7 +1,6 @@ import { componentsLibrary } from '@plugin/ComponentLibrary'; import { transformAutoLayout, - transformAutoLayoutPosition, transformBlend, transformChildren, transformConstraints, @@ -10,7 +9,7 @@ import { transformEffects, transformFigmaIds, transformFills, - transformLayoutSizing, + transformLayoutAttributes, transformProportion, transformSceneNode, transformStrokes @@ -35,8 +34,7 @@ export const transformComponentNode = async ( ...transformSceneNode(node), ...transformBlend(node), ...transformProportion(node), - ...transformLayoutSizing(node), - ...transformAutoLayoutPosition(node), + ...transformLayoutAttributes(node), ...transformCornerRadius(node), ...(await transformChildren(node, baseX + node.x, baseY + node.y)), ...transformDimensionAndPosition(node, baseX, baseY), diff --git a/plugin-src/transformers/transformEllipseNode.ts b/plugin-src/transformers/transformEllipseNode.ts index 09853b27..97c06c7c 100644 --- a/plugin-src/transformers/transformEllipseNode.ts +++ b/plugin-src/transformers/transformEllipseNode.ts @@ -1,12 +1,11 @@ import { - transformAutoLayoutPosition, transformBlend, transformConstraints, transformDimension, transformEffects, transformFigmaIds, transformFills, - transformLayoutSizing, + transformLayoutAttributes, transformProportion, transformRotationAndPosition, transformSceneNode, @@ -32,8 +31,7 @@ export const transformEllipseNode = ( ...transformSceneNode(node), ...transformBlend(node), ...transformProportion(node), - ...transformLayoutSizing(node), - ...transformAutoLayoutPosition(node), + ...transformLayoutAttributes(node), ...transformConstraints(node) }; }; diff --git a/plugin-src/transformers/transformFrameNode.ts b/plugin-src/transformers/transformFrameNode.ts index 4be6e0b4..e355f5b1 100644 --- a/plugin-src/transformers/transformFrameNode.ts +++ b/plugin-src/transformers/transformFrameNode.ts @@ -1,6 +1,5 @@ import { transformAutoLayout, - transformAutoLayoutPosition, transformBlend, transformChildren, transformConstraints, @@ -9,7 +8,7 @@ import { transformEffects, transformFigmaIds, transformFills, - transformLayoutSizing, + transformLayoutAttributes, transformProportion, transformSceneNode, transformStrokes @@ -37,8 +36,7 @@ export const transformFrameNode = async ( // @see: https://forum.figma.com/t/add-a-blendmode-property-for-sectionnode/58560 ...transformBlend(node), ...transformProportion(node), - ...transformLayoutSizing(node), - ...transformAutoLayoutPosition(node), + ...transformLayoutAttributes(node), ...transformCornerRadius(node), ...transformEffects(node), ...transformConstraints(node), diff --git a/plugin-src/transformers/transformInstanceNode.ts b/plugin-src/transformers/transformInstanceNode.ts index 3500ebb9..5ec49363 100644 --- a/plugin-src/transformers/transformInstanceNode.ts +++ b/plugin-src/transformers/transformInstanceNode.ts @@ -1,7 +1,6 @@ import { remoteComponentLibrary } from '@plugin/RemoteComponentLibrary'; import { transformAutoLayout, - transformAutoLayoutPosition, transformBlend, transformChildren, transformConstraints, @@ -10,7 +9,7 @@ import { transformEffects, transformFigmaIds, transformFills, - transformLayoutSizing, + transformLayoutAttributes, transformProportion, transformSceneNode, transformStrokes @@ -46,8 +45,7 @@ export const transformInstanceNode = async ( ...transformSceneNode(node), ...transformBlend(node), ...transformProportion(node), - ...transformLayoutSizing(node), - ...transformAutoLayoutPosition(node), + ...transformLayoutAttributes(node), ...transformCornerRadius(node), ...transformDimensionAndPosition(node, baseX, baseY), ...transformConstraints(node), diff --git a/plugin-src/transformers/transformPathNode.ts b/plugin-src/transformers/transformPathNode.ts index 04347a35..0eb6e673 100644 --- a/plugin-src/transformers/transformPathNode.ts +++ b/plugin-src/transformers/transformPathNode.ts @@ -1,12 +1,11 @@ import { - transformAutoLayoutPosition, transformBlend, transformConstraints, transformDimensionAndPosition, transformEffects, transformFigmaIds, transformFills, - transformLayoutSizing, + transformLayoutAttributes, transformProportion, transformSceneNode, transformStrokes, @@ -36,8 +35,7 @@ export const transformPathNode = ( ...transformSceneNode(node), ...transformBlend(node), ...transformProportion(node), - ...transformLayoutSizing(node), - ...transformAutoLayoutPosition(node), + ...transformLayoutAttributes(node), ...transformConstraints(node) }; }; diff --git a/plugin-src/transformers/transformRectangleNode.ts b/plugin-src/transformers/transformRectangleNode.ts index 066221dd..208c1666 100644 --- a/plugin-src/transformers/transformRectangleNode.ts +++ b/plugin-src/transformers/transformRectangleNode.ts @@ -1,5 +1,4 @@ import { - transformAutoLayoutPosition, transformBlend, transformConstraints, transformCornerRadius, @@ -7,7 +6,7 @@ import { transformEffects, transformFigmaIds, transformFills, - transformLayoutSizing, + transformLayoutAttributes, transformProportion, transformRotationAndPosition, transformSceneNode, @@ -33,8 +32,7 @@ export const transformRectangleNode = ( ...transformSceneNode(node), ...transformBlend(node), ...transformProportion(node), - ...transformLayoutSizing(node), - ...transformAutoLayoutPosition(node), + ...transformLayoutAttributes(node), ...transformCornerRadius(node), ...transformConstraints(node) }; diff --git a/plugin-src/transformers/transformTextNode.ts b/plugin-src/transformers/transformTextNode.ts index 6eb6adb0..49e65f85 100644 --- a/plugin-src/transformers/transformTextNode.ts +++ b/plugin-src/transformers/transformTextNode.ts @@ -1,11 +1,10 @@ import { - transformAutoLayoutPosition, transformBlend, transformConstraints, transformDimensionAndPosition, transformEffects, transformFigmaIds, - transformLayoutSizing, + transformLayoutAttributes, transformProportion, transformSceneNode, transformStrokes, @@ -25,8 +24,7 @@ export const transformTextNode = (node: TextNode, baseX: number, baseY: number): ...transformSceneNode(node), ...transformBlend(node), ...transformProportion(node), - ...transformLayoutSizing(node), - ...transformAutoLayoutPosition(node), + ...transformLayoutAttributes(node), ...transformStrokes(node), ...transformConstraints(node) };