Stack Layout View

JointJS provides special component to add interactivity to your diagrams which are based on a stack layout principle. This component incorporates stack layout functionality inside of it and implements moving elements between stacks, as well as provides interfaces for changing the default behavior.

Installation

You can access Stack Layout View component via ui namespace:

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

const stackLayoutView = new ui.StackLayoutView({
    layoutOptions: { graph },
    paper
});

There is also a UMD version available

Include joint.ui.stackLayoutView.js and its dependency joint.layout.stackLayout.js in your HTML:

index.html

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

Access StackLayoutView through the joint.ui namespace:

index.js

const stackLayoutView = new joint.ui.StackLayoutView({
    layoutOptions: { graph },
    paper
});

Usage

To use stack layout view you need to:

• Create an object from the layout.StackLayoutView class.
• Make sure that the elements you want to drag have their interactivity (elementMove) set to false (otherwise an exception is thrown).
• Every element, which is meant to be involved in the stack layout, should have the stackIndex attribute set (otherwise it will be ignored). See the info about other element attributes here.

const layoutOptions = {
    direction: 'TB',
    topBottom: {
        x: 20,
        y: 20
    },
    stackCount: 4,
    stackSize: 200
};

paper.setInteractivity(false);

const stackLayoutView = new joint.ui.StackLayoutView({
    layoutOptions,
    paper
});

When the user drags an element, stack layout view creates a copy of the elementView DOM (ghost) and adds the class name stack-layout-ghost (and stack-layout-ghost-invalid if the drop is invalid). Using these classes you can customize the appearance of such ghost element:

.stack-layout-ghost rect {
    stroke: blue;
}
.stack-layout-ghost-invalid rect {
    stroke: blue;
}

Additionally, this component creates preview while dragging the element. You can change default preview using preview() callback option. You can also customize the appearance of a preview using CSS classes. You can use the stack-layout-preview class name (and stack-layout-preview-invalid when the drop is invalid) for easy styling.

.stack-layout-preview {
    stroke: #4666E5;
    stroke-width: 3;
}
.stack-layout-preview-invalid {
    stroke: #FF4365;
}

Here is the demo with stack layout view in action:

Open Sandbox