@cardenelabs/cdl 0.22.0 → 0.24.0

package/src/layout/edges.ts

@@ -10,6 +10,7 @@ import {
   segmentsCrossRect,
   segmentsExcludingOwnPath,
 } from "./collisions";
+import { countEdgeCrossings } from "../visual-validate";
 import {
   computeLabelBBoxWorld,
   computeLabelBoxW,
@@ -22,6 +23,7 @@ import {
   spreadWithMinimalShift,
   PARALLEL_EDGE_BOW,
   SYMMETRIC_PAIR_SHIFT,
+  ARROW_ENDPOINT_CENTER_TOL,
 } from "./spec";
 import { isSelfLoop, layoutSelfLoops } from "./self-loop";
 import { DEFAULT_LABEL_MARGIN } from "./tokens";
@@ -2547,3 +2549,628 @@ function placeAvoidingSiblingPaths(args: {
   // 跨りが減らないなら動かさない (無駄に動かして自分の線から離さない)。
   return chosen.cross < beforeCrossTotal || chosen.move === 0 ? chosen.ys : [...wants];
 }
+
+/** 折れ線に落とした後の線分。 `flattenPathSegments` の返り値と同じ形。 */
+type FlatSeg = { x1: number; y1: number; x2: number; y2: number };
+
+/** 札を線に沿って動かす時の刻み (world unit)。 */
+const LABEL_SLIDE_STEP = 24;
+/** 札の縁から確保したい余白の候補 (world unit)。 大きい方から順に試す。 */
+const LABEL_SLIDE_CLEARANCES = [32, 24, 16, 8, 0] as const;
+/**
+ * 札を線分に載せる時、 線分の端から空けておく距離 (world unit)。
+ *
+ * 線分の端は箱の縁か折れ位置なので、 ここを詰めると札が箱に寄る。
+ * 箱との必要余白と同じ値にして、 端に寄った置き方が最初から候補に入らないようにする。
+ */
+const LABEL_SLIDE_END_MARGIN = CLEARANCE_NODE_LABEL;
+
+/** 札の外接矩形。 中心 (cx, cy) と大きさから作る。 */
+function labelRectAt(cx: number, cy: number, w: number, h: number): Rect {
+  return { x: cx - w / 2, y: cy - h / 2, w, h };
+}
+
+/** 矩形を四方へ `pad` だけ広げる。 */
+function inflate(r: Rect, pad: number): Rect {
+  return { x: r.x - pad, y: r.y - pad, w: r.w + pad * 2, h: r.h + pad * 2 };
+}
+
+/**
+ * 札を自分の線に沿って動かし、 他の線と箱から離れた位置へ置き直す (#601)。
+ *
+ * 札の位置は `routePath` が経路の中点で決め、 `resolveEdgeLabelOverlapsWithChain` が縦にだけ
+ * ずらす。 線に沿って動かす経路が無いので、 中点の周りが混んでいる図では逃げ場が無く、
+ * 別の線に被ったまま残る。
+ *
+ * **動かすのはいま被っている札だけ**。 被っていない札まで動かすと、 既に落ち着いている図の
+ * 座標が理由なく変わる。
+ *
+ * 余白は `LABEL_SLIDE_CLEARANCES` を大きい方から試し、 その余白を確保できる位置のうち
+ * 今の位置に一番近いものを採る。 どの余白でも置けない場合は動かさない。
+ */
+export function slideLabelsAlongOwnPath(edges: LaidEdge[], nodes: readonly LaidNode[]): void {
+  const withLabel = edges.filter((e) => hasRenderedLabel(e));
+  if (withLabel.length === 0) return;
+  const segsById = new Map<string, FlatSeg[]>();
+  for (const e of edges) segsById.set(e.id, flattenPathSegments(extractPathSegments(e.d)));
+  const nodeRects = nodes.map(nodeRect);
+
+  for (const e of withLabel) {
+    const w = computeLabelBoxW(e.label, e.sub);
+    const h = labelPillH(e.sub);
+    if (w === 0 || h === 0) continue;
+    const own = segsById.get(e.id) ?? [];
+    // 自分の線は避ける相手に入れない。 札の下地が線を隠す前提の意匠なので、
+    // 自分の線の上に載るのは正しい置き方 (docs/design/notation/presets/er-demo/note.md)。
+    const others: FlatSeg[] = [];
+    for (const o of edges) {
+      if (o.id === e.id) continue;
+      const segs = segsById.get(o.id);
+      if (segs) others.push(...segs);
+    }
+    // pad は線から空ける余白。 箱からは `CLEARANCE_NODE_LABEL` まで空けたいが、
+    // 置ける場所が無い時は段階的に諦める (置き直さないよりは寄っていても離れた方が良い)。
+    const blocked = (cx: number, cy: number, pad: number): boolean => {
+      const base = labelRectAt(cx, cy, w, h);
+      if (segmentsCrossRect(others, inflate(base, pad))) return true;
+      const nodePad = Math.min(pad, CLEARANCE_NODE_LABEL);
+      return nodeRects.some((n) => rectsOverlap(inflate(base, nodePad), n));
+    };
+    // いま被っていないなら動かさない。
+    if (!blocked(e.labelX, e.labelY, 0)) continue;
+
+    let placed: { x: number; y: number } | null = null;
+    for (const pad of LABEL_SLIDE_CLEARANCES) {
+      let best: { x: number; y: number; dist: number } | null = null;
+      for (const s of own) {
+        const dx = s.x2 - s.x1;
+        const dy = s.y2 - s.y1;
+        const len = Math.hypot(dx, dy);
+        if (len < LABEL_SLIDE_STEP) continue;
+        // 札は進行方向へ「幅か高さ」 の半分だけ張り出す。 その分だけ端から離す。
+        const half = (Math.abs(dx) >= Math.abs(dy) ? w : h) / 2 + LABEL_SLIDE_END_MARGIN;
+        if (len < half * 2) continue;
+        const from = half / len;
+        const to = 1 - half / len;
+        const steps = Math.max(1, Math.floor((len * (to - from)) / LABEL_SLIDE_STEP));
+        for (let k = 0; k <= steps; k++) {
+          const t = from + ((to - from) * k) / steps;
+          const cx = s.x1 + dx * t;
+          const cy = s.y1 + dy * t;
+          if (blocked(cx, cy, pad)) continue;
+          const dist = Math.hypot(cx - e.labelX, cy - e.labelY);
+          if (!best || dist < best.dist) best = { x: cx, y: cy, dist };
+        }
+      }
+      if (best) {
+        placed = { x: best.x, y: best.y };
+        break;
+      }
+    }
+    if (!placed) continue;
+    e.labelX = placed.x;
+    e.labelY = placed.y;
+    e.labelAnchor = "middle";
+  }
+}
+
+/** 跨ぐ弧の半径 (world unit)。 */
+const HOP_RADIUS = 11;
+/** 端からこの距離より内側の交点は跨がない。 端の印が立つ場所と重なるため。 */
+const HOP_END_KEEP = 26;
+/** これより近い交点は 1 つに畳む。 曲線を折れ線に落とす都合で 1 箇所が複数に割れるため。 */
+const HOP_MERGE = HOP_RADIUS * 2 + 6;
+
+/** 線分どうしの交点。 端点を含まない内側で交わる時だけ返す。 */
+function segmentCrossPoint(
+  a: { x1: number; y1: number; x2: number; y2: number },
+  b: { x1: number; y1: number; x2: number; y2: number },
+): { x: number; y: number; t: number } | null {
+  const dxa = a.x2 - a.x1;
+  const dya = a.y2 - a.y1;
+  const dxb = b.x2 - b.x1;
+  const dyb = b.y2 - b.y1;
+  const den = dxa * dyb - dya * dxb;
+  if (Math.abs(den) < 1e-9) return null;
+  const t = ((b.x1 - a.x1) * dyb - (b.y1 - a.y1) * dxb) / den;
+  const u = ((b.x1 - a.x1) * dya - (b.y1 - a.y1) * dxa) / den;
+  if (t <= 0.001 || t >= 0.999 || u <= 0.001 || u >= 0.999) return null;
+  return { x: a.x1 + dxa * t, y: a.y1 + dya * t, t };
+}
+
+/** 経路の始点と終点。 端の印が立つ場所を交点の除外に使う。 */
+function pathEnds(segs: readonly { x1: number; y1: number; x2: number; y2: number }[]): Array<{ x: number; y: number }> {
+  const first = segs[0];
+  const last = segs[segs.length - 1];
+  if (!first || !last) return [];
+  return [
+    { x: first.x1, y: first.y1 },
+    { x: last.x2, y: last.y2 },
+  ];
+}
+
+/**
+ * 交わる線の、 上を通る側に弧を差し込んで跨がせる (#608)。
+ *
+ * engine は交差を数えるだけで、 交わった所の描き方を持たなかった。 2 本が同じ点で重なるので
+ * 十字に潰れ、 下をくぐる線が切れたようにも見える。 破線どうしだと刻みが噛み合って、
+ * その一点だけ塗り潰されたように見える。
+ *
+ * **横に走る側が跨ぐ**。 図は横に読むので、 縦線を跨ぐ方が視線の流れを切らない。
+ * 両方が縦なら、 後から出た方が右へ膨らむ。
+ *
+ * 差し込むのは直線 (`L`) の区間だけ。 角の丸め (`Q`) と弓 (`C`) は形そのものが意味を持つ。
+ *
+ * 端から `HOP_END_KEEP` の内側にある交点は跨がない = そこは端の印が立つ場所で、 弧と重なる。
+ */
+export function hopEdgeCrossings(edges: LaidEdge[]): void {
+  if (edges.length < 2) return;
+  const flat = new Map<string, FlatSeg[]>();
+  const ends = new Map<string, Array<{ x: number; y: number }>>();
+  for (const e of edges) {
+    const segs = flattenPathSegments(extractPathSegments(e.d));
+    flat.set(e.id, segs);
+    ends.set(e.id, pathEnds(segs));
+  }
+
+  for (const e of edges) {
+    // 部分経路が 2 つ以上ある形 (`M` が複数) は組み直せないので触らない。
+    if ((e.d.match(/M/g) ?? []).length !== 1) continue;
+    const own = extractPathSegments(e.d);
+    if (own.length === 0) continue;
+    const myEnds = ends.get(e.id) ?? [];
+
+    /** 区間 index → その区間で跨ぐ点 */
+    const hops = new Map<number, Array<{ x: number; y: number; t: number }>>();
+    for (let i = 0; i < own.length; i++) {
+      const seg = own[i]!;
+      if (seg.cmd !== "L") continue;
+      const dx = seg.x2 - seg.x1;
+      const dy = seg.y2 - seg.y1;
+      const horizontal = Math.abs(dy) < 0.5 && Math.abs(dx) >= 0.5;
+      const vertical = Math.abs(dx) < 0.5 && Math.abs(dy) >= 0.5;
+      if (!horizontal && !vertical) continue;
+      if (Math.hypot(dx, dy) < HOP_RADIUS * 2 + 4) continue;
+
+      const found: Array<{ x: number; y: number; t: number }> = [];
+      for (const other of edges) {
+        if (other.id === e.id) continue;
+        const otherEnds = ends.get(other.id) ?? [];
+        for (const o of flat.get(other.id) ?? []) {
+          const odx = o.x2 - o.x1;
+          const ody = o.y2 - o.y1;
+          const otherHorizontal = Math.abs(ody) < 0.5 && Math.abs(odx) >= 0.5;
+          // 横が縦を跨ぐ。 両方が縦なら後から出た方が跨ぐ。 それ以外は相手側が跨ぐ。
+          if (horizontal && otherHorizontal) continue;
+          if (vertical && otherHorizontal) continue;
+          if (vertical && !otherHorizontal && e.id <= other.id) continue;
+          const c = segmentCrossPoint(seg, o);
+          if (!c) continue;
+          const nearEnd = [...myEnds, ...otherEnds].some(
+            (p) => Math.hypot(c.x - p.x, c.y - p.y) < HOP_END_KEEP,
+          );
+          if (nearEnd) continue;
+          if (found.some((f) => Math.hypot(f.x - c.x, f.y - c.y) < HOP_MERGE)) continue;
+          found.push(c);
+        }
+      }
+      if (found.length > 0) hops.set(i, found.sort((a, b) => a.t - b.t));
+    }
+    if (hops.size === 0) continue;
+
+    const head = own[0]!;
+    const parts: string[] = [`M ${head.x1} ${head.y1}`];
+    for (let i = 0; i < own.length; i++) {
+      const seg = own[i]!;
+      if (seg.cmd === "Q") {
+        const c = seg.ctrl?.[0];
+        parts.push(c ? `Q ${c.x} ${c.y}, ${seg.x2} ${seg.y2}` : `L ${seg.x2} ${seg.y2}`);
+        continue;
+      }
+      if (seg.cmd === "C") {
+        const c1 = seg.ctrl?.[0];
+        const c2 = seg.ctrl?.[1];
+        parts.push(
+          c1 && c2
+            ? `C ${c1.x} ${c1.y}, ${c2.x} ${c2.y}, ${seg.x2} ${seg.y2}`
+            : `L ${seg.x2} ${seg.y2}`,
+        );
+        continue;
+      }
+      const list = hops.get(i);
+      if (list) {
+        const dx = seg.x2 - seg.x1;
+        const dy = seg.y2 - seg.y1;
+        const len = Math.hypot(dx, dy);
+        const ux = dx / len;
+        const uy = dy / len;
+        // 横は上へ、 縦は右へ膨らむ。
+        const sweep = Math.abs(uy) < 0.5 ? (ux > 0 ? 1 : 0) : uy > 0 ? 1 : 0;
+        for (const p of list) {
+          parts.push(`L ${round1(p.x - ux * HOP_RADIUS)} ${round1(p.y - uy * HOP_RADIUS)}`);
+          parts.push(
+            `A ${HOP_RADIUS} ${HOP_RADIUS} 0 0 ${sweep} ${round1(p.x + ux * HOP_RADIUS)} ${round1(p.y + uy * HOP_RADIUS)}`,
+          );
+        }
+      }
+      parts.push(`L ${seg.x2} ${seg.y2}`);
+    }
+    e.d = parts.join(" ");
+  }
+}
+
+/** 小数第 1 位まで。 経路の文字列が無用に長くならないようにする。 */
+function round1(v: number): number {
+  return Math.round(v * 10) / 10;
+}
+
+/** 通り道が重なった時にずらす量 (world unit)。 */
+const SHARED_RUN_SEPARATION = 26;
+/** これより長く並んで走っている区間だけをずらす (world unit)。 */
+const SHARED_RUN_MIN = 40;
+/** 経路を組み直す時の角の丸め半径 (world unit)。 `VERTICAL_DETOUR_CORNER` と同じ。 */
+const SHARED_RUN_CORNER = VERTICAL_DETOUR_CORNER;
+/** 同じ直線上とみなす座標の差 (world unit)。 */
+const SHARED_RUN_EPS = 0.5;
+
+/** 経路の角の点。 */
+type Vertex = { x: number; y: number };
+
+/**
+ * 経路を「角の点の並び」 に開く。 開けない形なら `null` を返す。
+ *
+ * 丸めた角は `L (手前の切り口) Q (角), (向こうの切り口)` の形で書かれており、 `Q` の制御点が
+ * 角そのものになる。 折れずに続く `L` は角ではないので点にしない。
+ *
+ * 開けない形は 3 つ。 部分経路が 2 つ以上ある (`M` が複数)、 弓 (`C`) を含む、 `Q` に制御点が
+ * 無い。 いずれも触らずに返す = 形そのものが意味を持つため、 組み直すと別の図になる。
+ */
+function pathVertices(d: string): Vertex[] | null {
+  if ((d.match(/M/g) ?? []).length !== 1) return null;
+  const segs = extractPathSegments(d);
+  if (segs.length === 0) return null;
+  const first = segs[0]!;
+  const out: Vertex[] = [{ x: first.x1, y: first.y1 }];
+  for (let i = 0; i < segs.length; i++) {
+    const s = segs[i]!;
+    if (s.cmd === "C") return null;
+    if (s.cmd === "Q") {
+      const c = s.ctrl?.[0];
+      if (!c) return null;
+      out.push({ x: c.x, y: c.y });
+      continue;
+    }
+    // 丸めていない角も点にする。 次の `L` と向きが変われば、 その継ぎ目が角。
+    const next = segs[i + 1];
+    if (!next || next.cmd !== "L") continue;
+    const cross = (s.x2 - s.x1) * (next.y2 - next.y1) - (s.y2 - s.y1) * (next.x2 - next.x1);
+    if (Math.abs(cross) > 1e-6) out.push({ x: s.x2, y: s.y2 });
+  }
+  const last = segs[segs.length - 1]!;
+  out.push({ x: last.x2, y: last.y2 });
+  // 同じ点が続くと向きが決まらず、 組み直しで角が消える。
+  return out.filter((p, i) => i === 0 || Math.hypot(p.x - out[i - 1]!.x, p.y - out[i - 1]!.y) > 1e-6);
+}
+
+/**
+ * 角の点の並びから経路の文字列を組む。 `pathVertices` の逆。
+ *
+ * 丸めの半径は前後の区間の半分を超えない。 超えると切り口が区間からはみ出し、 角が裏返る。
+ * 丸める余地が無い角は直角のまま繋ぐ。
+ */
+function verticesToPath(pts: readonly Vertex[]): string {
+  const head = pts[0]!;
+  const parts: string[] = [`M ${round1(head.x)} ${round1(head.y)}`];
+  for (let i = 1; i < pts.length - 1; i++) {
+    const v = pts[i]!;
+    const prev = pts[i - 1]!;
+    const next = pts[i + 1]!;
+    const lenIn = Math.hypot(v.x - prev.x, v.y - prev.y);
+    const lenOut = Math.hypot(next.x - v.x, next.y - v.y);
+    const r = Math.min(SHARED_RUN_CORNER, lenIn / 2, lenOut / 2);
+    if (r < 0.5 || lenIn === 0 || lenOut === 0) {
+      parts.push(`L ${round1(v.x)} ${round1(v.y)}`);
+      continue;
+    }
+    const ax = v.x - ((v.x - prev.x) / lenIn) * r;
+    const ay = v.y - ((v.y - prev.y) / lenIn) * r;
+    const bx = v.x + ((next.x - v.x) / lenOut) * r;
+    const by = v.y + ((next.y - v.y) / lenOut) * r;
+    parts.push(`L ${round1(ax)} ${round1(ay)}`);
+    parts.push(`Q ${round1(v.x)} ${round1(v.y)}, ${round1(bx)} ${round1(by)}`);
+  }
+  const tail = pts[pts.length - 1]!;
+  parts.push(`L ${round1(tail.x)} ${round1(tail.y)}`);
+  return parts.join(" ");
+}
+
+/** 区間 `k` (点 k と点 k+1 の間) が軸に沿っているか。 `ax` = 0 なら縦、 1 なら横。 */
+function runIsAligned(pts: readonly Vertex[], k: number, ax: 0 | 1): boolean {
+  const a = pts[k];
+  const b = pts[k + 1];
+  if (!a || !b) return false;
+  const 定 = ax === 0 ? Math.abs(a.x - b.x) : Math.abs(a.y - b.y);
+  const 伸 = ax === 0 ? Math.abs(a.y - b.y) : Math.abs(a.x - b.x);
+  return 定 < SHARED_RUN_EPS && 伸 > 1;
+}
+
+/** 区間 `k` の、 軸に沿った向きの範囲。 */
+function runSpan(pts: readonly Vertex[], k: number, ax: 0 | 1): { lo: number; hi: number } {
+  const a = pts[k]!;
+  const b = pts[k + 1]!;
+  const p = ax === 0 ? a.y : a.x;
+  const q = ax === 0 ? b.y : b.x;
+  return { lo: Math.min(p, q), hi: Math.max(p, q) };
+}
+
+/**
+ * 同じ通り道を並んで走る区間を、 後から出る線の側へずらす (#610)。
+ *
+ * 線が箱を避ける通り道は「塞ぐ箱の端 + 余白」 で決まるので、 同じ箱を避ける線は必ず同じ列を
+ * 通る。 engine は重なりを検知して警告に出すが、 直す仕掛けを持っていなかった。
+ *
+ * 実害は見た目だけではない。 破線どうしが重なると刻みが噛み合って隙間が埋まり、 実線に見える。
+ * ER 図では実線が「識別する関係」 を指すので、 関係の種類そのものが違って読める。
+ *
+ * **動かすのは後から出る線**。 先に出た線を動かすと、 図に線を 1 本足しただけで既にある線が
+ * 動く。 後ろだけを動かせば、 足した線が避ける形になる。
+ *
+ * **端点を含む区間は動かさない**。 動かすと線の根元が箱の辺の中央から外れ、
+ * `arrow-endpoint-center` と `fan-origin-single-point` が守っている形が崩れる。
+ *
+ * **同じ節から出る線どうしは重ねたまま残す** (#211)。 幹線から順に降りる 1 本の線として読め、
+ * 読み手は共有した起点から分岐を辿れる。 分けると図幅が広がるだけで得るものがない。
+ * 起点が違う線は辿る手掛かりが無いので、 重なると 2 本あることすら読めない。
+ *
+ * ずらした先が箱に当たるなら反対側を試し、 両側とも当たるならずらさない = 重なりの方が
+ * 貫通より軽い。
+ */
+export function separateSharedStraightRuns(edges: LaidEdge[], nodes: readonly LaidNode[]): void {
+  if (edges.length < 2) return;
+
+  const verts = new Map<string, Vertex[]>();
+  for (const e of edges) {
+    const v = pathVertices(e.d);
+    if (v && v.length >= 2) verts.set(e.id, v);
+  }
+  if (verts.size < 2) return;
+
+  const moved = new Set<string>();
+
+  /** ずらした後の 3 区間が箱を貫通しないか。 自分が繋ぐ箱は当たり判定から外す。 */
+  const fits = (e: LaidEdge, pts: readonly Vertex[], k: number, ax: 0 | 1, delta: number): boolean => {
+    const 試し = pts.map((p, i) =>
+      i === k || i === k + 1 ? (ax === 0 ? { x: p.x + delta, y: p.y } : { x: p.x, y: p.y + delta }) : p,
+    );
+    // 動く区間と、 その両隣 (長さだけ変わる) を見る。
+    const segs: Array<{ x1: number; y1: number; x2: number; y2: number }> = [];
+    for (let i = Math.max(0, k - 1); i <= Math.min(試し.length - 2, k + 1); i++) {
+      const a = 試し[i]!;
+      const b = 試し[i + 1]!;
+      segs.push({ x1: a.x, y1: a.y, x2: b.x, y2: b.y });
+    }
+    return !nodes.some((n) => n.id !== e.from && n.id !== e.to && segmentsCrossRect(segs, nodeRect(n)));
+  };
+
+  for (let i = 0; i < edges.length; i++) {
+    for (let j = i + 1; j < edges.length; j++) {
+      const 前 = edges[i]!;
+      const 後 = edges[j]!;
+      const A = verts.get(前.id);
+      const B = verts.get(後.id);
+      if (!A || !B) continue;
+      // 同じ節から出る線は幹線として重ねる (#211)。
+      if (前.from === 後.from) continue;
+      for (const ax of [0, 1] as const) {
+        for (let ka = 0; ka + 1 < A.length; ka++) {
+          if (!runIsAligned(A, ka, ax)) continue;
+          for (let kb = 0; kb + 1 < B.length; kb++) {
+            if (!runIsAligned(B, kb, ax)) continue;
+            // 端点を含む区間は動かさない (線の根元が辺の中央から外れる)。
+            if (kb === 0 || kb + 1 === B.length - 1) continue;
+            const 座標A = ax === 0 ? A[ka]!.x : A[ka]!.y;
+            const 座標B = ax === 0 ? B[kb]!.x : B[kb]!.y;
+            if (Math.abs(座標A - 座標B) > SHARED_RUN_EPS) continue;
+            const sa = runSpan(A, ka, ax);
+            const sb = runSpan(B, kb, ax);
+            if (Math.min(sa.hi, sb.hi) - Math.max(sa.lo, sb.lo) < SHARED_RUN_MIN) continue;
+
+            for (const delta of [SHARED_RUN_SEPARATION, -SHARED_RUN_SEPARATION]) {
+              if (!fits(後, B, kb, ax, delta)) continue;
+              if (ax === 0) {
+                B[kb]!.x += delta;
+                B[kb + 1]!.x += delta;
+              } else {
+                B[kb]!.y += delta;
+                B[kb + 1]!.y += delta;
+              }
+              moved.add(後.id);
+              break;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  for (const e of edges) {
+    if (!moved.has(e.id)) continue;
+    e.d = verticesToPath(verts.get(e.id)!);
+  }
+}
+
+/** 同じ辺に入る線を離す間隔 (world unit)。 箱の行 1 つ分。 */
+const ENDPOINT_FAN_STEP = 56;
+/** これより詰まるなら離さない (world unit)。 離しても線どうしを見分けられない。 */
+const ENDPOINT_FAN_MIN = 20;
+/** 終点の手前で辺に沿って動くために取る助走の長さ (world unit)。 */
+const ENDPOINT_FAN_RUNUP = 40;
+
+/**
+ * 同じ節の同じ辺に **入る** 線の終点を、 辺に沿って離す (#611)。
+ *
+ * 複数の線が 1 つの辺に入ると、 終点が辺の中央 1 点に集まって根元が重なる。 重なった区間は
+ * 1 本に見え、 破線どうしなら刻みが噛み合って実線に見える。
+ *
+ * **出る側は触らない**。 engine は出る側と入る側で別の規則を持っている。
+ * `fan-origin-single-point` は出る側の起点が 1 点 (±0.5) に収束することを要求し、 その形は
+ * 「1 つの節から複数の線が発散する」 という意味を持つ (`CAR-429`)。 入る側には対応する要求が
+ * 無く、 `arrow-endpoint-center` が 4 隅を避けることだけを見る。 重なりは意図した形ではなく
+ * 副産物なので、 入る側だけを直す。
+ *
+ * **経路が確定した後に当てる**。 終点を動かしてから経路を引かせると、 引き方の分岐そのものが
+ * 変わる = 真横に引けるようになった線が箱の迂回をやめ、 実測で `edge-node-cross` が 0 件から
+ * 7 件に増えた。 引き終わった経路の末尾だけを差し替えれば、 迂回の判断は動かない。
+ *
+ * 末尾は「辺に沿って助走 → 辺へ垂直に入る」 の 2 区間にする。 最後の区間を辺に垂直なまま
+ * 残すのは、 矢頭が最後の区間の向きで描かれるため = 辺に平行にすると節に刺さらなくなる。
+ *
+ * 離す量は辺に収まる範囲で決める。 4 隅に刺さらないよう両端に `ARROW_ENDPOINT_CENTER_TOL`
+ * ぶんの余白を残し、 その中で `ENDPOINT_FAN_STEP` ずつ離す。 本数が多くて収まらない時は間隔を
+ * 詰め、 詰めても見分けられないなら離さない。
+ *
+ * 差し替えた末尾が箱に当たる線と、 交差を増やす線は元のままにする (どちらも重なりより重い)。
+ *
+ * **束の中で離れるのは 1 本前後にとどまる**。 複数の線は辺の中央へ向かって収束してから
+ * 分かれるので、 分かれる点が交差として数えられる。 端点の接触を除く数え方も試したが、
+ * 離れる本数は増えないまま別の図で交差が出た。 収束する前の段階で分けるには経路の引き方
+ * そのものを変える必要があり、 それは後処理では届かない。
+ */
+export function fanIncomingEndpoints(edges: LaidEdge[], nodes: readonly LaidNode[]): void {
+  if (edges.length < 2) return;
+  const nmap = new Map(nodes.map((n) => [n.id, n]));
+
+  /** 同じ 2 点を結ぶ線の本数。 その組は弓が扱うので、 ここでは触らない。 */
+  const 同じ組の数 = new Map<string, number>();
+  for (const e of edges) 同じ組の数.set(`${e.from}->${e.to}`, (同じ組の数.get(`${e.from}->${e.to}`) ?? 0) + 1);
+
+  /** 同じ節の同じ辺に入る線。 */
+  const 束 = new Map<string, LaidEdge[]>();
+  for (const e of edges) {
+    if (!nmap.has(e.to)) continue;
+    // 同じ 2 点を結ぶ線は `bowSharedStraightPaths` が弓で分ける範囲。 `#941` は
+    // 「どの幅でも箱に当たるなら分離せず重なりを残す」 と決めており、 末尾で分けると
+    // その判断を迂回してしまう。
+    if ((同じ組の数.get(`${e.from}->${e.to}`) ?? 0) > 1) continue;
+    const key = `${e.to}::${e.toSide}`;
+    const list = 束.get(key) ?? [];
+    list.push(e);
+    束.set(key, list);
+  }
+
+  for (const [, list] of 束) {
+    if (list.length < 2) continue;
+    const n = nmap.get(list[0]!.to)!;
+    const 横 = list[0]!.toSide === "left" || list[0]!.toSide === "right";
+    const 辺の長さ = 横 ? n.h : n.w;
+    // 4 隅に刺さらない範囲。 `arrow-endpoint-center` が見ているのと同じ余白を空ける。
+    const 使える幅 = 辺の長さ - 2 * ARROW_ENDPOINT_CENTER_TOL;
+    if (使える幅 <= 0) continue;
+    const 間隔 = Math.min(ENDPOINT_FAN_STEP, 使える幅 / (list.length - 1));
+    if (間隔 < ENDPOINT_FAN_MIN) continue;
+
+    // 来た高さの順に割り当てる。 上を走ってきた線を上の端点へ入れれば、 束の中で交差しない。
+    // 図の並び順で割り当てると、 上を走る線が下の端点へ回って必ず交差する。
+    const 並び = list
+      .map((e) => ({ e, 深さ: 辺から離れた側の位置(e, 横) ?? 0 }))
+      .sort((a, b) => a.深さ - b.深さ || (a.e.id < b.e.id ? -1 : 1));
+
+    const 中心 = ((並び.length - 1) * 間隔) / 2;
+    for (let k = 0; k < 並び.length; k++) {
+      const d = k * 間隔 - 中心;
+      if (Math.abs(d) < 0.001) continue;
+      const e = 並び[k]!.e;
+      const 差替 = 末尾を辺に沿ってずらす(e, 横, d, nodes);
+      if (差替 === null) continue;
+      // 交差が増えるなら戻す。 判定は軸と同じ数え方を使う = 独自の数え方は軸と食い違い、
+      // 軸が 3 件を数えている状況で 0 件と判定して通してしまった (実測)。
+      const 前 = e.d;
+      const 前の交差 = countEdgeCrossings(edges).count;
+      e.d = 差替;
+      if (countEdgeCrossings(edges).count > 前の交差) e.d = 前;
+    }
+  }
+}
+
+/**
+ * 経路が辺へ入る直前に、 辺からどれだけ離れた側を走っていたか。
+ *
+ * 終点の座標では順が決まらない (辺に垂直に入るので全て同じ)。 終点から辺の外へ戻って、
+ * 最初に辺沿い方向へ動いた区間の始点を見る = その線が「上から来たか下から来たか」 を表す。
+ *
+ * 辺沿いに動く区間が 1 つも無い (真っ直ぐ入るだけ) なら `null`。
+ */
+function 辺から離れた側の位置(e: LaidEdge, 横: boolean): number | null {
+  const segs = extractPathSegments(e.d);
+  for (let i = segs.length - 1; i >= 0; i--) {
+    const s = segs[i]!;
+    const 辺沿いに動く = 横 ? Math.abs(s.y2 - s.y1) > 0.5 : Math.abs(s.x2 - s.x1) > 0.5;
+    if (辺沿いに動く) return 横 ? s.y1 : s.x1;
+  }
+  return null;
+}
+
+/**
+ * 経路の末尾を「辺に沿って助走 → 辺へ垂直に入る」 の形に差し替える。
+ *
+ * 差し替えられない形なら `null` を返す。 弓 (`C`) を含む経路、 部分経路が 2 つ以上ある形、
+ * 最後が辺へ垂直に入っていない形、 助走を取れないほど短い経路、 差し替えた先が箱に当たる
+ * 場合が該当する。
+ */
+function 末尾を辺に沿ってずらす(
+  e: LaidEdge,
+  横: boolean,
+  d: number,
+  nodes: readonly LaidNode[],
+): string | null {
+  if ((e.d.match(/M/g) ?? []).length !== 1) return null;
+  const segs = extractPathSegments(e.d);
+  if (segs.length === 0) return null;
+  if (segs.some((s) => s.cmd === "C")) return null;
+
+  const last = segs[segs.length - 1]!;
+  if (last.cmd !== "L") return null;
+  // 最後の区間は辺に垂直に入っている必要がある。 斜めに入る形は矢頭の向きが決まらない。
+  const 垂直に入る = 横
+    ? Math.abs(last.y2 - last.y1) < 0.5 && Math.abs(last.x2 - last.x1) > 0.5
+    : Math.abs(last.x2 - last.x1) < 0.5 && Math.abs(last.y2 - last.y1) > 0.5;
+  if (!垂直に入る) return null;
+
+  const 長さ = Math.hypot(last.x2 - last.x1, last.y2 - last.y1);
+  if (長さ < ENDPOINT_FAN_RUNUP + 1) return null;
+
+  // 助走を始める点。 終点から辺の外へ `ENDPOINT_FAN_RUNUP` 戻る。
+  const ux = (last.x1 - last.x2) / 長さ;
+  const uy = (last.y1 - last.y2) / 長さ;
+  const 折れ1 = { x: last.x2 + ux * ENDPOINT_FAN_RUNUP, y: last.y2 + uy * ENDPOINT_FAN_RUNUP };
+  const 折れ2 = 横 ? { x: 折れ1.x, y: 折れ1.y + d } : { x: 折れ1.x + d, y: 折れ1.y };
+  const 終点 = 横 ? { x: last.x2, y: last.y2 + d } : { x: last.x2 + d, y: last.y2 };
+
+  // 差し替えた 3 区間が箱に当たらないこと。 自分が繋ぐ箱は当たり判定から外す。
+  const 新区間 = [
+    { x1: last.x1, y1: last.y1, x2: 折れ1.x, y2: 折れ1.y },
+    { x1: 折れ1.x, y1: 折れ1.y, x2: 折れ2.x, y2: 折れ2.y },
+    { x1: 折れ2.x, y1: 折れ2.y, x2: 終点.x, y2: 終点.y },
+  ];
+  if (nodes.some((n) => n.id !== e.from && n.id !== e.to && segmentsCrossRect(新区間, nodeRect(n)))) {
+    return null;
+  }
+
+  // 最後の区間より前はそのまま書き戻す。 角の丸めの制御点も形ごと残す。
+  const head = segs[0]!;
+  const parts: string[] = [`M ${head.x1} ${head.y1}`];
+  for (let i = 0; i < segs.length - 1; i++) {
+    const s = segs[i]!;
+    if (s.cmd === "Q") {
+      const c = s.ctrl?.[0];
+      parts.push(c ? `Q ${c.x} ${c.y}, ${s.x2} ${s.y2}` : `L ${s.x2} ${s.y2}`);
+      continue;
+    }
+    parts.push(`L ${s.x2} ${s.y2}`);
+  }
+  // 助走の折れは丸めない。 短い 2 折れなので、 丸めると切り口が区間からはみ出す。
+  parts.push(`L ${round1(折れ1.x)} ${round1(折れ1.y)}`);
+  parts.push(`L ${round1(折れ2.x)} ${round1(折れ2.y)}`);
+  parts.push(`L ${round1(終点.x)} ${round1(終点.y)}`);
+  return parts.join(" ");
+}