Pan and zoom surface hook

import { useEffect, useRef, useState, type CSSProperties } from 'react';

type View = { x: number; y: number; k: number };

export function usePanZoom(min = 0.2, max = 5) {
  const containerRef = useRef<HTMLDivElement | null>(null);
  const [view, setView] = useState<View>({ x: 0, y: 0, k: 1 });

  useEffect(() => {
    const el = containerRef.current;
    if (!el) return;

    // Native listener: React's onWheel is passive and cannot stop page scroll.
    const onWheel = (e: WheelEvent) => {
      e.preventDefault();
      const rect = el.getBoundingClientRect();
      const px = e.clientX - rect.left;
      const py = e.clientY - rect.top;
      setView((v) => {
        const k = Math.min(max, Math.max(min, v.k * Math.exp(-e.deltaY * 0.0015)));
        const wx = (px - v.x) / v.k; // world point under the cursor
        const wy = (py - v.y) / v.k;
        return { k, x: px - wx * k, y: py - wy * k }; // keep it under the cursor
      });
    };

    let last: { x: number; y: number } | null = null;
    const down = (e: PointerEvent) => {
      last = { x: e.clientX, y: e.clientY };
      el.setPointerCapture(e.pointerId);
    };
    const move = (e: PointerEvent) => {
      if (!last) return;
      const dx = e.clientX - last.x;
      const dy = e.clientY - last.y;
      last = { x: e.clientX, y: e.clientY };
      setView((v) => ({ ...v, x: v.x + dx, y: v.y + dy }));
    };
    const up = () => { last = null; };

    el.addEventListener('wheel', onWheel, { passive: false });
    el.addEventListener('pointerdown', down);
    el.addEventListener('pointermove', move);
    el.addEventListener('pointerup', up);
    el.addEventListener('pointercancel', up);
    return () => {
      el.removeEventListener('wheel', onWheel);
      el.removeEventListener('pointerdown', down);
      el.removeEventListener('pointermove', move);
      el.removeEventListener('pointerup', up);
      el.removeEventListener('pointercancel', up);
    };
  }, [min, max]);

  const style: CSSProperties = {
    transform: `translate(${view.x}px, ${view.y}px) scale(${view.k})`,
    transformOrigin: '0 0',
  };
  return { containerRef, style, view, reset: () => setView({ x: 0, y: 0, k: 1 }) };
}