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/app.js | 8 ++++----
src/modules/with-restore.js | 36 ++++++++++++++++++++++++++++++++++++
2 files changed, 40 insertions(+), 4 deletions(-)
create mode 100644 src/modules/with-restore.js
(limited to 'src')
diff --git a/src/app.js b/src/app.js
index 30b4467..9aac0bc 100644
--- a/src/app.js
+++ b/src/app.js
@@ -1,5 +1,5 @@
-import zoom from './modules/zoom.js';
-import pan from './modules/pan.js';
+import zoom from './modules/zoom';
+import pan from './modules/pan';
const optionalZoomFactor = 0.1,
object = document.querySelector('object');
@@ -14,8 +14,8 @@ window.addEventListener('load', function () {
pointer = svg.querySelector('#pointer'),
options = { passive: false };
- svg.addEventListener('wheel', e => zoom(targetEl, e, optionalZoomFactor), options);
- svg.addEventListener('pointerdown', e => pan(svg, targetEl, e), options);
+ svg.addEventListener('wheel', zoom(targetEl, optionalZoomFactor), options);
+ svg.addEventListener('pointerdown', pan(targetEl), options);
svg.addEventListener('pointermove', e => {
const pt = new DOMPoint(e.clientX, e.clientY),
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