JointJS+ StackLayout

layout.StackLayout

StackLayout implements automatic stack layouts for elements. This is useful in many scenarios, for example in creating kanban-styled diagrams or yamazumi charts.

Installation

Include the joint.layout.stackLayout.js file in your HTML:

<script src="joint.layout.stackLayout.js"></script>

Usage

The StackLayout plugin exposes the function joint.layout.StackLayout.layout(model, options), joint.layout.StackLayout.Directions enum, and joint.layout.StackLayout.Alignments enum.

Source Code

layout.StackLayout.Alignments

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.

layout.StackLayout.Directions

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.

The layout function takes two parameters: model and options. The model is the joint.dia.Graph or an array of joint.dia.Elements we want to lay out. The second parameter options is an object that contains various layout configuration options.

joint.layout.StackLayout.layout(graph, {
  direction: joint.layout.StackLayout.Directions.TopBottom,
  alignment: joint.layout.StackLayout.Alignments.Middle
});

Layout function options

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. `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"`.

The function returns an object with various geometrical information.

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.

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