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
---
index.js | 5 +++--
package-lock.json | 4 ++--
package.json | 2 +-
src/app.js | 8 ++++----
src/modules/with-restore.js | 36 ++++++++++++++++++++++++++++++++++++
5 files changed, 46 insertions(+), 9 deletions(-)
create mode 100644 src/modules/with-restore.js
diff --git a/index.js b/index.js
index c0afa1b..c7af525 100644
--- a/index.js
+++ b/index.js
@@ -1,2 +1,3 @@
-export { default as pan, programmaticPan } from './src/modules/pan.js';
-export { default as zoom } from './src/modules/zoom.js';
+export { default as pan, programmaticPan } from './src/modules/pan';
+export { default as zoom } from './src/modules/zoom';
+export * as withRestore from './src/modules/with-restore';
diff --git a/package-lock.json b/package-lock.json
index 44f82aa..3bc25c7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
{
"name": "pan-zoom",
- "version": "0.2.0",
+ "version": "0.3.0",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "pan-zoom",
- "version": "0.2.0",
+ "version": "0.3.0",
"devDependencies": {
"esbuild": "^0.20.2",
"esbuild-server": "^0.3.0"
diff --git a/package.json b/package.json
index b99e239..46dcee4 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "pan-zoom",
- "version": "0.2.0",
+ "version": "0.3.0",
"browser": "index.js",
"devDependencies": {
"esbuild": "^0.20.2",
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