Add module to save and restore pan/zoom values on page reload

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';

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"

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",

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),

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);
+}