Adobe XD plugin - change selected group child width

Adobe XD UXP Plugin API
1

Hi,

I just started playing around with creating plugins for Adobe XD and so far I really like the thoughts behind how to create plugins.

I have a question on how to change a selected group childs width. Let’s imagine that I have a group which consists of one text element and one rectangle.

I tried the following and when I use console.log the width changed but not when I look at the XD group or rectangle:

const {Rectangle,Text} = require("scenegraph");
function myCommandFunction(selection) {
 

   let node = selection.items[0];


   node.children.forEach(function (childNode, i) {

 

        node.children.forEach(function (childNode, i) {

             if(childNode.constructor.name == "Rectangle"){

             childNode.width = 200;

            }

       });

  });

}

 

module.exports = {.....
2 
if(childNode.constructor.name == "Rectangle"){
  
 selection.items = [childNode]//add this line
 childNode.width = 200;

 }
3

Also, not all nodes can be resized in this manner. Check out SceneNode#resize for something that might work better for you.

4

as per @kerrishotts answer

we can resize this as

//assuming selection is a group
node.resize(200, currentHeight);
5

Hi and thanks for your help,
I tried to add the “selection.items = [childNode]” and I have now tried to use resize but without luck.
I get the following error:
Plugin Error: Cannot select node not in the current edit context: [object Object]

So I selected the group where there is a rectangle I want to change the with on.

6

selection should be parent of element that to be changed @christian_h

7

post your code and what is your selection so that i can better help you @christian_h

8

@PramUkesh

Here is the code:
I select a group before running the plugin. (The group consists of a rectangle and a text.

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

function myCommandFunction(selection) {
    let node = selection.items[0];

    // Print out types of all child nodes (if any)
    node.children.forEach(function (childNode, i) {
        console.log("Child " + i + " is a " + childNode.constructor.name);
        if (childNode.constructor.name == "Rectangle") {
            console.log("Found a rectangle named " + childNode.name);
            console.log(childNode.width);
            childNode.width = 300; // changing the rectangles size
            console.log(childNode.width); // Checking if the size is changed
        }
    });
}

module.exports = {
    commands: {
        selectedItem: myCommandFunction
    }
};
9

so you want to change width did the above works ?
if not any errors in console ? if yes post console log here

10

@PramUkesh
No it didn’t work and I get the following error when writing:

Plugin Error: Plugin made a change outside the current edit context
    at convertPluginErrorToString (plugins/PluginErrorUtil.js:1:198)
    at internalFormatPluginError (plugins/PluginErrorUtil.js:1:503)
    at internalReportPluginError (plugins/PluginErrorUtil.js:1:610)
    at Object.reportPluginError (plugins/PluginErrorUtil.js:1:1015)
    at r (plugins/ScenegraphGuard.js:1:310)
    at Object.checkChange (plugins/ScenegraphGuard.js:1:729)
    at Object.EventEmitter._emitEvent (third_party/events.js:1:1178)
    at Object.EventEmitter.emit (third_party/events.js:1:1668)
    at Rectangle.Group.notifyChanged (lib/scenegraph/GroupExtension.js:1:879)
    at Rectangle.<anonymous> (plugins/ScenegraphWrappers.js:1:14993)
    at Rectangle.<anonymous> (plugins/ScenegraphWrappers.js:1:2310)
    at /Users/usernamex/Library/Application Support/Adobe/Adobe XD CC/develop/Button helper/main.js:12:29
    at plugins/WrapperList.js:1:378
    at LinkedList.forEach (lib/LinkedList.js:1:1534)
    at ReadOnlyList.forEach (lib/ReadOnlyList.js:1:282)
    at WrapperList.forEach (plugins/WrapperList.js:1:354)
    at myCommandFunction (/Users/usernamex/Library/Application Support/Adobe/Adobe XD CC/develop/Button helper/main.js:7:19)
    at Object.execScenegraphEdit (plugins/ScenegraphGuard.js:1:2219)
    at BaseCommand._invokePluginCommand [as _commandFn] (plugins/PluginLoader.js:1:3052)
    at BaseCommand.execute (lib/BaseCommand.js:1:929)
    at Commands._execute (lib/Commands.js:1:1694)
    at Commands.executeAsGesture (lib/Commands.js:1:1930)

In the last console.log it looks like the width is changed to 300 but the width on the rectangle out on the artboard didn’t change.

11

found this one in edit context rules @christian_h

chrome_2018-11-07_04-44-47
chrome_2018-11-07_04-44-47704×259 11.1 KB

You have to ungroup the group and make changes and group after changes

12

and this is in scenegraph rules

chrome_2018-11-07_04-49-53
chrome_2018-11-07_04-49-53671×510 30.9 KB

13

@christian_h
you cannot edit an object inside a group from outside that group.
you need to ungroup objects first, resize the rectangle, then re-group them.

const {Artboard, BooleanGroup, Color, Ellipse, GraphicNode, Group, Line, LinkedGraphic, Path, Rectangle, RepeatGrid, RootNode, SceneNode, SymbolInstance, Text} = require("scenegraph");

const commands = require("commands");

async function myCommandFunction(selection)
{
	commands.ungroup();
	selection.items.forEach(function (childNode, i)
	{
        console.log("Child " + i + " is a " + childNode.constructor.name);
		if (childNode.constructor.name == "Rectangle")
		{
            childNode.width = 300;
        }
	});
	commands.group();
}

module.exports = {
	commands: {
        myCommandFunction
    }
};
1 Like