How to use a JointJS Directed Graph when cells are embedded?

Question

Tonight, I tried performing the directed graph on an example from the JointJS website. See the Discrete Event example:

http://resources.jointjs.com/demos/devs

Even though the source code link is not mapped correctly, I found it here:

https://raw.githubusercontent.com/clientIO/joint/master/demo/devs/src/shapes.devs.js

I’m in a situation where I cannot predict what position to place objects, as in the demo. Therefore, I’m relying on a DirectedGraph to do the job. So, as a simple example, I simply put the following at the end of the code to see what would happen:

joint.layout.DirectedGraph.layout(graph, {
    setLinkVertices: false
});

Notice in the console emits an error:

"Uncaught TypeError: Cannot set property 'rank' of undefined" — dare.core.js 3085

This is the exact problem I’m having in my software. The only solution I've found so far is to removed any embedded cells. Is this a bug or is the demo outdated? I've searched the documentation with little success. Has anyone had this problem? Can anyone get the demo to work with a DirectedGraph?

score 1 · Answer 1 · answered Jun 29 '18 at 07:13

This is a known issue of Dagre-D3: Automatic layout does not work on hierarchical diagrams with links with parent.

To get it to work, you can either omit the links between the embeding elements when calling joint.layout.DirectedGraph.layout() or you can follow a more sophisticated workaround as suggested here:

Layout each group of children elements separately.
For each parent, create an auxiliary clone parent.
Set the corresponding elements to their cloned parent.
Fit each cloned parent to the size of its children and resize the original parent with the size of the cloned parent.
Layout the graph.
Translate the cloned parents to the position of their original parent (the children will be translated accordingly).
Remove the cloned parents and set the children to the original parents.

score 0 · Answer 2 · answered Oct 02 '19 at 11:49

Don't use embedding. You could rather create a custom element:

    const CustomCircle = joint.dia.Element.define(
        'CustomCircle',
        {
            attrs: {
                outer: {
                    refR: 0.5,
                    refCx: 0.5,
                    refCy: 0.5,
                },
                inner: {
                    refR: 0.3,
                    refCx: 0.5,
                    refCy: 0.5,
                },
                // outline: {
                //     refX: 0,
                //     refY: 0,
                //     refWidth: '100%',
                //     refHeight: '100%',
                //     strokeWidth: 1,
                //     stroke: '#000000',
                //     strokeDasharray: '5 5',
                //     strokeDashoffset: 2.5,
                //     fill: 'none'
                // }
            }
        },
        {
            markup: [
                {
                    tagName: 'circle',
                    selector: 'outer'
                },
                {
                    tagName: 'circle',
                    selector: 'inner'
                },
                // {
                //     tagName: 'rect',
                //     selector: 'outline'
                // }
            ]
        }
    );

    const circle = new CustomCircle();
    circle.attr({
        outer: {
            class: 'class1 class2',
        },
        inner: {
            class: 'class3 class4'
        },
    });
    circle.resize(40, 40);

How to use a JointJS Directed Graph when cells are embedded?

2 Answers2