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.

layout.StackLayout.layout

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.