Restore zoom/pan settgins when recreating a svg on dynamic load

[leoheck]

Hi, I am trying to restore settings (zoom/pan) when I am recreating svgs but I could not do that yet. Do you guys have any tip for helping me with that?

Also, there is this demo to load dynamically svgs.
https://bumbu.me/svg-pan-zoom/demo/dynamic-load.html

Is it possible to provide a similar demo where it restores the previous zoom/pan settings when (re)creating a new svgPanZoom?

Thank, you.

[eliandoran]

Probably too late but I ran into a similar issue so maybe it might help other people looking for an answer.

The solution is to keep a reference to the old zoom instance, save the pan & zoom and then restore it for the new instance.

Here is some sample code:

// Clean up
let pan = null;
let zoom = null;
if (this.zoomInstance) {
    // Store pan and zoom for same note, when the user is editing the note.
    if (isSameNote && this.zoomInstance) {
        pan = this.zoomInstance.getPan();
        zoom = this.zoomInstance.getZoom();
    }
    this.#cleanUpZoom();
}

const zoomInstance = svgPanZoom(svgEl, {
    zoomEnabled: true,
    controlIconsEnabled: true
});

if (pan && zoom) {
    // Restore the pan and zoom.
    zoomInstance.zoom(zoom);
    zoomInstance.pan(pan);
} else {
    // New instance, reposition properly.
    zoomInstance.center();
    zoomInstance.fit();
}

this.zoomInstance = zoomInstance;