Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

z-Index initialization issue in async mode #1320

Open
ialokim opened this issue Jun 6, 2020 · 2 comments
Open

z-Index initialization issue in async mode #1320

ialokim opened this issue Jun 6, 2020 · 2 comments

Comments

@ialokim
Copy link

ialokim commented Jun 6, 2020

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
grafik
whereas in asynchronous mode the results looks as follows
grafik
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
Copy link
Contributor

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

@kumilingus kumilingus added the bug label Jun 6, 2020
@ialokim
Copy link
Author

ialokim commented Jun 7, 2020

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

zuozhiw added a commit to Texera/texera that referenced this issue Mar 17, 2022
This PR improves the stability of the frontend by making two changes:

1. After adding the lock related logic, we have an increasing number of error `ExpressionChangedAfterItHasBeenCheckedError`.  When this error occurs, some components on the frontend might become freezing or unresponsive.
![image](https://user-images.githubusercontent.com/12578068/158313495-9afe1ad2-fe22-4198-a6a0-f33cfd3d0384.png)

This is due to not running angular change detection after the lock status is changed. We have manually added change detection check whenever lock status is changed. This is also one of Angular's recommended ways to fix it.


2. After adding the async rendering functionaility, we found another JointJS related bug. This error is more likely to happen when switching workflows in version control. When this error happens, JointJS cannot render the operator links. 
![image](https://user-images.githubusercontent.com/12578068/158313882-7e9d93ed-d7aa-4a78-8daf-73917f5f4d47.png)

This is due to an internal bug in JointJS, see clientIO/joint#1320 . We have adopted a recommended workaround to fix this issue. Thanks @MysteriousChallenger for identifying and solving this issue.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants