diff --git a/.changeset/sixty-elephants-help.md b/.changeset/sixty-elephants-help.md new file mode 100644 index 00000000..0fcb98c2 --- /dev/null +++ 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 index 1963ba1b..0253b368 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 './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 new file mode 100644 index 00000000..aea0f927 --- /dev/null +++ b/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 => { + return { + constraintsH: translateConstraintH(node.constraints.horizontal), + constraintsV: translateConstraintV(node.constraints.vertical) + }; +}; diff --git a/plugin-src/transformers/partials/transformVectorPaths.ts b/plugin-src/transformers/partials/transformVectorPaths.ts index aaadd66d..25428cc9 100644 --- a/plugin-src/transformers/partials/transformVectorPaths.ts +++ b/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), diff --git a/plugin-src/transformers/transformComponentNode.ts b/plugin-src/transformers/transformComponentNode.ts index 8063cc54..5d654be1 100644 --- 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 index 86083fd4..b2f165a9 100644 --- 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 index 6d6aabe7..57ba08f8 100644 --- 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 index 6006eb9b..2edd6998 100644 --- 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 index 85072b4d..1157e335 100644 --- 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 index b76f6ddf..4e3e444a 100644 --- 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 index 1e723ff1..21a6b479 100644 --- 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/transformers/transformVectorNode.ts b/plugin-src/transformers/transformVectorNode.ts index 6c6a62a5..82a2c268 100644 --- a/plugin-src/transformers/transformVectorNode.ts +++ b/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 }; }; diff --git a/plugin-src/translators/index.ts b/plugin-src/translators/index.ts index 465baba9..9d58aa65 100644 --- 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 './translateConstraints'; export * from './translateShadowEffects'; export * from './translateStrokes'; diff --git a/plugin-src/translators/translateConstraints.ts b/plugin-src/translators/translateConstraints.ts new file mode 100644 index 00000000..9a053601 --- /dev/null +++ b/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'; + } +}; diff --git a/ui-src/lib/types/shapes/shape.ts b/ui-src/lib/types/shapes/shape.ts index 926712aa..51bb6c57 100644 --- 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?: 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';