import { pan, zoom } from 'svg-pan-zoom';
export default class PanZoom {
#storageKey = 'pan-zoom';
constructor(svg) {
this.#restorePanZoomVal(svg);
this.#addEventListeners(svg);
this.#observePanZoomChanges(svg);
}
#storePanZoomVal(transformMatrix) {
localStorage.setItem(this.#storageKey, transformMatrix);
}
#observePanZoomChanges(svg) {
const observer =
new MutationObserver(() => this.#storePanZoomVal(svg.style.transform));
observer.observe(svg, { attributeFilter: ['style'] });
}
#restorePanZoomVal(svg) {
const storedPanZoomVal = localStorage.getItem(this.#storageKey);
if (storedPanZoomVal) {
svg.style.transform = storedPanZoomVal;
}
}
#addEventListeners(svg) {
svg.addEventListener('wheel', e => {
e.preventDefault();
zoom(svg, e);
}, { passive: false });
svg.addEventListener('pointerdown', e => {
e.preventDefault();
pan(svg, e);
}, { passive: false });
}
};