From bbf65197db8da4f360e3d460d4eb74d947525622 Mon Sep 17 00:00:00 2001
From: Catalin Mititiuc
Date: Mon, 22 Apr 2024 20:58:17 -0700
Subject: Extract panzoom logic into separate module
---
src/modules/panzoom.js | 44 ++++++++++++++++++++++++++++++++++++++++++++
1 file changed, 44 insertions(+)
create mode 100644 src/modules/panzoom.js
(limited to 'src/modules/panzoom.js')
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 });
+ }
+};
--
cgit v1.2.3