kumilingus
commented
1 month ago It works as expected.
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.
Examples: https://www.jointjs.com/demos/bootstrap-tabs https://www.jointjs.com/demos/tabs
What happened?
The structure of my application is something like: 1) A button to fetch JSON data that needs to be rendered as a JointJS application. 2) 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