@cardenelabs/cdl 0.117.0 → 0.118.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cardenelabs/cdl",
-  "version": "0.117.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 から下に、 字形が枠に触れないために要ると **見込む** 量。
  *