Web Dev Solutions

Catalin Mititiuc

From ce98e325656b8419b80d8c248e0469f3a9708322 Mon Sep 17 00:00:00 2001 From: Catalin Mititiuc Date: Sat, 27 Apr 2024 15:58:11 -0700 Subject: Rename some files --- src/modules/pan-zoom.js | 33 +++++++++++++++++++++++++++++++++ 1 file changed, 33 insertions(+) create mode 100644 src/modules/pan-zoom.js (limited to 'src/modules/pan-zoom.js') diff --git a/src/modules/pan-zoom.js b/src/modules/pan-zoom.js new file mode 100644 index 0000000..86f6727 --- /dev/null +++ b/src/modules/pan-zoom.js @@ -0,0 +1,33 @@ +import { pan, zoom } from 'pan-zoom'; + +const storageKey = 'pan-zoom', + zoomFactor = 0.25; + +function restorePanZoomVal(svg) { + const storedPanZoomVal = localStorage.getItem(storageKey); + + if (storedPanZoomVal) { + svg.style.transform = storedPanZoomVal; + } +} + +function addEventListeners(svg) { + svg.addEventListener('wheel', e => zoom(svg, e, zoomFactor), { passive: false }); + svg.addEventListener('pointerdown', e => pan(svg, e), { passive: false }); +} + +function storePanZoomVal(transformMatrix) { + localStorage.setItem(storageKey, transformMatrix); +} + +function observePanZoomChanges(svg) { + const observer = new MutationObserver(() => storePanZoomVal(svg.style.transform)); + + observer.observe(svg, { attributeFilter: ['style'] }); +} + +export function start(svg) { + restorePanZoomVal(svg); + addEventListeners(svg); + observePanZoomChanges(svg); +} -- cgit v1.2.3