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

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