Rendering issue when paper is loaded in background.

[agarwalanish]

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

[kumilingus]

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

[github-actions]

This issue is stale because it has been open 60 days with no activity. Please remove stale label or comment or this will be closed in 14 days.