Grid layout

Grid layout implements automatic layouts for graphs. This is useful in many scenarios, one of them being e.g. automatically positioning elements in Stencil.

Usage

layout.GridLayout object exposes layout() function. The first parameter graphOrElements is the dia.Graph or an array of dia.Cell we want to layout. The second parameter options is an object that contains various options for configuring the layout.

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

graph.addCells([
    new shapes.standard.Rectangle({ size: { width: 80, height: 50 }}),
    new shapes.standard.Rectangle({ size: { width: 50, height: 50 }}),
    new shapes.standard.Ellipse({ size: { width: 80, height: 50 }}),
    new shapes.standard.Ellipse({ size: { width: 50, height: 50 }})
]);

// Layout the entire graph
layout.GridLayout.layout(graph, {
    columns: 2,
    columnWidth: 100,
    rowHeight: 70
});

// Layout the ellipses with minimal resulting `y` coordinate equals 100.
const ellipses = graph.getElements().filter((el) => {
    return el instanceof joint.shapes.standard.Ellipse;
});

layout.GridLayout.layout(ellipses, {
    columns: 2,
    marginY: 100
});

Open Sandbox

Additionally, using parentRelative options you can layout embedded shapes relative to the parent:

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

const padding = 20;
// layout the children of the element `el`
layout.GridLayout.layout(el.getEmbeddedCells(), {
    parentRelative: true,
    marginX: padding,
    marginY: padding
});
// resize the element `el` to fit all children
el.fitEmbeds({ padding: padding });