Reactで、ドラッグで範囲を囲んで複数の項目を選ぶ方法

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

export type Item = { id: number; name: string };

type Box = { left: number; top: number; right: number; bottom: number };

type Drag = {
  startX: number;
  startY: number;
  // ドラッグを始める前から選んであった項目（Shift などを押して始めたときだけ）
  base: Set<number>;
  // ドラッグを始める前の選択（取り消されたときに戻す）
  initial: Set<number>;
  // 押した時点で測った、各項目の位置（領域の左上からの px）
  rects: Map<number, Box>;
  // しきい値を超えて動いたか（false のまま離したらクリック）
  moved: boolean;
};

type Props = {
  items: Item[];
  selected: Set<number>;
  onSelectedChange: (next: Set<number>) => void;
  // 'touch'：枠に少しでもかかった項目を選ぶ／'contain'：枠に全体が入った項目だけを選ぶ
  mode?: 'touch' | 'contain';
};

// 押した位置から、この px より動いたら範囲選択とみなす（それまではクリック）
const THRESHOLD = 4;

const clamp = (n: number, min: number, max: number) => Math.min(Math.max(n, min), max);

function hit(box: Box, r: Box, mode: 'touch' | 'contain') {
  if (mode === 'contain') {
    return r.left >= box.left && r.right <= box.right && r.top >= box.top && r.bottom <= box.bottom;
  }
  return r.left < box.right && r.right > box.left && r.top < box.bottom && r.bottom > box.top;
}

const sameSet = (a: Set<number>, b: Set<number>) => a.size === b.size && [...a].every((id) => b.has(id));

export function MarqueeGrid({ items, selected, onSelectedChange, mode = 'touch' }: Props) {
  const areaRef = useRef<HTMLDivElement>(null);
  const drag = useRef<Drag | null>(null);
  // 画面に描く枠。null のときは描かない
  const [box, setBox] = useState<Box | null>(null);

  // ポインターの位置を、領域の左上からの px に直す（領域の外は端に寄せる）
  function toLocal(e: PointerEvent) {
    const area = areaRef.current!;
    const r = area.getBoundingClientRect();
    return {
      x: clamp(e.clientX - r.left - area.clientLeft, 0, area.clientWidth),
      y: clamp(e.clientY - r.top - area.clientTop, 0, area.clientHeight),
    };
  }

  function handlePointerDown(e: PointerEvent<HTMLDivElement>) {
    // 項目の上で押したときは、項目のクリックに任せる
    if (e.button !== 0 || (e.target as HTMLElement).closest('[data-id]')) return;
    const area = areaRef.current!;
    const a = area.getBoundingClientRect();
    const rects = new Map<number, Box>();
    area.querySelectorAll<HTMLElement>('[data-id]').forEach((el) => {
      const r = el.getBoundingClientRect();
      const left = r.left - a.left - area.clientLeft;
      const top = r.top - a.top - area.clientTop;
      rects.set(Number(el.dataset.id), { left, top, right: left + r.width, bottom: top + r.height });
    });
    const { x, y } = toLocal(e);
    const keep = e.shiftKey || e.ctrlKey || e.metaKey;
    drag.current = { startX: x, startY: y, base: keep ? new Set(selected) : new Set(), initial: selected, rects, moved: false };
    // ポインターが領域の外へ出ても、離すまでこの要素にイベントが届くようにする
    e.currentTarget.setPointerCapture(e.pointerId);
  }

  function handlePointerMove(e: PointerEvent<HTMLDivElement>) {
    const d = drag.current;
    if (!d) return;
    const { x, y } = toLocal(e);
    if (!d.moved && Math.hypot(x - d.startX, y - d.startY) <= THRESHOLD) return;
    d.moved = true;
    const next: Box = {
      left: Math.min(d.startX, x),
      top: Math.min(d.startY, y),
      right: Math.max(d.startX, x),
      bottom: Math.max(d.startY, y),
    };
    setBox(next);
    const ids = new Set(d.base);
    for (const [id, r] of d.rects) if (hit(next, r, mode)) ids.add(id);
    // 選ばれた項目が変わったときだけ親に知らせる
    if (!sameSet(ids, selected)) onSelectedChange(ids);
  }

  function handlePointerUp(e: PointerEvent<HTMLDivElement>) {
    const d = drag.current;
    if (!d) return;
    drag.current = null;
    if (e.type === 'pointercancel') {
      // ブラウザに操作を取り上げられたときは、始める前の選択に戻す
      if (d.moved) onSelectedChange(d.initial);
    } else if (!d.moved && !(e.shiftKey || e.ctrlKey || e.metaKey) && selected.size > 0) {
      // 何もない所をクリックしただけなら、選択を外す
      onSelectedChange(new Set());
    }
    setBox(null);
  }

  function handleItemClick(e: MouseEvent<HTMLButtonElement>, id: number) {
    // Ctrl（Mac は Command）を押したクリックと、キーボードでの操作（detail が 0）は、その項目だけを切り替える
    if (e.ctrlKey || e.metaKey || e.detail === 0) {
      const next = new Set(selected);
      if (next.has(id)) next.delete(id);
      else next.add(id);
      onSelectedChange(next);
    } else {
      onSelectedChange(new Set([id]));
    }
  }

  return (
    <div
      className="marquee-area"
      ref={areaRef}
      onPointerDown={handlePointerDown}
      onPointerMove={handlePointerMove}
      onPointerUp={handlePointerUp}
      onPointerCancel={handlePointerUp}
    >
      {items.map((item) => (
        <button
          key={item.id}
          type="button"
          data-id={item.id}
          className="marquee-item"
          aria-pressed={selected.has(item.id)}
          onClick={(e) => handleItemClick(e, item.id)}
        >
          {item.name}
        </button>
      ))}
      {box && (
        <div
          className="marquee-box"
          style={{ left: box.left, top: box.top, width: box.right - box.left, height: box.bottom - box.top }}
        />
      )}
    </div>
  );
}

import { useState } from 'react';
import { MarqueeGrid } from './MarqueeGrid';
import type { Item } from './MarqueeGrid';

const items: Item[] = Array.from({ length: 12 }, (_, i) => ({ id: i + 1, name: `写真${i + 1}` }));

export function App() {
  const [selected, setSelected] = useState<Set<number>>(() => new Set());
  // 確かめるために、URL の ?mode=contain で選び方を切り替える
  const mode = new URLSearchParams(location.search).get('mode') === 'contain' ? 'contain' : 'touch';

  return (
    <main>
      <MarqueeGrid items={items} selected={selected} onSelectedChange={setSelected} mode={mode} />
      <p className="info" aria-live="polite">
        {selected.size}件を選択中{selected.size > 0 && `：${[...selected].sort((a, b) => a - b).join(', ')}`}
      </p>
    </main>
  );
}

.marquee-area {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fill, 104px);
  gap: 16px;
  padding: 16px;
  background: #eefafd;
  border: 1px solid #9aa5ab;
  border-radius: 8px;
  /* ドラッグしたときに、文字が選択されないようにする */
  user-select: none;
  /* タッチでドラッグしたときに、ページがスクロールしないようにする */
  touch-action: none;
}

.marquee-item {
  height: 56px;
  border: 2px solid #c5d3d9;
  border-radius: 6px;
  background: #fff;
  color: inherit;
  font: inherit;
}
.marquee-item[aria-pressed='true'] {
  border-color: #00c8e8;
  background: #c9f1fa;
}
.marquee-item:focus-visible { outline: 3px solid #067a98; outline-offset: 2px; }

.marquee-box {
  position: absolute;
  border: 1px solid #067a98;
  background: rgb(0 200 232 / 0.15);
  pointer-events: none;
}

領域の内側: 598×232 / 項目の大きさ: 104×56 / 写真1 (16, 16)・写真2 (136, 16)・写真4 (376, 16)・写真5 (16, 88)・写真12 (376, 160)
0件を選択中
(8, 8) から (250, 100) まで動かした途中: 枠 left 8px top 8px width 242px height 92px / 4件を選択中：1, 2, 5, 6
離したあと: 4件を選択中：1, 2, 5, 6 / 枠の表示 0個
修飾キーなしで (368, 80) から (590, 230) まで: 2件を選択中：8, 12
(8, 8)〜(250, 100) を囲んだあと、Shift を押したまま (368, 80) から (590, 230) まで: 6件を選択中：1, 2, 5, 6, 8, 12

(250, 100) まで広げたとき: 4件を選択中：1, 2, 5, 6 / (100, 60) まで戻したとき: 1件を選択中：1

項目のすき間 (128, 80) をクリック: 0件を選択中
写真3をクリック: 1件を選択中：3
Ctrl を押して写真7と写真10をクリック: 3件を選択中：3, 7, 10
Ctrl を押して写真3をもう一度クリック: 2件を選択中：7, 10
修飾キーなしで写真5をクリック: 1件を選択中：5
すき間で押して右へ 3px だけ動かして離す: 0件を選択中 / 枠の表示 0個

写真2で Space、Tab で写真3へ移って Enter、Tab で写真4へ移って Space: 3件を選択中：2, 3, 4 / aria-pressed="true" の項目: 写真2, 写真3, 写真4
続けて写真4でもう一度 Space: 2件を選択中：2, 3
キーボードで起きた click の detail: 0, 0, 0, 0
マウスで写真6をクリック: 1件を選択中：6 / click の detail: 1

写真3・7を選んだ状態: 2件を選択中：3, 7 / 修飾キーなしで囲んでいる途中: 4件を選択中：1, 2, 5, 6 / pointercancel のあと: 2件を選択中：3, 7 / 枠の表示 0個
そのあとボタンを離す: 2件を選択中：3, 7

(8, 8) から、領域の右下の外 (800, 400) まで動かして、外で離す: 枠 left 8px top 8px width 590px height 224px / 12件を選択中：1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 / 離したあとの枠の表示 0個
ボタンを押さずに領域の中へ戻す: 12件を選択中：1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12

mode 'touch': (8, 8) から (250, 100) まで: 4件を選択中：1, 2, 5, 6
mode 'contain': (8, 8) から (250, 100) まで: 2件を選択中：1, 2

user-select: none あり: 領域の (8, 8) から、下の「…件を選択中」の行の下まで: 6件を選択中：1, 2, 5, 6, 9, 10 / 選択された文字列: ""
user-select: none なし: 領域の (8, 8) から、下の「…件を選択中」の行の下まで: 6件を選択中：1, 2, 5, 6, 9, 10 / 選択された文字列: "写真1\n写真2\n写真3\n写真4\n写真5\n写真6\n写真7\n写真8\n写真9\n写真10"
user-select: none なし、pointerdown で preventDefault(): 領域の (8, 8) から、下の「…件を選択中」の行の下まで: 6件を選択中：1, 2, 5, 6, 9, 10 / 選択された文字列: ""