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

Fix restoring zoom on page reload

Browse Source
This commit is contained in:
Catalin Constantin Mititiuc 2025-06-16 22:41:31 -07:00
parent 2d29c6715c
commit 515323feaa
1 changed files with 13 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,33 +3,33 @@ import { pan, zoom } from 'pan-zoom';
const storageKey = 'pan-zoom', const storageKey = 'pan-zoom',
zoomFactor = 0.25; zoomFactor = 0.25;
function restorePanZoomVal(svg) { function restorePanZoomVal(el) {
const storedPanZoomVal = localStorage.getItem(storageKey); const storedPanZoomVal = localStorage.getItem(storageKey);
if (storedPanZoomVal) { if (storedPanZoomVal) {
svg.style.transform = storedPanZoomVal; el.style.transform = storedPanZoomVal;
} }
} }
function addEventListeners(svg) { function addEventListeners(svg, el) {
const targetEl = svg.querySelector('.gameboard'); svg.addEventListener('wheel', e => zoom(el, e, zoomFactor), { passive: false });
svg.addEventListener('pointerdown', e => pan(svg, el, e), { passive: false });
svg.addEventListener('wheel', e => zoom(targetEl, e, zoomFactor), { passive: false });
svg.addEventListener('pointerdown', e => pan(svg, targetEl, e), { passive: false });
} }
function storePanZoomVal(transformMatrix) { function storePanZoomVal(transformMatrix) {
localStorage.setItem(storageKey, transformMatrix); localStorage.setItem(storageKey, transformMatrix);
} }
function observePanZoomChanges(svg) { function observePanZoomChanges(el) {
const observer = new MutationObserver(() => storePanZoomVal(svg.style.transform)); const observer = new MutationObserver(() => storePanZoomVal(el.style.transform));
observer.observe(svg, { attributeFilter: ['style'] }); observer.observe(el, { attributeFilter: ['style'] });
} }
export function start(svg) { export function start(svg) {
restorePanZoomVal(svg); const targetEl = svg.querySelector('.gameboard');
addEventListeners(svg);
observePanZoomChanges(svg); restorePanZoomVal(targetEl);
addEventListeners(svg, targetEl);
observePanZoomChanges(targetEl);
} }