wip

plugin-src/transformers/partials/transformOverrides.ts

@@ -1,26 +1,13 @@
-import { overrides as overridesLibrary } from '@plugin/libraries';
-import { syncAttributes } from '@plugin/utils/syncAttributes';
+import { overrides } from '@plugin/libraries';
+import { translateTouched } from '@plugin/translators';
 
 import { ShapeAttributes } from '@ui/lib/types/shapes/shape';
-import { SyncGroups } from '@ui/lib/types/utils/syncGroups';
 
 export const transformOverrides = (
   node: SceneNode
 ): Pick<ShapeAttributes, 'touched' | 'componentPropertyReferences'> => {
-  const overrides = overridesLibrary.get(node.id);
-
-  const touched: SyncGroups[] = [];
-
-  if (overrides) {
-    overrides.forEach(override => {
-      if (syncAttributes[override]) {
-        touched.push(...syncAttributes[override]);
-      }
-    });
-  }
-
   return {
-    touched,
+    touched: translateTouched(overrides.get(node.id)),
     componentPropertyReferences: node.componentPropertyReferences
   };
 };

plugin-src/translators/index.ts

@@ -7,3 +7,4 @@ export * from './translateLayout';
 export * from './translateRotation';
 export * from './translateShadowEffects';
 export * from './translateStrokes';
+export * from './translateTouched';

plugin-src/utils/syncAttributes.ts → plugin-src/translators/translateTouched.ts

@@ -1,10 +1,10 @@
 import { SyncGroups } from '@ui/lib/types/utils/syncGroups';
 
-export type SyncAttributes = {
+type SyncAttributes = {
   [key in NodeChangeProperty]: SyncGroups[];
 };
 
-export const syncAttributes: SyncAttributes = {
+const syncAttributes: SyncAttributes = {
   name: [':name-group'],
   fills: [':fill-group'],
   backgrounds: [':fill-group'],
@@ -148,3 +148,21 @@ export const syncAttributes: SyncAttributes = {
   authorName: [],
   code: []
 };
+
+export const translateTouched = (
+  changedProperties: NodeChangeProperty[] | undefined
+): SyncGroups[] => {
+  const syncGroups: Set<SyncGroups> = new Set();
+
+  if (!changedProperties) return [];
+
+  changedProperties.forEach(changedProperty => {
+    const syncGroup = syncAttributes[changedProperty];
+
+    if (syncGroup.length > 0) {
+      syncGroup.forEach(group => syncGroups.add(group));
+    }
+  });
+
+  return Array.from(syncGroups);
+};

ui-src/parser/creators/createItems.ts

@@ -26,6 +26,8 @@ const createItem = (file: PenpotFile, node: PenpotNode) => {
     data: node.name
   });
 
+  console.log(node.figmaId, node.name, node.type);
+
   switch (node.type) {
     case 'rect':
       return createRectangle(file, node);

ui-src/parser/creators/symbols/symbolTouched.ts

@@ -12,22 +12,28 @@ export const symbolTouched = (
     return touched;
   }
 
-  Object.entries(componentPropertyReferences).forEach(([key, value]) => {
-    switch (key) {
-      case 'visible':
-        if (visible !== componentProperties.get(value)?.defaultValue) {
-          touched?.push(':visibility-group');
-        }
-        break;
-      case 'characters':
-        if (characters !== componentProperties.get(value)?.defaultValue) {
-          touched?.push(':content-group');
-        }
-        break;
-      default:
-        break;
+  const propertyReferenceVisible = componentPropertyReferences.visible;
+  const propertyReferenceVisible2 = componentPropertyReferences.characters;
+
+  if (propertyReferenceVisible) {
+    if (
+      visible !== componentProperties.get(propertyReferenceVisible)?.defaultValue &&
+      !touched?.includes(':visibility-group')
+    ) {
+      touched?.push(':visibility-group');
+    }
+  }
+
+  if (propertyReferenceVisible2) {
+    if (
+      characters !== componentProperties.get(propertyReferenceVisible2)?.defaultValue &&
+      !touched?.includes(':content-group')
+    ) {
+      touched?.push(':content-group');
     }
-  });
+  }
+
+  console.log('touched', touched);
 
   return touched;
 };