How do you get the width value of a text element via a plugin in XD?

Question

I am trying to build a plugin for XD to automate the creation of design elements. I have written a function to build the button (first picture below) using a text element and a rectangle. The only problem with this is that shape of the rectangle is not based on the width of the text, so when the text is longer you end up with the text overlapping the rectangle (see second picture below).

I have been trying to figure out how to get the width value of the text element so that I can size the rectangle appropriately. Can anyone help me with this?

I have figured out that by adding the line console.log (selection.items); I can output a full list of properties to the log, but how do I access the width property?

Here is the log output showing the rectangle and text elements...

[ Text ('Submit Button') {
    width: 113, height: 20
    global X,Y: -3, -74
    parent: Artboard ('iPad – 1')
    fill: ff000000
  },
  Rectangle ('Rectangle 6') {
    width: 100, height: 50
    global X,Y: -3, -58
    parent: Artboard ('iPad – 1')
    stroke: ff2d3494
  } ]

and here is my full code...

const {Rectangle, Color, Text, Selection} = require("scenegraph"); 
let commands = require("commands");

function createButton(selection) { 

    // Create the outline of the button
    const newButtonOutline = new Rectangle(); 
    newButtonOutline.width = 100;
    newButtonOutline.height = 50;
    newButtonOutline.stroke = new Color("#2D3494");
    newButtonOutline.strokeWidth = 2;
    newButtonOutline.cornerRadii = { 
        topLeft: 10, 
        topRight: 10, 
        bottomRight: 10, 
        bottomLeft: 10
    };

    // Create the text for the button
    const newButtonLabel = new Text();
    newButtonLabel.text = "Submit Button";
    newButtonLabel.fontSize = 18;
    newButtonLabel.fill = new Color("#000000");


    // Add the text and outline to the artboard
    selection.insertionParent.addChild(newButtonOutline);
    newButtonOutline.moveInParentCoordinates(100, 100);
    selection.insertionParent.addChild(newButtonLabel);
    newButtonLabel.moveInParentCoordinates(100, 100);
    selection.items = [newButtonLabel, newButtonOutline];
    console.log (selection.items);

    //align the button elements and group together 
    commands.alignHorizontalCenter();
    commands.alignVerticalCenter();
    commands.group();

}

I hope someone can help!

I have figured out that the following will output the width of the rectangle (100), but on the text it says undefined...? console.log(selection.items[1]['width']); — Haniel, Nov 15 '19 at 23:43

score 0 · Answer 1 · answered Nov 18 '19 at 01:52

0

So it turns out to get the width of a text node you need to get it from the localBounds, something like...

textNode.localBounds.width

or to get the width of a graphic node it is just...

graphicNode.width

answered Nov 18 '19 at 01:52

Haniel

31
3

How do you get the width value of a text element via a plugin in XD?

1 Answers1