This is not the behavior I see.
Here is the setup (example file attached "test.xd"):
1) A symbol master with just a single text layer inside
2) An instance of the symbol
3) Variations on the text layer within the symbol instance (such as font family, weight, etc)
Then:
1) I have a plugin that just updates the font size on the master like yours (code below)
2) A plugin that just updates the text on the master
In both scenarios, the variations in the text layer on the instance setup in #3 are overwritten.
Specifically, if the symbol instance text layer is bold and the master text layer is not bold, when I only update the actual text (layer.text="new") on the symbol master text layer, I would expect the bold to stay on the symbol instance text layer. However, in this simplified example, the bold and the styles disappear, which is not the intended behavior nor what you describe.
See attached sample file and code for the plugin. Running the plugin on the symbol master also changes properties on the symbol instance in none desired ways.
I believe this is a bug or the right way to do this is unclear.
For materials:
Two pictures attached before and after the ".text=" update. Showing how both the styles are changed.
This forum wont allow me to attach XD docs for some reason. Here is a link to the test.xd file:
https://drive.google.com/file/d/1Gv1U4ff_AaBWfgzhGXqTi0QotQWWR_ta/view?usp=sharing
And here is the code of my plugin with 4 commands exposed:
/*
* Sample plugin scaffolding for Adobe XD.
*
* Visit http://adobexdplatform.com/ for API docs and more sample code.
*/
const {Rectangle, Color, SymbolInstance, Text} = require("scenegraph");
function withTextSelection(selection, fn) {
if (selection && selection.items && (selection.items.length > 0)) {
if (selection.items[0] instanceof Text) {
let textNode = selection.items[0];
try {
fn(textNode)
} catch(e){
console.log("Error Editing Text Note: ", e);
}
} else if (selection.items[0] instanceof SymbolInstance) {
console.log("Need to double-click the component to add the text node to the edit context");
}
} else {
console.log("Need to select a text node on the canvas");
}
}
function printNodeStyles(textNode, extra = ''){
console.log(` ${extra} Current Styles:`)
console.log(" Text: ", textNode.text)
console.log(" Font Family: ", textNode.fontFamily)
console.log(" Font Style: ", textNode.fontStyle)
console.log(" Font Size: ", textNode.fontSize)
}
function printStyles(selection, root) {
console.log(root);
withTextSelection(selection, function(textNode){
printNodeStyles(textNode);
});
}
function setTextOnly(selection, root) {
withTextSelection(selection, function(textNode){
console.log("Running setTextOnly")
printNodeStyles(textNode, "Before");
textNode.text = "Hello World";
printNodeStyles(textNode, "After");
});
}
function setTextAndStyle(selection, root) {
withTextSelection(selection, function(textNode){
console.log("Running setTextAndStyle")
printNodeStyles(textNode, "Before");
textNode.text = "Hello World";
textNode.fontStyle = "Bold";
textNode.fontSize = textNode.fontSize + 10;
printNodeStyles(textNode, "After");
});
}
function setStyleOnly(selection, root) {
withTextSelection(selection, function(textNode){
console.log("Running setStyleOnly")
printNodeStyles(textNode, "Before");
textNode.fontStyle = "Bold";
textNode.fontSize = textNode.fontSize + 10;
printNodeStyles(textNode, "After");
});
}
module.exports = {
commands: {
printStyles: printStyles,
setTextOnly: setTextOnly,
setTextAndStyle: setTextAndStyle,
setStyleOnly: setStyleOnly
}
};
6
Replies
AdChoices
