Function enableDragAndZoom

scripts/magnify_image.js:1258–1399

(element, container, onUpdateCallback)

  return () => target.removeEventListener(event, callback, options);
}
function enableDragAndZoom(element, container, onUpdateCallback) {
  // set style
  const className = "ufs-drag-and-zoom";
  element.classList.add(className);

  let style = document.createElement("style");
  style.textContent = `
    .${className} {
      cursor: grab;
      position: relative !important;
      -webkit-user-select: none !important;
      -moz-user-select: none !important;
      -ms-user-select: none !important;
      user-select: none !important;
      -khtml-user-select: none;
      max-width: unset !important;
      max-height: unset !important;
      min-width: unset !important;
      min-height: unset !important;
      -webkit-user-drag: none !important;
    }`;
  (container || element).appendChild(style);

  // config
  const lerpSpeed = 0.3;
  const last = { x: 0, y: 0 };
  const mouse = { x: 0, y: 0 };
  const animTarget = {
    left: parseFloat(element.style.left),
    top: parseFloat(element.style.top),
    width: parseFloat(element.style.width),
    height: parseFloat(element.style.height),
  };

  let run = true;
  function animate() {
    let updated = false;
    let updatedValue = {};
    for (let prop in animTarget) {
      const currentValue = parseFloat(element.style[prop]);
      const targetValue = animTarget[prop];
      let del = Math.abs(targetValue - currentValue);

      if (del > 0.1) {
        const newValue =
          del < 1 ? targetValue : lerp(currentValue, targetValue, lerpSpeed);
        element.style[prop] = newValue + "px";
        updatedValue[prop] = newValue;
        updated = true;
      }
    }
    if (updated) onUpdateCallback?.(updatedValue);
    if (run) requestAnimationFrame(animate);
  }

  animate();

  // Mouse down event listener