Port support in Community Edition 4.x Port support in Community Edition 4.x
25 Aug 2020
Nested group support in Community Edition 4.x Nested group support in Community Edition 4.x
28 Jul 2020
Community Edition 4.x Beta Release Community Edition 4.x Beta Release
20 Jun 2020
World Cup 2018, Part 2 World Cup 2018, Part 2
26 Jun 2018
World Cup 2018, Part 1 World Cup 2018, Part 1
25 Jun 2018
Community Edition 2.2.2 Release Community Edition 2.2.2 Release
20 Oct 2016
Connecting SVG Shapes (Raphael, Highcharts etc) (update) Connecting SVG Shapes (Raphael, Highcharts etc) (update)
20 Oct 2016
Writing a Layout Decorator Writing a Layout Decorator
25 Jul 2015
Toolkit Edition 1.0.0 Toolkit Edition 1.0.0
23 Jul 2015
Community Edition 1.7.6 Community Edition 1.7.6
23 Jul 2015
Connecting SVG Shapes (Raphael, Highcharts etc) Connecting SVG Shapes (Raphael, Highcharts etc)
22 Jul 2015
The beforeDrag Interceptor The beforeDrag Interceptor
15 Jan 2015
Integrating Jekyll and YUIDoc Integrating Jekyll and YUIDoc
28 Jan 2014
Dragging Multiple Elements Dragging Multiple Elements
17 Jan 2014
Custom Connectors Custom Connectors
22 Dec 2013

Nested group support in Community Edition 4.x

Release 4.0.0-RC15 of the jsPlumb Community Edition introduces support for nested groups. There may still be some updates/improvements needed to the code, so we encourage anyone using the 4.x branch to give it a try and let us know any feedback.

Nesting a Group

Groups can be nested using the mouse, simply by dragging one group into another, as you do now with elements, or they can be nested programmatically:

var someGroup = jsPlumbInstance.addGroup({
    el:someDOMElement,
    id:"two"
});

var someOtherGroup = jsPlumbInstance.addGroup({
    el:someOtherDOMElement,
    id:"three"
});

someGroup.addGroup(someOtherGroup);

Collapse/Expand

Nested groups may of course be collapsed/expanded inside their parent group:

And when a group that contains nested groups is collapsed, any connections to/from the nested groups are collapsed as they currently are with child elements of a group:

Removal of a nested group

A nested group can be removed from its parent group in the same way as elements can, via dragging, but you can also remove one programmatically:

someGroup.removeGroup(someOtherGroup);

Keep in mind, if you do this, that someOtherGroup may now need to be relocated. It will have the left/top values it had as a nested group, which are relative to the parent group's origin, so the previously nested group will now be positioned relative to the canvas origin with these values.

Deletion of a nested group

When a nested group is deleted, any child elements/groups of that group are transferred to the deleted group's parent.

Nesting Limit

There is no limit to how deeply groups can be nested. Only common sense can guide you here.

Demonstration

See the nested-groups demonstration that ships with 4.x.

Toolkit Edition

This functionality will be available in the Toolkit edition once the 4.x branch of the Toolkit edition reaches beta.