@cardenelabs/cdl 0.121.0 → 0.123.0

package/src/visual-validate.ts

@@ -77,7 +77,14 @@
  * test が無いと、 次に種別を足した時に同じ状態へ戻る。
  * ───────────────────────────────────────────────────────────
  */
-import { EDGE_HEADS, type CdlDiagram, type LaidDiagram, type LaidNode, type NodeKind } from "./types";
+import {
+  EDGE_HEADS,
+  type CdlDiagram,
+  type CdlTextMetrics,
+  type LaidDiagram,
+  type LaidNode,
+  type NodeKind,
+} from "./types";
 import { CLEARANCE_LANE_LABEL, DIST_LABEL_PATH_MAX } from "./layout/clearance-constants";
 import { layout } from "./layout";
 import {
@@ -92,7 +99,7 @@ import {
 } from "./layout/collisions";
 import { measureTextWidth } from "./layout/text-width";
 import { droppedLineIsHidden, labelPlan } from "./kinds/shape-region";
-import { 箱に積む, type 積む行 } from "./kinds/box-lines";
+import { 箱に積む, 箱の字を測る, type 積む行 } from "./kinds/box-lines";
 import { 木の中身, 木の行 } from "./kinds/tree";
 import { 放射の中身, 放射の行 } from "./kinds/mind-map";
 import { templateRefIds } from "./render/utils";
@@ -143,6 +150,7 @@ import {
   TITLE_ROW_MIN_GAP,
   rendersTitleText,
   fitsOwnTitleWidth,
+  skipsNodeTitleWidthCheck,
   drawsTitleOutsideBox,
   titleScalesToFit,
   MIN_TITLE_FONT_SIZE,
@@ -586,7 +594,12 @@ function emptyCounts(): Record<VisualAxis, number> {
 }
 
 /** 箱に行を積む種別の、 中の 1 箱。 */
-type 積む箱 = { 行: 積む行[]; w: number; h: number };
+type 積む箱 = {
+  行: 積む行[];
+  w: number;
+  h: number;
+  測る: (text: string, fontSize: number) => number;
+};
 
 /**
  * 木と放射の中の箱を、 **描く時と同じ手順で** 集める (`#538`)。
@@ -600,10 +613,23 @@ type 積む箱 = { 行: 積む行[]; w: number; h: number };
  *
  * 行を積まない種別では空を返す。
  */
-function 積む箱を集める(n: LaidNode): 積む箱[] {
-  const 箱 = (b: { w: number; h: number }, 行: 積む行[]): 積む箱 => ({ 行, w: b.w, h: b.h });
-  if (n.kind === "tree-hierarchy") return 木の中身(n).nodes.map((b) => 箱(b, 木の行(b)));
-  if (n.kind === "mind-map") return (放射の中身(n)?.nodes ?? []).map((b) => 箱(b, 放射の行(b)));
+function 積む箱を集める(
+  n: LaidNode,
+  textMetrics: CdlTextMetrics = "proportional",
+): 積む箱[] {
+  const 箱 = (
+    b: { w: number; h: number },
+    行: 積む行[],
+    測る: 積む箱["測る"],
+  ): 積む箱 => ({ 行, w: b.w, h: b.h, 測る });
+  if (n.kind === "tree-hierarchy") {
+    const 測る = 箱の字を測る(textMetrics);
+    return 木の中身(n, {}, textMetrics).nodes.map((b) => 箱(b, 木の行(b), 測る));
+  }
+  if (n.kind === "mind-map") {
+    const 測る = 箱の字を測る(textMetrics);
+    return (放射の中身(n, {}, textMetrics)?.nodes ?? []).map((b) => 箱(b, 放射の行(b), 測る));
+  }
   return [];
 }
 
@@ -1971,6 +1997,7 @@ function runAxes(
   /** 軸 23 が基準にする器。 入口で確かめ済 (`器を確かめる`)。 高さ `undefined` は上限なし。 */
   器: { 幅: number; 高さ: number | undefined },
 ): VisualValidationReport {
+  const textMetrics = laid.textMetrics ?? "proportional";
   // ───────────────────────────────────────────────────────────
   // Axis 1: node-visibility (bbox 面積 / 最小寸法)
   //
@@ -1980,6 +2007,8 @@ function runAxes(
   const LIFELINE_W_THRESHOLD = 8;
   for (const n of laid.nodes) {
     if (n.w < LIFELINE_W_THRESHOLD) continue;
+    // 駅は文字を収める箱ではなく線路上の印なので、箱向けの最小寸法を要求しない。
+    if (n.kind === "station") continue;
     if (n.w < MIN_NODE_W || n.h < MIN_NODE_H) {
       push(
         "node-visibility",
@@ -1991,7 +2020,7 @@ function runAxes(
   // ───────────────────────────────────────────────────────────
   // Axis 2: edge-label-overlap (edge label ↔ node の AABB collision)
   // ───────────────────────────────────────────────────────────
-  const bboxes = collectBBoxes(laid.lanes, laid.nodes, laid.edges);
+  const bboxes = collectBBoxes(laid.lanes, laid.nodes, laid.edges, textMetrics);
   const collisions = detectCollisions(bboxes, laid.edges);
   for (const c of collisions) {
     const involvesEdgeLabel = c.a.kind === "edge-label" || c.b.kind === "edge-label";
@@ -2016,6 +2045,8 @@ function runAxes(
     // 自分で幅に合わせて切る種別も同じ。 字数から幅を出す下の近似は字の大きさ 22 を前提に
     // しており、 それより小さい字で描く種別に当てると偽陽性になる (#469)
     if (fitsOwnTitleWidth(n.kind)) continue;
+    // 箱の外に出す駅名は小さな丸の幅で切らないため、箱幅を上限にする前提が成り立たない。
+    if (skipsNodeTitleWidthCheck(n.kind)) continue;
     // 常に非表示の node の文字は画面に出ないので、 切れようがない。
     if (!isRenderedNode(n)) continue;
     const titleTrimmed = n.title?.trim() ?? "";
@@ -2036,7 +2067,11 @@ function runAxes(
     // 名前と図表の題) は内側の余白に縛られないので、足すと収まっている題まで挙がる。
     const 余白 = drawsTitleOutsideBox(n.kind) ? 0 : TITLE_BOX_PADDING;
     const 使える幅 = n.w - 余白;
-    const 実幅 = measureTextWidth(titleTrimmed, { fontSize: titleFontSize(n.kind), bound: "drawn" });
+    const 実幅 = measureTextWidth(titleTrimmed, {
+      fontSize: titleFontSize(n.kind),
+      bound: "drawn",
+      textMetrics,
+    });
     if (titleScalesToFit(n.kind, n.h)) {
       // 収まるまで縮める種別は、題がはみ出すことが起きない。 代わりに字が読めない大きさまで
       // 落ちるので、**読める下限を割るか** を見る (#951)。 下限まで縮めても収まらない時
@@ -2152,7 +2187,15 @@ function runAxes(
             : null;
     const 相手 = 動かす === n.a ? n.b : n.a;
     const reason =
-      動かす !== null ? (札が動けない理由(動かす.id, 相手, laid.edges, 札の障害物) ?? undefined) : undefined;
+      動かす !== null
+        ? (札が動けない理由(
+            動かす.id,
+            相手,
+            laid.edges,
+            札の障害物,
+            textMetrics,
+          ) ?? undefined)
+        : undefined;
     push(
       "clearance",
       `${n.a.kind}:${n.a.id} ↔ ${n.b.kind}:${n.b.id} gap=${n.gap.toFixed(1)}px (need ${n.required}px)`,
@@ -2189,7 +2232,10 @@ function runAxes(
     if (!hasRenderedLabel(e)) continue;
     const segs = extractPathSegments(e.d);
     if (segs.length === 0) continue;
-    const minDist = measurePathLabelGapSegs(flattenPathSegments(segs), computeLabelBBoxWorld(e));
+    const minDist = measurePathLabelGapSegs(
+      flattenPathSegments(segs),
+      computeLabelBBoxWorld(e, textMetrics),
+    );
     if (!Number.isFinite(minDist)) continue;
     if (minDist > PROXIMITY_ERROR_THRESHOLD) {
       push(
@@ -2259,9 +2305,16 @@ function runAxes(
   // ───────────────────────────────────────────────────────────
   for (const e of laid.edges) {
     if (!hasRenderedLabel(e)) continue;
-    const mainW = measureTextWidth(e.label ?? "", { fontSize: EDGE_LABEL_TEXT.main.fontSize });
+    const mainW = measureTextWidth(e.label ?? "", {
+      fontSize: EDGE_LABEL_TEXT.main.fontSize,
+      textMetrics,
+    });
     const subW = e.sub
-      ? measureTextWidth(e.sub, { fontSize: EDGE_LABEL_TEXT.sub.fontSize, fontFamily: "mono" })
+      ? measureTextWidth(e.sub, {
+          fontSize: EDGE_LABEL_TEXT.sub.fontSize,
+          fontFamily: "mono",
+          textMetrics,
+        })
       : 0;
     const expectedBoxW = Math.max(mainW, subW) + LABEL_PILL_PAD_X * 2;
     const bbox = bboxes.find((b) => b.kind === "edge-label" && b.id === e.id);
@@ -2494,7 +2547,9 @@ function runAxes(
   // 共有 plan が行を落とさない高さでは、 固有 layout がその行を描かない種別でも報告されない。
   // 本軸は箱が狭くて落ちた行だけを扱い、 種別が元から対応しない欄は別の検査範囲とする。
   for (const n of laid.nodes) {
-    const 落とした = labelPlan(n).落とした.filter((line) => droppedLineIsHidden(n.kind, line));
+    const 落とした = labelPlan(n).落とした.filter((line) =>
+      droppedLineIsHidden(n.kind, line),
+    );
     if (落とした.length === 0) continue;
     push(
       "shape-label-dropped",
@@ -2526,7 +2581,7 @@ function runAxes(
   // なので、 対象から外すと変えた時に落ちても見えない。
   // ───────────────────────────────────────────────────────────
   for (const n of laid.nodes) {
-    const 箱 = 積む箱を集める(n);
+    const 箱 = 積む箱を集める(n, textMetrics);
     if (箱.length === 0) continue;
     /** 補足を書いた箱の数。 書いていない箱は元から描かれないので数えない。 */
     let 対象 = 0;
@@ -2536,7 +2591,7 @@ function runAxes(
       const 宣言 = b.行.slice(1).filter((r) => r.text.trim() !== "");
       if (宣言.length === 0) continue;
       対象 += 1;
-      const 残った = new Set(箱に積む(b.行, b.w, b.h).map((r) => r.役割));
+      const 残った = new Set(箱に積む(b.行, b.w, b.h, b.測る).map((r) => r.役割));
       if (宣言.every((r) => 残った.has(r.役割))) continue;
       落ちた.push({ title: b.行[0]?.text ?? "", h: b.h });
     }
@@ -3111,6 +3166,13 @@ function runAxes(
     for (let i = 0; i + 1 < sorted.length; i++) {
       const upper = sorted[i]!;
       const lower = sorted[i + 1]!;
+      // 横の範囲が重ならない箱は同じ lane に横並びで置かれた組なので、縦の隙間を測らない。
+      if (
+        upper.cx + upper.w / 2 <= lower.cx - lower.w / 2 ||
+        lower.cx + lower.w / 2 <= upper.cx - upper.w / 2
+      ) {
+        continue;
+      }
       const upperBottom = upper.cy + upper.h / 2;
       const lowerTop = lower.cy - lower.h / 2;
       const gap = lowerTop - upperBottom;
@@ -4214,17 +4276,25 @@ function runAxes(
         y1: number;
         x2: number;
         y2: number;
-        cmd: "L" | "Q" | "C";
+        cmd: "L" | "Q" | "C" | "A";
         ctrl?: ReadonlyArray<{ x: number; y: number }>;
       }>,
       peakY: number,
     ): Array<{ minX: number; maxX: number }> => {
       const out: Array<{ minX: number; maxX: number }> = [];
+      let 円弧の始点: { x: number; y: number } | null = null;
       for (const s of segs) {
-        if (Math.abs(s.y1 - s.y2) > 1) continue;
-        if (Math.abs(s.y1 - peakY) > 1) continue;
+        if (s.cmd === "A") {
+          // 飛び越しの弧は同じ高さの通り道の上の小さな山で、山の前後は 1 本の通り道になる。
+          円弧の始点 ??= { x: s.x1, y: s.y1 };
+          continue;
+        }
+        const 始点 = 円弧の始点 ?? { x: s.x1, y: s.y1 };
+        円弧の始点 = null;
+        if (Math.abs(始点.y - s.y2) > 1) continue;
+        if (Math.abs(始点.y - peakY) > 1) continue;
         if (s.cmd !== "L" && !(s.ctrl ?? []).every((c) => Math.abs(c.y - peakY) <= 1)) continue;
-        out.push({ minX: Math.min(s.x1, s.x2), maxX: Math.max(s.x1, s.x2) });
+        out.push({ minX: Math.min(始点.x, s.x2), maxX: Math.max(始点.x, s.x2) });
       }
       return out;
     };
@@ -4382,7 +4452,7 @@ function runAxes(
       const allowedLanes = new Set<string>();
       if (fromNode) allowedLanes.add(fromNode.lane);
       if (toNode) allowedLanes.add(toNode.lane);
-      const box = computeLabelBBoxWorld(e);
+      const box = computeLabelBBoxWorld(e, textMetrics);
       for (const lane of laid.lanes) {
         if (allowedLanes.has(lane.id)) continue;
         const side = rectCrossesLaneBorder(box, lane, rangeByLane.get(lane.id));