@cardenelabs/cdl 0.120.0 → 0.122.0

package/src/layout/edges.ts

@@ -1,4 +1,4 @@
-import type { CdlDiagram, CdlEdge, LaidEdge, LaidLane, LaidNode, Side } from "../types";
+import type { BBox, CdlDiagram, CdlEdge, LaidEdge, LaidLane, LaidNode, Side } from "../types";
 import {
   CLEARANCE_LABEL_LABEL,
   CLEARANCE_NODE_LABEL,
@@ -8,9 +8,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 +39,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)。 角の丸めの位置を決める時に使う。
@@ -214,6 +221,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 +253,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);
+      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);
+      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);
     }
@@ -1577,7 +1615,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 字
@@ -2887,10 +2925,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 +3035,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 +3046,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 +3146,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 +3169,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;
             }
           }
         }
@@ -3195,16 +3249,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;
@@ -3306,9 +3369,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 +3469,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 +3483,103 @@ 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 }>,
+): void {
+  if (shifts.size === 0) return;
+  const 測り方 = 線の測り方を作る();
+  const labels: BBox[] = edges.filter(hasRenderedLabel).map((e) => ({
+    kind: "edge-label",
+    id: e.id,
+    ...computeLabelBBoxWorld(e),
+  }));
+  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 });
+    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 }) };
+      if (segmentsCrossRect([最後], 札)) continue;
+      if (札の移動を塞ぐ相手を探す(周り, 元の札, 札) !== null) continue;
+
+      e.labelX = c.labelX;
+      e.labelY = c.labelY;
+      e.labelAnchor = c.labelAnchor;
+      labels[labelIndex] = 札;
+      break;
     }
   }
 }
@@ -3437,7 +3605,7 @@ function 辺から離れた側の位置(e: LaidEdge, 横: boolean): number | nul
 /**
  * 経路の末尾を「辺に沿って助走 → 辺へ垂直に入る」 の形に差し替える。
  *
- * 差し替えられない形なら `null` を返す。 弓 (`C`) を含む経路、 部分経路が 2 つ以上ある形、
+ * 差し替えられない形なら `null` を返す。 弓か円弧 (`C` / `A`) を含む経路、 部分経路が 2 つ以上ある形、
  * 最後が辺へ垂直に入っていない形、 助走を取れないほど短い経路、 差し替えた先が箱に当たる
  * 場合が該当する。
  */
@@ -3451,7 +3619,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

@@ -22,8 +22,15 @@ import { extractPathSegments } from "./collisions";
 import { hasRenderedLabel } from "./spec";
 import { measureTextWidth } from "./text-width";
 
-/** 端の字の大きさ。 札の下の行と同じ等幅の字 = 多重度を札に入れていた頃と同じ見え方 */
-export const 端の字の大きさ = EDGE_LABEL_TEXT.sub.fontSize;
+/**
+ * 端の字の大きさ (world)。
+ *
+ * **札の下の行とは別に持つ** (#994)。 元は `EDGE_LABEL_TEXT.sub.fontSize` を引いていたが、
+ * 札は箱の間に置くので縮めても読め、端の字は線の脇で単独に立つので同じ大きさでは負ける。
+ * 見本帳はクラス図を 0.42 倍で出しており、19 では画面 8 画素と、箱の中の字 (11 画素) より
+ * 一段小さく見えた。 26 にすると画面で 11 画素になり、箱の中の字と並ぶ。
+ */
+export const 端の字の大きさ = 26;
 
 /** 字の箱の高さ。 字の大きさに上下の余白を足す */
 const 箱の高さ = Math.round(端の字の大きさ * 1.2);
@@ -31,14 +38,17 @@ const 箱の高さ = Math.round(端の字の大きさ * 1.2);
 /**
  * 端の印と端の字の間に空ける余白 (world)。 線に沿う向きと直角の向きで同じ値を使う。
  *
- * **字の箱の高さの半分で測る** (#989)。 使う側は図を縮めて出すので、余白を world の小さい
- * 数で持つと画面では字より狭くなる。 見本帳はクラス図を 0.42 倍で出しており、余白 8 は
- * 3 画素、字の高さ 19 は 8 画素だった = 線と数が 1 つの帯として読めた。
+ * **字の大きさに連れて広げない** (#994)。 #989 では字の箱の半分から導いていたが、字を 26 に
+ * 上げると余白まで 16 に広がり、印の大きさは変わらないのに字だけが線から遠ざかった。
+ * 実機で見た利用者の言葉は「間伸びしてる」 で、図も縦に伸びていた。
+ *
+ * この余白が避ける相手は **印** で、印は字の大きさに連れて変わらない (`EDGE_HEAD_MARKER_SIZE`
+ * は固定)。 避ける相手が動かないなら、避ける幅も動かさない。
  *
- * 字の箱の半分にすると、縮めた後も **字の半行分** の空きが残る。
- * 字を大きくした図では余白も一緒に広がる。
+ * 値は #989 が字 19 で導いた 12 をそのまま据え置く。 見本帳の 0.42 倍では 5 画素で、
+ * 印の縁と字の箱の間に 1 行の半分ほどが残る。
  */
-export const 端の字と印の余白 = Math.round(箱の高さ / 2);
+export const 端の字と印の余白 = 12;
 
 /** 端の印が線の芯から左右へ張り出す長さ (world)。 印の縦の半分 */
 export const 端の印の張り出し = EDGE_HEAD_MARKER_SIZE.既定 / 2;
@@ -122,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") {
@@ -136,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]!;
@@ -160,7 +174,7 @@ export function 端の字を置く(
 ): 端の字の置き場所 | 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 * 端の字を戻す距離;

package/src/layout/metro-path.ts

@@ -0,0 +1,184 @@
+import type { CdlEdge, LaidNode, Side } from "../types";
+import { SAME_HEIGHT_THRESHOLD } from "./curve-path";
+import { computeLabelBoxW, EDGE_STUB_OUT, labelPathClearanceHorizontal, labelPillH } from "./spec";
+
+type 箱 = Pick<LaidNode, "cx" | "cy" | "w" | "h">;
+type 点 = { x: number; y: number };
+
+type 路線図の線の結果 = {
+  d: string;
+  fromSide: Side;
+  toSide: Side;
+  labelX: number;
+  labelY: number;
+  labelAnchor: "middle";
+};
+
+export const METRO_CORNER_RADIUS = 24;
+
+const T = Math.SQRT2 - 1;
+
+function round2(v: number): number {
+  return Math.round(v * 100) / 100;
+}
+
+function point(p: 点): string {
+  return `${round2(p.x)} ${round2(p.y)}`;
+}
+
+function add(p: 点, v: 点, scale: number): 点 {
+  return { x: p.x + v.x * scale, y: p.y + v.y * scale };
+}
+
+function polyline(points: readonly 点[]): string {
+  const distinct = points.filter((p, i) => {
+    const previous = points[i - 1];
+    return previous === undefined || p.x !== previous.x || p.y !== previous.y;
+  });
+  return distinct.map((p, i) => `${i === 0 ? "M" : "L"} ${point(p)}`).join(" ");
+}
+
+/**
+ * 2 つの箱を、水平線と傾き ±1 の斜線だけで結ぶ。
+ *
+ * 向かい合う辺の間に高さの差以上の横幅があれば斜線を中央へ置く。幅が足りない時は、
+ * 斜線の傾きを崩さず両方の右辺を結ぶため、右へ張り出すくの字にする。途中の箱は避けない。
+ */
+export function metroPath(
+  from: 箱,
+  to: 箱,
+  edge?: Pick<CdlEdge, "label" | "sub" | "style" | "overlay">,
+  labelMarginExtra = 0,
+): 路線図の線の結果 {
+  const fromLeft = from.cx - from.w / 2;
+  const fromRight = from.cx + from.w / 2;
+  const toLeft = to.cx - to.w / 2;
+  const toRight = to.cx + to.w / 2;
+
+  let fromSide: Side;
+  let toSide: Side;
+  let x1: number;
+  let x2: number;
+  let dir: 1 | -1;
+
+  if (toLeft >= fromRight) {
+    fromSide = "right";
+    toSide = "left";
+    x1 = fromRight;
+    x2 = toLeft;
+    dir = 1;
+  } else if (toRight <= fromLeft) {
+    fromSide = "left";
+    toSide = "right";
+    x1 = fromLeft;
+    x2 = toRight;
+    dir = -1;
+  } else {
+    fromSide = "right";
+    toSide = "right";
+    x1 = fromRight;
+    x2 = toRight;
+    dir = 1;
+  }
+
+  const y1 = from.cy;
+  const y2 = to.cy;
+  const dy = y2 - y1;
+  const sgn = Math.sign(dy);
+  let d: string;
+  let mid: 点;
+  let tangent: 点;
+
+  if (Math.abs(dy) < SAME_HEIGHT_THRESHOLD) {
+    d = `M ${point({ x: x1, y: y1 })} L ${point({ x: x2, y: y2 })}`;
+    mid = { x: (x1 + x2) / 2, y: (y1 + y2) / 2 };
+    tangent = { x: x2 - x1, y: y2 - y1 };
+  } else if (fromSide !== toSide && Math.abs(x2 - x1) >= Math.abs(dy)) {
+    const horizontal = Math.abs(x2 - x1);
+    const s = (horizontal - Math.abs(dy)) / 2;
+    const p0 = { x: x1, y: y1 };
+    const p1 = { x: x1 + dir * s, y: y1 };
+    const p2 = { x: x2 - dir * s, y: y2 };
+    const p3 = { x: x2, y: y2 };
+    const u = { x: dir, y: 0 };
+    const w = { x: dir / Math.SQRT2, y: sgn / Math.SQRT2 };
+    const r = Math.min(
+      METRO_CORNER_RADIUS,
+      s / T,
+      (Math.SQRT2 * Math.abs(dy)) / (2 * T),
+    );
+    const t = r * T;
+    if (r >= 0.5) {
+      const f1 = dir * sgn > 0 ? 1 : 0;
+      d = [
+        `M ${point(p0)}`,
+        `L ${point(add(p1, u, -t))}`,
+        `A ${round2(r)} ${round2(r)} 0 0 ${f1} ${point(add(p1, w, t))}`,
+        `L ${point(add(p2, w, -t))}`,
+        `A ${round2(r)} ${round2(r)} 0 0 ${1 - f1} ${point(add(p2, u, t))}`,
+        `L ${point(p3)}`,
+      ].join(" ");
+    } else {
+      d = polyline([p0, p1, p2, p3]);
+    }
+    mid = { x: (x1 + x2) / 2, y: (y1 + y2) / 2 };
+    tangent = w;
+  } else {
+    fromSide = "right";
+    toSide = "right";
+    x1 = fromRight;
+    x2 = toRight;
+    const xa = Math.max(x1, x2) + EDGE_STUB_OUT;
+    const h = Math.abs(dy) / 2;
+    const p0 = { x: x1, y: y1 };
+    const p1 = { x: xa, y: y1 };
+    const p2 = { x: xa + h, y: y1 + sgn * h };
+    const p3 = { x: xa, y: y2 };
+    const p4 = { x: x2, y: y2 };
+    const u = { x: 1, y: 0 };
+    const w1 = { x: 1 / Math.SQRT2, y: sgn / Math.SQRT2 };
+    const w2 = { x: -1 / Math.SQRT2, y: sgn / Math.SQRT2 };
+    const r = Math.min(METRO_CORNER_RADIUS, h);
+    const t = r * T;
+    const sweep = sgn > 0 ? 1 : 0;
+    d = [
+      `M ${point(p0)}`,
+      `L ${point(add(p1, u, -t))}`,
+      `A ${round2(r)} ${round2(r)} 0 0 ${sweep} ${point(add(p1, w1, t))}`,
+      `L ${point(add(p2, w1, -r))}`,
+      `A ${round2(r)} ${round2(r)} 0 0 ${sweep} ${point(add(p2, w2, r))}`,
+      `L ${point(add(p3, w2, -t))}`,
+      `A ${round2(r)} ${round2(r)} 0 0 ${sweep} ${point(add(p3, u, -t))}`,
+      `L ${point(p4)}`,
+    ].join(" ");
+    mid = { x: p2.x - T * r, y: p2.y };
+    tangent = { x: 0, y: sgn };
+  }
+
+  if (edge?.overlay) {
+    return { d, fromSide, toSide, labelX: mid.x, labelY: mid.y, labelAnchor: "middle" };
+  }
+
+  const tangentLength = Math.hypot(tangent.x, tangent.y);
+  let normalX = tangent.y / tangentLength;
+  let normalY = -tangent.x / tangentLength;
+  if (normalY > Number.EPSILON || (Math.abs(normalY) <= Number.EPSILON && normalX < 0)) {
+    normalX *= -1;
+    normalY *= -1;
+  }
+  const labelW = computeLabelBoxW(edge?.label, edge?.sub);
+  const labelH = labelPillH(edge?.sub);
+  const distance =
+    labelPathClearanceHorizontal(edge) +
+    (Math.abs(normalX) * labelW + Math.abs(normalY) * labelH) / 2 +
+    labelMarginExtra;
+
+  return {
+    d,
+    fromSide,
+    toSide,
+    labelX: mid.x + normalX * distance,
+    labelY: mid.y + normalY * distance,
+    labelAnchor: "middle",
+  };
+}