javascriptreactjsdiagramjointjs

Hierarchical stacked element using JointJS


In JointJS documentation (link below), I am able to define a simple custom element that is driven from other basic elements such as Line, Rectangle, Link, and so on https://resources.jointjs.com/tutorial/custom-elements

What I am trying to accomplish is to create a Group (custom element) that consists of a label at the top, and then a number of compartments aligned vertically beneath that label. A compartment itself acts as a container, which can contain a complete sub diagram, which itself can have other Groups, and so on.

I get how to create the label, but I am struggling to find out how to create the compartments as per the description above. All examples I am able to find so far are for simple custom elements that add additional attributes to the extended base elements.


Solution

  • My bad, I should have checked the documentation better. The link below explains the required. We need to embed elements of another root element.

    https://resources.jointjs.com/tutorial/hierarchy

    This snippet is also so helpful https://jsfiddle.net/kumilingus/xa1m5k2f/

    graph.addCells([e1, a1, a2, l1]);
    

    One more example that os helpful, can be found in this link: https://resources.jointjs.com/demos/container