const board = document.getElementById("board");
const parent = board.parentElement;

let transforms = { x: 0, y: 0, scale: 1 };

const panzoom = Panzoom(board, {
  startScale: transforms.scale,
  startX: transforms.x,
  startY: transforms.y,
  canvas: true,
});

parent.addEventListener("wheel", panzoom.zoomWithWheel);
// No function bind needed

// This demo binds to shift + wheel
parent.addEventListener("wheel", function (event) {
  if (!event.shiftKey) return;
  panzoom.zoomWithWheel(event);
});

board.addEventListener("panzoomchange", (event) => {
  transforms = event.detail; // => { x: 0, y: 0, scale: 1 }
});

setTimeout(() => {
  html2canvas(board, { useCORS: true }).then((canvas) => {
    document.body.appendChild(canvas);
  });
}, 4000);