Web Dev Solutions

Catalin Mititiuc

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); }