[Help] No way to do group within group

Adobe XD UXP Plugin API
#1

There’s a group command to do group

commands.group();

But I found a limitation.
For example, for the structure
Artboard have one group, and the group have three rectangles.

When I try to group two rectangles with command, the new group will always be added into artboard (root), but under the original parent group which is different from the behavior when users do it in XD editor (which the new group will be under the same parent)

I try to use removeFromParent and addChild to the Group but it doesn’t work.
XD plugin doesn’t allow it and show the error

Plugins must add nodes one at a time, not entire subtrees

Is there any way to group the items and decide the parent of the new group?

Thank you!

Chris

#2

What’s user’s selection when you run the plugin? How commands.group() works totally depends on what object user has selected. If the selected objects are the same, using the XD command and using the plugin command should behave the same way.

#3

Thanks for reply.
That what I thought, the behavior should be the same.

But I have tried many times and finally I try a very basic simple case and prove the behaviors are different.

For XD editor with users, the 2 selected object will be grouped into new group whose parent is the same.
But for script, the selection is the same which is also required to set for commands.group. The result would be grouped into new group but the parent of the new grouo ALWAYS be the artboard, i.e. the root node

I am not sure if its the bug or any other way to solve
I use XD 19

Chris

#4

I just tried more deeply.
If I pre-select two items and ask scripts to run “commands.group”, the result is right.

But if the two selected items are selected by scripts and run “commands.group”, then the result will be WRONG, i.e. the new group will be under the root node (i.e. Artboard)

I guess manual select two items are different from selecting items by scripts (via selection.items)
I dump the selection.items and the values under two scenario are the same.
Not sure if the editing context is different or not.

A1 --> Manually select two items
A2 --> Manually group and the result

A3 --> select two items and group by scripts and the result is DIFFERENT.

A1
A1.png1582×1174 54 KB

the scripts below (we manually select the group first and run the script)

let current = selection.items[0];
let c1 = current.children.at(0);
let c2 = current.children.at(1);
selection.items = [c1, c2];
console.log(selection.items);
commands.group();

#5

A2

A2
A2.png1400×960 38.6 KB

#6

A3

A3
A3.png1466×994 47 KB

#7

Once the selection is inside the main group, try to use just commands.group(): the n selected objects should be grouped while remaining into their edit context.

#8

Thanks for your reply.
After several tries, I found an interesting result.

Currently I have scripts to do the things below
STEP 1: select two items
STEP 2: group two items

Experiment 1

I separate STEP1 and STEP2 into two menu actions in XD plugin
And execute “Select Action” and “Group Action”, one by one and the result is indeed the same to behavior which is operated by users.

Experiment 2

The menu action (scripts) do the Step1 and Step2 in XD Plugin
i.e. selected the items and do the grouping. The result is DIFFERENT, the new group will be under the artboard, not original group.

========= Reference Code ===========

------------------------------------------- Experiment 1 -------------------------------------------
#STEP1
let current = selection.items[0];
let c1 = current.children.at(0);
let c2 = current.children.at(1);
selection.items = [c1, c2];
#STEP2
commands.group();

------------------------------------------- Experiment 2 (ALL-IN-ONE)-------------------------------------------

let current = selection.items[0];
let c1 = current.children.at(0);
let c2 = current.children.at(1);
selection.items = [c1, c2];
console.log(selection.items);
commands.group();

Even for experiment 2, the scripts delay few seconds to do the command.group
It doesn’t work as expected. Any idea or suggestion?

I just want to achieve the same result but have no way to achieve.
XD plugin are not allow to change parent or structure of the tree nodes, only limit to only one node.
I have no way to change parent of the group.

Chris Chang

#9

You can’t group elements if selection is outside of their edit context. You can edit some properties like opacity, position… but not group them.

#10

Hi, thanks for the reply.
The artboard’s structure is below

Artboard --> Group1 --> Rect1, Rect2 and Rect3

I just select Rect1 and Rect2 and try to group them.
As I read the document, if I select the rect1 and rect, the editing context could be the common parent, i.e. the group.

If the steps is operated by users, the new group will be under Group1 (which is the same editing context)
But if the steps is run by plugin scripts, the new group will be under the Artboard (i.e. RootNode)
The result is still confusing. Do I understand in a correct way?
Sorry for keeping asking, and thanks for your time.

Chris

#11

Yes, user selection is different from script selection.
User can even select objects inside different groups (cmd+shift+click) while scripts can’t.
As an extreme solution, you could ungroup the Group1, then group Rect1 and Rect2, then restore the original group but this technique is strongly discouraged since objects could lose references to some of their metadata and prototype links.

let group1 = selection.items[0];
let c1 = group1.children.at(0);
let c2 = group1.children.at(1);
let c3 = group1.children.at(2);
commands.ungroup();
selection.items = [c1, c2];
commands.group();
let group2 = selection.items[0];
selection.items = [group2, c3];
commands.group();
#12

Hi PaoloBiagini

Thanks for your reply.

BTW, is there any reason or concerns to limit plugin to move the tree? >_<

Chris