39 lines
991 B
JavaScript
39 lines
991 B
JavaScript
import { pan, zoom } from 'pan-zoom';
|
|
|
|
const storageKey = 'pan-zoom',
|
|
zoomFactor = 0.25;
|
|
|
|
function restorePanZoomVal(el) {
|
|
const storedPanZoomVal = localStorage.getItem(storageKey);
|
|
|
|
if (storedPanZoomVal) {
|
|
el.style.transform = storedPanZoomVal;
|
|
}
|
|
}
|
|
|
|
function addEventListeners(svg, el) {
|
|
svg.addEventListener('wheel', e => zoom(el, e, zoomFactor), { passive: false });
|
|
svg.addEventListener('pointerdown', e => {
|
|
e.target.setPointerCapture(e.pointerId);
|
|
pan(svg, el, e), { passive: false };
|
|
});
|
|
}
|
|
|
|
function storePanZoomVal(transformMatrix) {
|
|
localStorage.setItem(storageKey, transformMatrix);
|
|
}
|
|
|
|
function observePanZoomChanges(el) {
|
|
const observer = new MutationObserver(() => storePanZoomVal(el.style.transform));
|
|
|
|
observer.observe(el, { attributeFilter: ['style'] });
|
|
}
|
|
|
|
export function start(svg) {
|
|
const targetEl = svg.querySelector('.gameboard');
|
|
|
|
restorePanZoomVal(targetEl);
|
|
addEventListeners(svg, targetEl);
|
|
observePanZoomChanges(targetEl);
|
|
}
|