1 files changed, 44 insertions, 0 deletions
diff --git a/src/modules/panzoom.js b/src/modules/panzoom.js
new file mode 100644
index 0000000..38b6b08
--- /dev/null
+++ b/src/modules/panzoom.js
@@ -0,0 +1,44 @@
+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 });
+  }
+};