I have two websites. The first has an resource, displaying the bpmn viewer with a bpmn diagram importet via xml.
The second loads this resource in an iframe. The problem is, that the second website has two tabs and the iframe is on the second tab.
The bpmn resource is loaded and added to the DOM of the first website when the tabs are loaded (and the second tab is not visible when opening this site). When opening the second tab, the bpmn diagram is not visible, but the bpmn “frame” is. The diagram gets visible after dragging it the first time. I can see, that the transform matrix is (NaN NaN NaN NaN NaN NaN) in this scenario before dragging it.
Following screenshot shows the svg inside the djs-container.
If I wait with loading the iframe and attaching it to the DOM until the user clicks the second tab the matrix is (1 0 0 1 0 0 0) and the diagram is displayed. But I’d like to load the diagram before the user clicks the second tab. What can I do?
This is a known issue with things that are not actually in the DOM yet which results in NaN values. That’s also why your second approach works. Why would you want to render a diagram that is not visible yet?
It is just for performance issues because it might take a while to render the diagram. If I could do this, while the user is still on the first tab it would not load anymore when clicking on the second tab. Is there any workaround for this?
One approach is to pre-render the diagram “off-canvas” and send it into view after it has been loaded. You have to mount it into DOM, you may have it visibility: none though.
The alternative is to show a nice little loader for your users enjoyment.
I am facing the same issue, I am loading the diagram using jquery ajax dynamically in a bootstrap modal. The modal is resizable and can pe resize by width and height. The bpmn is not loading in the modal but when we scroll liittle bit the bpmn visible suddenly. Also when I am resizing the modal, the bppmn is not adjusting its width or height. Can anyone please provide some solution for this problem?
