Reactで、ドラッグで回して値を変えるダイヤルを作る方法

import { useRef } from 'react';
import type { KeyboardEvent, PointerEvent } from 'react';

type Props = {
  label: string;
  value: number;
  min?: number;
  max?: number;
  step?: number;
  onChange: (value: number) => void;
};

// つまみが回る範囲（真上を 0 度とし、時計回りを正にする）
const MIN_ANGLE = -135;
const MAX_ANGLE = 135;

function clamp(n: number, lo: number, hi: number) {
  return Math.min(hi, Math.max(lo, n));
}

// 要素の中心から見た、ポインターの向き（-180〜180 度）
function pointerAngle(el: HTMLElement, x: number, y: number) {
  const r = el.getBoundingClientRect();
  const dx = x - (r.left + r.width / 2);
  const dy = y - (r.top + r.height / 2);
  return (Math.atan2(dx, -dy) * 180) / Math.PI;
}

type Drag = {
  pointerId: number;
  lastAngle: number; // 前回の pointermove のときのポインターの向き
  rotation: number; // つまみの角度（端数を持ったまま足していく）
};

export function Knob({ label, value, min = 0, max = 100, step = 1, onChange }: Props) {
  const drag = useRef<Drag | null>(null);

  const toAngle = (v: number) => MIN_ANGLE + ((v - min) / (max - min)) * (MAX_ANGLE - MIN_ANGLE);
  const toValue = (angle: number) => {
    const raw = ((angle - MIN_ANGLE) / (MAX_ANGLE - MIN_ANGLE)) * (max - min);
    return clamp(min + Math.round(raw / step) * step, min, max);
  };

  function handlePointerDown(e: PointerEvent<HTMLDivElement>) {
    if (e.pointerType === 'mouse' && e.button !== 0) return;
    // つまみの外へ出ても、離すまでこの要素にイベントが届くようにする
    e.currentTarget.setPointerCapture(e.pointerId);
    drag.current = {
      pointerId: e.pointerId,
      lastAngle: pointerAngle(e.currentTarget, e.clientX, e.clientY),
      rotation: toAngle(value),
    };
  }

  function handlePointerMove(e: PointerEvent<HTMLDivElement>) {
    const d = drag.current;
    if (!d || d.pointerId !== e.pointerId) return;
    const angle = pointerAngle(e.currentTarget, e.clientX, e.clientY);
    let delta = angle - d.lastAngle;
    // 真下（180 度と -180 度の境目）をまたいだときに、逆向きの大きな差にしない
    if (delta > 180) delta -= 360;
    if (delta < -180) delta += 360;
    d.lastAngle = angle;
    d.rotation = clamp(d.rotation + delta, MIN_ANGLE, MAX_ANGLE);
    const next = toValue(d.rotation);
    if (next !== value) onChange(next);
  }

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

  function handleKeyDown(e: KeyboardEvent<HTMLDivElement>) {
    const keys: Record<string, number> = {
      ArrowRight: value + step,
      ArrowUp: value + step,
      ArrowLeft: value - step,
      ArrowDown: value - step,
      PageUp: value + step * 10,
      PageDown: value - step * 10,
      Home: min,
      End: max,
    };
    if (!(e.key in keys)) return;
    e.preventDefault(); // 矢印キーなどでページがスクロールしないようにする
    onChange(clamp(keys[e.key], min, max));
  }

  const angle = toAngle(value);
  return (
    <div
      className="knob"
      role="slider"
      tabIndex={0}
      aria-label={label}
      aria-valuemin={min}
      aria-valuemax={max}
      aria-valuenow={value}
      onPointerDown={handlePointerDown}
      onPointerMove={handlePointerMove}
      onPointerUp={handlePointerEnd}
      onPointerCancel={handlePointerEnd}
      onKeyDown={handleKeyDown}
    >
      <svg viewBox="0 0 160 160" aria-hidden="true">
        {/* 目盛りの円弧。pathLength を 360 にして、角度をそのまま長さに使う */}
        <circle className="knob-track" cx="80" cy="80" r="72" pathLength={360}
          strokeDasharray="270 360" transform="rotate(135 80 80)" />
        <circle className="knob-fill" cx="80" cy="80" r="72" pathLength={360}
          strokeDasharray={`${angle - MIN_ANGLE} 360`} transform="rotate(135 80 80)" />
        <g transform={`rotate(${angle} 80 80)`}>
          <circle className="knob-body" cx="80" cy="80" r="56" />
          <line className="knob-mark" x1="80" y1="34" x2="80" y2="52" />
        </g>
      </svg>
    </div>
  );
}

import { useState } from 'react';
import { Knob } from './Knob';

export function App() {
  const [volume, setVolume] = useState(50);
  return (
    <main>
      <Knob label="音量" value={volume} onChange={setVolume} />
      <p className="value">音量 <output>{volume}</output></p>
    </main>
  );
}

--- 完成版（差分を足す） ---
真上でつかむ: 50
時計回り: 45度→67 90度→83 135度→100 170度→100 180度→100 185度→100 190度→100 225度→100
戻す: 180度→83 135度→67
値 50 のまま、右でつかんで 1px 動かす: 50
--- 向きをそのまま使う版 ---
真上でつかむ: 50
時計回り: 45度→67 90度→83 135度→100 170度→100 180度→100 185度→0 190度→0 225度→0
戻す: 180度→100 135度→100
値 50 のまま、右でつかんで 1px 動かす: 84
--- 真下の補正なしの版 ---
真上でつかむ: 50
時計回り: 45度→67 90度→83 135度→100 170度→100 180度→100 185度→0 190度→2 225度→15
戻す: 180度→100 135度→83
値 50 のまま、右でつかんで 1px 動かす: 50

--- 完成版：1回の pointermove で大きく動かす ---
値 50 で真上をつかみ、1回で時計回りに 170 度の位置へ: 100
値 50 で真上をつかみ、1回で時計回りに 190 度の位置へ: 0

--- 完成版：つまみの外まで離れて回す ---
  右のまま半径 150px まで外へ出たあとの値: 50
  半径 150px で時計回り: 135度→67 180度→83
  180 度・半径 150px の点: (180, 246)／表示領域 360×320
  つまみの大きさ: 160×160px

.knob {
  display: inline-block;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  cursor: grab;
  /* 指でなぞっても、ページがスクロールしないようにする */
  touch-action: none;
  user-select: none;
}

touch-action: none: 真上から時計回りに 90 度なぞる: 値 83 / scrollY 0 / イベント: pointerdown pointerup
touch-action: auto: 真上から時計回りに 90 度なぞる: 値 56 / scrollY 0 / イベント: pointerdown pointercancel

--- 完成版：キーボード ---
Home→0 ArrowUp→1 ArrowRight→2 ArrowDown→1 PageUp→11 PageUp→21 End→100 ArrowUp→100 PageDown→90 ArrowLeft→89
表示: 音量 89
属性: role=slider aria-label=音量 aria-valuemin=0 aria-valuemax=100