@cardenelabs/cdl 0.48.0 → 0.50.0

package/src/render/mono-text.ts

@@ -0,0 +1,44 @@
+/**
+ * 等幅の書体で描く文字の、 `[` と `]` の間にだけ隙間を足す (#817)。
+ *
+ * `JetBrains Mono` の `[` と `]` は横棒が字の枠いっぱいまで伸びている。 図を画面の幅に合わせて
+ * 縮めると (画面上 14px 前後)、 隣り合った 2 本の横棒がつながって `[]` が四角 1 つに見える
+ * (`string[]` が `string□` と読める)。 合字ではない = 合字を止めても見え方は変わらない。
+ *
+ * 隙間は `<tspan dx>` で足す。 文字は増やさないので `textContent` は元のまま (`string[]`) で、
+ * 文字を読む側 (検索 / 読み上げ / 写し取り) は変わらない。 `dx` は文字の塊を新しく始めないので、
+ * 右寄せ (`text-anchor: end`) も隙間を含めた全体に効く。
+ *
+ * `][` は横棒が外を向いていてつながらないので、 `[]` の組ごとに足せば足りる。
+ *
+ * **engine が等幅の書体で描く文字は全てここを通す**。 通していない箇所はソースの走査で落とす
+ * (`mono-bracket-gap.test.tsx`)。
+ */
+import { createElement, type ReactNode } from "react";
+
+/**
+ * 隙間の幅 (字の大きさに対する比)。
+ *
+ * 等倍で撮り比べて、 全ての字の間を 0.06 空けると 2 本の横棒が分かれて読めた。 図はそれより小さく
+ * 縮めて描かれることもあるので、 少し余裕を持たせる。 1 組あたり字幅の 1 割に満たず、 字の送り幅の
+ * 計算 (等幅を前提に文字数から桁の位置を決める) には入れない。
+ */
+export const 角括弧の隙間 = 0.08;
+
+/**
+ * 文字列の `[]` を `[` と、 前に隙間を持つ `]` に分けて返す。 `[]` を含まない文字と、 文字列でない
+ * 値 (数値 / 要素) はそのまま返す。
+ *
+ * @param text 描く文字
+ * @param fontSize その文字の大きさ (隙間はこれに比例する)
+ */
+export function 等幅の字(text: ReactNode, fontSize: number): ReactNode {
+  if (typeof text !== "string" || !text.includes("[]")) return text;
+  const 塊 = text.split("[]");
+  const out: ReactNode[] = [];
+  塊.forEach((s, i) => {
+    if (i > 0) out.push("[", createElement("tspan", { key: i, dx: fontSize * 角括弧の隙間 }, "]"));
+    if (s !== "") out.push(s);
+  });
+  return out;
+}

package/src/visual-validate.ts

@@ -88,6 +88,7 @@ import {
   flattenPathSegments,
   measurePathLabelGapSegs,
   segmentsCrossRect,
+  札が動けない理由,
 } from "./layout/collisions";
 import { measureTextWidth } from "./layout/text-width";
 import { droppedLineIsHidden, labelPlan } from "./kinds/shape-region";
@@ -276,6 +277,14 @@ export interface Violation {
   diagramId: string;
   detail: string;
   severity: "error" | "warn";
+  /**
+   * engine がなぜ直せなかったか (#810)。 分かる時だけ付く。
+   *
+   * `detail` とは別の欄に置く = `detail` は「どの 2 つが何 px か」 を固定の形で持ち、
+   * 消費側がそこから id を読み取っている。 理由を `detail` に足すと、 理由の中の id まで
+   * 違反の対象として拾われる。
+   */
+  reason?: string;
 }
 
 export type VisualAxis =
@@ -1447,12 +1456,23 @@ export function visualValidateLaid(
   const counts = emptyCounts();
   const profile = opts?.profile ?? "production";
   const skipped = SKIPPED_AXES[profile];
-  const push = (axis: VisualAxis, detail: string, severity: "error" | "warn" = "error") => {
+  const push = (
+    axis: VisualAxis,
+    detail: string,
+    severity: "error" | "warn" = "error",
+    reason?: string,
+  ) => {
     // 用途に合わない軸は数えない。
     if (skipped.has(axis)) return;
     // `diag` は壊れた形でも渡りうる (`#393`)。 報告そのものが例外になると、 壊れている
     // ことを伝える手段が無くなる。
-    violations.push({ axis, diagramId: safeDiagramId(diag), detail, severity });
+    violations.push({
+      axis,
+      diagramId: safeDiagramId(diag),
+      detail,
+      severity,
+      ...(reason !== undefined ? { reason } : {}),
+    });
     counts[axis]++;
   };
 
@@ -1479,10 +1499,21 @@ export function visualValidate(diag: CdlDiagram, opts?: ValidateOptions): Visual
   const counts = emptyCounts();
   const profile = opts?.profile ?? "production";
   const skipped = SKIPPED_AXES[profile];
-  const push = (axis: VisualAxis, detail: string, severity: "error" | "warn" = "error") => {
+  const push = (
+    axis: VisualAxis,
+    detail: string,
+    severity: "error" | "warn" = "error",
+    reason?: string,
+  ) => {
     // 用途に合わない軸は数えない。 見なかった軸は report の `skippedAxes` に載せる。
     if (skipped.has(axis)) return;
-    violations.push({ axis, diagramId: safeDiagramId(diag), detail, severity });
+    violations.push({
+      axis,
+      diagramId: safeDiagramId(diag),
+      detail,
+      severity,
+      ...(reason !== undefined ? { reason } : {}),
+    });
     counts[axis]++;
   };
 
@@ -1852,7 +1883,7 @@ function visualValidateInner(
   diag: CdlDiagram,
   violations: Violation[],
   counts: Record<VisualAxis, number>,
-  push: (axis: VisualAxis, detail: string, severity?: "error" | "warn") => void,
+  push: (axis: VisualAxis, detail: string, severity?: "error" | "warn", reason?: string) => void,
   profile: ValidationProfile,
   skippedAxes: VisualAxis[],
   /** 軸 23 が基準にする器。 入口で確かめ済 (`器を確かめる`)。 高さ `undefined` は上限なし。 */
@@ -1909,7 +1940,7 @@ function runAxes(
   diag: CdlDiagram,
   violations: Violation[],
   counts: Record<VisualAxis, number>,
-  push: (axis: VisualAxis, detail: string, severity?: "error" | "warn") => void,
+  push: (axis: VisualAxis, detail: string, severity?: "error" | "warn", reason?: string) => void,
   profile: ValidationProfile,
   skippedAxes: VisualAxis[],
   /** 軸 23 が基準にする器。 入口で確かめ済 (`器を確かめる`)。 高さ `undefined` は上限なし。 */
@@ -2046,10 +2077,35 @@ function runAxes(
   // Axis 6: clearance (near collision 0 件、 CLEARANCE_POLICY 違反)
   // ───────────────────────────────────────────────────────────
   const nears = detectNearCollisions(bboxes, laid.edges);
+  /*
+   * 札が絡む違反には、 engine がなぜ動かせなかったかを添える (#810)。
+   *
+   * 動かす側は逃がし pass と同じ = 札どうしなら後に書いた方 (`resolveLabelClearanceAfterPathPasses`
+   * が後の方を動かす)、 札と別の物なら札。 札の絡まない違反 (箱どうし等) には添えない。
+   */
+  const 札の障害物 = bboxes.filter((b) => b.kind === "node" || b.kind === "lane-label");
+  const 辺の順 = new Map(laid.edges.map((e, i) => [e.id, i] as const));
   for (const n of nears) {
+    const aは札 = n.a.kind === "edge-label";
+    const bは札 = n.b.kind === "edge-label";
+    const 動かす =
+      aは札 && bは札
+        ? (辺の順.get(n.a.id) ?? 0) > (辺の順.get(n.b.id) ?? 0)
+          ? n.a
+          : n.b
+        : aは札
+          ? n.a
+          : bは札
+            ? n.b
+            : null;
+    const 相手 = 動かす === n.a ? n.b : n.a;
+    const reason =
+      動かす !== null ? (札が動けない理由(動かす.id, 相手, laid.edges, 札の障害物) ?? 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)`,
+      "error",
+      reason,
     );
   }