<!DOCTYPE html>
<html lang="en" style="scrollbar-gutter:stable;">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="ChUeOAonMUFoFAUTBjYnKCIGFwQXWFQJyLiU2uau-GhkKqTxiLDMaudY">
<title data-suffix=" · Catalin Mititiuc">
WebDevCat.me
· Catalin Mititiuc</title>
<link rel="stylesheet" id="font-bitter-css" href="//fonts.googleapis.com/css?family=Bitter:400,700" type="text/css" media="screen">
<link phx-track-static rel="stylesheet" href="/assets/app-131585bb1e255488c3d2558ee5c81330.css?vsn=d">
<link phx-track-static rel="stylesheet" href="/assets/cgit-313ed4244ed6cc8d5b67d6fbb4ab18c8.css?vsn=d">
<style>
article > * { max-width: unset; }
div#cgit table.list {
table-layout: auto;
width: 100%;
display: table;
}
div#cgit div.content {
overflow: scroll;
}
div#cgit table.tabs {
table-layout: auto;
width: 100%;
display: table;
}
div#cgit table.blob {
table-layout: auto;
width: 100%;
display: table;
}
div#cgit table.tabs {
table-layout: auto;
width: 100%;
display: table;
}
td.linenumbers { width: 1px; }
td.lines { max-width: 1px; overflow: hidden; }
td.linenumbers pre, td.lines pre {
line-height: 1.25em;
}
pre { overflow-x: scroll; overflow-y: hidden; }
code { font-size: unset; }
</style>
<script defer phx-track-static type="text/javascript" src="/assets/app-7bb68f31e771b77e6d1026a2eca15d48.js?vsn=d">
</script>
</head>
<body class="bg-white">
<header>
<div style="display: inline-block;">
<h1><a href="/">Web Dev Solutions</a></h1>
<h3 style="text-align: left">Catalin Mititiuc</h3>
</div>
</header>
<main>
<article>
From b443b37a1110866db1352cf201f14f1916cd217b Mon Sep 17 00:00:00 2001
From: Catalin Mititiuc <webdevcat@proton.me>
Date: Mon, 22 Apr 2024 11:43:31 -0700
Subject: Update storing pan & zoom changes to localStorage
---
src/index.js | 38 ++++++++++++++++----------------------
1 file changed, 16 insertions(+), 22 deletions(-)
(limited to 'src/index.js')
diff --git a/src/index.js b/src/index.js
index 84001d4..cb746f4 100644
--- a/src/index.js
+++ b/src/index.js
@@ -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);
};
};
--
cgit v1.2.3
</article>
</main>
<footer>
<p>100% Human Made, No AI Used</p>
<p>stasis 0.2.12</p>
</footer>
</body>
</html>