diff --git a/package-lock.json b/package-lock.json index 3485ca5..2447555 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "figma-make-filled", - "version": "1.0.1", + "version": "1.0.2", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "figma-make-filled", - "version": "1.0.1", + "version": "1.0.2", "license": "MIT", "dependencies": { "react": "^17.0.2", diff --git a/package.json b/package.json index 800f226..2c29073 100644 --- 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 index 5aa1312..cbd8a6a 100644 --- 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(); +});