| 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> | 2024-06-14 16:49:36 -0700 |
|---|---|---|
| committer | Catalin Mititiuc <webdevcat@proton.me> | 2024-06-14 16:49:36 -0700 |
| commit | 07ab30fdecfce4ede25e2403fa66a07685eccd4e (patch) | |
| tree | 7a52d2f28491d90cfde255bf72fa608a8087732e /src/modules/pan-zoom.js | |
| parent | ad6ca8dc16c4327e9bbacce45dfe9a5706a6ce4a (diff) | |
Fix restoring zoom on page reload
Diffstat (limited to 'src/modules/pan-zoom.js')
| -rw-r--r-- | src/modules/pan-zoom.js | 26 |
1 files changed, 13 insertions, 13 deletions
diff --git a/src/modules/pan-zoom.js b/src/modules/pan-zoom.js index 97c44e1..e86afe9 100644 --- a/src/modules/pan-zoom.js +++ b/src/modules/pan-zoom.js @@ -3,33 +3,33 @@ import { pan, zoom } from 'pan-zoom'; const storageKey = 'pan-zoom', zoomFactor = 0.25; -function restorePanZoomVal(svg) { +function restorePanZoomVal(el) { const storedPanZoomVal = localStorage.getItem(storageKey); if (storedPanZoomVal) { - svg.style.transform = storedPanZoomVal; + el.style.transform = storedPanZoomVal; } } -function addEventListeners(svg) { - const targetEl = svg.querySelector('.gameboard'); - - svg.addEventListener('wheel', e => zoom(targetEl, e, zoomFactor), { passive: false }); - svg.addEventListener('pointerdown', e => pan(svg, targetEl, e), { passive: false }); +function addEventListeners(svg, el) { + svg.addEventListener('wheel', e => zoom(el, e, zoomFactor), { passive: false }); + svg.addEventListener('pointerdown', e => pan(svg, el, e), { passive: false }); } function storePanZoomVal(transformMatrix) { localStorage.setItem(storageKey, transformMatrix); } -function observePanZoomChanges(svg) { - const observer = new MutationObserver(() => storePanZoomVal(svg.style.transform)); +function observePanZoomChanges(el) { + const observer = new MutationObserver(() => storePanZoomVal(el.style.transform)); - observer.observe(svg, { attributeFilter: ['style'] }); + observer.observe(el, { attributeFilter: ['style'] }); } export function start(svg) { - restorePanZoomVal(svg); - addEventListeners(svg); - observePanZoomChanges(svg); + const targetEl = svg.querySelector('.gameboard'); + + restorePanZoomVal(targetEl); + addEventListeners(svg, targetEl); + observePanZoomChanges(targetEl); } |