constraints translation

penpot · Jun 6, 2024 · f38384b · f38384b
1 parent be5ff3b
commit f38384b
Show file tree

Hide file tree

Showing 15 changed files with 63 additions and 9 deletions.
diff --git a/.changeset/sixty-elephants-help.md b/.changeset/sixty-elephants-help.md
@@ -0,0 +1,5 @@
+---
+"penpot-exporter": minor
+---
+
+Constraints translation
diff --git 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 './transformConstraints';
 export * from './transformCornerRadius';
 export * from './transformDimensionAndPosition';
 export * from './transformEffects';

diff --git a/plugin-src/transformers/partials/transformConstraints.ts b/plugin-src/transformers/partials/transformConstraints.ts
@@ -0,0 +1,12 @@
+import { translateConstraint } from '@plugin/translators';
+
+import { ShapeAttributes } from '@ui/lib/types/shapes/shape';
+
+export const transformConstraints = (
+  node: ConstraintMixin
+): Pick<ShapeAttributes, 'constraintsH' | 'constraintsV'> => {
+  return {
+    constraintsH: translateConstraint(node.constraints.horizontal),
+    constraintsV: translateConstraint(node.constraints.vertical)
+  };
+};
diff --git a/plugin-src/transformers/partials/transformVectorPaths.ts b/plugin-src/transformers/partials/transformVectorPaths.ts
@@ -2,6 +2,7 @@ import { parseSVG } from 'svg-path-parser';
 
 import {
   transformBlend,
+  transformConstraints,
   transformDimensionAndPositionFromVectorPath,
   transformEffects,
   transformProportion,
@@ -109,6 +110,7 @@ const transformVectorPath = (
     ...transformDimensionAndPositionFromVectorPath(vectorPath, baseX, baseY),
     ...transformSceneNode(node),
     ...transformBlend(node),
-    ...transformProportion(node)
+    ...transformProportion(node),
+    ...transformConstraints(node)
   };
 };
diff --git a/plugin-src/transformers/transformBooleanNode.ts b/plugin-src/transformers/transformBooleanNode.ts
@@ -1,6 +1,7 @@
 import {
   transformBlend,
   transformChildren,
+  transformConstraints,
   transformDimensionAndPosition,
   transformEffects,
   transformFigmaIds,

diff --git a/plugin-src/transformers/transformComponentNode.ts b/plugin-src/transformers/transformComponentNode.ts
@@ -2,6 +2,7 @@ import { componentsLibrary } from '@plugin/ComponentLibrary';
 import {
   transformBlend,
   transformChildren,
+  transformConstraints,
   transformCornerRadius,
   transformDimensionAndPosition,
   transformEffects,
@@ -33,7 +34,8 @@ export const transformComponentNode = async (
     ...transformProportion(node),
     ...transformCornerRadius(node),
     ...(await transformChildren(node, baseX + node.x, baseY + node.y)),
-    ...transformDimensionAndPosition(node, baseX, baseY)
+    ...transformDimensionAndPosition(node, baseX, baseY),
+    ...transformConstraints(node)
   });
 
   return {

diff --git a/plugin-src/transformers/transformEllipseNode.ts b/plugin-src/transformers/transformEllipseNode.ts
@@ -1,5 +1,6 @@
 import {
   transformBlend,
+  transformConstraints,
   transformDimension,
   transformEffects,
   transformFigmaIds,
@@ -28,6 +29,7 @@ export const transformEllipseNode = (
     ...transformRotationAndPosition(node, baseX, baseY),
     ...transformSceneNode(node),
     ...transformBlend(node),
-    ...transformProportion(node)
+    ...transformProportion(node),
+    ...transformConstraints(node)
   };
 };
diff --git a/plugin-src/transformers/transformFrameNode.ts b/plugin-src/transformers/transformFrameNode.ts
@@ -1,6 +1,7 @@
 import {
   transformBlend,
   transformChildren,
+  transformConstraints,
   transformCornerRadius,
   transformDimensionAndPosition,
   transformEffects,
@@ -34,7 +35,8 @@ export const transformFrameNode = async (
       ...transformBlend(node),
       ...transformProportion(node),
       ...transformCornerRadius(node),
-      ...transformEffects(node)
+      ...transformEffects(node),
+      ...transformConstraints(node)
     };
   }
 

diff --git a/plugin-src/transformers/transformInstanceNode.ts b/plugin-src/transformers/transformInstanceNode.ts
@@ -2,6 +2,7 @@ import { remoteComponentLibrary } from '@plugin/RemoteComponentLibrary';
 import {
   transformBlend,
   transformChildren,
+  transformConstraints,
   transformCornerRadius,
   transformDimensionAndPosition,
   transformEffects,
@@ -44,6 +45,7 @@ export const transformInstanceNode = async (
     ...transformProportion(node),
     ...transformCornerRadius(node),
     ...transformDimensionAndPosition(node, baseX, baseY),
+    ...transformConstraints(node),
     ...(await transformChildren(node, baseX + node.x, baseY + node.y))
   };
 };

diff --git a/plugin-src/transformers/transformPathNode.ts b/plugin-src/transformers/transformPathNode.ts
@@ -1,5 +1,6 @@
 import {
   transformBlend,
+  transformConstraints,
   transformDimensionAndPosition,
   transformEffects,
   transformFigmaIds,
@@ -32,6 +33,7 @@ export const transformPathNode = (
     ...transformDimensionAndPosition(node, baseX, baseY),
     ...transformSceneNode(node),
     ...transformBlend(node),
-    ...transformProportion(node)
+    ...transformProportion(node),
+    ...transformConstraints(node)
   };
 };
diff --git a/plugin-src/transformers/transformRectangleNode.ts b/plugin-src/transformers/transformRectangleNode.ts
@@ -1,5 +1,6 @@
 import {
   transformBlend,
+  transformConstraints,
   transformCornerRadius,
   transformDimension,
   transformEffects,
@@ -30,6 +31,7 @@ export const transformRectangleNode = (
     ...transformSceneNode(node),
     ...transformBlend(node),
     ...transformProportion(node),
-    ...transformCornerRadius(node)
+    ...transformCornerRadius(node),
+    ...transformConstraints(node)
   };
 };
diff --git a/plugin-src/transformers/transformTextNode.ts b/plugin-src/transformers/transformTextNode.ts
@@ -1,5 +1,6 @@
 import {
   transformBlend,
+  transformConstraints,
   transformDimensionAndPosition,
   transformEffects,
   transformFigmaIds,
@@ -22,6 +23,7 @@ export const transformTextNode = (node: TextNode, baseX: number, baseY: number):
     ...transformSceneNode(node),
     ...transformBlend(node),
     ...transformProportion(node),
-    ...transformStrokes(node)
+    ...transformStrokes(node),
+    ...transformConstraints(node)
   };
 };
diff --git a/plugin-src/translators/index.ts b/plugin-src/translators/index.ts
@@ -2,5 +2,6 @@ export * from './translateBlendMode';
 export * from './translateBlurEffects';
 export * from './translateBoolType';
 export * from './translateChildren';
+export * from './translateConstraint';
 export * from './translateShadowEffects';
 export * from './translateStrokes';
diff --git a/plugin-src/translators/translateConstraint.ts b/plugin-src/translators/translateConstraint.ts
@@ -0,0 +1,16 @@
+import { Constraint } from '@ui/lib/types/shapes/shape';
+
+export const translateConstraint = (constraint: ConstraintType): Constraint => {
+  switch (constraint) {
+    case 'MAX':
+      return 'right';
+    case 'MIN':
+      return 'left';
+    case 'CENTER':
+      return 'center';
+    case 'SCALE':
+      return 'scale';
+    case 'STRETCH':
+      return 'leftright';
+  }
+};
diff --git a/ui-src/lib/types/shapes/shape.ts b/ui-src/lib/types/shapes/shape.ts
@@ -56,8 +56,8 @@ export type ShapeAttributes = {
   hideFillOnExport?: boolean;
   proportion?: number;
   proportionLock?: boolean;
-  constraintsH?: 'left' | 'right' | 'leftright' | 'center' | 'scale';
-  constraintsV?: 'top' | 'bottom' | 'topbottom' | 'center' | 'scale';
+  constraintsH?: Constraint;
+  constraintsV?: Constraint;
   fixedScroll?: boolean;
   rx?: number;
   ry?: number;
@@ -84,3 +84,5 @@ export type ShapeGeomAttributes = {
 };
 
 export type GrowType = 'auto-width' | 'auto-height' | 'fixed';
+
+export type Constraint = 'left' | 'right' | 'leftright' | 'center' | 'scale';