Extract panzoom logic into separate module

src/index.js

@@ -1,48 +1,6 @@
-import { pan, zoom } from 'svg-pan-zoom';
+import PanZoom from './modules/panzoom.js';
 import Game from './modules/game.js';
 
-const PanZoom = new function () {
-  const storageKey = 'pan-zoom';
-
-  function storePanZoomVal(transformMatrix) {
-    localStorage.setItem(storageKey, transformMatrix);
-  }
-
-  function observePanZoomChanges(svg) {
-    const observer = new MutationObserver(() => storePanZoomVal(svg.style.transform));
-
-    observer.observe(svg, { attributeFilter: ['style'] });
-  }
-
-  function restorePanZoomVal(svg) {
-    const storedPanZoomVal = localStorage.getItem(storageKey);
-
-    if (storedPanZoomVal) {
-      svg.style.transform = storedPanZoomVal;
-    }
-  }
-
-  function addEventListeners(svg) {
-    svg.addEventListener('wheel', e => {
-      e.preventDefault();
-
-      zoom(svg, e);
-    }, { passive: false });
-
-    svg.addEventListener('pointerdown', e => {
-      e.preventDefault();
-
-      pan(svg, e);
-    }, { passive: false });
-  }
-
-  this.start = function (svg) {
-    restorePanZoomVal(svg);
-    addEventListeners(svg);
-    observePanZoomChanges(svg);
-  };
-};
-
 const RecordSheet = new function () {
   this.unSelect = function () {
     let selected = this.getSelected();
@@ -88,7 +46,7 @@ window.addEventListener('load', () => {
   const svgns = "http://www.w3.org/2000/svg",
     recordSheetVisibility = document.querySelector('#content input[type="checkbox"].visible');
 
-  PanZoom.start(svg);
+  new PanZoom(svg);
 
   const distanceOutput = document.getElementById('status');
 

src/modules/panzoom.js

@@ -0,0 +1,44 @@
+import { pan, zoom } from 'svg-pan-zoom';
+
+export default class PanZoom {
+  #storageKey = 'pan-zoom';
+
+  constructor(svg) {
+    this.#restorePanZoomVal(svg);
+    this.#addEventListeners(svg);
+    this.#observePanZoomChanges(svg);
+  }
+
+  #storePanZoomVal(transformMatrix) {
+    localStorage.setItem(this.#storageKey, transformMatrix);
+  }
+
+  #observePanZoomChanges(svg) {
+    const observer =
+      new MutationObserver(() => this.#storePanZoomVal(svg.style.transform));
+
+    observer.observe(svg, { attributeFilter: ['style'] });
+  }
+
+  #restorePanZoomVal(svg) {
+    const storedPanZoomVal = localStorage.getItem(this.#storageKey);
+
+    if (storedPanZoomVal) {
+      svg.style.transform = storedPanZoomVal;
+    }
+  }
+
+  #addEventListeners(svg) {
+    svg.addEventListener('wheel', e => {
+      e.preventDefault();
+
+      zoom(svg, e);
+    }, { passive: false });
+
+    svg.addEventListener('pointerdown', e => {
+      e.preventDefault();
+
+      pan(svg, e);
+    }, { passive: false });
+  }
+};