@cardenelabs/cdl 0.116.0 → 0.118.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cardenelabs/cdl",
-  "version": "0.116.0",
+  "version": "0.118.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/kinds/storage.tsx

@@ -8,6 +8,8 @@ import {
   ROW_PITCH_STORAGE,
   ROW_TOP_STORAGE,
   STORAGE_ROW_DIVIDER_Y,
+  STORAGE_SUBTITLE_BASELINE,
+  STORAGE_SUBTITLE_FONT,
   STORAGE_TITLE_BASELINE,
   STORAGE_TITLE_FONT,
   SUBTITLE_ROW_SHIFT,
@@ -49,10 +51,13 @@ const ROW_GLYPH_RISE = 8;
 /**
  * 題の下に置く呼び名の baseline (#578)。
  *
- * 題 (78) と 1 行目 (130) の間。 印で分ける箱では区切り線を引かないので、その分の余白が空く。
+ * 題 (86) と 1 行目 (130) の間。 印で分ける箱では区切り線を引かないので、その分の余白が空く。
  * ER の表名や状態の名前は識別子なので、その下に日本語の呼び名を薄く添える。
+ *
+ * **値は `layout/spec.ts` が持つ** (#974)。 高さを出す側が同じ値を読むため、
+ * ここで別に持つと片方だけ動いて箱の下が空く。
  */
-const SUBTITLE_BASELINE = 118;
+const SUBTITLE_BASELINE = STORAGE_SUBTITLE_BASELINE;
 
 /**
  * 縞を敷く最少の行数 (#627)。
@@ -63,8 +68,13 @@ const SUBTITLE_BASELINE = 118;
  */
 const STRIPE_MIN_ROWS = 2;
 
-/** 呼び名の級。 行の名前 (26) より小さく、型 (24) と同じ */
-const SUBTITLE_FONT = 20;
+/**
+ * 呼び名の級。 行の名前 (26) より小さく、型 (24) と同じ。
+ *
+ * **値は `layout/spec.ts` が持つ** (#974)。 高さを出す側が字形の深さをこの級から
+ * 見込むため、ここで別に持つと片方だけ動く。
+ */
+const SUBTITLE_FONT = STORAGE_SUBTITLE_FONT;
 
 /** 主キーの下線を名前の baseline からどれだけ下に引くか */
 const UNDERLINE_DROP = 7;

package/src/layout/nodes.ts

@@ -9,6 +9,7 @@ import {
   requiredVerticalLabelGap,
   SUBTITLE_ROW_SHIFT,
   中身から出す高さ,
+  呼び名で伸びる量,
   目印なしの繰り上げ,
 } from "./spec";
 import { DEFAULT_NODE_GAP, HEADER_RESERVE, LANE_TOP_PAD, NODE_SIZE, STACK_GAP } from "./tokens";
@@ -47,7 +48,11 @@ function autoStorageHeight(
   const 呼び名の分 = n.subtitle ? SUBTITLE_ROW_SHIFT : 0;
   // 小見出しを書かない形では字を上へ繰り上げるので、その分だけ箱も低くする (#589)
   const 繰り上げ = n.eyebrow ? 0 : 目印なしの繰り上げ("storage");
-  if (!n.rows || n.rows.length === 0) return 115 + 呼び名の分 - 繰り上げ;
+  // 行を持たない箱は **下げる相手が居ない** ので、行の下げ幅ではなく字の塊が下に伸びる分を
+  // 足す (#974)。 46 を足していた間は上 17 に対し下 39 と、下だけ 22 空いていた
+  if (!n.rows || n.rows.length === 0) {
+    return 115 + (n.subtitle ? 呼び名で伸びる量 : 0) - 繰り上げ;
+  }
   const 必要 = requiredRowsHeight("storage", n.rows.length) ?? defaultH;
   // 行頭の印を持つ箱は **中身の足し算だけ** で高さを決める (#578)。 下限を残すと、行が
   // 1 つしか無い箱が 4 行の箱と同じ高さになり、下が空いたまま並ぶ。

package/src/layout/spec.ts

@@ -658,6 +658,16 @@ export const STORAGE_TITLE_FONT = 34;
  */
 export const SUBTITLE_ROW_SHIFT = 46;
 
+/**
+ * `kinds/storage.tsx` の呼び名 (subtitle) の baseline (#578)。
+ *
+ * 題 (86) と 1 行目 (130) の間に置く。 描き手が字を置く位置で、高さの計算もここを読む。
+ */
+export const STORAGE_SUBTITLE_BASELINE = 118;
+
+/** `kinds/storage.tsx` の呼び名の字の大きさ。 題 (34) より小さくして題を先に読ませる */
+export const STORAGE_SUBTITLE_FONT = 20;
+
 /**
  * `storage` の名前と列の間に引く区切り線の Y。
  *
@@ -701,6 +711,22 @@ export const ROW_GLYPH_DEPTH_RATIO = 0.4;
 export const TITLE_ROW_MIN_GAP =
   GENERIC_TITLE_FONT * ROW_GLYPH_DEPTH_RATIO + ROW_FONT_GENERIC * GLYPH_CAP_RATIO;
 
+/**
+ * 行を持たない `storage` に呼び名を書いた時、箱がどれだけ高くなるか (#974)。
+ *
+ * **`SUBTITLE_ROW_SHIFT` を流用しない**。 あちらは行の群を下げる幅で、下げる相手が
+ * 居ない箱に足すと下だけ空く (実測で上 17 に対し下 39、許容は 7)。
+ *
+ * 足すべきなのは **字の塊の下端が下がる分** になる。 下端は題の字形の底から呼び名の
+ * 字形の底へ移るので、baseline の差に字形の深さの差を足す。 呼び名の方が字が小さいぶん
+ * 深さは浅く、差は引き算になる。
+ */
+export const 呼び名で伸びる量 = Math.round(
+  STORAGE_SUBTITLE_BASELINE -
+    STORAGE_TITLE_BASELINE +
+    (STORAGE_SUBTITLE_FONT - STORAGE_TITLE_FONT) * ROW_GLYPH_DEPTH_RATIO,
+);
+
 /**
  * 最終行の baseline から下に、 字形が枠に触れないために要ると **見込む** 量。
  *

package/src/visual-validate.ts

@@ -1945,6 +1945,21 @@ function visualValidateInner(
   }
 }
 
+/**
+ * 位置を手で書いた箱か (#972)。
+ *
+ * `posX` と `posY` を **両方** 書いた箱は、自動の配置の並びから外して置くためにある
+ * (`types.ts` の `posX` の説明が「置いた位置に置く」 と定める)。 揃っていないこと自体が
+ * 書き手の指定なので、揃えを見る軸の判定から外す。
+ *
+ * 軸 15 (`lane-cx-consistency`) が同じ条件を先に持っており、その 1 行をここへ括り出した。
+ * **片方だけ書いた箱は外さない** = 片方だけでは自動の配置が生きており、並びから外す指定に
+ * ならない (採用の条件も `posX !== undefined && posY !== undefined` で揃えてある)。
+ */
+function 位置を手で書いた(n: { posX?: number; posY?: number }): boolean {
+  return n.posX !== undefined && n.posY !== undefined;
+}
+
 function runAxes(
   laid: LaidDiagram,
   diag: CdlDiagram,
@@ -2087,8 +2102,12 @@ function runAxes(
   // ───────────────────────────────────────────────────────────
   // Axis 5: alignment (同 lane 内 node の cx 一致)
   // ───────────────────────────────────────────────────────────
+  //
+  // 位置を手で書いた箱は判定にも基準にも使わない (#972)。 **基準から先に外す** =
+  // 先頭の 1 つが手で置かれていると、自動で置いた箱が全部その位置と比べられて落ちる。
   const byLane = new Map<string, typeof laid.nodes>();
   for (const n of laid.nodes) {
+    if (位置を手で書いた(n)) continue;
     const list = byLane.get(n.lane) ?? [];
     list.push(n);
     byLane.set(n.lane, list);
@@ -2691,11 +2710,13 @@ function runAxes(
   // positive-check 経路 (両者 同 tolerance を持つが、 SSOT 経由で spec-driven 判定にする)。
   //
   // spacer / lifeline は intentional な cx 差を持つので判定対象外。
+  // 位置を手で書いた箱も同じ理由で外す (#972、 軸 5 と同じ条件)。
   // ───────────────────────────────────────────────────────────
   {
     const byLaneCol = new Map<string, LaidDiagram["nodes"]>();
     for (const n of laid.nodes) {
       if (n.id.endsWith("-spacer") || /^s\d+-/.test(n.id)) continue;
+      if (位置を手で書いた(n)) continue;
       const list = byLaneCol.get(n.lane) ?? [];
       list.push(n);
       byLaneCol.set(n.lane, list);
@@ -2846,7 +2867,7 @@ function runAxes(
     if (n.id.endsWith("-spacer") || /^s\d+-/.test(n.id)) continue;
     // 座標を明示した node は lane 中心から外れているのが指定どおりの状態なので対象外。
     // 「lane 中心と一致しない」 を症状として報告すると、 意図した配置が毎回 warn になる。
-    if (n.posX !== undefined && n.posY !== undefined) continue;
+    if (位置を手で書いた(n)) continue;
     const lane = laneById.get(n.lane);
     if (!lane) continue;
     const laneCx = lane.x + lane.width / 2;