From 90fe01caaf5b8e0488aef15eb5c76f1e87145797 Mon Sep 17 00:00:00 2001
From: Catalin Mititiuc
Date: Fri, 9 Aug 2024 10:22:44 -0700
Subject: Extract programmatic pan coord calculations into gameboard module
---
src/modules/gameboard.js | 33 +++++++++++++++++++++++++--------
src/modules/pan-zoom.js | 20 +++++---------------
2 files changed, 30 insertions(+), 23 deletions(-)
(limited to 'src')
diff --git a/src/modules/gameboard.js b/src/modules/gameboard.js
index 4218833..4407577 100644
--- a/src/modules/gameboard.js
+++ b/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'));
diff --git a/src/modules/pan-zoom.js b/src/modules/pan-zoom.js
index 5e224e8..76c77f6 100644
--- a/src/modules/pan-zoom.js
+++ b/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) {
--
cgit v1.2.3