@cardenelabs/cdl 0.122.0 → 0.124.0

package/src/layout/edges.ts

@@ -1,4 +1,13 @@
-import type { BBox, 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,
@@ -211,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 =
@@ -258,7 +272,7 @@ export function layoutEdges(diag: CdlDiagram, nodes: LaidNode[], lanes: LaidLane
       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);
+      const c = curvePath(from, to, e, labelMarginExtra, textMetrics);
       positionedEdges.push({
         ...e,
         d: c.d,
@@ -273,7 +287,7 @@ export function layoutEdges(diag: CdlDiagram, nodes: LaidNode[], lanes: LaidLane
       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);
+      const m = metroPath(from, to, e, labelMarginExtra, textMetrics);
       positionedEdges.push({
         ...e,
         d: m.d,
@@ -329,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) は削除済で、
@@ -687,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 };
@@ -872,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;
@@ -953,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 });
     }
@@ -961,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 });
     }
@@ -1018,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,
@@ -1094,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;
@@ -1172,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);
@@ -1374,6 +1389,7 @@ export function bowSharedStraightPaths(
   edges: LaidEdge[],
   nodes: LaidNode[],
   skipIds: ReadonlySet<string>,
+  textMetrics: CdlTextMetrics = "proportional",
 ): void {
   /**
    * 向きを無視した線分の key。 A→B と B→A を同じ群にする。
@@ -1445,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 倍を制御点に与える。
@@ -1506,10 +1522,98 @@ interface Rect {
   h: number;
 }
 
+/** 経路の角の点。 */
+type Vertex = { x: number; y: number };
+
 function nodeRect(n: LaidNode): Rect {
   return { x: n.cx - n.w / 2, y: n.cy - n.h / 2, w: n.w, h: n.h };
 }
 
+/** 絵の `edge-node-cross` と同じ判定で、経路が貫く箱を 1 箱 1 回で数える。 */
+function countPathObstacleCrossings(d: string, obstacles: readonly LaidNode[]): number {
+  const segments = flattenPathSegments(extractPathSegments(d));
+  return obstacles.filter((obstacle) => segmentsCrossRect(segments, nodeRect(obstacle))).length;
+}
+
+type BackDetourCandidate = {
+  d: string;
+  labelX: number;
+  crossings: number;
+  length: number;
+};
+
+/** top-top の戻り線を、帯に掛かる箱を避けた最も近い外側の列へ回す候補を作る。 */
+function makeBackDetourCandidate(
+  A: Vertex,
+  B: Vertex,
+  from: LaidNode,
+  to: LaidNode,
+  obstacles: readonly LaidNode[],
+  detourY: number,
+  side: DetourSide,
+): BackDetourCandidate {
+  const lowIsA = A.y >= B.y;
+  const low = lowIsA ? A : B;
+  const lowBendY = low.y - VERTICAL_DETOUR_EXIT;
+  const bandTop = Math.min(detourY, lowBendY);
+  const bandBottom = Math.max(detourY, lowBendY);
+  const bandObstacles = obstacles
+    .map(nodeRect)
+    .filter((rect) => rect.y + rect.h >= bandTop && rect.y <= bandBottom);
+  let columnX = detourColumnFor([from, to], side);
+  while (true) {
+    const blockers = bandObstacles.filter(
+      (rect) => rect.x - VERTICAL_DETOUR_GAP < columnX
+        && columnX < rect.x + rect.w + VERTICAL_DETOUR_GAP,
+    );
+    if (blockers.length === 0) break;
+    columnX = side === "left"
+      ? Math.min(...blockers.map((rect) => rect.x - VERTICAL_DETOUR_GAP))
+      : Math.max(...blockers.map((rect) => rect.x + rect.w + VERTICAL_DETOUR_GAP));
+  }
+  const bendAY = lowIsA ? lowBendY : detourY;
+  const bendBY = lowIsA ? detourY : lowBendY;
+  const vertices: Vertex[] = [
+    A,
+    { x: A.x, y: bendAY },
+    { x: columnX, y: bendAY },
+    { x: columnX, y: bendBY },
+    { x: B.x, y: bendBY },
+    B,
+  ];
+  const d = verticesToPath(vertices);
+  const high = lowIsA ? B : A;
+  return {
+    d,
+    labelX: (high.x + columnX) / 2,
+    crossings: countPathObstacleCrossings(d, obstacles),
+    length: vertices.slice(1).reduce((sum, vertex, index) => {
+      const previous = vertices[index]!;
+      return sum + Math.hypot(vertex.x - previous.x, vertex.y - previous.y);
+    }, 0),
+  };
+}
+
+/** 交差数、長さ、終点へ入る線の並びを保つ側の順で、左右候補を 1 つに決める。 */
+function chooseBackDetourCandidate(
+  A: Vertex,
+  B: Vertex,
+  from: LaidNode,
+  to: LaidNode,
+  obstacles: readonly LaidNode[],
+  detourY: number,
+): BackDetourCandidate {
+  const left = makeBackDetourCandidate(A, B, from, to, obstacles, detourY, "left");
+  const right = makeBackDetourCandidate(A, B, from, to, obstacles, detourY, "right");
+  if (left.crossings !== right.crossings) return left.crossings < right.crossings ? left : right;
+  if (Math.abs(left.length - right.length) >= 0.5) return left.length < right.length ? left : right;
+
+  // 同じ長さなら始点側へ回すと、同じ上辺へ入る線の左右の並びを従来から入れ替えずに済む。
+  // 同じ列は左右の基準を持たないため、縦 detour と同じ右を既定にする。
+  const preferred: DetourSide = Math.abs(A.x - B.x) < 0.5 ? "right" : A.x < B.x ? "left" : "right";
+  return preferred === "left" ? left : right;
+}
+
 /** 2 rect の最短距離 (world unit)。 重なっていれば 0。 */
 function rectGap(a: Rect, b: Rect): number {
   const dx = Math.max(0, a.x - (b.x + b.w), b.x - (a.x + a.w));
@@ -1646,6 +1750,7 @@ function routePath(
    * `widenDetourStubs` が同じ引数に本 list を足して呼び直す。
    */
   avoidRects: readonly Rect[] = [],
+  textMetrics: CdlTextMetrics = "proportional",
 ): {
   d: string;
   labelX: number;
@@ -1669,7 +1774,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 化する。
@@ -2357,7 +2462,7 @@ function routePath(
     const detourY = Math.min(A.y, B.y) - 100;
     const corner = 14;
     const xDir = B.x > A.x ? 1 : -1;
-    return {
+    const existing = {
       d: `M ${A.x} ${A.y}
         L ${A.x} ${detourY + corner}
         Q ${A.x} ${detourY}, ${A.x + xDir * corner} ${detourY}
@@ -2369,6 +2474,20 @@ function routePath(
       // CAR-518 SSOT ... dotted-flow は 62 world (marker glow radius 分拡張) を labelInit で参照。
       // top-top detour の水平 segment 上方 labelInit world = spec 準拠距離。
       labelY: detourY - labelInit,
+      labelAnchor: "middle" as const,
+    };
+    const existingCrossings = countPathObstacleCrossings(existing.d, obstacles);
+    if (existingCrossings === 0) return existing;
+
+    // 帯に掛かる箱を避けた最も近い外側の列なら、経路に関わらない遠い箱を足しても列を動かさない。
+    // 遠回りは交差を実際に減らす時だけ採り、減らない時は短く読める従来経路を保って、
+    // 残る交差を `edge-node-cross` に報告させる。
+    const candidate = chooseBackDetourCandidate(A, B, from, to, obstacles, detourY);
+    if (candidate.crossings >= existingCrossings) return existing;
+    return {
+      d: candidate.d,
+      labelX: candidate.labelX,
+      labelY: detourY - labelInit,
       labelAnchor: "middle",
     };
   }
@@ -2418,7 +2537,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),
@@ -2451,7 +2574,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++) {
@@ -2479,6 +2602,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]!;
     }
@@ -2511,11 +2635,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(
@@ -2799,7 +2933,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[]>();
@@ -2807,7 +2945,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) ?? [];
@@ -3026,9 +3164,6 @@ const SHARED_RUN_CORNER = VERTICAL_DETOUR_CORNER;
 /** 同じ直線上とみなす座標の差 (world unit)。 */
 const SHARED_RUN_EPS = 0.5;
 
-/** 経路の角の点。 */
-type Vertex = { x: number; y: number };
-
 /**
  * 経路を「角の点の並び」 に開く。 開けない形なら `null` を返す。
  *
@@ -3232,7 +3367,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[]>();
@@ -3303,10 +3442,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;
@@ -3510,13 +3649,14 @@ 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),
+    ...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));
@@ -3555,7 +3695,7 @@ export function followLabelsToFannedTails(
       labelY: e.labelY + 移動.dy,
       labelAnchor: e.labelAnchor,
     };
-    const 候補aの箱 = computeLabelBBoxWorld({ ...e, ...候補a });
+    const 候補aの箱 = computeLabelBBoxWorld({ ...e, ...候補a }, textMetrics);
     const 最後は縦 = Math.abs(最後.x2 - 最後.x1) <= Math.abs(最後.y2 - 最後.y1);
     const 候補 = [
       候補a,
@@ -3571,7 +3711,11 @@ export function followLabelsToFannedTails(
     ];
 
     for (const c of 候補) {
-      const 札: BBox = { kind: "edge-label", id: e.id, ...computeLabelBBoxWorld({ ...e, ...c }) };
+      const 札: BBox = {
+        kind: "edge-label",
+        id: e.id,
+        ...computeLabelBBoxWorld({ ...e, ...c }, textMetrics),
+      };
       if (segmentsCrossRect([最後], 札)) continue;
       if (札の移動を塞ぐ相手を探す(周り, 元の札, 札) !== null) continue;
 

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";
@@ -171,6 +171,7 @@ export function 端の字を置く(
     labelY?: number;
   },
   端: 線の端 = "head",
+  textMetrics: CdlTextMetrics = "proportional",
 ): 端の字の置き場所 | null {
   const text = (端 === "head" ? edge.headLabel : edge.tailLabel)?.trim();
   if (!text) return null;
@@ -183,6 +184,7 @@ export function 端の字を置く(
     fontSize: 端の字の大きさ,
     fontWeight: EDGE_LABEL_TEXT.sub.fontWeight,
     fontFamily: "mono",
+    textMetrics,
   });
   const h = 箱の高さ;
   // 札の中心。 札を描かない線と、位置がまだ無い線は `null`

package/src/layout/lanes.ts

@@ -1,4 +1,4 @@
-import type { CdlDiagram, CdlEdge, LaidLane, LaidNode } from "../types";
+import type { CdlDiagram, CdlEdge, CdlTextMetrics, LaidLane, LaidNode } from "../types";
 import { CLEARANCE_NODE_LABEL } from "./clearance-constants";
 import { computeLabelBoxW, EDGE_STUB_OUT, targetNodeNodeClearance } from "./spec";
 import { CONTAIN_PAD, DEFAULT_LANE_GAP, HEADER_RESERVE, LANE_LABEL_H, LANE_PAD_MIN } from "./tokens";
@@ -194,6 +194,7 @@ export function expandLaneGapsForEdgeLabels(
   lanes: LaidLane[],
   nodes: LaidNode[],
   edges: readonly CdlEdge[],
+  textMetrics: CdlTextMetrics = "proportional",
 ): LaidLane[] {
   if (lanes.length < 2) return lanes;
   // canvas pivot 新 spec (dragon canvas pivot spec §layout-role-conversion)。
@@ -240,7 +241,7 @@ export function expandLaneGapsForEdgeLabels(
     const fi = laneIndexById.get(fromLane);
     const ti = laneIndexById.get(toLane);
     if (fi === undefined || ti === undefined || fi === ti) continue;
-    const labelBoxW = computeLabelBoxW(edge.label, edge.sub);
+    const labelBoxW = computeLabelBoxW(edge.label, edge.sub, textMetrics);
     if (labelBoxW === 0) continue;
     const lo = Math.min(fi, ti);
     const hi = Math.max(fi, ti);

package/src/layout/metro-path.ts

@@ -1,4 +1,4 @@
-import type { CdlEdge, LaidNode, Side } from "../types";
+import type { CdlEdge, CdlTextMetrics, LaidNode, Side } from "../types";
 import { SAME_HEIGHT_THRESHOLD } from "./curve-path";
 import { computeLabelBoxW, EDGE_STUB_OUT, labelPathClearanceHorizontal, labelPillH } from "./spec";
 
@@ -49,6 +49,7 @@ export function metroPath(
   to: 箱,
   edge?: Pick<CdlEdge, "label" | "sub" | "style" | "overlay">,
   labelMarginExtra = 0,
+  textMetrics: CdlTextMetrics = "proportional",
 ): 路線図の線の結果 {
   const fromLeft = from.cx - from.w / 2;
   const fromRight = from.cx + from.w / 2;
@@ -166,7 +167,7 @@ export function metroPath(
     normalX *= -1;
     normalY *= -1;
   }
-  const labelW = computeLabelBoxW(edge?.label, edge?.sub);
+  const labelW = computeLabelBoxW(edge?.label, edge?.sub, textMetrics);
   const labelH = labelPillH(edge?.sub);
   const distance =
     labelPathClearanceHorizontal(edge) +

package/src/layout/nodes.ts

@@ -1,5 +1,5 @@
 import { requiredRowsWidth } from "../kinds/row-align";
-import type { CdlDiagram, LaidLane, LaidNode } from "../types";
+import type { CdlDiagram, CdlTextMetrics, LaidLane, LaidNode } from "../types";
 import { 端の字に要る線の長さ } from "./head-label";
 import {
   hasRenderedLabel,
@@ -77,10 +77,14 @@ function autoStorageHeight(
  *
  * 著者が n.w を明示している場合は尊重 (snapshot 互換 / catalog thumbnail 縮小指定を壊さない)。
  */
-function autoRowsWidth(n: { kind: string; rows?: string[]; w?: number }, defaultW: number): number {
+function autoRowsWidth(
+  n: { kind: string; rows?: string[]; w?: number },
+  defaultW: number,
+  textMetrics: CdlTextMetrics = "proportional",
+): number {
   if (n.w != null) return n.w;
   if (!n.rows || n.rows.length === 0) return defaultW;
-  const required = requiredRowsWidth(n.rows, n.kind);
+  const required = requiredRowsWidth(n.rows, n.kind, textMetrics);
   return Math.max(defaultW, required);
 }
 
@@ -171,7 +175,11 @@ function requiredStackGapForEdgeLabels(diag: CdlDiagram, allStacks: readonly num
   return required;
 }
 
-export function layoutNodes(diag: CdlDiagram, lanes: LaidLane[]): LaidNode[] {
+export function layoutNodes(
+  diag: CdlDiagram,
+  lanes: LaidLane[],
+  textMetrics: CdlTextMetrics,
+): LaidNode[] {
   const laneMap = new Map(lanes.map((l) => [l.id, l]));
 
   // 全 lane を跨いで stack 番号で row を共有する。
@@ -232,7 +240,7 @@ export function layoutNodes(diag: CdlDiagram, lanes: LaidLane[]): LaidNode[] {
     }
     const size = NODE_SIZE[n.kind];
     if (n.posX !== undefined && n.posY !== undefined) {
-      const w = n.posW ?? n.w ?? autoRowsWidth(n, size.w);
+      const w = n.posW ?? n.w ?? autoRowsWidth(n, size.w, textMetrics);
       const h = n.posH ?? n.h ?? rowH.get(n.stack) ?? size.h;
       out.push({
         ...n,
@@ -270,7 +278,7 @@ export function layoutNodes(diag: CdlDiagram, lanes: LaidLane[]): LaidNode[] {
     const h = n.h ?? (自前の高さ ? 箱の高さ(n, size.h) : 段の高さ);
     const cy = 段の芯;
     // n.w 明示時は尊重、 未指定で rows[] を持つ node は内容長に合わせて auto 拡張。
-    const w = autoRowsWidth(n, size.w);
+    const w = autoRowsWidth(n, size.w, textMetrics);
     out.push({
       ...n,
       cx,

package/src/layout/predict-bbox.ts

@@ -9,7 +9,7 @@
  */
 
 import { computeLabelBBoxWorld } from "./spec";
-import type { LaidEdge, LaidNode } from "../types";
+import type { CdlTextMetrics, LaidEdge, LaidNode } from "../types";
 
 /**
  * Edge label の world 単位 bbox 予測 (spec.ts SSOT の re-export)。
@@ -22,8 +22,11 @@ import type { LaidEdge, LaidNode } from "../types";
  * @param edge LaidEdge (labelX, labelY, labelAnchor, label, sub 既確定)
  * @returns { x, y, w, h } の world 座標 bbox (render 実 rect 位置と一致)
  */
-export function predictLabelBBoxWorld(edge: LaidEdge): { x: number; y: number; w: number; h: number } {
-  return computeLabelBBoxWorld(edge);
+export function predictLabelBBoxWorld(
+  edge: LaidEdge,
+  textMetrics: CdlTextMetrics = "proportional",
+): { x: number; y: number; w: number; h: number } {
+  return computeLabelBBoxWorld(edge, textMetrics);
 }
 
 /**

package/src/layout/self-loop.ts

@@ -1,4 +1,4 @@
-import type { CdlEdge, LaidEdge, LaidNode, Side } from "../types";
+import type { CdlEdge, CdlTextMetrics, LaidEdge, LaidNode, Side } from "../types";
 import { CLEARANCE_LABEL_LABEL } from "./clearance-constants";
 import { computeLabelBoxW, LABEL_TO_PATH_CLEARANCE, labelPillH } from "./spec";
 
@@ -120,7 +120,12 @@ export function pickFreeSides(occupied: ReadonlySet<Side> | undefined, count: nu
  *
  * 1 本だけの時は積む必要が無いので、辺の中央の真横に 1 つ置くだけになる。
  */
-export function routeSelfLoopGroup(edges: CdlEdge[], node: LaidNode, side: Side): LaidEdge[] {
+export function routeSelfLoopGroup(
+  edges: CdlEdge[],
+  node: LaidNode,
+  side: Side,
+  textMetrics: CdlTextMetrics = "proportional",
+): LaidEdge[] {
   const horizontal = side === "left" || side === "right";
   const g = sideGeometry(node, side);
   const span = fitSpan(horizontal ? node.h : node.w, SELF_LOOP_SPAN);
@@ -135,7 +140,7 @@ export function routeSelfLoopGroup(edges: CdlEdge[], node: LaidNode, side: Side)
 
   // 積む向きの語の大きさ。 横の辺なら縦に積むので高さ、縦の辺なら横に積むので幅
   const 語幅 = edges.map((e) =>
-    horizontal ? labelPillH(e.sub) : computeLabelBoxW(e.label, e.sub),
+    horizontal ? labelPillH(e.sub) : computeLabelBoxW(e.label, e.sub, textMetrics),
   );
   const 位置: number[] = [];
   let 積 = 0;
@@ -181,6 +186,7 @@ export function layoutSelfLoops(
   edges: CdlEdge[],
   nodes: Map<string, LaidNode>,
   occupiedBySide: ReadonlyMap<string, ReadonlySet<Side>>,
+  textMetrics: CdlTextMetrics = "proportional",
 ): LaidEdge[] {
   // 辺の割り当ては節ごとに 1 度で決める。 輪を 1 本ずつ処理して選び直すと、2 本目が
   // 1 本目の辺を「空いている」 と見て同じ場所に重なる
@@ -213,5 +219,5 @@ export function layoutSelfLoops(
   }
   // 語の置き場所は束の中の並びで決まるので、束ごとにまとめて経路にする。
   // 返す並びは呼出側が id で引き直すため、ここでは束の順で構わない
-  return [...束.values()].flatMap((b) => routeSelfLoopGroup(b.edges, b.node, b.side));
+  return [...束.values()].flatMap((b) => routeSelfLoopGroup(b.edges, b.node, b.side, textMetrics));
 }

package/src/layout/spec.ts

@@ -18,7 +18,7 @@
 import { CLEARANCE_LABEL_LABEL, CLEARANCE_NODE_LABEL } from "./clearance-constants";
 import { measureTextWidth } from "./text-width";
 import { EDGE_LABEL_TEXT } from "../label-text";
-import type { CdlEdge, LaidEdge, LaidLane, LaidNode } from "../types";
+import type { CdlEdge, CdlTextMetrics, LaidEdge, LaidLane, LaidNode } from "../types";
 
 // ─── edge label pill bbox SSOT (CAR-431 で 3 定義箇所を集約) ──
 
@@ -965,10 +965,21 @@ export function requiredVerticalLabelGap(pillHs: readonly number[]): number {
  * @param sub sub text (undefined なら 0)
  * @returns pill 全体の world 幅 (偶数)
  */
-export function computeLabelBoxW(label: string | undefined, sub: string | undefined): number {
-  const mainW = measureTextWidth(label ?? "", { fontSize: EDGE_LABEL_TEXT.main.fontSize });
+export function computeLabelBoxW(
+  label: string | undefined,
+  sub: string | undefined,
+  textMetrics: CdlTextMetrics = "proportional",
+): number {
+  const mainW = measureTextWidth(label ?? "", {
+    fontSize: EDGE_LABEL_TEXT.main.fontSize,
+    textMetrics,
+  });
   const subW = sub
-    ? measureTextWidth(sub, { fontSize: EDGE_LABEL_TEXT.sub.fontSize, fontFamily: "mono" })
+    ? measureTextWidth(sub, {
+        fontSize: EDGE_LABEL_TEXT.sub.fontSize,
+        fontFamily: "mono",
+        textMetrics,
+      })
     : 0;
   const raw = Math.max(mainW, subW) + LABEL_PILL_PAD_X * 2;
   // 切り上げる前に浮動小数の誤差を落とす。 文字幅は係数の掛け算と足し算を重ねるので、
@@ -999,8 +1010,11 @@ export function computeLabelBoxW(label: string | undefined, sub: string | undefi
  * @param edge LaidEdge (labelX / labelY / labelAnchor / label / sub 既確定)
  * @returns { x, y, w, h } の world 座標 bbox (render 実 rect 位置と一致)
  */
-export function computeLabelBBoxWorld(edge: LaidEdge): { x: number; y: number; w: number; h: number } {
-  const boxW = computeLabelBoxW(edge.label, edge.sub);
+export function computeLabelBBoxWorld(
+  edge: LaidEdge,
+  textMetrics: CdlTextMetrics = "proportional",
+): { x: number; y: number; w: number; h: number } {
+  const boxW = computeLabelBoxW(edge.label, edge.sub, textMetrics);
   const boxH = edge.sub ? LABEL_PILL_H_WITH_SUB : LABEL_PILL_H_MAIN_ONLY;
   const anchor = edge.labelAnchor;
   const boxLeftX = anchor === "start" ? 0 : anchor === "end" ? -boxW : -boxW / 2;