Update pan-zoom node package

src/index.js

@@ -1,10 +1,10 @@
-import * as panzoom from './modules/pan-zoom.js';
-import * as gameboard from './modules/gameboard.js';
-import * as recordSheet from './modules/record_sheet.js';
-import * as mapSelectDialog from './modules/map_select_dialog.js';
-import { Observable } from './modules/observable.js';
-import { requestResource, build } from './modules/scenario.js';
-import { scenarios } from './modules/scenarios.js';
+import { withRestore as panzoom } from 'pan-zoom';
+import * as gameboard from './modules/gameboard';
+import * as recordSheet from './modules/record_sheet';
+import * as mapSelectDialog from './modules/map_select_dialog';
+import { Observable } from './modules/observable';
+import { requestResource, build } from './modules/scenario';
+import { scenarios } from './modules/scenarios';
 
 globalThis.svgns = 'http://www.w3.org/2000/svg';
 
@@ -79,7 +79,7 @@ async function buildScenario(req) {
   mapResourceEl.style.opacity = 1;
   mapPlaceholder.style.opacity = 0;
 
-  panzoom.start(template);
+  panzoom.start(template, '.gameboard');
   gameboard.start(template);
 
   // recordSheet.start(svg.querySelector('.start-locations'), gameboard.getUnits());

src/modules/pan-zoom.js

@@ -1,33 +0,0 @@
-import { pan, zoom } from 'pan-zoom';
-
-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) {
-  const targetEl = svg.querySelector('.gameboard');
-
-  restorePanZoomVal(targetEl);
-  addEventListeners(svg, targetEl);
-  observePanZoomChanges(targetEl);
-}