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) {
const targetEl = svg.querySelector('.gameboard');
svg.addEventListener('wheel', e => zoom(targetEl, e, zoomFactor), { passive: false });
svg.addEventListener('pointerdown', e => pan(svg, targetEl, 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);
}