Web Dev Solutions

Catalin Mititiuc

aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorCatalin Mititiuc <webdevcat@proton.me>2024-04-22 20:58:17 -0700
committerCatalin Mititiuc <webdevcat@proton.me>2024-04-22 20:58:17 -0700
commitbbf65197db8da4f360e3d460d4eb74d947525622 (patch)
tree988fd03d9c0f5acb48763a97d219e7eb4db805fe
parent9e375ef3734301f5527b8308f4813a067d3d53fb (diff)
Extract panzoom logic into separate module
Diffstat
-rw-r--r--src/index.js46
-rw-r--r--src/modules/panzoom.js44
2 files changed, 46 insertions, 44 deletions
diff --git a/src/index.js b/src/index.js
index 63925b1..89893b6 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,48 +1,6 @@
-import { pan, zoom } from 'svg-pan-zoom';
+import PanZoom from './modules/panzoom.js';
import Game from './modules/game.js';
-const PanZoom = new function () {
- const storageKey = 'pan-zoom';
-
- function storePanZoomVal(transformMatrix) {
- localStorage.setItem(storageKey, transformMatrix);
- }
-
- function observePanZoomChanges(svg) {
- const observer = new MutationObserver(() => storePanZoomVal(svg.style.transform));
-
- observer.observe(svg, { attributeFilter: ['style'] });
- }
-
- function restorePanZoomVal(svg) {
- const storedPanZoomVal = localStorage.getItem(storageKey);
-
- if (storedPanZoomVal) {
- svg.style.transform = storedPanZoomVal;
- }
- }
-
- function addEventListeners(svg) {
- svg.addEventListener('wheel', e => {
- e.preventDefault();
-
- zoom(svg, e);
- }, { passive: false });
-
- svg.addEventListener('pointerdown', e => {
- e.preventDefault();
-
- pan(svg, e);
- }, { passive: false });
- }
-
- this.start = function (svg) {
- restorePanZoomVal(svg);
- addEventListeners(svg);
- observePanZoomChanges(svg);
- };
-};
-
const RecordSheet = new function () {
this.unSelect = function () {
let selected = this.getSelected();
@@ -88,7 +46,7 @@ window.addEventListener('load', () => {
const svgns = "http://www.w3.org/2000/svg",
recordSheetVisibility = document.querySelector('#content input[type="checkbox"].visible');
- PanZoom.start(svg);
+ new PanZoom(svg);
const distanceOutput = document.getElementById('status');
diff --git a/src/modules/panzoom.js b/src/modules/panzoom.js
new file mode 100644
index 0000000..38b6b08
--- /dev/null
+++ b/src/modules/panzoom.js
@@ -0,0 +1,44 @@
+import { pan, zoom } from 'svg-pan-zoom';
+
+export default class PanZoom {
+ #storageKey = 'pan-zoom';
+
+ constructor(svg) {
+ this.#restorePanZoomVal(svg);
+ this.#addEventListeners(svg);
+ this.#observePanZoomChanges(svg);
+ }
+
+ #storePanZoomVal(transformMatrix) {
+ localStorage.setItem(this.#storageKey, transformMatrix);
+ }
+
+ #observePanZoomChanges(svg) {
+ const observer =
+ new MutationObserver(() => this.#storePanZoomVal(svg.style.transform));
+
+ observer.observe(svg, { attributeFilter: ['style'] });
+ }
+
+ #restorePanZoomVal(svg) {
+ const storedPanZoomVal = localStorage.getItem(this.#storageKey);
+
+ if (storedPanZoomVal) {
+ svg.style.transform = storedPanZoomVal;
+ }
+ }
+
+ #addEventListeners(svg) {
+ svg.addEventListener('wheel', e => {
+ e.preventDefault();
+
+ zoom(svg, e);
+ }, { passive: false });
+
+ svg.addEventListener('pointerdown', e => {
+ e.preventDefault();
+
+ pan(svg, e);
+ }, { passive: false });
+ }
+};