From 7f0c19becd5979a16d9298cae9f6ff8a6f96d9c2 Mon Sep 17 00:00:00 2001
From: Catalin Mititiuc
Date: Wed, 24 Apr 2024 19:35:42 -0700
Subject: More functional refactor
---
src/modules/panzoom.js | 51 ++++++++++++++++++++++++--------------------------
1 file changed, 24 insertions(+), 27 deletions(-)
(limited to 'src/modules/panzoom.js')
diff --git a/src/modules/panzoom.js b/src/modules/panzoom.js
index ae95171..dcc6b34 100644
--- a/src/modules/panzoom.js
+++ b/src/modules/panzoom.js
@@ -1,36 +1,33 @@
import { pan, zoom } from 'pan-zoom';
-export default class PanZoom {
- #storageKey = 'pan-zoom';
- #zoomFactor = 0.25;
-
- constructor(svg) {
- this.#restorePanZoomVal(svg);
- this.#addEventListeners(svg);
- this.#observePanZoomChanges(svg);
- }
+const storageKey = 'pan-zoom',
+ zoomFactor = 0.25;
+
+function restorePanZoomVal(svg) {
+ const storedPanZoomVal = localStorage.getItem(storageKey);
- #storePanZoomVal(transformMatrix) {
- localStorage.setItem(this.#storageKey, transformMatrix);
+ if (storedPanZoomVal) {
+ svg.style.transform = storedPanZoomVal;
}
+}
- #observePanZoomChanges(svg) {
- const observer =
- new MutationObserver(() => this.#storePanZoomVal(svg.style.transform));
+function addEventListeners(svg) {
+ svg.addEventListener('wheel', e => zoom(svg, e, zoomFactor), { passive: false });
+ svg.addEventListener('pointerdown', e => pan(svg, e), { passive: false });
+}
- observer.observe(svg, { attributeFilter: ['style'] });
- }
+function storePanZoomVal(transformMatrix) {
+ localStorage.setItem(storageKey, transformMatrix);
+}
- #restorePanZoomVal(svg) {
- const storedPanZoomVal = localStorage.getItem(this.#storageKey);
+function observePanZoomChanges(svg) {
+ const observer = new MutationObserver(() => storePanZoomVal(svg.style.transform));
- if (storedPanZoomVal) {
- svg.style.transform = storedPanZoomVal;
- }
- }
+ observer.observe(svg, { attributeFilter: ['style'] });
+}
- #addEventListeners(svg) {
- svg.addEventListener('wheel', e => zoom(svg, e, this.#zoomFactor), { passive: false });
- svg.addEventListener('pointerdown', e => pan(svg, e), { passive: false });
- }
-};
+export default function (svg) {
+ restorePanZoomVal(svg);
+ addEventListeners(svg);
+ observePanZoomChanges(svg);
+}
--
cgit v1.2.3