z-Index initialization issue in async mode

[ialokim]

If I want to have a link displayed below my cells on initialization, it should be as simple as adding z: 0 to the link and z: 1 to the cells while calling the constructor. This works as expected in the normal synchronous rendering mode, but fails if async: true is set in the paper options.

Here is a modified code from the Hello-world-example to reproduce the problem:

var graph = new joint.dia.Graph;

var paper = new joint.dia.Paper({
    //async: true,
    el: document.getElementById('myholder'),
    model: graph,
    width: 600,
    height: 100,
    gridSize: 1
});

var rect = new joint.shapes.standard.Rectangle({
    z:1
});
rect.position(100, 30);
rect.resize(100, 40);
rect.attr({
    body: {
        fill: 'blue'
    },
    label: {
        text: 'Hello',
        fill: 'white'
    }
});
rect.addTo(graph);

var rect2 = rect.clone();
rect2.translate(300, 0);
rect2.attr('label/text', 'World!');
rect2.addTo(graph);

var link = new joint.shapes.standard.Link({
    vertices: [{x: 600, y: 50}],
    z:0
});
link.source(rect);
link.target(rect2);
link.addTo(graph);

In synchronous mode, the graph is rendered correctly as

whereas in asynchronous mode the results looks as follows

because the order in the svg tree is not adapted correctly.

Btw, for some reason if I move the source or target (by the corresponding link tools), somehow it seems to re-render and the link is correctly displayed below the rectangle.

[kumilingus]

Right, this is a bug. For now, please use sorting: joint.dia.Paper.sorting.APPROX together with the async mode.

[ialokim]

Okay, nice work-around. I was even not aware of this paper option, thanks a lot!