@cardenelabs/cdl 0.117.0 → 0.119.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cardenelabs/cdl",
-  "version": "0.117.0",
+  "version": "0.119.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/head-label.ts

@@ -17,21 +17,40 @@
  * 使う。 弦の向きを使うと、大きく膨らむ曲線で線が端へ入ってくる向きと別の向きが出る。
  */
 import { EDGE_LABEL_TEXT } from "../label-text";
+import { EDGE_HEAD_MARKER_SIZE } from "../types";
 import { extractPathSegments } from "./collisions";
 import { hasRenderedLabel } from "./spec";
 import { measureTextWidth } from "./text-width";
 
+/** 端の印と端の字の間に空ける余白 (world)。 線に沿う向きと直角の向きで同じ値を使う */
+export const 端の字と印の余白 = 8;
+
+/** 端の印が線の芯から左右へ張り出す長さ (world)。 印の縦の半分 */
+export const 端の印の張り出し = EDGE_HEAD_MARKER_SIZE.既定 / 2;
+
 /**
  * 端から字までの、線に沿った距離 (world)。
  *
- * 端の印の長さの最大 (光っている時の 14、 `render/stage.tsx` の marker の大きさ) に隙間 8 を足す。
+ * 端の印の長さの最大 (光っている時の大きさ) に余白を足す。
  * 印を持たない端 (菱が出どころ側にある「集約」 「コンポジション」 の行き先) でも同じ距離にする = 端ごとに
  * 距離が変わると、図の中で多重度の位置が揃わない。
+ *
+ * **この値は箱と箱の間隔にも入る** (`端の字に要る線の長さ` を `layout/nodes.ts` が引く)。
+ * 変えると図の高さが動くので、印との重なりは直角の向き (`端の字と線の隙間`) で解く。
  */
-export const 端の字を戻す距離 = 22;
+export const 端の字を戻す距離 = EDGE_HEAD_MARKER_SIZE.既定 + 端の字と印の余白;
 
-/** 線と字の間の隙間 (world) */
-export const 端の字と線の隙間 = 8;
+/**
+ * 線と字の間の隙間 (world)。 線の芯から字の箱までを測る。
+ *
+ * **印の張り出しに余白を足す** (#984)。 印は線に沿う向きだけでなく直角の向きにも広がり、
+ * 菱と三角は線の芯から 7 ある。 隙間を 8 にしていた頃は印の縁と字の箱が 1 しか空かず、
+ * 端の数が印に貼り付いて読めた (見本帳のクラス図の集約とコンポジションの両方で出た)。
+ *
+ * 余白は `端の字を戻す距離` が印の長さに足しているものと同じ値にする = 線に沿う向きと
+ * 直角の向きで、印から字までの空き方が揃う。
+ */
+export const 端の字と線の隙間 = 端の印の張り出し + 端の字と印の余白;
 
 /** 端の字の大きさ。 札の下の行と同じ等幅の字 = 多重度を札に入れていた頃と同じ見え方 */
 export const 端の字の大きさ = EDGE_LABEL_TEXT.sub.fontSize;

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/render/stage.tsx

@@ -7,6 +7,7 @@ import { buildDiagramAltText, isRenderedNode } from "../layout/spec";
 import {
   EDGE_HEADS,
   EDGE_HEAD_FILLS,
+  EDGE_HEAD_MARKER_SIZE,
   EDGE_HEAD_FILL_DEFAULT,
   EDGE_REVEAL_DEFAULT,
   RELATION_FOCUS_DEFAULT,
@@ -238,8 +239,8 @@ export function CdlStage({
     return Object.entries(TONE).flatMap(([tone, color]) =>
       (
         [
-          [false, 14],
-          [true, 10],
+          [false, EDGE_HEAD_MARKER_SIZE.既定],
+          [true, EDGE_HEAD_MARKER_SIZE.小],
         ] as const
       ).flatMap(([small, size]) =>
         EDGE_HEADS.flatMap((head) =>

package/src/types.ts

@@ -282,6 +282,17 @@ export const EDGE_HEAD_FILL_DEFAULT: EdgeHeadFill = "solid";
 /** 塗り方の全種。 marker の定義と検査の走査がこの並びを引く */
 export const EDGE_HEAD_FILLS: readonly EdgeHeadFill[] = ["solid", "hollow"];
 
+/**
+ * 端の印の大きさ (world)。 `markerHeight` そのもので、形の枠の縦 10 に掛かる倍率ではない。
+ *
+ * `render/stage.tsx` が marker を定義する時と、`layout/head-label.ts` が端の字を印から
+ * 離す時の 2 箇所が引く。 片方に数を直に書くと、印を大きくした時に字だけが元の位置に残る
+ * (#984 では印の縦を見ずに字を置いており、菱の縁と字の間が 1 しか空いていなかった)。
+ *
+ * 縦は形によらず この値。 横だけが形の枠の縦横比で伸びる (`EDGE_HEAD_SHAPE.w / .h`)。
+ */
+export const EDGE_HEAD_MARKER_SIZE = { 既定: 14, 小: 10 } as const;
+
 /** 矢印をいつ出すか (#582)。 `CdlDiagram.edgeReveal` が取る値と 1 対 1 */
 export type EdgeReveal = "phase" | "all";