StackLayout

StackLayout is an object which contains several functions and properties.

Properties

Alignments

Key-value object representing Alignments type.

Directions

Key-value object representing Directions type.

Functions

layout()

Rearrange graph or shapes into a layout, specified by layout options. The function returns special result object.

StackLayout.layout(model: dia.Graph | dia.Element[], options?: StackLayoutOptions): StackLayoutResult;

Element attributes

For fine-grained control of the stack layout, you can also set the following attributes on the element models:

stackIndex (specified by stackIndexAttributeName)	number	The attribute specifying the index of the stack (0-based indexing) in which the element is located. The default is 0.
stackElementIndex (specified by stackElementIndexAttributeName)	number	The attribute specifying the position of the element in the stack. The element with the lower number is lower in the stack. For elements with the same index, the order of the elements in the graph matters. The default is 0.

Types

Alignments

Enum of possible alignment values.

enum Alignments {
    Start = 'start',
    Middle = 'middle',
    End = 'end',
}

alignment	value	description
Start	"start"	For TopBottom and BottomTop directions, the elements in the stack are aligned to the left side of the stack. For the other directions, they are aligned to the top side.
Middle	"middle"	The elements in the stack are always aligned to the middle of the stack.
End	"end"	For TopBottom and BottomTop directions, the elements in the stack are aligned to the right side of the stack. For the other directions, they are aligned to the bottom side.

Directions

Enum of possible direction values.

enum Directions {
    TopBottom = 'TB',
    BottomTop = 'BT',
    LeftRight = 'LR',
    RightLeft = 'RL'
}

direction	value	description
TopBottom	"TB"	The elements in stacks are laid out from top to bottom.
BottomTop	"BT"	The elements in stacks are laid out from bottom to top.
LeftRight	"LR"	The elements in stacks are laid out from left to right.
RightLeft	"RL"	The elements in stacks are laid out from right to left.

Stack

Type representing a stack in the layout.

interface Stack {
    bbox: g.Rect,
    elements: dia.Element[],
    index: number
}

StackLayoutOptions

Type of options parameter of the layout() function.

interface StackLayoutOptions {
    direction: Directions;
    alignment?: Alignments;
    stackSize: number;
    stackGap?: number;
    stackElementGap?: number;
    stackCount?: number;
    topLeft?: dia.Point;
    bottomLeft?: dia.Point;
    topRight?: dia.Point;
    bottomRight?: dia.Point;
    setAttributes?: SetAttributesCallback;
    stackIndexAttributeName?: string;
    stackElementIndexAttributeName?: string;
}

Properties description:

direction	StackLayout.Directions	The direction of the stack layout elements. The default is Directions.TopBottom.
alignment	StackLayout.Alignments	The alignment of the stack layout elements. The default is Alignments.Middle.
stackSize	number	The size of the stack (width for vertical and height for horizontal layouts). The default is 100.
stackGap	number	The gap between stacks. The default is 10.
stackElementGap	number	The gap between elements in the stack. The default is 10.
stackCount	number	The number of stacks in the layout. By default the number of stacks is calculated from the stackIndex property of elements.
topLeft	object	The object representing the top-left point of the layout (contains x and y properties).
bottomLeft	object	The object representing the bottom-left point of the layout (contains x and y properties).
topRight	object	The object representing the top-right point of the layout (contains x and y properties).
bottomRight	object	The object representing the bottom-right point of the layout (contains x and y properties).
setAttributes	function	A callback function to customize how the positions are set in the elements.ts setAttributes(element, { position }, opt) { element.set('position', position, opt); }
stackIndexAttributeName	string	The name of the element attribute specifying the index of the stack. The default is "stackIndex".
stackElementIndexAttributeName	string	The name of the element attribute that specifies the position of the element in the stack. The default is "stackElementIndex".

StackLayoutResult

Type of the layout() function return value.

interface StackLayoutResult {
    bbox: g.Rect,
    stacks: Stack[]
}

bbox	object	A bounding box around elements.
stacks	Array<object>	The array of stack objects with these properties. bbox object A bounding box around the stack. elements Array<object> The array of elements of the stack. index number The index of the stack inside the layout.