From 79964ead9181d69c5463777fcd2b227a14d30d32 Mon Sep 17 00:00:00 2001
From: Catalin Mititiuc
Date: Wed, 5 Mar 2025 13:57:16 -0800
Subject: Add module to save and restore pan/zoom values on page reload
---
src/modules/with-restore.js | 36 ++++++++++++++++++++++++++++++++++++
1 file changed, 36 insertions(+)
create mode 100644 src/modules/with-restore.js
(limited to 'src/modules')
diff --git a/src/modules/with-restore.js b/src/modules/with-restore.js
new file mode 100644
index 0000000..cfe94f7
--- /dev/null
+++ b/src/modules/with-restore.js
@@ -0,0 +1,36 @@
+import zoom from './zoom';
+import pan from './pan';
+
+const storageKey = "pan-zoom";
+const zoomFactor = 0.25;
+
+function restorePanZoomVal(el) {
+ const storedPanZoomVal = localStorage.getItem(storageKey);
+
+ if (storedPanZoomVal) el.style.transform = storedPanZoomVal;
+}
+
+function addEventListeners(svg, el) {
+ svg.addEventListener("wheel", zoom(el, zoomFactor), { passive: false });
+ svg.addEventListener("pointerdown", pan(el), { passive: false });
+}
+
+function storePanZoomVal(transformMatrix) {
+ localStorage.setItem(storageKey, transformMatrix);
+}
+
+function observePanZoomChanges(el) {
+ const observer = new MutationObserver(() =>
+ storePanZoomVal(el.style.transform),
+ );
+
+ observer.observe(el, { attributeFilter: ["style"] });
+}
+
+export function start(svg, selector) {
+ const targetEl = svg.querySelector(selector);
+
+ restorePanZoomVal(targetEl);
+ addEventListeners(svg, targetEl);
+ observePanZoomChanges(targetEl);
+}
--
cgit v1.2.3