Stack layout

Stack layout automatically rearranges elements into stacks. This is useful in many scenarios, for example in creating kanban-styled diagrams or yamazumi charts.

Usage

layout.StackLayout object exposes layout() function, which is used for rearranging elements. The layout function takes two parameters: model and options. The model is the dia.Graph or an array of dia.Element we want to lay out. The second parameter options is an object that contains various layout configuration options.

import { layout } from '@joint/plus';

const result = layout.StackLayout.layout(elements, {
    direction: layout.StackLayout.Directions.TopBottom,
    alignment: layout.StackLayout.Alignments.Middle,
    stackGap: 20,
    stackElementGap: 20,
    topLeft: {
        x: 20,
        y: 20
    }
});

Here is a small demo with stack layout in action:

Open Sandbox

To enable interactivity for your diagram which uses stack layout you can use our StackLayoutView component.