Extract programmatic pan coord calculations into gameboard module

src/modules/gameboard.js

@@ -2,15 +2,13 @@ import * as firingArc from './game/firing_arc.js';
 import * as sightLine from './game/sight_line.js';
 import * as soldier from './game/soldier.js';
 import { Observable } from './observable';
+import { programmaticPan } from 'pan-zoom';
 
-
-import { manualPan } from 'pan-zoom';
+const frontmostStore = new Map();
 
 let svg,
   placing = [];
 
-const frontmostStore = new Map();
-
 function getCellContents(cell) {
   return cell.querySelectorAll('*:not(use[href="#hex"])');
 }
@@ -184,6 +182,27 @@ function selectOffBoard() {
   Observable.notify('select', this, { revealRecord: true });
 }
 
+function panMapToCounter(counter) {
+  const gb = svg.querySelector('.gameboard');
+
+  if (gb.contains(counter)) {
+    const counterRect = counter.getBoundingClientRect();
+    const mapRect = svg.parentNode.defaultView.frameElement.getBoundingClientRect();
+
+    const counterCoords = {
+      clientX: counterRect.x + counterRect.width / 2,
+      clientY: counterRect.y + counterRect.height / 2
+    };
+
+    const mapViewportCenterCoords = {
+      clientX: mapRect.width / 2,
+      clientY: mapRect.height / 2
+    };
+
+    programmaticPan(gb, counterCoords, mapViewportCenterCoords);
+  }
+}
+
 function select(data, opts) {
   const counter = data && (soldier.getCounter(svg, data) || soldier.createCounter(data));
   const isSelected = data && data.classList && data.classList.contains('selected');
@@ -192,10 +211,8 @@ function select(data, opts) {
 
   if (isSelected || !data) return;
 
-  if (opts?.revealCounter && document.querySelector('#auto-center-map').checked) {
-    const gb = svg.querySelector('.gameboard');
-    if (gb.contains(counter)) manualPan(gb, counter);
-  }
+  if (opts?.revealCounter && document.querySelector('#auto-center-map').checked)
+    panMapToCounter(counter);
 
   counter.classList.add(soldier.getSelectedClass());
   firingArc.get(svg, counter).forEach(el => el.removeAttribute('clip-path'));

src/modules/pan-zoom.js

@@ -1,27 +1,17 @@
 import { pan, zoom } from 'pan-zoom';
 
-const storageKey = 'pan-zoom',
-  zoomFactor = 0.25;
+const storageKey = 'pan-zoom';
+const zoomFactor = 0.25;
 
 function restorePanZoomVal(el) {
   const storedPanZoomVal = localStorage.getItem(storageKey);
 
-  if (storedPanZoomVal) {
-    el.style.transform = storedPanZoomVal;
-  }
+  if (storedPanZoomVal) el.style.transform = storedPanZoomVal;
 }
 
 function addEventListeners(svg, el) {
-  svg.addEventListener('wheel', e => zoom(el, e, zoomFactor), { passive: false });
-  svg.addEventListener('pointerdown', e => {
-    if (e.button === 0) {
-      e.target.setPointerCapture(e.pointerId);
-      pan(svg, el, e), { passive: false };
-    }
-  });
-  svg.addEventListener('pointermove', e => {
-    console.log('clientX,clientY', `${e.clientX},${e.clientY}`);
-  });
+  svg.addEventListener('wheel', zoom(el, zoomFactor), { passive: false });
+  svg.addEventListener('pointerdown', pan(el), { passive: false });
 }
 
 function storePanZoomVal(transformMatrix) {