Nested Groups

Nested Groups

JsPlumb has comprehensive support for groups, which can be nested to an arbitrary level. When groups are collapsed any edges to/from children of the group are relocated to the group. You can collapse and expand groups in this demo with the `-` and `+` buttons.

Group 1 in this demo has `autoSize` switched on, and will resize when new nodes are dropped into the group, or nodes are deleted or dragged out.

Group 2 has `constrain` set, meaning that child nodes cannot be dragged outside of its bounds.

The headless group in this app is an elastic group, which is a type of group that is available from 6.10.0 onwards. When you drag a child node around in an elastic group, the group will resize to always encompass its child nodes (while still respecting any minSize or maxSize you may have set). If you want to drag a node out of an elastic group, hold down the Shift key while dragging.

By default, an elastic group will resize from any edge. This can be switched off programmatically via setting `allowResizeFromOrigin:false` on a group definition, and you can also switch it off on an ad-hoc basis by holding down the Ctrl or Meta key while dragging (on a Mac the Meta key is the Command key).

Read about this demo itself in our docs: https://docs.jsplumbtoolkit.com/toolkit/7.x/lib/starter-app-groups

Read about groups in detail here: https://docs.jsplumbtoolkit.com/toolkit/7.x/lib/groups