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 2025-06-16 22:41:29 -07:00
parent b812884bdf
commit d36236d0fe
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';
const PanZoom = new function () {
const vb = 'viewBox';
let svg;
const storageKey = 'pan-zoom';
function storeViewBoxVal() {
localStorage.setItem(vb, svg.getAttribute(vb));
function storePanZoomVal(transformMatrix) {
localStorage.setItem(storageKey, transformMatrix);
}
function observeViewBoxChanges() {
const observer = new MutationObserver(mutations => {
if (mutations.find(m => m.target == svg && m.attributeName == vb)) {
storeViewBoxVal(svg);
}
});
function observePanZoomChanges(svg) {
const observer = new MutationObserver(() => storePanZoomVal(svg.style.transform));
observer.observe(svg, { attributes: true });
observer.observe(svg, { attributeFilter: ['style'] });
}
function restoreViewBoxVal() {
const storedVbVal = localStorage.getItem(vb);
function restorePanZoomVal(svg) {
const storedPanZoomVal = localStorage.getItem(storageKey);
if (storedVbVal) {
svg.setAttributeNS(null, vb, storedVbVal);
if (storedPanZoomVal) {
svg.style.transform = storedPanZoomVal;
}
}
function addEventListeners() {
function addEventListeners(svg) {
svg.addEventListener('wheel', e => {
e.preventDefault();
svg.setAttributeNS(null, vb, zoom(svg, e));
zoom(svg, e);
}, { passive: false });
svg.addEventListener('pointerdown', e => {
@ -41,11 +36,10 @@ const PanZoom = new function () {
}, { passive: false });
}
this.start = function (el) {
svg = el;
restoreViewBoxVal();
addEventListeners();
observeViewBoxChanges();
this.start = function (svg) {
restorePanZoomVal(svg);
addEventListeners(svg);
observePanZoomChanges(svg);
};
};