From b93d7096aa8ee267ccb803dfd642c6f22fba33d4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alex=20S=C3=A1nchez?= Date: Mon, 3 Jun 2024 09:24:28 +0200 Subject: [PATCH 1/3] fix masks in components --- .changeset/friendly-cycles-heal.md | 5 +++++ plugin-src/transformers/partials/transformFigmaIds.ts | 11 ++++++++--- plugin-src/translators/translateChildren.ts | 2 ++ 3 files changed, 15 insertions(+), 3 deletions(-) create mode 100644 .changeset/friendly-cycles-heal.md diff --git a/.changeset/friendly-cycles-heal.md b/.changeset/friendly-cycles-heal.md new file mode 100644 index 00000000..e4aa2332 --- /dev/null +++ b/.changeset/friendly-cycles-heal.md @@ -0,0 +1,5 @@ +--- +"penpot-exporter": patch +--- + +Fix masks not working in components diff --git a/plugin-src/transformers/partials/transformFigmaIds.ts b/plugin-src/transformers/partials/transformFigmaIds.ts index 01034f7f..65147492 100644 --- a/plugin-src/transformers/partials/transformFigmaIds.ts +++ b/plugin-src/transformers/partials/transformFigmaIds.ts @@ -1,11 +1,16 @@ import { ShapeBaseAttributes } from '@ui/lib/types/shapes/shape'; export const transformFigmaIds = ( - node: SceneNode + node: SceneNode, + isMasked: boolean = false ): Pick => { + const id = normalizeNodeId(node.id); + const relatedId = getRelatedNodeId(node.id); + const prefix = isMasked ? 'M' : ''; + return { - figmaId: normalizeNodeId(node.id), - figmaRelatedId: getRelatedNodeId(node.id) + figmaId: `${prefix}${id}`, + figmaRelatedId: relatedId ? `${prefix}${relatedId}` : undefined }; }; diff --git a/plugin-src/translators/translateChildren.ts b/plugin-src/translators/translateChildren.ts index ed9ad19f..13e8cbec 100644 --- a/plugin-src/translators/translateChildren.ts +++ b/plugin-src/translators/translateChildren.ts @@ -1,4 +1,5 @@ import { transformGroupNodeLike, transformSceneNode } from '@plugin/transformers'; +import { transformFigmaIds } from '@plugin/transformers/partials'; import { sleep } from '@plugin/utils'; import { PenpotNode } from '@ui/types'; @@ -23,6 +24,7 @@ export const translateMaskChildren = async ( const maskedChildren = await translateChildren(children.slice(maskIndex), baseX, baseY); const maskGroup = { + ...transformFigmaIds(maskChild, true), ...transformGroupNodeLike(maskChild, baseX, baseY), children: maskedChildren, maskedGroup: true From 9224e315e2e4625c6fbdf922388c068d2cea17fc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alex=20S=C3=A1nchez?= Date: Mon, 3 Jun 2024 09:33:10 +0200 Subject: [PATCH 2/3] fixes --- .../partials/transformFigmaIds.ts | 19 ++++++++++++------- plugin-src/translators/translateChildren.ts | 4 ++-- 2 files changed, 14 insertions(+), 9 deletions(-) diff --git a/plugin-src/transformers/partials/transformFigmaIds.ts b/plugin-src/transformers/partials/transformFigmaIds.ts index 65147492..867d85ab 100644 --- a/plugin-src/transformers/partials/transformFigmaIds.ts +++ b/plugin-src/transformers/partials/transformFigmaIds.ts @@ -1,16 +1,21 @@ import { ShapeBaseAttributes } from '@ui/lib/types/shapes/shape'; export const transformFigmaIds = ( - node: SceneNode, - isMasked: boolean = false + node: SceneNode ): Pick => { - const id = normalizeNodeId(node.id); - const relatedId = getRelatedNodeId(node.id); - const prefix = isMasked ? 'M' : ''; + return { + figmaId: normalizeNodeId(node.id), + figmaRelatedId: getRelatedNodeId(node.id) + }; +}; +export const transformMaskFigmaIds = ( + node: SceneNode +): Pick => { + const transformedIds = transformFigmaIds(node); return { - figmaId: `${prefix}${id}`, - figmaRelatedId: relatedId ? `${prefix}${relatedId}` : undefined + figmaId: `M${transformedIds.figmaId}`, + figmaRelatedId: transformedIds.figmaRelatedId ? `M{transformedIds.figmaRelatedId}` : undefined }; }; diff --git a/plugin-src/translators/translateChildren.ts b/plugin-src/translators/translateChildren.ts index 13e8cbec..fdf32a04 100644 --- a/plugin-src/translators/translateChildren.ts +++ b/plugin-src/translators/translateChildren.ts @@ -1,5 +1,5 @@ import { transformGroupNodeLike, transformSceneNode } from '@plugin/transformers'; -import { transformFigmaIds } from '@plugin/transformers/partials'; +import { transformMaskFigmaIds } from '@plugin/transformers/partials'; import { sleep } from '@plugin/utils'; import { PenpotNode } from '@ui/types'; @@ -24,7 +24,7 @@ export const translateMaskChildren = async ( const maskedChildren = await translateChildren(children.slice(maskIndex), baseX, baseY); const maskGroup = { - ...transformFigmaIds(maskChild, true), + ...transformMaskFigmaIds(maskChild), ...transformGroupNodeLike(maskChild, baseX, baseY), children: maskedChildren, maskedGroup: true From 7d10065a659a94c81fb56a9dc987b3326beade1e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alex=20S=C3=A1nchez?= Date: Mon, 3 Jun 2024 09:33:47 +0200 Subject: [PATCH 3/3] fixes --- plugin-src/transformers/partials/transformFigmaIds.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugin-src/transformers/partials/transformFigmaIds.ts b/plugin-src/transformers/partials/transformFigmaIds.ts index 867d85ab..613aac3a 100644 --- a/plugin-src/transformers/partials/transformFigmaIds.ts +++ b/plugin-src/transformers/partials/transformFigmaIds.ts @@ -15,7 +15,7 @@ export const transformMaskFigmaIds = ( const transformedIds = transformFigmaIds(node); return { figmaId: `M${transformedIds.figmaId}`, - figmaRelatedId: transformedIds.figmaRelatedId ? `M{transformedIds.figmaRelatedId}` : undefined + figmaRelatedId: transformedIds.figmaRelatedId ? `M${transformedIds.figmaRelatedId}` : undefined }; };