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-47.png704×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-53.png671×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