| index : btroops | |
| Virtual board game-aid for BattleTroops, an infantry combat simulator wargame published by FASA in 1989. |
| aboutsummaryrefslogtreecommitdiff |
diff options
| author | Catalin Mititiuc <webdevcat@proton.me> | 2025-03-05 14:11:22 -0800 |
|---|---|---|
| committer | Catalin Mititiuc <webdevcat@proton.me> | 2025-03-05 14:29:37 -0800 |
| commit | 7fd054a72821cad62be4a869e2b0a3e9034543a5 (patch) | |
| tree | d16282a3b54bbc310a56ad86b7fd75392dc0f2f2 | |
| parent | be42c989cf5f3cc28bd3c401983a1a58e4d923c4 (diff) | |
| -rw-r--r-- | package-lock.json | 6 | ||||
| -rw-r--r-- | package.json | 2 | ||||
| -rw-r--r-- | src/index.js | 16 | ||||
| -rw-r--r-- | src/modules/pan-zoom.js | 33 |
4 files changed, 12 insertions, 45 deletions
diff --git a/package-lock.json b/package-lock.json index 060f375..e6307c6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5,7 +5,7 @@ "packages": { "": { "dependencies": { - "pan-zoom": "git://git.webdevcat.me/pan-zoom#cm-programmatic-pan" + "pan-zoom": "git://git.webdevcat.me/pan-zoom.git#v0.3.0" }, "devDependencies": { "esbuild": "^0.20.2", @@ -3819,8 +3819,8 @@ "dev": true }, "node_modules/pan-zoom": { - "version": "0.2.0", - "resolved": "git://git.webdevcat.me/pan-zoom#24a2d7fa807d1a6f1b3cb43761c60d80cb023525" + "version": "0.3.0", + "resolved": "git://git.webdevcat.me/pan-zoom.git#79964ead9181d69c5463777fcd2b227a14d30d32" }, "node_modules/parent-module": { "version": "1.0.1", diff --git a/package.json b/package.json index cef238b..9420e4a 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,6 @@ "test": "jest" }, "dependencies": { - "pan-zoom": "git://git.webdevcat.me/pan-zoom#cm-programmatic-pan" + "pan-zoom": "git://git.webdevcat.me/pan-zoom.git#v0.3.0" } } diff --git a/src/index.js b/src/index.js index 66c8150..384cfea 100644 --- a/src/index.js +++ b/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()); diff --git a/src/modules/pan-zoom.js b/src/modules/pan-zoom.js deleted file mode 100644 index 76c77f6..0000000 --- a/src/modules/pan-zoom.js +++ /dev/null @@ -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); -} |