src/modules/with-restore.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

import zoom from './zoom';
import pan from './pan';

const storageKey = "pan-zoom";
const zoomFactor = 0.25;

function restorePanZoomVal(el) {
  const storedPanZoomVal = localStorage.getItem(storageKey);

  if (storedPanZoomVal) el.style.transform = storedPanZoomVal;
}

function addEventListeners(svg, el) {
  svg.addEventListener("wheel", zoom(el, zoomFactor), { passive: false });
  svg.addEventListener("pointerdown", pan(el), { 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, selector) {
  const targetEl = svg.querySelector(selector);

  restorePanZoomVal(targetEl);
  addEventListeners(svg, targetEl);
  observePanZoomChanges(targetEl);
}