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

Update storing pan & zoom changes to localStorage

Browse Source
This commit is contained in:
Catalin Constantin Mititiuc 2024-04-22 11:43:31 -07:00
parent 232d1b1d6a
commit b443b37a11
1 changed files with 16 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/index.js
View File

@ -2,36 +2,31 @@ import { pan, zoom } from 'svg-pan-zoom';
import Game from './modules/game.js'; import Game from './modules/game.js';
const PanZoom = new function () { const PanZoom = new function () {
const vb = 'viewBox'; const storageKey = 'pan-zoom';
let svg;
function storeViewBoxVal() { function storePanZoomVal(transformMatrix) {
localStorage.setItem(vb, svg.getAttribute(vb)); localStorage.setItem(storageKey, transformMatrix);
} }
function observeViewBoxChanges() { function observePanZoomChanges(svg) {
const observer = new MutationObserver(mutations => { const observer = new MutationObserver(() => storePanZoomVal(svg.style.transform));
if (mutations.find(m => m.target == svg && m.attributeName == vb)) {
storeViewBoxVal(svg);
}
});
observer.observe(svg, { attributes: true }); observer.observe(svg, { attributeFilter: ['style'] });
} }
function restoreViewBoxVal() { function restorePanZoomVal(svg) {
const storedVbVal = localStorage.getItem(vb); const storedPanZoomVal = localStorage.getItem(storageKey);
if (storedVbVal) { if (storedPanZoomVal) {
svg.setAttributeNS(null, vb, storedVbVal); svg.style.transform = storedPanZoomVal;
} }
} }
function addEventListeners() { function addEventListeners(svg) {
svg.addEventListener('wheel', e => { svg.addEventListener('wheel', e => {
e.preventDefault(); e.preventDefault();
svg.setAttributeNS(null, vb, zoom(svg, e)); zoom(svg, e);
}, { passive: false }); }, { passive: false });
svg.addEventListener('pointerdown', e => { svg.addEventListener('pointerdown', e => {
@ -41,11 +36,10 @@ const PanZoom = new function () {
}, { passive: false }); }, { passive: false });
} }
this.start = function (el) { this.start = function (svg) {
svg = el; restorePanZoomVal(svg);
restoreViewBoxVal(); addEventListeners(svg);
addEventListeners(); observePanZoomChanges(svg);
observeViewBoxChanges();
}; };
}; };