JointJS Collapse/Expand Embeds

by Roman Bruckner

HTML

<script src="https://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.3/backbone-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jointjs/2.1.3/joint.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jointjs/2.1.3/joint.min.css">
<div id="paper" />

CSS

#paper {
  border: 1px solid gray;
  float: left;
  position: relative;
  overflow: hidden;
}

JavaScript

var graph = new joint.dia.Graph();
var paper = new joint.dia.Paper({
    el: document.getElementById('paper'),
    model: graph,
    defaultConnectionPoint: { name: 'boundary' },
    defaultAnchor: { name: 'center' }
});

var Group = joint.dia.Element.define('example.Group', {
    size: {
        width: 100,
        height: 40
    },
    attrs: {
        body: {
            refWidth: '100%',
            refHeight: '100%',
            fill: 'white',
            stroke: 'black',
            strokeWidth: 2
        },
        tool: {
            r: 10,
            cx: 20,
            cy: 20,
            fill: 'white',
            stroke: 'blue',
            strokeWidth: 2,
            cursor  : 'pointer',
            event: 'element:collapse'
        }
    }
}, {
    markup: [{
        tagName: 'rect',
        selector: 'body'
    }, {
        tagName: 'circle',
        selector: 'tool'
    }]
});

// Setup

var e1 = new Group();
e1.position(100, 100);
var a1 = new joint.shapes.standard.Rectangle();
var a2 = new joint.shapes.standard.Rectangle();
a1.size(50, 50);
a2.size(70, 30);
var l1 = new joint.shapes.standard.Link();
l1.source(a1).target(a2);
graph.addCells([e1, a1, a2, l1]);
e1.embed(a1);
e1.embed(a2);
a1.position(20, 10, { parentRelative: true });
a2.position(90, 30, { parentRelative: true });
e1.fitEmbeds({ padding: { top: 40, left: 10, right: 10, bottom: 10 }});

var e2 = new Group();
e2.position(500, 200);
var a3 = new joint.shapes.standard.Rectangle();
var a4 = new joint.shapes.standard.Rectangle();
a3.size(50, 50);
a4.size(70, 30);
var l2 = new joint.shapes.standard.Link();
l2.source(a3).target(a4);
graph.addCells([e2, a3, a4, l2]);
e2.embed(a3);
e2.embed(a4);
a3.position(20, 10, { parentRelative: true });
a4.position(90, -20, { parentRelative: true });
e2.fitEmbeds({ padding: { top: 40, left: 10, right: 10, bottom: 10 }});
toggleCollapse(e2);

var l = new joint.shapes.standard.Link();
l.source(e1).target(e2);
l.addTo(graph);

// Collapse /...