@cardenelabs/cdl 0.103.0 → 0.105.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cardenelabs/cdl",
-  "version": "0.103.0",
+  "version": "0.105.0",
   "description": "CDL (Chainome Diagram Language). Mermaid-like declarative DSL that compiles to animated SVG diagrams. Built for blockchain / Solidity flows, generic enough for sequence / flow / state / ER / topology diagrams.",
   "license": "MIT",
   "author": "cardene777",

package/src/layout/spec.ts

@@ -156,6 +156,122 @@ export function fitsOwnTitleWidth(kind: string | undefined): boolean {
   return KINDS_FITTING_OWN_TITLE.has(kind ?? "");
 }
 
+/**
+ * 題を箱の **外** に描く種別 (#946)。
+ *
+ * 形だけを描く `dyn-*` 5 種は箱の上に名前を置き (`kinds/dyn-shape.tsx`)、図表を自前で描く
+ * 15 種も題を箱の上に置く (`drawsFigureTitle`)。 どちらも箱の内側の余白に縛られないので、
+ * 幅の見積りに内側の余白を足すと、収まっている題まで超過として挙がる。
+ *
+ * 一覧は手で持つと描画側とずれるため、`test/title-width-estimate.test.tsx` が `NODE_KINDS` を
+ * 全件描き、題の役割名 (箱の中 = `node-label` / 箱の外 = `shape-name` / `figure-title`) と
+ * 本述語の返り値の一致を検査する。
+ *
+ * **集合を書き写さず取り込む** = 図表の種別を足した人が片方だけ直すと、見積りがずれる。
+ */
+const KINDS_DRAWING_TITLE_OUTSIDE: ReadonlySet<string> = new Set([
+  "dyn-rect",
+  "dyn-circle",
+  "dyn-arc",
+  "dyn-wave",
+  "dyn-polygon",
+  ...KINDS_DRAWING_OWN_PAYLOAD,
+]);
+
+/** その node が `title` を箱の外に描くか (SSOT) */
+export function drawsTitleOutsideBox(kind: string | undefined): boolean {
+  return KINDS_DRAWING_TITLE_OUTSIDE.has(kind ?? "");
+}
+
+/**
+ * 種別ごとの、題を描く字の大きさ (world)。
+ *
+ * `text-readability` (軸 3) は「字数 × 1 字の幅 + 余白」 で切れるかを見積もる。
+ * 1 字の幅を 22 の定数で持っていたが、**22 で描く種別は 1 つも無い** (#946 で全件実測)。
+ * 見積りが実物の 1.2 倍から 1.7 倍になり、収まっている題まで挙がっていた。
+ *
+ * ここに置くのは **箱が十分に大きい時の大きさ** になる。 `shape-*` の多くは箱の高さに
+ * 比例して字を縮めるため (`kinds/shape-region.tsx` の `labelPlan`)、狭い箱では実物のほうが
+ * 小さくなる。 見積りが実物を下回らない側に倒してあるので、切れる図を見逃す向きには外れない。
+ *
+ * 値は小数を切り上げた整数で持つ。 `event` は 26 を 0.92 倍して描くため実効 23.92 で、
+ * 24 として持つ。 実測との差は検査が 1 未満に抑える。
+ */
+const TITLE_FONT_SIZE_DEFAULT = 18;
+const TITLE_FONT_SIZE: ReadonlyMap<string, number> = new Map<string, number>([
+  ...(["dyn-rect", "dyn-circle", "dyn-arc", "dyn-wave", "dyn-polygon"] as const).map(
+    (k) => [k, 13] as const,
+  ),
+  ...(
+    [
+      "shape-code-block",
+      "shape-cylinder",
+      "shape-diamond",
+      "shape-iot-sensor",
+      "shape-robot-arm",
+      "shape-stack",
+      "shape-terminal",
+    ] as const
+  ).map((k) => [k, 15] as const),
+  ...(
+    [
+      "shape-cloud",
+      "shape-file",
+      "shape-folder",
+      "shape-hexagon",
+      "shape-message-bubble",
+      "shape-window",
+    ] as const
+  ).map((k) => [k, 16] as const),
+  ["shape-kanban-card", 17],
+  ...(
+    [
+      "admin",
+      "api",
+      "backend",
+      "cache",
+      "cdn",
+      "cloud",
+      "database",
+      "decision",
+      "developer",
+      "external-user",
+      "frontend",
+      "merkle-tree",
+      "message-bus",
+      "microservice",
+      "oracle",
+      "person",
+      "queue",
+      "service",
+      "signer",
+      "user-group",
+      "webhook",
+    ] as const
+  ).map((k) => [k, 20] as const),
+  ...(["card", "event", "function"] as const).map((k) => [k, 24] as const),
+  ["actor", 32],
+  ["storage", 34],
+]);
+
+/**
+ * その種別が題を描く字の大きさ (SSOT)。
+ *
+ * 表に無い種別は `shape-*` の多数派と同じ 18 を返す。 種別が増えた時に黙って外れないよう、
+ * `test/title-width-estimate.test.tsx` が `NODE_KINDS` を全件描いて実測と突き合わせる。
+ */
+export function titleFontSize(kind: string | undefined): number {
+  return TITLE_FONT_SIZE.get(kind ?? "") ?? TITLE_FONT_SIZE_DEFAULT;
+}
+
+/**
+ * 題を箱の中に描く種別で、題が使えない左右の余白 (world)。
+ *
+ * `text-readability` (軸 3) が字数から出した幅に足す。 箱の外に題を描く種別には足さない
+ * (`drawsTitleOutsideBox`)。 値は #946 より前から同じで、本 Issue では動かしていない。
+ */
+export const TITLE_BOX_PADDING = 52;
+
 /**
  * `rows` を文字として描く node の種別。
  *

package/src/visual-validate.ts

@@ -143,6 +143,9 @@ import {
   TITLE_ROW_MIN_GAP,
   rendersTitleText,
   fitsOwnTitleWidth,
+  drawsTitleOutsideBox,
+  titleFontSize,
+  TITLE_BOX_PADDING,
   rowBaselineY,
   rowGlyphDepth,
   laneVerticalRange,
@@ -2000,10 +2003,14 @@ function runAxes(
     if (!isRenderedNode(n)) continue;
     const titleTrimmed = n.title?.trim() ?? "";
     if (!titleTrimmed) continue;
-    // 日本語 1 文字 ~22px (kinds/storage.tsx の fontSize 22 を基準) 想定
-    // title 長 * 22 + padding 52 > node.w なら切れる
+    // 1 字の幅は **その種別が題を描く大きさ** から出す (#946)。 22 の定数で持っていたが、
+    // 22 で描く種別は 1 つも無く、見積りが実物の 1.2 倍から 1.7 倍になっていた。
+    //
+    // 箱の内側の余白 (52) は、題を箱の中に描く種別にだけ足す。 箱の外に描く種別 (`dyn-*` の
+    // 名前と図表の題) は内側の余白に縛られないので、足すと収まっている題まで挙がる。
     const titleLen = titleTrimmed.length;
-    const expectedW = titleLen * 22 + 52;
+    const expectedW =
+      titleLen * titleFontSize(n.kind) + (drawsTitleOutsideBox(n.kind) ? 0 : TITLE_BOX_PADDING);
     if (expectedW > n.w + 8) {
       push(
         "text-readability",
@@ -2363,9 +2370,15 @@ function runAxes(
   // 判定 = viewBox 外に node bbox が飛ぶと clip されて視覚破綻。 node bbox (cx±w/2, cy±h/2) の
   // いずれかの辺が viewBox 外なら error。 Axis 14 は edge-label 対象、 本 axis は node 対象で棲み分け。
   // spacer node (id endsWith "-spacer" or /^s\d+-/) は layout 補助用の非表示 node なので判定対象外。
+  //
+  // **描かない node も対象外** (#945)。 板は `isRenderedNode` で描く node だけに寄せる
+  // (`layout/viewbox.ts`) ので、隠れる node を判定に入れると板の外に在ると数える。
+  // 0.93.0 (#924) で板が中身に寄るようになってから、`visibleIf: "0"` の置き石だけを持つ図
+  // (読み取り盤の見本 17 枚) が全て誤りとして挙がっていた。 判定は板と同じ述語を引く。
   // ───────────────────────────────────────────────────────────
   for (const n of laid.nodes) {
     if (n.id.endsWith("-spacer") || /^s\d+-/.test(n.id)) continue;
+    if (!isRenderedNode(n)) continue;
     const nodeLeft = n.cx - n.w / 2;
     const nodeTop = n.cy - n.h / 2;
     const nodeRight = n.cx + n.w / 2;
@@ -3287,10 +3300,15 @@ function runAxes(
    */
   const RESPONSIVE_MIN_ON_SCREEN_FONT_PX = 12;
   /**
-   * 判定の基準にする文字の world 寸法。 箱の題の大きさ (`kinds/storage.tsx` の fontSize 22)。
+   * 判定の基準にする文字の world 寸法。
    *
    * 図の中には これより小さい文字 (辺の名札等) もあるが、 基準を最小の文字に取ると
-   * ほぼ全ての図が境を割る。 最も多く出る文字で見る。
+   * ほぼ全ての図が境を割る。 よく出る大きさで見る。
+   *
+   * **22 で題を描く種別は 1 つも無い** (#946 で `NODE_KINDS` を全件実測)。 元は
+   * `kinds/storage.tsx` の値と書いてあったが、 実物の storage は 34 だった。
+   * ただし本軸は図の中の文字全体を見る目安で、 題の幅を見る軸 3 とは別の判定になる。
+   * 値を動かすと全図の判定が動くため、 #946 では基準の出どころだけを直して値は据え置く。
    */
   const RESPONSIVE_BASE_FONT_WORLD = 22;
   const vbResp = laid.viewBox;