Tree Layout View

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

Installation

You can access Tree Layout View component via ui namespace:

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

const treeLayout = new layout.TreeLayout(graph);
const treeLayoutView = new ui.TreeLayoutView(treeLayout);

There is also a UMD version available

Include joint.ui.treeLayoutView.js and its dependency joint.layout.treeLayout.js in your HTML:

index.html

<script src="joint.layout.treeLayout.js"></script>
<script src="joint.ui.treeLayoutView.js"></script>

Access TreeLayoutView through the joint.ui namespace:

index.js

const treeLayout = new joint.layout.TreeLayout(graph);
const treeLayoutView = new joint.ui.TreeLayoutView(treeLayout);

Usage

First you need to create an object of layout.TreeLayout type. ui.TreeLayoutView is dependent on this and expects this object in its model parameter:

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

const graphLayout = new layout.TreeLayout({
    graph: graph,
    parentGap: 50,
    siblingGap: 50
});

const treeLayoutView = new ui.TreeLayoutView({
    paper: paper,
    model: graphLayout
});

graphLayout.layout();

You can look at the full list of tree layout view parameters and methods in our API reference.

Here is the demo with tree layout view in action:

Open Sandbox