How to change group layout to type stack

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) {


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

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).

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

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

Please see my response here:

1 Like