Web Dev Solutions

Catalin Mititiuc

aboutsummaryrefslogtreecommitdiff
path: root/src/modules/panzoom.js
diff options
context:
space:
mode:
authorCatalin Mititiuc <webdevcat@proton.me>2024-04-22 20:58:17 -0700
committerCatalin Mititiuc <webdevcat@proton.me>2024-04-22 20:58:17 -0700
commitbbf65197db8da4f360e3d460d4eb74d947525622 (patch)
tree988fd03d9c0f5acb48763a97d219e7eb4db805fe /src/modules/panzoom.js
parent9e375ef3734301f5527b8308f4813a067d3d53fb (diff)
Extract panzoom logic into separate module
Diffstat (limited to 'src/modules/panzoom.js')
-rw-r--r--src/modules/panzoom.js44
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 });
+ }
+};