How to change group layout to type stack

Adobe XD UXP Plugin API
1

Is there an example of how to set the layout to type stack?

Here’s what I’ve got so far:

editDocument( () => {
	try {
		console.log("layout before: ", element.layout)
		element.layout.type = "stack"; // no change with simply this line
		console.log("layout after: ", element.layout); // same as before
		element.layout.stack.orientation = "horizontal"; // stack is undefined
	}
	catch(error) {
		console.log(error)
	}
});

Reference:

https://www.adobe.io/xd/uxp/develop/reference/scenegraph/#scenenodelayout--layoutproperties

2

Here is an example of how to set a selected group of shapes to horizontal stack layout:

let selectedGroup = selection.items[0];
let layoutStack = { type: SceneNode.LAYOUT_STACK, stack: { orientation: SceneNode.STACK_HORIZONTAL, spacings: 20 } };
selectedGroup.layout = layoutStack;

Let me know if you need any further examples. And I will ask that example code be added to our documentation.

1 Like
3

That worked! :slight_smile:

It looks like I have to include the a value for the spacings property. Is there a value I can set it to to maintain the current spacings?

Error: The stack properties object is invalid because 
it doesn't contain both the 'orientation' and 'spacings' fields.

Error: The 'spacings' attribute of stack is invalid because 
it doesn't represent either a number or an array.

OK I think I found that it is required:

Error: The desired stack spacings array is invalid since it contains 0 spaces
which cannot be applied between 2 stack cells (1 stack spacing is required).
4

Correct. The spacings property is required, and is must be a number or array of numbers, not undefined, null, or an empty array. This is inconsistent with the XD UI which allows for unspecified spacings.

1 Like
5

In my project the code for determining the spacings took about a week (this is before the Stack API was available). :slightly_smiling_face:

So I’m going to create a feature request for automatic spacings (like XD does it) if that’s ok.

1 Like
6

Please see my response here:

1 Like