added support for overrides

2025-04-17 09:21:34 -05:00 · 2024-06-17 09:52:03 +02:00 · 2024-06-17 09:52:03 +02:00 · 7b998da63d
commit 7b998da63d
parent a0bc0b1db6
14 changed files with 192 additions and 130 deletions
--- a/.changeset/neat-badgers-dream.md
+++ b/.changeset/neat-badgers-dream.md
@ -0,0 +1,5 @@
+---
+"penpot-exporter": minor
+---
+
+Added support for instances overrides
--- a/plugin-src/transformers/partials/transformOverrides.ts
+++ b/plugin-src/transformers/partials/transformOverrides.ts
@ -1,4 +1,7 @@
 import { overridesLibrary } from '@plugin/OverridesLibrary';
+import { syncAttributes } from '@plugin/utils/syncAttributes';
+
+import { SyncGroups } from '@ui/lib/types/utils/syncGroups';

 export const transformOverrides = (node: SceneNode) => {
  const overrides = overridesLibrary.get(node.id);
@ -6,7 +9,15 @@ export const transformOverrides = (node: SceneNode) => {
    return {};
  }

+  let touched: SyncGroups[] = [];
+
+  overrides.forEach(override => {
+    if (syncAttributes[override]) {
+      touched = [...touched, ...syncAttributes[override]];
+    }
+  });
+
  return {
-    touched: []
+    touched
  };
 };
--- a/plugin-src/transformers/transformBooleanNode.ts
+++ b/plugin-src/transformers/transformBooleanNode.ts
@ -6,6 +6,7 @@ import {
  transformFigmaIds,
  transformFills,
  transformLayoutAttributes,
+  transformOverrides,
  transformProportion,
  transformRotationAndPosition,
  transformSceneNode,
@ -33,6 +34,7 @@ export const transformBooleanNode = async (
    ...transformSceneNode(node),
    ...transformBlend(node),
    ...transformProportion(node),
-    ...transformLayoutAttributes(node)
+    ...transformLayoutAttributes(node),
+    ...transformOverrides(node)
  };
 };
--- a/plugin-src/transformers/transformEllipseNode.ts
+++ b/plugin-src/transformers/transformEllipseNode.ts
@ -6,6 +6,7 @@ import {
  transformFigmaIds,
  transformFills,
  transformLayoutAttributes,
+  transformOverrides,
  transformProportion,
  transformRotationAndPosition,
  transformSceneNode,
@ -28,6 +29,7 @@ export const transformEllipseNode = (node: EllipseNode, baseRotation: number): C
    ...transformBlend(node),
    ...transformProportion(node),
    ...transformLayoutAttributes(node),
-    ...transformConstraints(node)
+    ...transformConstraints(node),
+    ...transformOverrides(node)
  };
 };
--- a/plugin-src/transformers/transformFrameNode.ts
+++ b/plugin-src/transformers/transformFrameNode.ts
@ -9,6 +9,7 @@ import {
  transformFigmaIds,
  transformFills,
  transformLayoutAttributes,
+  transformOverrides,
  transformProportion,
  transformRotationAndPosition,
  transformSceneNode,
@ -63,6 +64,7 @@ export const transformFrameNode = async (
    ...frameSpecificAttributes,
    ...transformDimension(node),
    ...(await transformChildren(node, rotation)),
-    ...transformSceneNode(node)
+    ...transformSceneNode(node),
+    ...transformOverrides(node)
  };
 };
--- a/plugin-src/transformers/transformGroupNode.ts
+++ b/plugin-src/transformers/transformGroupNode.ts
@ -3,6 +3,7 @@ import {
  transformDimension,
  transformEffects,
  transformFigmaIds,
+  transformOverrides,
  transformRotationAndPosition,
  transformSceneNode
 } from '@plugin/transformers/partials';
@ -19,7 +20,8 @@ export const transformGroupNode = async (
    ...transformGroupNodeLike(node, baseRotation),
    ...transformEffects(node),
    ...transformBlend(node),
-    ...(await transformChildren(node, baseRotation))
+    ...(await transformChildren(node, baseRotation)),
+    ...transformOverrides(node)
  };
 };

--- a/plugin-src/transformers/transformInstanceNode.ts
+++ b/plugin-src/transformers/transformInstanceNode.ts
@ -11,6 +11,7 @@ import {
  transformFigmaIds,
  transformFills,
  transformLayoutAttributes,
+  transformOverrides,
  transformProportion,
  transformRotationAndPosition,
  transformSceneNode,
@ -58,7 +59,8 @@ export const transformInstanceNode = async (
    ...transformRotationAndPosition(node, baseRotation),
    ...transformConstraints(node),
    ...transformAutoLayout(node),
-    ...(await transformChildren(node, node.rotation + baseRotation))
+    ...(await transformChildren(node, node.rotation + baseRotation)),
+    ...transformOverrides(node)
  };
 };

--- a/plugin-src/transformers/transformLineNode.ts
+++ b/plugin-src/transformers/transformLineNode.ts
@ -4,6 +4,7 @@ import {
  transformEffects,
  transformFigmaIds,
  transformLayoutAttributes,
+  transformOverrides,
  transformProportion,
  transformSceneNode,
  transformStrokes
@ -30,6 +31,7 @@ export const transformLineNode = (node: LineNode, baseRotation: number): PathSha
    ...transformBlend(node),
    ...transformProportion(node),
    ...transformLayoutAttributes(node),
-    ...transformConstraints(node)
+    ...transformConstraints(node),
+    ...transformOverrides(node)
  };
 };
--- a/plugin-src/transformers/transformPathNode.ts
+++ b/plugin-src/transformers/transformPathNode.ts
@ -5,6 +5,7 @@ import {
  transformFigmaIds,
  transformFills,
  transformLayoutAttributes,
+  transformOverrides,
  transformProportion,
  transformSceneNode,
  transformStrokes
@ -29,6 +30,7 @@ export const transformPathNode = (
    ...transformBlend(node),
    ...transformProportion(node),
    ...transformLayoutAttributes(node),
-    ...transformConstraints(node)
+    ...transformConstraints(node),
+    ...transformOverrides(node)
  };
 };
--- a/plugin-src/transformers/transformRectangleNode.ts
+++ b/plugin-src/transformers/transformRectangleNode.ts
@ -7,6 +7,7 @@ import {
  transformFigmaIds,
  transformFills,
  transformLayoutAttributes,
+  transformOverrides,
  transformProportion,
  transformRotationAndPosition,
  transformSceneNode,
@ -30,6 +31,7 @@ export const transformRectangleNode = (node: RectangleNode, baseRotation: number
    ...transformProportion(node),
    ...transformLayoutAttributes(node),
    ...transformCornerRadius(node),
-    ...transformConstraints(node)
+    ...transformConstraints(node),
+    ...transformOverrides(node)
  };
 };
--- a/plugin-src/transformers/transformTextNode.ts
+++ b/plugin-src/transformers/transformTextNode.ts
@ -5,6 +5,7 @@ import {
  transformEffects,
  transformFigmaIds,
  transformLayoutAttributes,
+  transformOverrides,
  transformProportion,
  transformRotationAndPosition,
  transformSceneNode,
@ -28,6 +29,7 @@ export const transformTextNode = (node: TextNode, baseRotation: number): TextSha
    ...transformProportion(node),
    ...transformLayoutAttributes(node),
    ...transformStrokes(node),
-    ...transformConstraints(node)
+    ...transformConstraints(node),
+    ...transformOverrides(node)
  };
 };
--- a/plugin-src/transformers/transformVectorNode.ts
+++ b/plugin-src/transformers/transformVectorNode.ts
@ -1,6 +1,7 @@
 import {
  transformConstraints,
  transformFigmaIds,
+  transformOverrides,
  transformVectorPaths
 } from '@plugin/transformers/partials';

@ -26,7 +27,8 @@ export const transformVectorNode = (
      ...children[0],
      name: node.name,
      ...transformFigmaIds(node),
-      ...transformConstraints(node)
+      ...transformConstraints(node),
+      ...transformOverrides(node)
    };
  }

@ -34,6 +36,7 @@ export const transformVectorNode = (
    ...transformGroupNodeLike(node, baseRotation),
    ...transformFigmaIds(node),
    ...transformConstraints(node),
+    ...transformOverrides(node),
    children
  };
 };
--- a/plugin-src/utils/syncAttributes.ts
+++ b/plugin-src/utils/syncAttributes.ts
@ -1,125 +1,150 @@
 import { SyncGroups } from '@ui/lib/types/utils/syncGroups';

 export type SyncAttributes = {
-  [key in NodeChangeProperty]: SyncGroups;
+  [key in NodeChangeProperty]: SyncGroups[];
 };

 export const syncAttributes: SyncAttributes = {
-  name: ':name-group',
-  fills: ':fill-group',
-  backgrounds: ':fill-group',
-  fillStyleId: ':fill-group',
-  backgroundStyleId: ':fill-group',
-  textBackground: ':fill-group',
-  pointCount: ':geometry-group',
-  width: ':geometry-group',
-  height: ':geometry-group',
-  locked: ':geometry-group',
-  guides: ':geometry-group',
-  vectorNetwork: ':geometry-group',
-  arcData: ':geometry-group',
-  constrainProportions: ':geometry-group',
-  handleMirroring: ':geometry-group',
-  relativeTransform: ':geometry-group',
-  x: ':geometry-group',
-  y: ':geometry-group',
-  rotation: ':geometry-group',
-  type: ':geometry-group',
-  shapeType: ':geometry-group',
-  connectorStart: ':geometry-group',
-  connectorEnd: ':geometry-group',
-  connectorLineType: ':geometry-group',
-  constraints: ':constraints-group',
-  visible: ':visibility-group',
-  opacity: ':layer-effects-group',
-  blendMode: ':layer-effects-group',
-  effects: ':layer-effects-group',
-  effectStyleId: ':layer-effects-group',
-  layoutGrids: ':layout-grid-columns',
-  characters: ':text-display-group',
-  openTypeFeatures: ':text-font-group',
-  styledTextSegments: ':text-display-group',
-  exportSettings: ':exports-group',
-  fontName: ':text-font-group',
-  innerRadius: ':radius-group',
-  fontSize: ':text-font-group',
-  lineHeight: ':text-display-group',
-  leadingTrim: ':text-display-group',
-  paragraphIndent: ':text-display-group',
-  paragraphSpacing: ':text-display-group',
-  listSpacing: ':text-display-group',
-  hangingPunctuation: ':text-display-group',
-  hangingList: ':text-display-group',
-  letterSpacing: ':text-display-group',
-  textAlignHorizontal: ':text-display-group',
-  textAlignVertical: ':text-display-group',
-  textCase: ':text-font-group',
-  textDecoration: ':text-font-group',
-  textAutoResize: ':text-display-group',
-  topLeftRadius: ':radius-group',
-  topRightRadius: ':radius-group',
-  bottomLeftRadius: ':radius-group',
-  bottomRightRadius: ':radius-group',
-  strokes: ':stroke-group',
-  strokeWeight: ':stroke-group',
-  strokeAlign: ':stroke-group',
-  strokeCap: ':stroke-group',
-  strokeJoin: ':stroke-group',
-  strokeMiterLimit: ':stroke-group',
-  booleanOperation: ':bool-group',
-  overflowDirection: ':layout-item-align-self',
-  dashPattern: ':stroke-group',
-  cornerRadius: ':radius-group',
-  cornerSmoothing: ':radius-group',
-  isMask: ':mask-group',
-  clipsContent: ':mask-group',
-  strokeStyleId: ':stroke-group',
-  textStyleId: ':text-font-group',
-  gridStyleId: ':grids-group',
-  layoutMode: ':layout-container',
-  paddingLeft: ':layout-padding',
-  paddingTop: ':layout-padding',
-  paddingRight: ':layout-padding',
-  paddingBottom: ':layout-padding',
-  itemSpacing: ':layout-item-margin',
-  layoutAlign: ':layout-item-align-self',
-  counterAxisSizingMode: ':layout-item-h-sizing',
-  primaryAxisSizingMode: ':layout-item-v-sizing',
-  primaryAxisAlignItems: ':layout-item-align-self',
-  counterAxisAlignItems: ':layout-item-align-self',
-  layoutGrow: ':layout-item-h-sizing',
-  layoutPositioning: ':layout-item-absolute',
-  itemReverseZIndex: ':layout-item-z-index',
-  stokeTopWeight: ':stroke-group',
-  strokeBottomWeight: ':stroke-group',
-  strokeLeftWeight: ':stroke-group',
-  strokeRightWeight: ':stroke-group',
-  connectorStartStrokeCap: ':stroke-group',
-  connectorEndStrokeCap: ':stroke-group',
-  text: ':text-display-group'
-  // @TODO: not supported
-  // authorVisible
-  // parent
-  // pluginData
-  // autoRename
-  // overlayPositionType
-  // overlayBackgroundInteraction
-  // overlayBackground
-  // prototypeStartNode
-  // prototypeBackgrounds
-  // expanded
-  // description
-  // hyperlink
-  // mediaData
-  // reactions
-  // flowStartingPoints
-  // codeLanguage
-  // widgetSyncedState
-  // componentPropertyDefinitions
-  // componentPropertyReferences
-  // componentProperties
-  // embedData: ':content-group',
-  // linkUnfurlData: ':content-group',
-  // authorName: ':content-group',
-  // code: ':content-group',
+  name: [':name-group'],
+  fills: [':fill-group'],
+  backgrounds: [':fill-group'],
+  fillStyleId: [':fill-group'],
+  backgroundStyleId: [':fill-group'],
+  textBackground: [':fill-group'],
+  visible: [':visibility-group'],
+  locked: [':modifiable-group'],
+  fontName: [':text-font-group', ':content-group'],
+  fontSize: [':text-font-group', ':content-group'],
+  textCase: [':text-font-group', ':content-group'],
+  textDecoration: [':text-font-group', ':content-group'],
+  textStyleId: [':text-font-group', ':content-group'],
+  characters: [':text-display-group', ':content-group'],
+  styledTextSegments: [':text-display-group', ':content-group'],
+  lineHeight: [':text-display-group', ':content-group'],
+  leadingTrim: [':text-display-group', ':content-group'],
+  paragraphIndent: [':text-display-group', ':content-group'],
+  paragraphSpacing: [':text-display-group', ':content-group'],
+  listSpacing: [':text-display-group', ':content-group'],
+  hangingPunctuation: [':text-display-group', ':content-group'],
+  hangingList: [':text-display-group', ':content-group'],
+  letterSpacing: [':text-display-group', ':content-group'],
+  textAlignHorizontal: [':text-display-group', ':content-group'],
+  textAlignVertical: [':text-display-group', ':content-group'],
+  textAutoResize: [':text-display-group', ':content-group'],
+  text: [':text-display-group', ':content-group'],
+  strokes: [':stroke-group'],
+  strokeWeight: [':stroke-group'],
+  strokeAlign: [':stroke-group'],
+  strokeCap: [':stroke-group'],
+  strokeJoin: [':stroke-group'],
+  strokeMiterLimit: [':stroke-group'],
+  dashPattern: [':stroke-group'],
+  strokeStyleId: [':stroke-group'],
+  stokeTopWeight: [':stroke-group'],
+  strokeBottomWeight: [':stroke-group'],
+  strokeLeftWeight: [':stroke-group'],
+  strokeRightWeight: [':stroke-group'],
+  connectorStartStrokeCap: [':stroke-group'],
+  connectorEndStrokeCap: [':stroke-group'],
+  innerRadius: [':radius-group'],
+  topLeftRadius: [':radius-group'],
+  topRightRadius: [':radius-group'],
+  bottomLeftRadius: [':radius-group'],
+  bottomRightRadius: [':radius-group'],
+  cornerRadius: [':radius-group'],
+  cornerSmoothing: [':radius-group'],
+  vectorNetwork: [':geometry-group'],
+  pointCount: [':geometry-group'],
+  width: [':geometry-group'],
+  height: [':geometry-group'],
+  guides: [':geometry-group'],
+  arcData: [':geometry-group'],
+  constrainProportions: [':geometry-group'],
+  handleMirroring: [':geometry-group'],
+  relativeTransform: [':geometry-group'],
+  x: [':geometry-group'],
+  y: [':geometry-group'],
+  rotation: [':geometry-group'],
+  type: [':geometry-group'],
+  shapeType: [':geometry-group'],
+  connectorStart: [':geometry-group'],
+  connectorEnd: [':geometry-group'],
+  connectorLineType: [':geometry-group'],
+  opacity: [':layer-effects-group'],
+  blendMode: [':layer-effects-group'],
+  effects: [':shadow-group', ':blur-group'],
+  effectStyleId: [':shadow-group', ':blur-group'],
+  isMask: [':mask-group'],
+  clipsContent: [':mask-group'],
+  maskType: [':mask-group'],
+  constraints: [':constraints-group'],
+  booleanOperation: [':bool-group'],
+  exportSettings: [':exports-group'],
+  gridStyleId: [':grids-group'],
+  layoutMode: [':layout-container', ':layout-flex-dir'],
+  layoutAlign: [':layout-align-content', ':layout-align-items'],
+  itemSpacing: [':layout-gap'],
+  paddingLeft: [':layout-padding'],
+  paddingTop: [':layout-padding'],
+  paddingRight: [':layout-padding'],
+  paddingBottom: [':layout-padding'],
+  layoutGrids: [
+    ':layout-grid-cells',
+    ':layout-grid-columns',
+    ':layout-grid-dir',
+    ':layout-grid-rows'
+  ],
+  layoutWrap: [':layout-wrap-type'],
+  overflowDirection: [':layout-item-align-self'],
+  counterAxisSizingMode: [':layout-item-h-sizing'],
+  primaryAxisSizingMode: [':layout-item-v-sizing'],
+  primaryAxisAlignItems: [
+    ':layout-item-align-self',
+    ':layout-justify-items',
+    ':layout-justify-content',
+    ':layout-gap'
+  ],
+  counterAxisAlignItems: [
+    ':layout-item-align-self',
+    ':layout-align-content',
+    ':layout-align-items'
+  ],
+  layoutGrow: [':layout-item-h-sizing'],
+  layoutPositioning: [':layout-item-absolute'],
+  itemReverseZIndex: [':layout-item-z-index'],
+
+  // @TODO: not supported yet
+  textTruncation: [],
+  minWidth: [],
+  minHeight: [],
+  maxWidth: [],
+  maxLines: [],
+  maxHeight: [],
+  counterAxisSpacing: [],
+  counterAxisAlignContent: [],
+  openTypeFeatures: [],
+  authorVisible: [],
+  parent: [],
+  pluginData: [],
+  autoRename: [],
+  overlayPositionType: [],
+  overlayBackgroundInteraction: [],
+  overlayBackground: [],
+  prototypeStartNode: [],
+  prototypeBackgrounds: [],
+  expanded: [],
+  description: [],
+  hyperlink: [],
+  mediaData: [],
+  reactions: [],
+  flowStartingPoints: [],
+  codeLanguage: [],
+  widgetSyncedState: [],
+  componentPropertyDefinitions: [],
+  componentPropertyReferences: [],
+  componentProperties: [],
+  embedData: [],
+  linkUnfurlData: [],
+  authorName: [],
+  code: []
 };
--- a/ui-src/lib/types/shapes/shape.ts
+++ b/ui-src/lib/types/shapes/shape.ts
@ -75,7 +75,7 @@ export type ShapeAttributes = {
  shadow?: Shadow[];
  blur?: Blur;
  growType?: GrowType;
-  touched: SyncGroups[];
+  touched?: SyncGroups[];
 };

 export type ShapeGeomAttributes = {