diff --git a/.changeset/perfect-masks-kneel.md b/.changeset/perfect-masks-kneel.md new file mode 100644 index 00000000..fcfaabae --- /dev/null +++ b/.changeset/perfect-masks-kneel.md @@ -0,0 +1,5 @@ +--- +"penpot-exporter": minor +--- + +Added support for corner radius diff --git a/.prettierignore b/.prettierignore index f97ac3e0..9726bf30 100644 --- a/.prettierignore +++ b/.prettierignore @@ -3,3 +3,4 @@ node_modules dist ui-src/lib/penpot.js LICENSE +CHANGELOG.md diff --git a/plugin-src/transformers/partials/index.ts b/plugin-src/transformers/partials/index.ts index 2efc6ae6..c29e065c 100644 --- a/plugin-src/transformers/partials/index.ts +++ b/plugin-src/transformers/partials/index.ts @@ -1,5 +1,6 @@ export * from './transformBlend'; export * from './transformChildren'; +export * from './transformCornerRadius'; export * from './transformDimensionAndPosition'; export * from './transformFills'; export * from './transformProportion'; diff --git a/plugin-src/transformers/partials/transformCornerRadius.ts b/plugin-src/transformers/partials/transformCornerRadius.ts new file mode 100644 index 00000000..e784338a --- /dev/null +++ b/plugin-src/transformers/partials/transformCornerRadius.ts @@ -0,0 +1,26 @@ +import { ShapeAttributes } from '@ui/lib/types/shape/shapeAttributes'; + +const isRectangleCornerMixin = ( + node: CornerMixin | (CornerMixin & RectangleCornerMixin) +): node is CornerMixin & RectangleCornerMixin => { + return 'topLeftRadius' in node && node.cornerRadius === figma.mixed; +}; + +export const transformCornerRadius = ( + node: CornerMixin | (CornerMixin & RectangleCornerMixin) +): Partial | undefined => { + if (isRectangleCornerMixin(node)) { + return { + r1: node.topLeftRadius, + r2: node.topRightRadius, + r3: node.bottomRightRadius, + r4: node.bottomLeftRadius + }; + } + + if (node.cornerRadius !== figma.mixed) { + return { + rx: node.cornerRadius + }; + } +}; diff --git a/plugin-src/transformers/partials/transformVectorPaths.ts b/plugin-src/transformers/partials/transformVectorPaths.ts index 64bdeb5e..931887a3 100644 --- a/plugin-src/transformers/partials/transformVectorPaths.ts +++ b/plugin-src/transformers/partials/transformVectorPaths.ts @@ -2,13 +2,17 @@ import { translateVectorPaths } from '@plugin/translators'; import { PathAttributes } from '@ui/lib/types/path/pathAttributes'; +const hasFillGeometry = (node: VectorNode | StarNode | LineNode | PolygonNode): boolean => { + return 'fillGeometry' in node && node.fillGeometry.length > 0; +}; + const getVectorPaths = (node: VectorNode | StarNode | LineNode | PolygonNode): VectorPaths => { switch (node.type) { case 'STAR': case 'POLYGON': return node.fillGeometry; case 'VECTOR': - return node.vectorPaths; + return hasFillGeometry(node) ? node.fillGeometry : node.vectorPaths; case 'LINE': return node.strokeGeometry; } diff --git a/plugin-src/transformers/transformFrameNode.ts b/plugin-src/transformers/transformFrameNode.ts index 38771867..760e4cbe 100644 --- a/plugin-src/transformers/transformFrameNode.ts +++ b/plugin-src/transformers/transformFrameNode.ts @@ -1,6 +1,7 @@ import { transformBlend, transformChildren, + transformCornerRadius, transformDimensionAndPosition, transformFills, transformProportion, @@ -36,6 +37,8 @@ export const transformFrameNode = async ( ...(isSectionNode(node) ? [] : transformBlend(node)), ...transformSceneNode(node), // Figma API does not expose constraints proportions for sections - ...(isSectionNode(node) ? [] : transformProportion(node)) + ...(isSectionNode(node) ? [] : transformProportion(node)), + // Figma API does not expose corner radius for sections + ...(isSectionNode(node) ? [] : transformCornerRadius(node)) }; }; diff --git a/plugin-src/transformers/transformRectangleNode.ts b/plugin-src/transformers/transformRectangleNode.ts index e518f274..54be3250 100644 --- a/plugin-src/transformers/transformRectangleNode.ts +++ b/plugin-src/transformers/transformRectangleNode.ts @@ -1,5 +1,6 @@ import { transformBlend, + transformCornerRadius, transformDimensionAndPosition, transformFills, transformProportion, @@ -22,6 +23,7 @@ export const transformRectangleNode = ( ...transformDimensionAndPosition(node, baseX, baseY), ...transformSceneNode(node), ...transformBlend(node), - ...transformProportion(node) + ...transformProportion(node), + ...transformCornerRadius(node) }; };