Reactで、2つの箱を線でつなぐ図をSVGで描く方法

.diagram {
  position: relative; /* 箱と SVG の位置の基準 */
  height: 280px;
  margin-bottom: 16px;
  border: 1px solid #9aa5ab;
  background: #eefafd;
}
.box {
  position: absolute;
  width: 140px;
  padding: 8px 12px;
  border: 2px solid #067a98;
  border-radius: 8px;
  background: #fff;
}
.draggable { cursor: grab; touch-action: none; user-select: none; }
.connector {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none; /* 線の下にある箱やボタンを押せるようにする */
}

import { useEffect, useId, useLayoutEffect, useRef, useState } from 'react';
import type { RefObject } from 'react';

type Point = { x: number; y: number };

// SVG の左上を原点にした、el の位置と中心
function rectIn(el: HTMLElement, svg: SVGSVGElement) {
  const r = el.getBoundingClientRect();
  const o = svg.getBoundingClientRect();
  const left = r.left - o.left, right = r.right - o.left, top = r.top - o.top, bottom = r.bottom - o.top;
  return { left, right, top, bottom, cx: (left + right) / 2, cy: (top + bottom) / 2 };
}

// 2つの箱の、向かい合う辺の真ん中どうしを結ぶ曲線
function connectorPath(svg: SVGSVGElement, a: HTMLElement, b: HTMLElement) {
  const ra = rectIn(a, svg);
  const rb = rectIn(b, svg);
  const dx = rb.cx - ra.cx;
  const dy = rb.cy - ra.cy;
  let from: Point, to: Point, bend: Point;
  if (Math.abs(dx) >= Math.abs(dy)) {
    // 左右に離れているときは、左右の辺どうしをつなぐ
    const s = dx >= 0 ? 1 : -1;
    from = { x: s > 0 ? ra.right : ra.left, y: ra.cy };
    to = { x: s > 0 ? rb.left : rb.right, y: rb.cy };
    bend = { x: s * Math.max(40, Math.abs(to.x - from.x) / 2), y: 0 };
  } else {
    // 上下に離れているときは、上下の辺どうしをつなぐ
    const s = dy >= 0 ? 1 : -1;
    from = { x: ra.cx, y: s > 0 ? ra.bottom : ra.top };
    to = { x: rb.cx, y: s > 0 ? rb.top : rb.bottom };
    bend = { x: 0, y: s * Math.max(40, Math.abs(to.y - from.y) / 2) };
  }
  // 制御点を辺と垂直の向きにずらすと、辺からまっすぐ出て、まっすぐ入る線になる
  return `M ${from.x} ${from.y} C ${from.x + bend.x} ${from.y + bend.y} ${to.x - bend.x} ${to.y - bend.y} ${to.x} ${to.y}`;
}

type Props = {
  fromRef: RefObject<HTMLElement | null>;
  toRef: RefObject<HTMLElement | null>;
  color?: string;
};

export function Connector({ fromRef, toRef, color = '#00c8e8' }: Props) {
  const svgRef = useRef<SVGSVGElement>(null);
  const [d, setD] = useState('');
  const markerId = useId();

  function update() {
    const svg = svgRef.current, a = fromRef.current, b = toRef.current;
    if (svg && a && b) setD(connectorPath(svg, a, b)); // 同じ文字列なら再レンダーされない
  }

  // 親が再レンダーされるたびに（箱を動かしたときなど）、画面に出る前に測り直す
  useLayoutEffect(update);

  // 親が再レンダーされないまま、箱や図の大きさが変わったときも測り直す
  useEffect(() => {
    const ro = new ResizeObserver(update);
    for (const el of [svgRef.current, fromRef.current, toRef.current]) {
      if (el) ro.observe(el);
    }
    return () => ro.disconnect();
  }, []);

  return (
    <svg ref={svgRef} className="connector" aria-hidden="true">
      <defs>
        <marker
          id={markerId}
          viewBox="0 0 10 10"
          refX="10"
          refY="5"
          markerWidth="6"
          markerHeight="6"
          orient="auto-start-reverse"
        >
          <path d="M 0 0 L 10 5 L 0 10 z" fill={color} />
        </marker>
      </defs>
      {d && <path d={d} fill="none" stroke={color} strokeWidth="2" markerEnd={`url(#${markerId})`} />}
    </svg>
  );
}

import { useRef, useState } from 'react';
import type { PointerEvent } from 'react';
import { Connector } from './Connector';

// 中の「詳しく」で高さが変わる箱。開閉の state は箱の中だけにある
function DetailBox({ title, detail }: { title: string; detail: string }) {
  const [open, setOpen] = useState(false);
  return (
    <>
      <strong>{title}</strong>
      {open && <p>{detail}</p>}
      <button type="button" onClick={() => setOpen((o) => !o)}>
        {open ? '閉じる' : '詳しく'}
      </button>
    </>
  );
}

type Pos = { x: number; y: number };

export function Diagram({ color }: { color?: string }) {
  const aRef = useRef<HTMLDivElement>(null);
  const bRef = useRef<HTMLDivElement>(null);
  const [posB, setPosB] = useState<Pos>({ x: 220, y: 150 });
  const drag = useRef<{ dx: number; dy: number } | null>(null);

  // 箱 B をドラッグで動かす（位置は state に持つ）
  function handlePointerDown(e: PointerEvent<HTMLDivElement>) {
    e.currentTarget.setPointerCapture(e.pointerId);
    drag.current = { dx: e.clientX - posB.x, dy: e.clientY - posB.y };
  }
  function handlePointerMove(e: PointerEvent<HTMLDivElement>) {
    if (!drag.current) return;
    setPosB({ x: e.clientX - drag.current.dx, y: e.clientY - drag.current.dy });
  }
  function handlePointerUp() {
    drag.current = null;
  }

  return (
    <div className="diagram">
      <div className="box" ref={aRef} style={{ left: 16, top: 24 }}>
        <DetailBox title="注文を受ける" detail="在庫を確かめてから、受け付けます。" />
      </div>
      <div
        className="box draggable"
        ref={bRef}
        style={{ left: posB.x, top: posB.y }}
        onPointerDown={handlePointerDown}
        onPointerMove={handlePointerMove}
        onPointerUp={handlePointerUp}
      >
        <strong>発送する</strong>
      </div>
      <Connector fromRef={aRef} toRef={bRef} color={color} />
    </div>
  );
}

原点を SVG の ref で取る:
  console.log: useLayoutEffect: svgRef true fromRef true toRef true
  console.log: useLayoutEffect: svgRef true fromRef true toRef true
  console.log: useLayoutEffect: svgRef true fromRef true toRef true
  console.log: useLayoutEffect: svgRef true fromRef true toRef true
  1つ目の図: 箱A 16,24〜184,96 / 箱B 220,150〜388,194 / 線 (184,60) → (220,172)
原点を親の div の ref で取る:
  console.log: useLayoutEffect: containerRef false fromRef true toRef true
  console.log: useLayoutEffect: containerRef false fromRef true toRef true
  1つ目の図: 線なし

useLayoutEffect(update): 右下へ: 箱A 16,24〜184,96 / 箱B 300,190〜468,234 / 線 (184,60) → (300,212)
useLayoutEffect(update): 箱Aの下へ: 箱A 16,24〜184,96 / 箱B 20,220〜188,264 / 線 (100,96) → (104,220)
useLayoutEffect(update, []): 右下へ: 箱A 16,24〜184,96 / 箱B 300,190〜468,234 / 線 (184,60) → (220,172)
useLayoutEffect(update, []): 箱Aの下へ: 箱A 16,24〜184,96 / 箱B 20,220〜188,264 / 線 (184,60) → (220,172)

ResizeObserver あり: 箱A 16,24〜184,140 / 箱B 220,150〜388,194 / 線 (184,82) → (220,172)
ResizeObserver なし: 箱A 16,24〜184,140 / 箱B 220,150〜388,194 / 線 (184,60) → (220,172)