@cardenelabs/cdl 0.121.0 → 0.123.0

package/src/layout/edges.ts

@@ -1,4 +1,13 @@
-import type { CdlDiagram, CdlEdge, LaidEdge, LaidLane, LaidNode, Side } from "../types";
+import type {
+  BBox,
+  CdlDiagram,
+  CdlEdge,
+  CdlTextMetrics,
+  LaidEdge,
+  LaidLane,
+  LaidNode,
+  Side,
+} from "../types";
 import {
   CLEARANCE_LABEL_LABEL,
   CLEARANCE_NODE_LABEL,
@@ -8,9 +17,14 @@ import {
   extractPathSegments,
   flattenPathSegments,
   measurePathLabelGapSegs,
+  札の移動を塞ぐ相手を探す,
   segmentsCrossRect,
   segmentsExcludingOwnPath,
+  type 札の周り,
+  線の測り方を作る,
 } from "./collisions";
+import { curvePath } from "./curve-path";
+import { metroPath } from "./metro-path";
 import { countEdgeCrossings } from "../visual-validate";
 import {
   computeLabelBBoxWorld,
@@ -34,6 +48,8 @@ import { DEFAULT_LABEL_MARGIN } from "./tokens";
 const VERTICAL_DETOUR_GAP = 50;
 /** 縦 detour の角の丸め半径 (world unit)。 */
 const VERTICAL_DETOUR_CORNER = 14;
+/** overlay の札を「自分の線の上に載せた札」 とみなす、 札の中心から自分の線までの距離の上限 (world unit)。 */
+const OVERLAY_LABEL_ON_PATH_TOLERANCE = 1;
 
 /**
  * 縦に進む区間の**進む向き** (下へ = 1、 上へ = -1)。 角の丸めの位置を決める時に使う。
@@ -204,7 +220,12 @@ function detourColumnFor(blockers: LaidNode[], side: DetourSide): number {
     : Math.max(...blockers.map((n) => n.cx + n.w / 2)) + VERTICAL_DETOUR_GAP;
 }
 
-export function layoutEdges(diag: CdlDiagram, nodes: LaidNode[], lanes: LaidLane[] = []): LaidEdge[] {
+export function layoutEdges(
+  diag: CdlDiagram,
+  nodes: LaidNode[],
+  lanes: LaidLane[] = [],
+  textMetrics: CdlTextMetrics = "proportional",
+): LaidEdge[] {
   // labelMargin = author 追加余白、 path 中点 → label の垂直距離に加算 (上向き label は -=、 下向きは +=)。
   // viewport.labelMargin 明示時はその差分、 未指定なら viewport.gap → DEFAULT_LABEL_MARGIN の順で fallback。
   const labelMarginExtra =
@@ -214,6 +235,7 @@ export function layoutEdges(diag: CdlDiagram, nodes: LaidNode[], lanes: LaidLane
   // label が lane の枠線を跨ぐかを見る 2 か所 (左への迂回と label の反転) が使う縦の範囲 (#863)。
   const laneRangeById = new Map(lanes.map((l) => [l.id, laneVerticalRange(l, nodes)]));
 
+  // 経路を書き手が決めた線 = 座標を固定した線、曲線の線、路線図の線。
   // canvas pivot 新 spec (dragon canvas pivot spec §layout-role-conversion)。
   // posX1 / posY1 / posX2 / posY2 全て set 済 edge は「user が固定した絶対 path」 = 直線 path
   // (posX1, posY1) → (posX2, posY2) を最終 path とする。 label 位置は path 中点、 fromSide / toSide
@@ -245,6 +267,36 @@ export function layoutEdges(diag: CdlDiagram, nodes: LaidNode[], lanes: LaidLane
       });
     } else if (isSelfLoop(e)) {
       selfLoopEdges.push(e);
+    } else if (e.routing === "curve") {
+      const from = nmap.get(e.from);
+      const to = nmap.get(e.to);
+      if (!from) throw new Error(`cdl layout: edge "${e.id}" の from "${e.from}" が node に無い`);
+      if (!to) throw new Error(`cdl layout: edge "${e.id}" の to "${e.to}" が node に無い`);
+      const c = curvePath(from, to, e, labelMarginExtra, textMetrics);
+      positionedEdges.push({
+        ...e,
+        d: c.d,
+        fromSide: c.fromSide,
+        toSide: c.toSide,
+        labelX: c.labelX + (e.labelOffsetX ?? 0),
+        labelY: c.labelY + (e.labelOffsetY ?? 0),
+        labelAnchor: c.labelAnchor,
+      });
+    } else if (e.routing === "metro") {
+      const from = nmap.get(e.from);
+      const to = nmap.get(e.to);
+      if (!from) throw new Error(`cdl layout: edge "${e.id}" の from "${e.from}" が node に無い`);
+      if (!to) throw new Error(`cdl layout: edge "${e.id}" の to "${e.to}" が node に無い`);
+      const m = metroPath(from, to, e, labelMarginExtra, textMetrics);
+      positionedEdges.push({
+        ...e,
+        d: m.d,
+        fromSide: m.fromSide,
+        toSide: m.toSide,
+        labelX: m.labelX + (e.labelOffsetX ?? 0),
+        labelY: m.labelY + (e.labelOffsetY ?? 0),
+        labelAnchor: m.labelAnchor,
+      });
     } else {
       autoEdges.push(e);
     }
@@ -291,7 +343,7 @@ export function layoutEdges(diag: CdlDiagram, nodes: LaidNode[], lanes: LaidLane
     使う(le.from, le.fromSide);
     使う(le.to, le.toSide);
   }
-  const loopEdges = layoutSelfLoops(selfLoopEdges, nmap, occupiedBySide);
+  const loopEdges = layoutSelfLoops(selfLoopEdges, nmap, occupiedBySide, textMetrics);
 
   // CAR-429 (CAR-426-B) ... 全 edge の起点 / 終点 / L 字 corner は node 辺 Y 中央固定 (offset=0 SSOT)。
   // 旧 fan-in / fan-out / parallel の sidepoint 分散 (±60/±120) は削除済で、
@@ -649,7 +701,7 @@ export function layoutEdges(diag: CdlDiagram, nodes: LaidNode[], lanes: LaidLane
     if (others.some((n) => segmentsCrossRect(segs, nodeRect(n)))) return true;
 
     if (!hasRenderedLabel(c.e)) return false;
-    const boxW = computeLabelBoxW(c.e.label, c.e.sub);
+    const boxW = computeLabelBoxW(c.e.label, c.e.sub, textMetrics);
     const boxH = labelPillH(c.e.sub);
     const centerX = columnX - (labelPathClearanceHorizontal(c.e) + boxW / 2);
     const pill = { x: centerX - boxW / 2, y: (exitY + returnY) / 2 - boxH / 2, w: boxW, h: boxH };
@@ -834,6 +886,7 @@ export function layoutEdges(diag: CdlDiagram, nodes: LaidNode[], lanes: LaidLane
       { x: endpointOffset.fromDx, y: endpointOffset.fromDy },
       { x: endpointOffset.toDx, y: endpointOffset.toDy },
       avoidRects,
+      textMetrics,
     );
     const routed1 = route([]);
     const { d, labelX, labelY, labelAnchor, labelAltX } = routed1;
@@ -915,7 +968,7 @@ export function layoutEdges(diag: CdlDiagram, nodes: LaidNode[], lanes: LaidLane
     const pillById = new Map<string, Rect>();
     for (const r of list) {
       if (!hasRenderedLabel(r.e)) continue;
-      const w = computeLabelBoxW(r.e.label, r.e.sub);
+      const w = computeLabelBoxW(r.e.label, r.e.sub, textMetrics);
       const h = labelPillH(r.e.sub);
       pillById.set(r.e.id, { x: r.baseLabelX - w / 2, y: r.baseLabelY - h / 2, w, h });
     }
@@ -923,7 +976,7 @@ export function layoutEdges(diag: CdlDiagram, nodes: LaidNode[], lanes: LaidLane
     // 迂回線がその pill を貫く
     for (const le of positionedEdges) {
       if (!hasRenderedLabel(le)) continue;
-      const w = computeLabelBoxW(le.label, le.sub);
+      const w = computeLabelBoxW(le.label, le.sub, textMetrics);
       const h = labelPillH(le.sub);
       pillById.set(le.id, { x: le.labelX - w / 2, y: le.labelY - h / 2, w, h });
     }
@@ -980,7 +1033,7 @@ export function layoutEdges(diag: CdlDiagram, nodes: LaidNode[], lanes: LaidLane
 
     for (const r of flippable) {
       const ownSegs = segsByEdgeId.get(r.e.id)!;
-      const boxW = computeLabelBoxW(r.e.label, r.e.sub);
+      const boxW = computeLabelBoxW(r.e.label, r.e.sub, textMetrics);
       const boxH = labelPillH(r.e.sub);
       const pillAt = (centerX: number) => ({
         x: centerX - boxW / 2,
@@ -1056,7 +1109,7 @@ export function layoutEdges(diag: CdlDiagram, nodes: LaidNode[], lanes: LaidLane
       // 横の重なりで連結成分に割り、 成分ごとに縦を解く。
       const boxes = list.map((r) => ({
         cx: r.baseLabelX,
-        halfW: computeLabelBoxW(r.e.label, r.e.sub) / 2,
+        halfW: computeLabelBoxW(r.e.label, r.e.sub, textMetrics) / 2,
       }));
       const overlapsX = (i: number, j: number): boolean =>
         Math.abs(boxes[i]!.cx - boxes[j]!.cx) < boxes[i]!.halfW + boxes[j]!.halfW + CLEARANCE_LABEL_LABEL;
@@ -1134,7 +1187,7 @@ export function layoutEdges(diag: CdlDiagram, nodes: LaidNode[], lanes: LaidLane
       r,
       baseX: r.baseLabelX,
       baseY: r.baseLabelY,
-      w: computeLabelBoxW(r.e.label, r.e.sub),
+      w: computeLabelBoxW(r.e.label, r.e.sub, textMetrics),
       h: labelPillH(r.e.sub),
     }));
     items.sort((a, b) => a.baseX - b.baseX);
@@ -1336,6 +1389,7 @@ export function bowSharedStraightPaths(
   edges: LaidEdge[],
   nodes: LaidNode[],
   skipIds: ReadonlySet<string>,
+  textMetrics: CdlTextMetrics = "proportional",
 ): void {
   /**
    * 向きを無視した線分の key。 A→B と B→A を同じ群にする。
@@ -1407,7 +1461,7 @@ export function bowSharedStraightPaths(
     const groupIds = new Set(group.map((g) => g.e.id));
     const labelRects = edges
       .filter((x) => hasRenderedLabel(x) && !groupIds.has(x.id))
-      .map((x) => computeLabelBBoxWorld(x));
+      .map((x) => computeLabelBBoxWorld(x, textMetrics));
     const nodeRects = nodes.map((n) => ({ x: n.cx - n.w / 2, y: n.cy - n.h / 2, w: n.w, h: n.h }));
     const build = (seg: Entry["seg"], offset: number): string => {
       // 2 次曲線は制御点の半分の高さを通るので、 狙いの膨らみの 2 倍を制御点に与える。
@@ -1577,7 +1631,7 @@ function sidePoint(n: LaidNode, side: Side): { x: number; y: number } {
 /**
  * orthogonal routing。
  * - 横水平 (left/right pair で y 揃い) → 真横直線
- * - 横水平 (y 不一致) → S 字 (cubic bezier)
+ * - 横水平 (y 不一致) → 角を丸めた L 字
  * - 縦垂直 (top/bottom pair で x 揃い) → 真縦直線
  * - 縦垂直 (x 不一致) → L 字 (途中で 90° 曲げ + 角丸)
  * - その他 (top→right 等の交差) → L 字
@@ -1608,6 +1662,7 @@ function routePath(
    * `widenDetourStubs` が同じ引数に本 list を足して呼び直す。
    */
   avoidRects: readonly Rect[] = [],
+  textMetrics: CdlTextMetrics = "proportional",
 ): {
   d: string;
   labelX: number;
@@ -1631,7 +1686,7 @@ function routePath(
   // label 幅 = SSOT = spec.ts の computeLabelBoxW (CAR-431 で collections.ts labelBBox /
   // render/edges.tsx / predict-bbox.ts の 4 箇所計算を集約)。 L 字 midX / midY を label 収納可能な
   // 位置に押し出す判定で使う。 CLEARANCE_NODE_LABEL は clearance-constants.ts SSOT import。
-  const labelBoxW = edge ? computeLabelBoxW(edge.label, edge.sub) : 0;
+  const labelBoxW = edge ? computeLabelBoxW(edge.label, edge.sub, textMetrics) : 0;
   const labelHalfW = labelBoxW / 2;
   // CAR-518 SSOT ... solid = LABEL_INIT_CLEARANCE (34、 CAR-630 で 26 → 34 復帰)、 dotted-flow = LABEL_INIT_CLEARANCE_DOTTED_FLOW (62、 CAR-630 で 54 → 62 復帰)。
   // routePath 内 labelY 計算 8 箇所で参照、 style 分岐を helper 経由で単一 SSOT 化する。
@@ -2380,7 +2435,11 @@ function routePath(
  * @param edges 確定済 path を持つ辺。 `labelY` のみを書き換える
  * @param nodes 節。 間隔が悪化する置き方を捨てるために使う
  */
-export function repositionParallelLabels(edges: LaidEdge[], nodes: LaidNode[]): void {
+export function repositionParallelLabels(
+  edges: LaidEdge[],
+  nodes: LaidNode[],
+  textMetrics: CdlTextMetrics = "proportional",
+): void {
   // 図の全ての線 (実際に描かれる形)。 1 度だけ開いて使い回す。
   const allSegs = new Map(
     edges.map((e) => [e.id, flattenPathSegments(extractPathSegments(e.d))] as const),
@@ -2413,7 +2472,7 @@ export function repositionParallelLabels(edges: LaidEdge[], nodes: LaidNode[]):
     const pairOrder = [...pair].sort(compareSharedPairOrder);
 
     // 横に重なる label ごとに塊を作る (1 つだけの塊も含む)。
-    const boxes = pair.map((e) => computeLabelBBoxWorld(e));
+    const boxes = pair.map((e) => computeLabelBBoxWorld(e, textMetrics));
     const componentOf = pair.map((_, i) => i);
     for (let i = 0; i < pair.length; i++) {
       for (let j = i + 1; j < pair.length; j++) {
@@ -2441,6 +2500,7 @@ export function repositionParallelLabels(edges: LaidEdge[], nodes: LaidNode[]):
         allEdges: edges,
         allSegs,
         xRange,
+        textMetrics,
       });
       for (let i = 0; i < members.length; i++) members[i]!.labelY = placed[i]!;
     }
@@ -2473,11 +2533,21 @@ function placeAvoidingSiblingPaths(args: {
   allEdges: LaidEdge[];
   allSegs: Map<string, Array<{ x1: number; y1: number; x2: number; y2: number }>>;
   xRange: Map<string, { min: number; max: number }>;
+  textMetrics?: CdlTextMetrics;
 }): number[] {
-  const { members, pair, pairOrder, nodes, allEdges, allSegs, xRange } = args;
+  const {
+    members,
+    pair,
+    pairOrder,
+    nodes,
+    allEdges,
+    allSegs,
+    xRange,
+    textMetrics = "proportional",
+  } = args;
   const sizes = members.map((e) => labelPillH(e.sub));
   const wants = members.map((e) => e.labelY);
-  const boxes = members.map((e) => computeLabelBBoxWorld(e));
+  const boxes = members.map((e) => computeLabelBBoxWorld(e, textMetrics));
   const all = members.map((_, i) => i);
   const spread = (idx: number[]): number[] =>
     spreadWithMinimalShift(
@@ -2761,7 +2831,11 @@ function inflate(r: Rect, pad: number): Rect {
  * 余白は `LABEL_SLIDE_CLEARANCES` を大きい方から試し、 その余白を確保できる位置のうち
  * 今の位置に一番近いものを採る。 どの余白でも置けない場合は動かさない。
  */
-export function slideLabelsAlongOwnPath(edges: LaidEdge[], nodes: readonly LaidNode[]): void {
+export function slideLabelsAlongOwnPath(
+  edges: LaidEdge[],
+  nodes: readonly LaidNode[],
+  textMetrics: CdlTextMetrics = "proportional",
+): void {
   const withLabel = edges.filter((e) => hasRenderedLabel(e));
   if (withLabel.length === 0) return;
   const segsById = new Map<string, FlatSeg[]>();
@@ -2769,7 +2843,7 @@ export function slideLabelsAlongOwnPath(edges: LaidEdge[], nodes: readonly LaidN
   const nodeRects = nodes.map(nodeRect);
 
   for (const e of withLabel) {
-    const w = computeLabelBoxW(e.label, e.sub);
+    const w = computeLabelBoxW(e.label, e.sub, textMetrics);
     const h = labelPillH(e.sub);
     if (w === 0 || h === 0) continue;
     const own = segsById.get(e.id) ?? [];
@@ -2887,10 +2961,12 @@ export function hopEdgeCrossings(edges: LaidEdge[]): void {
   }
 
   for (const e of edges) {
+    if (e.routing === "metro") continue;
     // 部分経路が 2 つ以上ある形 (`M` が複数) は組み直せないので触らない。
     if ((e.d.match(/M/g) ?? []).length !== 1) continue;
     const own = extractPathSegments(e.d);
     if (own.length === 0) continue;
+    if (own.some((s) => s.cmd === "A")) continue;
     const myEnds = ends.get(e.id) ?? [];
 
     /** 区間 index → その区間で跨ぐ点 */
@@ -2995,7 +3071,7 @@ type Vertex = { x: number; y: number };
  * 丸めた角は `L (手前の切り口) Q (角), (向こうの切り口)` の形で書かれており、 `Q` の制御点が
  * 角そのものになる。 折れずに続く `L` は角ではないので点にしない。
  *
- * 開けない形は 3 つ。 部分経路が 2 つ以上ある (`M` が複数)、 弓 (`C`) を含む、 `Q` に制御点が
+ * 開けない形は 3 つ。 部分経路が 2 つ以上ある (`M` が複数)、 弓か円弧 (`C` / `A`) を含む、 `Q` に制御点が
  * 無い。 いずれも触らずに返す = 形そのものが意味を持つため、 組み直すと別の図になる。
  */
 function pathVertices(d: string): Vertex[] | null {
@@ -3006,7 +3082,7 @@ function pathVertices(d: string): Vertex[] | null {
   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 === "C" || s.cmd === "A") return null;
     if (s.cmd === "Q") {
       const c = s.ctrl?.[0];
       if (!c) return null;
@@ -3106,7 +3182,7 @@ export function separateSharedStraightRuns(edges: LaidEdge[], nodes: readonly La
     const v = pathVertices(e.d);
     if (v && v.length >= 2) verts.set(e.id, v);
   }
-  if (verts.size < 2) return;
+  if (verts.size === 0) return;
 
   const moved = new Set<string>();
 
@@ -3129,36 +3205,50 @@ export function separateSharedStraightRuns(edges: LaidEdge[], nodes: readonly La
     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;
+      if (前.routing === "metro" && 後.routing === "metro") continue;
+      // 書き手が形を決めた路線図の線と重なる時は、自動線の方を動かす。
+      const 固定 = 後.routing === "metro" ? 後 : 前;
+      const 動かす = 後.routing === "metro" ? 前 : 後;
+      const B = verts.get(動かす.id);
+      if (!B) continue;
+      const 固定の角 = verts.get(固定.id);
+      const 固定の経路 = 固定の角
+        ? [固定の角]
+        : 固定.routing === "metro"
+          ? extractPathSegments(固定.d)
+              .filter((s) => s.cmd === "L")
+              .map((s) => [{ x: s.x1, y: s.y1 }, { x: s.x2, y: s.y2 }])
+          : [];
+      if (固定の経路.length === 0) continue;
       // 同じ節から出る線は幹線として重ねる (#211)。
-      if (前.from === 後.from) continue;
+      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;
+        for (const A of 固定の経路) {
+          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;
               }
-              moved.add(後.id);
-              break;
             }
           }
         }
@@ -3178,7 +3268,11 @@ export function separateSharedStraightRuns(edges: LaidEdge[], nodes: readonly La
  * 起点は `fan-origin-single-point` のため動かさず、 最初の折れ直後の区間を平行移動する。
  * 1 本しか出ない辺は `detourStub` が決めた箱との中間位置をそのまま保つ。
  */
-export function pullOutgoingFirstCorner(edges: LaidEdge[], nodes: readonly LaidNode[]): void {
+export function pullOutgoingFirstCorner(
+  edges: LaidEdge[],
+  nodes: readonly LaidNode[],
+  textMetrics: CdlTextMetrics = "proportional",
+): void {
   if (edges.length < 2) return;
 
   const 束 = new Map<string, LaidEdge[]>();
@@ -3195,16 +3289,25 @@ export function pullOutgoingFirstCorner(edges: LaidEdge[], nodes: readonly LaidN
   let 札を旧経路へ追従済み = false;
   for (const list of 束.values()) {
     if (list.length < 2) continue;
+    type 最初の折れ候補 = { e: LaidEdge; pts: Vertex[] | null; 最初の長さ: number };
     const 並び = list
-      .flatMap((e) => {
+      .map((e): 最初の折れ候補 | null => {
         const pts = pathVertices(e.d);
-        if (!pts || pts.length < 2) return [];
-        return [{ e, pts, 最初の長さ: Math.hypot(pts[1]!.x - pts[0]!.x, pts[1]!.y - pts[0]!.y) }];
+        if (pts && pts.length >= 2) {
+          return { e, pts, 最初の長さ: Math.hypot(pts[1]!.x - pts[0]!.x, pts[1]!.y - pts[0]!.y) };
+        }
+        if (e.routing !== "metro") return null;
+        const first = extractPathSegments(e.d)[0];
+        if (!first) return null;
+        return { e, pts: null, 最初の長さ: Math.hypot(first.x2 - first.x1, first.y2 - first.y1) };
       })
+      .filter((x): x is 最初の折れ候補 => x !== null)
       .sort((a, b) => b.最初の長さ - a.最初の長さ);
 
     // 最長の線を引いても共有区間は縮まらないので、 2 本目以降だけを動かす。
     for (const { e, pts, 最初の長さ } of 並び.slice(1)) {
+      if (e.routing === "metro") continue;
+      if (!pts) continue;
       // 同じ 2 節を結ぶ線の分離は `bowSharedStraightPaths` の範囲。 迂回経路は重ねて残す。
       if ((同じ組の数.get(`${e.from}->${e.to}`) ?? 0) > 1) continue;
       if (pts.length < 3 || 最初の長さ <= EDGE_STUB_OUT + VERTICAL_DETOUR_CORNER) continue;
@@ -3240,10 +3343,10 @@ export function pullOutgoingFirstCorner(edges: LaidEdge[], nodes: readonly LaidN
       // 旧経路に重なっていた札を先に確定する。 経路を動かした後では重なりが消え、 札だけが
       // 元の位置に取り残される。
       if (!札を旧経路へ追従済み) {
-        slideLabelsAlongOwnPath(edges, nodes);
+        slideLabelsAlongOwnPath(edges, nodes, textMetrics);
         札を旧経路へ追従済み = true;
       }
-      const labelBox = computeLabelBBoxWorld(e);
+      const labelBox = computeLabelBBoxWorld(e, textMetrics);
       const label = { x: labelBox.x + labelBox.w / 2, y: labelBox.y + labelBox.h / 2 };
       const 線分までの距離2 = (a: Vertex, b: Vertex): number => {
         const dx = b.x - a.x;
@@ -3306,9 +3409,16 @@ const MIXED_ROOT_OVERLAP_MIN = 24;
  * 分かれるので、 分かれる点が交差として数えられる。 端点の接触を除く数え方も試したが、
  * 離れる本数は増えないまま別の図で交差が出た。 収束する前の段階で分けるには経路の引き方
  * そのものを変える必要があり、 それは後処理では届かない。
+ *
+ * @returns 差し替えを残した線ごとの終点移動量。 札は経路を動かす pass が全て終わった後に
+ *   `followLabelsToFannedTails` がこの量へ追従させる (#1000)。
  */
-export function fanIncomingEndpoints(edges: LaidEdge[], nodes: readonly LaidNode[]): void {
-  if (edges.length < 2) return;
+export function fanIncomingEndpoints(
+  edges: LaidEdge[],
+  nodes: readonly LaidNode[],
+): ReadonlyMap<string, { dx: number; dy: number }> {
+  const 終点の移動 = new Map<string, { dx: number; dy: number }>();
+  if (edges.length < 2) return 終点の移動;
   const nmap = new Map(nodes.map((n) => [n.id, n]));
   const 平坦な区間 = new Map(edges.map((e) => [e.id, flattenPathSegments(extractPathSegments(e.d))] as const));
 
@@ -3399,6 +3509,7 @@ export function fanIncomingEndpoints(edges: LaidEdge[], nodes: readonly LaidNode
         : k * 間隔 - 中心;
       if (Math.abs(d) < 0.001) continue;
       const e = 並び[k]!.e;
+      if (e.routing === "metro") continue;
       // 交差が増えるなら戻す。 判定は軸と同じ数え方を使う = 独自の数え方は軸と食い違い、
       // 軸が 3 件を数えている状況で 0 件と判定して通してしまった (実測)。
       const 前 = e.d;
@@ -3412,6 +3523,108 @@ export function fanIncomingEndpoints(edges: LaidEdge[], nodes: readonly LaidNode
         if (countEdgeCrossings(edges).count <= 前の交差) break;
         e.d = 前;
       }
+      if (e.d !== 前) 終点の移動.set(e.id, 横 ? { dx: 0, dy: d } : { dx: d, dy: 0 });
+    }
+  }
+
+  return 終点の移動;
+}
+
+/**
+ * 同じ辺へ入るために終点をずらした線の札を、 最後の区間から離れた位置へ追従させる (#1000)。
+ *
+ * 経路を動かす pass が全て終わった後の形で、 最後の区間を覆っている札だけを見る。
+ * まず終点と同じ量だけ動かし、 置けなければ最後の区間の反対側へ折り返す。
+ * 追従側で足す条件は、 候補が最後の区間と交わらないことだけ。
+ *
+ * 置けるかは後段の `resolveLabelClearanceAfterPathPasses` と同じ
+ * `札の移動を塞ぐ相手を探す` で決める。 別の判定で余白を割る位置へ置くと、 後段が同じ札を
+ * 押し直すため (#1002)。
+ *
+ * 自分の線上に載っている overlay は判定の先頭で外す。 線から押し出された overlay は追従させる =
+ * 一律に外すと、 #1000 で直した「押し出された overlay の札が最後の区間を覆う」 形が戻る。
+ *
+ * @param obstacles 箱と縦列の題の矩形。 後段の逃がし pass に渡すものと同じ集まり。
+ */
+export function followLabelsToFannedTails(
+  edges: LaidEdge[],
+  obstacles: readonly BBox[],
+  shifts: ReadonlyMap<string, { dx: number; dy: number }>,
+  textMetrics: CdlTextMetrics = "proportional",
+): void {
+  if (shifts.size === 0) return;
+  const 測り方 = 線の測り方を作る();
+  const labels: BBox[] = edges.filter(hasRenderedLabel).map((e) => ({
+    kind: "edge-label",
+    id: e.id,
+    ...computeLabelBBoxWorld(e, textMetrics),
+  }));
+  const labelIndexByEdgeId = new Map(labels.map((label, index) => [label.id, index] as const));
+  const edgeById = new Map(edges.map((e) => [e.id, e] as const));
+  const 周り: 札の周り = {
+    箱たち: obstacles.filter((o) => o.kind === "node" || o.kind === "lane-label"),
+    labels,
+    edges,
+    edgeById,
+    測り方,
+  };
+
+  for (const e of edges) {
+    const 移動 = shifts.get(e.id);
+    if (!移動 || !hasRenderedLabel(e)) continue;
+
+    const labelIndex = labelIndexByEdgeId.get(e.id);
+    if (labelIndex === undefined) continue;
+    const 元の札 = labels[labelIndex]!;
+    const 自分の区間 = 測り方.区間(e.id, e.d);
+    if (
+      e.overlay &&
+      measurePathLabelGapSegs(自分の区間, {
+        x: 元の札.x + 元の札.w / 2,
+        y: 元の札.y + 元の札.h / 2,
+        w: 0,
+        h: 0,
+      }) <= OVERLAY_LABEL_ON_PATH_TOLERANCE
+    ) continue;
+
+    const 最後 = 自分の区間.at(-1);
+    if (!最後) continue;
+    if (!segmentsCrossRect([最後], 元の札)) continue;
+
+    const 候補a = {
+      labelX: e.labelX + 移動.dx,
+      labelY: e.labelY + 移動.dy,
+      labelAnchor: e.labelAnchor,
+    };
+    const 候補aの箱 = computeLabelBBoxWorld({ ...e, ...候補a }, textMetrics);
+    const 最後は縦 = Math.abs(最後.x2 - 最後.x1) <= Math.abs(最後.y2 - 最後.y1);
+    const 候補 = [
+      候補a,
+      {
+        labelX: 最後は縦
+          ? 最後.x1 * 2 - (候補aの箱.x + 候補aの箱.w / 2)
+          : 候補aの箱.x + 候補aの箱.w / 2,
+        labelY: 最後は縦
+          ? 候補aの箱.y + 候補aの箱.h / 2
+          : 最後.y1 * 2 - (候補aの箱.y + 候補aの箱.h / 2),
+        labelAnchor: "middle" as const,
+      },
+    ];
+
+    for (const c of 候補) {
+      const 札: BBox = {
+        kind: "edge-label",
+        id: e.id,
+        ...computeLabelBBoxWorld({ ...e, ...c }, textMetrics),
+      };
+      if (segmentsCrossRect([最後], 札)) continue;
+      if (札の移動を塞ぐ相手を探す(周り, 元の札, 札) !== null) continue;
+
+      e.labelX = c.labelX;
+      e.labelY = c.labelY;
+      e.labelAnchor = c.labelAnchor;
+      labels[labelIndex] = 札;
+      break;
     }
   }
 }
@@ -3437,7 +3650,7 @@ function 辺から離れた側の位置(e: LaidEdge, 横: boolean): number | nul
 /**
  * 経路の末尾を「辺に沿って助走 → 辺へ垂直に入る」 の形に差し替える。
  *
- * 差し替えられない形なら `null` を返す。 弓 (`C`) を含む経路、 部分経路が 2 つ以上ある形、
+ * 差し替えられない形なら `null` を返す。 弓か円弧 (`C` / `A`) を含む経路、 部分経路が 2 つ以上ある形、
  * 最後が辺へ垂直に入っていない形、 助走を取れないほど短い経路、 差し替えた先が箱に当たる
  * 場合が該当する。
  */
@@ -3451,7 +3664,7 @@ function 末尾を辺に沿ってずらす(
   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;
+  if (segs.some((s) => s.cmd === "C" || s.cmd === "A")) return null;
 
   const last = segs[segs.length - 1]!;
   if (last.cmd !== "L") return null;

package/src/layout/head-label.ts

@@ -17,7 +17,7 @@
  * 使う。 弦の向きを使うと、大きく膨らむ曲線で線が端へ入ってくる向きと別の向きが出る。
  */
 import { EDGE_LABEL_TEXT } from "../label-text";
-import { EDGE_HEAD_MARKER_SIZE } from "../types";
+import { EDGE_HEAD_MARKER_SIZE, type CdlTextMetrics } from "../types";
 import { extractPathSegments } from "./collisions";
 import { hasRenderedLabel } from "./spec";
 import { measureTextWidth } from "./text-width";
@@ -132,12 +132,12 @@ function 向きを取る(end: 点, 候補: ReadonlyArray<点 | undefined>): { en
 }
 
 /**
- * 端の点と、線がその端へ入ってくる向き。
+ * 端の点と、線がその端へ入ってくる向き。 SVG が端の印を回す向きと同じ規則で取る。
  *
  * 行き先の端は最後の区間から、出どころの端は最初の区間を逆にたどって取る。 端の区間の長さが
  * 0 の時は隣の区間へ進む。 向きが取れない (区間が無い / 全て長さ 0) 時は `null`。
  */
-function 端での向き(d: string, 端: 線の端): { end: 点; ux: number; uy: number } | null {
+export function 線の端の向き(d: string, 端: 線の端): { end: 点; ux: number; uy: number } | null {
   const segs = extractPathSegments(d);
   if (segs.length === 0) return null;
   if (端 === "head") {
@@ -146,7 +146,11 @@ function 端での向き(d: string, 端: 線の端): { end: 点; ux: number; uy:
     const 候補 = segs
       .slice()
       .reverse()
-      .flatMap((s) => [s.cmd === "Q" ? s.ctrl?.[0] : s.cmd === "C" ? s.ctrl?.[1] : undefined, { x: s.x1, y: s.y1 }]);
+      .flatMap((s) => {
+        const 制御点 =
+          s.cmd === "C" ? [s.ctrl?.[1], s.ctrl?.[0]] : s.cmd === "Q" ? [s.ctrl?.[0]] : [];
+        return [...制御点, { x: s.x1, y: s.y1 }];
+      });
     return 向きを取る(end, 候補);
   }
   const first = segs[0]!;
@@ -167,10 +171,11 @@ export function 端の字を置く(
     labelY?: number;
   },
   端: 線の端 = "head",
+  textMetrics: CdlTextMetrics = "proportional",
 ): 端の字の置き場所 | null {
   const text = (端 === "head" ? edge.headLabel : edge.tailLabel)?.trim();
   if (!text) return null;
-  const 向き = 端での向き(edge.d, 端);
+  const 向き = 線の端の向き(edge.d, 端);
   if (!向き) return null;
   const { end, ux, uy } = 向き;
   const bx = end.x - ux * 端の字を戻す距離;
@@ -179,6 +184,7 @@ export function 端の字を置く(
     fontSize: 端の字の大きさ,
     fontWeight: EDGE_LABEL_TEXT.sub.fontWeight,
     fontFamily: "mono",
+    textMetrics,
   });
   const h = 箱の高さ;
   // 札の中心。 札を描かない線と、位置がまだ無い線は `null`