Added support for corner radius (#57)

* added support for corner radius

* added support for corner radius

* minor fix

* added changelog to prettierignore

.changeset/perfect-masks-kneel.md

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

.prettierignore

@@ -3,3 +3,4 @@ node_modules
 dist
 ui-src/lib/penpot.js
 LICENSE
+CHANGELOG.md

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';

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<ShapeAttributes> | 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
+    };
+  }
+};

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;
   }

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))
   };
 };

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)
   };
 };