ccm/btroops
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update pan-zoom node package

Browse Source
This commit is contained in:
Catalin Constantin Mititiuc 2025-03-05 14:11:22 -08:00
parent be42c989cf
commit 7fd054a728
4 changed files with 12 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
package-lock.json generated
View File

@ -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",

2
package.json
View File

@ -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"
}
}

16
src/index.js
View File

@ -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());

33
src/modules/pan-zoom.js
View File

@ -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);
}