feat: update sync logic to fire on node selection (#3497)

Updated sync logic to fire on node selection
microsoft · Aug 5, 2020 · 17e5c8c · 17e5c8c
1 parent 63f3658
commit 17e5c8c
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 38 deletions.
diff --git a/packages/tooling/fast-figma-plugin-msft/src/core/controller.ts b/packages/tooling/fast-figma-plugin-msft/src/core/controller.ts
@@ -51,7 +51,7 @@ export abstract class Controller {
         this._selectedNode = ids;
 
         // Queue update
-        this.setPluginUIState(this.getPluginUIState());
+        this.syncNodes(ids);
     }
 
     /**
@@ -103,6 +103,15 @@ export abstract class Controller {
         };
     }
 
+    /**
+     * Forces the component tree to evaluate recipes and repaint.
+     * @param ids the node IDs
+     */
+    public syncNodes(ids: string[]): void {
+        ids.forEach(id => this.paintTree(id));
+        this.setPluginUIState(this.getPluginUIState());
+    }
+
     public handleMessage(message: UIMessage): void {
         switch (message.type) {
             case MessageTypes.recipe:
@@ -131,8 +140,7 @@ export abstract class Controller {
 
                 break;
             case MessageTypes.sync:
-                message.nodeIds.forEach(id => this.paintTree(id));
-                this.setPluginUIState(this.getPluginUIState());
+                this.syncNodes(message.nodeIds);
                 break;
         }
     }

diff --git a/packages/tooling/fast-figma-plugin-msft/src/figma/controller.ts b/packages/tooling/fast-figma-plugin-msft/src/figma/controller.ts
@@ -1,8 +1,34 @@
 import { Controller } from "../core/controller";
+import { PluginNodeData } from "../core/node";
 import { PluginUIProps } from "../core/ui";
-import { FigmaPluginNode } from "./node";
+import { canHaveChildren, FigmaPluginNode, isInstanceNode } from "./node";
 
 export class FigmaController extends Controller {
+    private syncInstanceWithMaster(target: InstanceNode): void {
+        const source = target.masterComponent;
+
+        function sync(_source: BaseNode, _target: BaseNode): void {
+            const pluginDataKeys: Array<keyof PluginNodeData> = [
+                "recipes",
+                "designSystem",
+            ];
+            pluginDataKeys.forEach((key: "recipes" | "designSystem") => {
+                _target.setPluginData(key, _source.getPluginData(key));
+            });
+
+            if (canHaveChildren(_source) && canHaveChildren(_target)) {
+                _source.children.forEach((child: any, index: number) => {
+                    sync(child, _target.children[index]);
+                });
+            }
+        }
+
+        sync(source, target);
+
+        // Invalidate the cache
+        new FigmaPluginNode(target.id).invalidateDesignSystemCache();
+    }
+
     public getNode(id: string): FigmaPluginNode | null {
         try {
             return new FigmaPluginNode(id);
@@ -11,6 +37,14 @@ export class FigmaController extends Controller {
         }
     }
 
+    public syncNodes(ids: string[]): void {
+        ids.map((id: string) => figma.getNodeById(id))
+            .filter(isInstanceNode)
+            .map(this.syncInstanceWithMaster);
+
+        super.syncNodes(ids);
+    }
+
     public setPluginUIState(message: PluginUIProps): void {
         figma.ui.postMessage(message);
     }

diff --git a/packages/tooling/fast-figma-plugin-msft/src/main.ts b/packages/tooling/fast-figma-plugin-msft/src/main.ts
@@ -1,4 +1,4 @@
-import { PluginNode, PluginNodeData } from "./core/node";
+import { PluginNode } from "./core/node";
 import {
     cornerRadiusRecipe,
     fillRecipes,
@@ -8,8 +8,7 @@ import {
 } from "./core/recipes";
 import { FigmaController } from "./figma/controller";
 import { RecipeDefinition, RecipeTypes } from "./core/recipe-registry";
-import { canHaveChildren, FigmaPluginNode, isInstanceNode } from "./figma/node";
-import { MessageTypes, UIMessage } from "./core/messaging";
+import { UIMessage } from "./core/messaging";
 
 const controller = new FigmaController();
 
@@ -38,28 +37,6 @@ function registerColorRecipe(type: RecipeTypes, recipes: RecipeStore): void {
     });
 }
 
-function syncInstanceWithMaster(target: InstanceNode): void {
-    const source = target.masterComponent;
-
-    function sync(_source: BaseNode, _target: BaseNode): void {
-        const pluginDataKeys: Array<keyof PluginNodeData> = ["recipes", "designSystem"];
-        pluginDataKeys.forEach((key: "recipes" | "designSystem") => {
-            _target.setPluginData(key, _source.getPluginData(key));
-        });
-
-        if (canHaveChildren(_source) && canHaveChildren(_target)) {
-            _source.children.forEach((child: any, index: number) => {
-                sync(child, _target.children[index]);
-            });
-        }
-    }
-
-    sync(source, target);
-
-    // Invalidate the cache
-    new FigmaPluginNode(target.id).invalidateDesignSystemCache();
-}
-
 /**
  * Register recipe types
  */
@@ -100,15 +77,8 @@ figma.on("selectionchange", () => {
     );
 });
 
-figma.ui.onmessage = (value: UIMessage): void => {
-    if (value.type === MessageTypes.sync) {
-        value.nodeIds
-            .map((id: string) => figma.getNodeById(id))
-            .filter(isInstanceNode)
-            .map(syncInstanceWithMaster);
-    }
-
-    controller.handleMessage(value);
+figma.ui.onmessage = (message: UIMessage): void => {
+    controller.handleMessage(message);
 };
 
 controller.setSelectedNodes(