Fantasy-Map-Generator/modules/zoom.js

"use strict";

// temporary expose to global
let scale = 1;
let viewX = 0;
let viewY = 0;

window.Zoom = (function () {
  function onZoom() {
    const {k, x, y} = d3.event.transform;

    const isScaleChanged = Boolean(scale - k);
    const isPositionChanged = Boolean(viewX - x || viewY - y);
    if (!isScaleChanged && !isPositionChanged) return;

    scale = k;
    viewX = x;
    viewY = y;

    handleZoom(isScaleChanged, isPositionChanged);
  }
  const onZoomDebouced = debounce(onZoom, 50);
  const zoom = d3.zoom().scaleExtent([1, 20]).on("zoom", onZoomDebouced);

  function setZoomBehavior() {
    svg.call(zoom);
  }

  // zoom to a specific point
  function to(x, y, z = 8, d = 2000) {
    const transform = d3.zoomIdentity.translate(x * -z + graphWidth / 2, y * -z + graphHeight / 2).scale(z);
    svg.transition().duration(d).call(zoom.transform, transform);
  }

  // reset zoom to initial
  function reset(d = 1000) {
    svg.transition().duration(d).call(zoom.transform, d3.zoomIdentity);
  }

  function scaleExtent([min, max]) {
    zoom.scaleExtent([min, max]);
  }

  function translateExtent([x1, y1, x2, y2]) {
    zoom.translateExtent([
      [x1, y1],
      [x2, y2]
    ]);
  }

  function scaleTo(element, scale) {
    zoom.scaleTo(element, scale);
  }

  return {setZoomBehavior, to, reset, scaleExtent, translateExtent, scaleTo};
})();