You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The structure of my application is something like:
A button to fetch JSON data that needs to be rendered as a JointJS application.
Below the button I have two tabs. One tab is dedicated to load JointJS app while other tab has a different flow. Now consider the below two scenarios: Scenario 1: I switch to the tab that embeds the jointjs app. Then I click on fetch Data button. This renders my application as expected. Scenario 2: I switch to the other tab and then click on fetch Data button. Now again I switch back to the JointJS tab. This creates a rendering issue of the application as it's paper is not scaled properly and basic.shapes.rectangle elements aren't rendered as expected in previous case.
I tried a workaround, which is to put async: false in paper instead of async: true while initializing paper element. This resulted in producing the same issue observed in scenario 2 for both the above cases.
I am attaching the screenshots for reference.
Version
3.7
What browsers are you seeing the problem on?
No response
What operating system are you seeing the problem on?
No response
The text was updated successfully, but these errors were encountered:
kumilingus
changed the title
[Bug]: Rendering issue when paper is loaded in background.
Rendering issue when paper is loaded in background.
Apr 16, 2024
You need to freeze() the paper when it is not in the render tree (not connected or display: none).
And unfreeze() the paper to sync the views with the graph changes after you display the tab.
What happened?
The structure of my application is something like:
Scenario 1: I switch to the tab that embeds the jointjs app. Then I click on fetch Data button. This renders my application as expected.
Scenario 2: I switch to the other tab and then click on fetch Data button. Now again I switch back to the JointJS tab. This creates a rendering issue of the application as it's paper is not scaled properly and basic.shapes.rectangle elements aren't rendered as expected in previous case.
I tried a workaround, which is to put async: false in paper instead of async: true while initializing paper element. This resulted in producing the same issue observed in scenario 2 for both the above cases.
I am attaching the screenshots for reference.
Version
3.7
What browsers are you seeing the problem on?
No response
What operating system are you seeing the problem on?
No response
The text was updated successfully, but these errors were encountered: