Panzoom and setTransform()

[larsinsd]

I would like to save the current state of the flowchart's panzoom using panzoom's getTransform() function and then when the flowchart is reloaded, have it remember and display the flowchart as it was last seen. It almost works.

It DOES work properly when you load it as read-only (with canUserEditLinks: false, canUserMoveOperators: false).

BUT if you load a flowchart and THEN use panzoom's setTransform() function, and then try to drag any operators, all of the links go haywire.

One weird artifact I found was that if the user uses the mousewheel scroll before dragging any operators, it all works. But of course, we can't assume the user will know to do that. I even tried to use jQuery to simulate a mouse scroll, and it didn't work.

I tried everything I could, but this appears to be a bug within jquery.flowchart. The link elements are not being updated somehow.

[sdrdis]

Have you tried to use the "pan" method instead ? https://github.com/timmywil/jquery.panzoom#pan-x-y-options-

It works on my browser...

[larsinsd]

Yes - pan does work, but I'm trying to remember zoom, which appears to only be captured in the transform function.

[iteearmah]

I'm have the same issue. Any insight on this from anybody?

[iteearmah]

@larsinsd I seem to have found the solution All you have to do is to save the getPositionRatio and set on page load

First Save the value

localStorage.setItem('position_ratio_key', $flowchart.flowchart('getPositionRatio'));

Now Set the flowchart

let flowChartWorkspacePosRatio = localStorage.getItem('position_ratio_key);
$flowchart.flowchart('setPositionRatio', flowChartWorkspacePosRatio);