Hi, the plugin shows a panel with color swatches of design-token of my design system.
I want these colors to be applied to the fill or border of the selection on the artboard, as does the document assets panel.
If the selected item is one or a simple group, the method works.
If the selection is a repeat grid, a scrollable group or a symbol instance, from the console the color appears to be applied but the appearance of the selected elements does not change.
The layers on the artboard are:
- Scroll group
-
Polygon -
Polygon -
Polygon -
Polygon
-
- Repeat grid
-
Ellipse
-
These are the methods:
/** Apply the color chosen from the panel to the fill of the item selected */
function applyFillColor(colorSelected) {
if (selection.items.length > 0) {
editDocument(function(selection) {
selection.items.forEach(item => {
let newColor = new Color(colorSelected);
scanThroughAllNodes(item, fillColor, newColor);
})
});
}
function fillColor(node, newColor) {
console.log("||");
console.log("Node: ", node);
console.log("New color: ", newColor[0]);
let currentColor = node.fill;
if(currentColor) {
console.log("Current color: ", currentColor.toHex());
node.fill = newColor[0];
let replacedColor = node.fill;
console.log("Replaced Color: ", replacedColor.toHex());
}
}
/**
* Calls the passed in function on the passed in node and it's descendants
* @param {SceneNode} node SceneNode
* @param {Function} command Function to call on each node
* @param {*} args Optional value to pass
**/
function scanThroughAllNodes(node, command, ...args) {
command(node, args);
node.children.forEach(childNode => {
scanThroughAllNodes(childNode, command, ...args);
});
}
}
This is the output:
- New Color is the color I clicked on the panel.
- Current Color is the color of the node before the change.
- Replaced Color is the color of the node after applying.
In the console, you can see that the new color appears to have been applied but in reality, the selected item has not changed. What’s up? Is it a bug?