WIP: auto-pan map to selected counter

node_modules/pan-zoom/src/modules/pan.js

@@ -0,0 +1,86 @@
+import getComputedTransformMatrix from './utils.js';
+
+const minDistanceThreshold = 5;
+
+function distanceBetween({ x: x1, y: y1 }, { x: x2, y: y2 }) {
+  return Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2);
+}
+
+function minDistanceThresholdIsMet(startPt, endPt) {
+  return distanceBetween(startPt, endPt) >= minDistanceThreshold;
+}
+
+function stopEventPropagationToChildren(el, type) {
+  el.addEventListener(type, e => e.stopPropagation(), { capture: true, once: true });
+}
+
+function getTranslateMatrix(startPt, movePt) {
+  const translateMatrix = new DOMMatrix();
+
+  return translateMatrix.translate(movePt.x - startPt.x, movePt.y - startPt.y);
+}
+
+export function manualPan(gb, counter) {
+  const mtx = getComputedTransformMatrix(gb),
+    inverseScreenCTM = gb.getScreenCTM().inverse();
+
+  const counterRect = counter.getBoundingClientRect();
+  const mapRect = document.querySelector('object').getBoundingClientRect();
+
+  let startPt = new DOMPoint(counterRect.x, counterRect.y);
+  let movePt = new DOMPoint(mapRect.width / 2, mapRect.height / 2);
+
+  startPt = startPt.matrixTransform(inverseScreenCTM);
+  movePt = movePt.matrixTransform(inverseScreenCTM);
+
+  gb.style.transition = 'transform 0.5s';
+  gb.style.transform = mtx.multiply(getTranslateMatrix(startPt, movePt));
+  gb.addEventListener('transitionend', () => gb.style.transition = '');
+}
+
+export default function (svg, el, e) {
+  e.preventDefault();
+
+  const mtx = getComputedTransformMatrix(el),
+    inverseScreenCTM = el.getScreenCTM().inverse();
+
+  let startPt = new DOMPoint(e.clientX, e.clientY),
+    movePt = new DOMPoint(),
+    isPanning = false;
+
+  function pointerMove(e) {
+    movePt.x = e.clientX;
+    movePt.y = e.clientY;
+
+    if (!isPanning && minDistanceThresholdIsMet(startPt, movePt)) {
+      isPanning = true;
+      //e.target.setPointerCapture(e.pointerId);
+
+      startPt.x = e.clientX;
+      startPt.y = e.clientY;
+      startPt = startPt.matrixTransform(inverseScreenCTM);
+
+      stopEventPropagationToChildren(el, 'click');
+    }
+
+    if (isPanning) {
+      movePt.x = e.clientX;
+      movePt.y = e.clientY;
+      movePt = movePt.matrixTransform(inverseScreenCTM);
+
+      el.style.transform = mtx.multiply(getTranslateMatrix(startPt, movePt));
+    }
+  }
+
+  svg.addEventListener('pointermove', pointerMove);
+
+  svg.addEventListener(
+    'pointerup',
+    () => {
+      svg.removeEventListener('pointermove', pointerMove);
+      const t1Rect = t1.getBoundingClientRect();
+      console.log('trooper1 DOM x,y', t1Rect.x, t1Rect.y);
+    },
+    { once: true }
+  );
+}