Merge pull request #9 from JohJakob/develop

Version 1.0.2
JohJakob · Feb 28, 2023 · adfc1dd · adfc1dd
2 parents 4fa9a2a + fd18974
commit adfc1dd
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 23 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "figma-make-filled",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Fill a shape including the stroke",
   "main": "code.js",
   "scripts": {

diff --git a/src/code.ts b/src/code.ts
@@ -1,24 +1,34 @@
 import clone from './clone';
 
+const noSelectionMessage = 'You have not selected anything.';
+
 let madeFilled = false;
 
 const makeFilled = (selection) => {
-  const fallbackColor = {r: 0, g: 0, b:0};
+  fill(selection);
+}
+
+const fill = (selection) => {
+  if (selection.length === 0) {
+    figma.closePlugin(noSelectionMessage);
+  }
+
+  const fallbackColor = { r: 0, g: 0, b: 0 };
 
   for (const node of selection) {
     let strokes;
 
     // Only process visible nodes
     if (node.visible) {
-      if (node.type === "BOOLEAN_OPERATION") {
+      if (node.type === 'BOOLEAN_OPERATION') {
         // Process children of boolean operation nodes
-        makeFilled(node.children);
+        fill(node.children);
       }
 
-      if (node.type === "ELLIPSE" || node.type === "POLYGON" || node.type === "STAR" || node.type === "RECTANGLE" || node.type === "VECTOR" || node.type === "BOOLEAN_OPERATION") {
+      if (node.type === 'ELLIPSE' || node.type === 'POLYGON' || node.type === 'STAR' || node.type === 'RECTANGLE' || node.type === 'VECTOR' || node.type === 'BOOLEAN_OPERATION') {
         // Skip node if it is just a line
-        if (node.type === "VECTOR" && node.vectorNetwork.segments.length < 2) {
-          figma.notify("Lines cannot be filled.");
+        if (node.type === 'VECTOR' && node.vectorNetwork.segments.length < 2) {
+          figma.notify('Lines cannot be filled.');
           continue;
         }
 
@@ -30,6 +40,10 @@ const makeFilled = (selection) => {
         // Save first stroke of node
         strokes = clone(node.strokes[0]);
 
+        // Remove fills from node
+        node.fillStyleId = '';
+        node.fills = [];
+
         // Clone node to be filled
         const fillNode = node.clone();
 
@@ -40,7 +54,7 @@ const makeFilled = (selection) => {
         fillNode.rotation = node.rotation;
 
         // Remove strokes from cloned node
-        fillNode.strokeStyleId = "";
+        fillNode.strokeStyleId = '';
         fillNode.strokes = [];
 
         // Create boolean operation node from original and cloned node
@@ -64,35 +78,43 @@ const makeFilled = (selection) => {
         }
 
         // Rename filled node and boolean operation node
-        fillNode.name = fillNode.name + " (Filled)";
+        fillNode.name = fillNode.name + ' (Filled)';
         boolNode.name = node.name;
 
         // Flatten boolean operation node if “Make Filled and Flatten” command is used
-        if (figma.command === "make_filled_and_flatten") {
+        if (figma.command === 'make_filled_and_flatten') {
           figma.flatten([boolNode]);
         }
 
         madeFilled = true;
-      } else if (node.type === "COMPONENT" || node.type === "FRAME" || node.type === "GROUP" || node.type === "INSTANCE") {
+      } else if (node.type === 'COMPONENT' || node.type === 'FRAME' || node.type === 'GROUP' || node.type === 'INSTANCE') {
         // Process the children of components, frames, groups, and instances
-        makeFilled(node.children);
+        fill(node.children);
       } else {
-        figma.notify("This layer type is not supported.");
+        figma.notify('This layer type is not supported.');
       }
 
       // Notify user that no node was filled
       if (!madeFilled) {
-        figma.notify("There is no layer that can be filled.");
+        figma.notify('There is no layer that can be filled.');
       }
     }
   }
 }
 
-if (figma.currentPage.selection.length === 0) {
-  figma.closePlugin("You have not selected anything.");
-}
-
-// Process selection
-makeFilled(figma.currentPage.selection);
+figma.on('run', ({ command }) => {
+  switch (command) {
+    case 'make_filled':
+      makeFilled(figma.currentPage.selection);
+      break;
+    case 'make_filled_and_flatten':
+      makeFilled(figma.currentPage.selection);
+      break;
+    case 'create_filled_variant':
+      break;
+    default:
+      break;
+  }
 
-figma.closePlugin();
+  figma.closePlugin();
+});