Constraints translation (#142)

* constraints translation

* fix lint

* fixes

* fix vector constraints

* fix lint

.changeset/sixty-elephants-help.md

@@ -0,0 +1,5 @@
+---
+"penpot-exporter": minor
+---
+
+Constraints translation

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

plugin-src/transformers/partials/transformConstraints.ts

@@ -0,0 +1,12 @@
+import { translateConstraintH, translateConstraintV } from '@plugin/translators';
+
+import { ShapeAttributes } from '@ui/lib/types/shapes/shape';
+
+export const transformConstraints = (
+  node: ConstraintMixin
+): Pick<ShapeAttributes, 'constraintsH' | 'constraintsV'> => {
+  return {
+    constraintsH: translateConstraintH(node.constraints.horizontal),
+    constraintsV: translateConstraintV(node.constraints.vertical)
+  };
+};

plugin-src/transformers/partials/transformVectorPaths.ts

@@ -16,8 +16,7 @@ import {
   translateWindingRule
 } from '@plugin/translators/vectors';
 
-import { PathAttributes } from '@ui/lib/types/shapes/pathShape';
-import { PathShape } from '@ui/lib/types/shapes/pathShape';
+import { PathAttributes, PathShape } from '@ui/lib/types/shapes/pathShape';
 
 export const transformVectorPathsAsContent = (
   node: StarNode | LineNode | PolygonNode,
@@ -104,6 +103,8 @@ const transformVectorPath = (
     svgAttrs: {
       fillRule: translateWindingRule(vectorPath.windingRule)
     },
+    constraintsH: 'scale',
+    constraintsV: 'scale',
     ...transformStrokesFromVector(node, normalizedPaths, vectorRegion),
     ...transformEffects(node),
     ...transformDimensionAndPositionFromVectorPath(vectorPath, baseX, baseY),

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 {

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

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

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

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

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

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

plugin-src/transformers/transformVectorNode.ts

@@ -1,4 +1,8 @@
-import { transformFigmaIds, transformVectorPaths } from '@plugin/transformers/partials';
+import {
+  transformConstraints,
+  transformFigmaIds,
+  transformVectorPaths
+} from '@plugin/transformers/partials';
 
 import { GroupShape } from '@ui/lib/types/shapes/groupShape';
 import { PathShape } from '@ui/lib/types/shapes/pathShape';
@@ -22,13 +26,15 @@ export const transformVectorNode = (
     return {
       ...children[0],
       name: node.name,
-      ...transformFigmaIds(node)
+      ...transformFigmaIds(node),
+      ...transformConstraints(node)
     };
   }
 
   return {
     ...transformGroupNodeLike(node, baseX, baseY),
     ...transformFigmaIds(node),
+    ...transformConstraints(node),
     children
   };
 };

plugin-src/translators/index.ts

@@ -2,5 +2,6 @@ export * from './translateBlendMode';
 export * from './translateBlurEffects';
 export * from './translateBoolType';
 export * from './translateChildren';
+export * from './translateConstraints';
 export * from './translateShadowEffects';
 export * from './translateStrokes';

plugin-src/translators/translateConstraints.ts

@@ -0,0 +1,31 @@
+import { ConstraintH, ConstraintV } from '@ui/lib/types/shapes/shape';
+
+export const translateConstraintH = (constraint: ConstraintType): ConstraintH => {
+  switch (constraint) {
+    case 'MAX':
+      return 'right';
+    case 'MIN':
+      return 'left';
+    case 'CENTER':
+      return 'center';
+    case 'SCALE':
+      return 'scale';
+    case 'STRETCH':
+      return 'leftright';
+  }
+};
+
+export const translateConstraintV = (constraint: ConstraintType): ConstraintV => {
+  switch (constraint) {
+    case 'MAX':
+      return 'bottom';
+    case 'MIN':
+      return 'top';
+    case 'CENTER':
+      return 'center';
+    case 'SCALE':
+      return 'scale';
+    case 'STRETCH':
+      return 'topbottom';
+  }
+};

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?: ConstraintH;
+  constraintsV?: ConstraintV;
   fixedScroll?: boolean;
   rx?: number;
   ry?: number;
@@ -84,3 +84,6 @@ export type ShapeGeomAttributes = {
 };
 
 export type GrowType = 'auto-width' | 'auto-height' | 'fixed';
+
+export type ConstraintH = 'left' | 'right' | 'leftright' | 'center' | 'scale';
+export type ConstraintV = 'top' | 'bottom' | 'topbottom' | 'center' | 'scale';