Reactで、画像をホイールで拡大してドラッグで動かす方法

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

type Props = {
  src: string;
  alt: string;
  width: number; // 枠の幅（px）。画像はこの幅で表示する
  height: number; // 枠の高さ（px）
};

// 拡大率と、画像の左上の位置（枠の左上からの px）
type View = { scale: number; x: number; y: number };

const MIN_SCALE = 1;
const MAX_SCALE = 8;
// ホイールの deltaY が 100 のとき、約 1.22 倍（e の 0.2 乗）にする
const ZOOM_SPEED = 0.002;

// 画像が枠の外へ逃げて、枠の中に空きができないように位置を収める
function clampView(v: View, width: number, height: number): View {
  const scale = Math.min(MAX_SCALE, Math.max(MIN_SCALE, v.scale));
  const minX = width - width * scale;
  const minY = height - height * scale;
  return {
    scale,
    x: Math.min(0, Math.max(minX, v.x)),
    y: Math.min(0, Math.max(minY, v.y)),
  };
}

// 枠の中の点 (px, py) の下にある画像の位置を動かさずに、拡大率を nextScale にする
function zoomAt(v: View, nextScale: number, px: number, py: number, width: number, height: number): View {
  const scale = Math.min(MAX_SCALE, Math.max(MIN_SCALE, nextScale));
  // (px, py) の下にある点の、画像の上での位置（拡大率 1 のときの px）
  const ix = (px - v.x) / v.scale;
  const iy = (py - v.y) / v.scale;
  return clampView({ scale, x: px - ix * scale, y: py - iy * scale }, width, height);
}

type Drag = { pointerId: number; startX: number; startY: number; origin: View };

export function ZoomPanImage({ src, alt, width, height }: Props) {
  const [view, setView] = useState<View>({ scale: 1, x: 0, y: 0 });
  const frameRef = useRef<HTMLDivElement>(null);
  const drag = useRef<Drag | null>(null);

  // wheel は addEventListener で、passive: false を付けて登録する
  useEffect(() => {
    const el = frameRef.current;
    if (!el) return;
    function handleWheel(e: WheelEvent) {
      e.preventDefault(); // ページのスクロールを止める
      const rect = el!.getBoundingClientRect();
      const px = e.clientX - rect.left;
      const py = e.clientY - rect.top;
      const factor = Math.exp(-e.deltaY * ZOOM_SPEED);
      // 登録は1回だけなので、今の view は更新用の関数で受け取る
      setView((v) => zoomAt(v, v.scale * factor, px, py, width, height));
    }
    el.addEventListener('wheel', handleWheel, { passive: false });
    return () => el.removeEventListener('wheel', handleWheel);
  }, [width, height]);

  function handlePointerDown(e: PointerEvent<HTMLDivElement>) {
    if (e.pointerType === 'mouse' && e.button !== 0) return;
    e.currentTarget.setPointerCapture(e.pointerId);
    drag.current = { pointerId: e.pointerId, startX: e.clientX, startY: e.clientY, origin: view };
  }

  function handlePointerMove(e: PointerEvent<HTMLDivElement>) {
    const d = drag.current;
    if (!d || d.pointerId !== e.pointerId) return;
    const next = {
      scale: d.origin.scale,
      x: d.origin.x + (e.clientX - d.startX),
      y: d.origin.y + (e.clientY - d.startY),
    };
    setView(clampView(next, width, height));
  }

  function handlePointerEnd(e: PointerEvent<HTMLDivElement>) {
    if (drag.current?.pointerId === e.pointerId) drag.current = null;
  }

  // ボタンからは、枠の中心を基準に拡大・縮小する
  function zoomBy(factor: number) {
    setView((v) => zoomAt(v, v.scale * factor, width / 2, height / 2, width, height));
  }

  return (
    <div className="zoom-pan">
      <div
        ref={frameRef}
        className="zoom-frame"
        style={{ width, height }}
        onPointerDown={handlePointerDown}
        onPointerMove={handlePointerMove}
        onPointerUp={handlePointerEnd}
        onPointerCancel={handlePointerEnd}
      >
        <img
          src={src}
          alt={alt}
          width={width}
          height={height}
          draggable={false}
          style={{ transform: `translate(${view.x}px, ${view.y}px) scale(${view.scale})` }}
        />
      </div>
      <div className="zoom-controls">
        <button type="button" onClick={() => zoomBy(1 / 1.5)} disabled={view.scale <= MIN_SCALE}>
          縮小
        </button>
        <output aria-live="polite">{Math.round(view.scale * 100)}%</output>
        <button type="button" onClick={() => zoomBy(1.5)} disabled={view.scale >= MAX_SCALE}>
          拡大
        </button>
        <button type="button" onClick={() => setView({ scale: 1, x: 0, y: 0 })}>
          元に戻す
        </button>
      </div>
    </div>
  );
}

.zoom-frame {
  overflow: hidden; /* 拡大した画像が、枠の外にはみ出して見えないようにする */
  position: relative;
  outline: 1px solid #9aa5ab; /* border にすると、getBoundingClientRect() の左上と画像の左上がずれる */
  cursor: grab;
  touch-action: none; /* タッチの動きを、ブラウザのスクロールや拡大に使わせない */
  user-select: none;
}
.zoom-frame:active { cursor: grabbing; }

.zoom-frame img {
  display: block;
  transform-origin: 0 0; /* 拡大の基準を画像の左上にする */
}

import { ZoomPanImage } from './ZoomPanImage';

export function App() {
  return (
    <main>
      <ZoomPanImage src="map.png" alt="町の地図（マス目に A1〜H6 の番号付き）" width={320} height={240} />
    </main>
  );
}

ix = (px - x) / scale
iy = (py - y) / scale

x' = px - ix * scale'
y' = py - iy * scale'

上へ（deltaY -100）1回目: 表示 122% / translate(-17.7px, -17.7px) scale(1.2214) / scrollY 0 / カーソルの下: (80, 80)
上へ（deltaY -100）2回目: 表示 149% / translate(-39.3px, -39.3px) scale(1.4918) / scrollY 0 / カーソルの下: (80, 80)
上へ（deltaY -100）3回目: 表示 182% / translate(-65.8px, -65.8px) scale(1.8221) / scrollY 0 / カーソルの下: (80, 80)
下へ（deltaY +100）1回目: 表示 149% / translate(-39.3px, -39.3px) scale(1.4918) / scrollY 0 / カーソルの下: (80, 80)
下へ（deltaY +100）2回目: 表示 122% / translate(-17.7px, -17.7px) scale(1.2214) / scrollY 0 / カーソルの下: (80, 80)
下へ（deltaY +100）3回目: 表示 100% / translate(0px, 0px) scale(1) / scrollY 0 / カーソルの下: (80, 80)
下へ（deltaY +100）4回目: 表示 100% / translate(0px, 0px) scale(1) / scrollY 0 / カーソルの下: (80, 80)
上へ12回: 表示 800% / translate(-560px, -560px) scale(8) / scrollY 0 / カーソルの下: (80, 80)

比べる用（拡大率だけを変え、位置はそのまま）:
  1回目: 表示 122% / translate(0px, 0px) scale(1.2214) / scrollY 0 / カーソルの下: (65.5, 65.5)
  2回目: 表示 149% / translate(0px, 0px) scale(1.4918) / scrollY 0 / カーソルの下: (53.6, 53.6)
  3回目: 表示 182% / translate(0px, 0px) scale(1.8221) / scrollY 0 / カーソルの下: (43.9, 43.9)

枠の getBoundingClientRect() の左上: (20, 16) / 画像の左上: (21, 17)
1回目: 表示 122% / translate(-17.9px, -17.9px) scale(1.2214) / scrollY 0 / カーソルの下: (80.2, 80.2)
2回目: 表示 149% / translate(-39.8px, -39.8px) scale(1.4918) / scrollY 0 / カーソルの下: (80.3, 80.3)
3回目: 表示 182% / translate(-66.6px, -66.6px) scale(1.8221) / scrollY 0 / カーソルの下: (80.5, 80.5)

記事のコード（addEventListener と passive: false）:
  -100 → 表示 122% / translate(-17.7px, -17.7px) scale(1.2214) / scrollY 0
  -100 → 表示 149% / translate(-39.3px, -39.3px) scale(1.4918) / scrollY 0
  +100 → 表示 122% / translate(-17.7px, -17.7px) scale(1.2214) / scrollY 0
比べる用（JSX の onWheel）:
  -100 → 表示 122% / translate(-17.7px, -17.7px) scale(1.2214) / scrollY 0
  -100 → 表示 149% / translate(-39.3px, -39.3px) scale(1.4918) / scrollY 0
  +100 → 表示 122% / translate(-17.7px, 0px) scale(1.2214) / scrollY 100

onwheel.html: [error] Unable to preventDefault inside passive event listener invocation.

枠の下でホイール（deltaY +100）: 表示 100% / translate(0px, 0px) scale(1) / scrollY 100

比べる用（更新用の関数を使わず、view をそのまま読む）:
  1回目: 表示 122% / translate(-17.7px, -17.7px) scale(1.2214) / scrollY 0 / カーソルの下: (80, 80)
  2回目: 表示 122% / translate(-17.7px, -17.7px) scale(1.2214) / scrollY 0 / カーソルの下: (80, 80)
  3回目: 表示 122% / translate(-17.7px, -17.7px) scale(1.2214) / scrollY 0 / カーソルの下: (80, 80)

ドラッグの前: 表示 182% / translate(-65.8px, -65.8px) scale(1.8221) / scrollY 0
右へ30px・下へ20px動かしている間: 表示 182% / translate(-35.8px, -45.8px) scale(1.8221) / scrollY 0
離したあと: 表示 182% / translate(-35.8px, -45.8px) scale(1.8221) / scrollY 0
左へ150px・下へ300px（枠の外まで）動かしている間: 表示 182% / translate(-185.8px, 0px) scale(1.8221) / scrollY 0
離したあと: 表示 182% / translate(-185.8px, 0px) scale(1.8221) / scrollY 0
右へ400px・上へ400px動かして離したあと: 表示 182% / translate(0px, -197.3px) scale(1.8221) / scrollY 0

拡大ボタンを2回: 表示 225% / translate(-200px, -150px) scale(2.25) / scrollY 0
指で右へ40px・下へ30px動かす: 表示 225% / translate(-160px, -120px) scale(2.25) / scrollY 0 / イベント: pointerdown pointerup

元に戻す: 表示 100% / translate(0px, 0px) scale(1) / scrollY 0 / 縮小ボタン disabled: true
拡大を1回: 表示 150% / translate(-80px, -60px) scale(1.5) / scrollY 0 / 枠の中心の下: (160, 120)
拡大をさらに5回: 表示 800% / translate(-1120px, -840px) scale(8) / scrollY 0 / 拡大ボタン disabled: true

「拡大」にフォーカスして Enter: 表示 150% / translate(-80px, -60px) scale(1.5) / scrollY 0
Tab のあとのフォーカス: 元に戻す
Space: 表示 100% / translate(0px, 0px) scale(1) / scrollY 0