@cardenelabs/cdl 0.16.0 → 0.17.1

package/src/layout/nodes.ts

@@ -5,6 +5,7 @@ import {
   labelPillH,
   requiredVerticalLabelGap,
   requiredRowsHeight,
+  SUBTITLE_ROW_SHIFT,
 } from "./spec";
 import { DEFAULT_NODE_GAP, HEADER_RESERVE, LANE_TOP_PAD, NODE_SIZE, STACK_GAP } from "./tokens";
 
@@ -19,14 +20,26 @@ import { DEFAULT_NODE_GAP, HEADER_RESERVE, LANE_TOP_PAD, NODE_SIZE, STACK_GAP }
  * 自動で h を伸ばさない (著者が指定した h をそのまま使う)。 行が枠外に出ていないかは
  * `row-vertical-spacing` (軸 16) が同じ `rowBaselineY` を見て検査する。
  */
-function autoStorageHeight(n: { kind: string; rows?: string[]; h?: number }, defaultH: number): number {
+function autoStorageHeight(
+  n: { kind: string; rows?: string[]; rowMarks?: readonly unknown[]; subtitle?: string; h?: number },
+  defaultH: number,
+): number {
   if (n.kind !== "storage") return n.h ?? defaultH;
   if (n.h != null) return n.h;
   // rows なし storage は title + divider のみで render されるため、 default h=240 では空白過大。
   // title block (130px) + bottom padding (20px) = 150px に縮める。
-  if (!n.rows || n.rows.length === 0) return 150;
-  // 元の式 `130 + rows * 56 + 20` と同値。 式の SSOT は `requiredRowsHeight` (spec.ts)。
-  return Math.max(defaultH, requiredRowsHeight("storage", n.rows.length) ?? defaultH);
+  const 印あり = n.rowMarks !== undefined;
+  const 呼び名の分 = 印あり && n.subtitle ? SUBTITLE_ROW_SHIFT : 0;
+  if (!n.rows || n.rows.length === 0) return 150 + 呼び名の分;
+  const 必要 = requiredRowsHeight("storage", n.rows.length) ?? defaultH;
+  // 行頭の印を持つ箱は **中身の足し算だけ** で高さを決める (#578)。 下限を残すと、行が
+  // 1 つしか無い箱が 4 行の箱と同じ高さになり、下が空いたまま並ぶ。
+  //
+  // 下限を全体から外さないのは、印を持たない既存の図がすべて縮むため。 印を持つ行は
+  // 書き方そのものが変わる形なので、高さの決め方もそちらに寄せる
+  // 呼び名を出す箱は題の段が 1 行ぶん増える。 描き手 (`storage.tsx`) が行を下げる値と同じ
+  if (印あり) return 必要 + 呼び名の分;
+  return Math.max(defaultH, 必要);
 }
 
 /**
@@ -173,8 +186,22 @@ export function layoutNodes(diag: CdlDiagram, lanes: LaidLane[]): LaidNode[] {
       continue;
     }
     const cx = lane.x + lane.width / 2;
-    const cy = rowCy.get(n.stack)!;
-    const h = n.h ?? rowH.get(n.stack)!;
+    const 段の芯 = rowCy.get(n.stack)!;
+    const 段の高さ = rowH.get(n.stack)!;
+    /*
+     * 行頭の印を持つ箱は **自分の高さで、段の芯に揃える** (#578 → #580)。
+     *
+     * 既定は段の高さに合わせて伸ばす = 行が 1 つしか無い箱が 4 行の箱と同じ高さになり、
+     * 下が空いたまま並ぶ。 印を持つ箱は高さを中身から出しているので (`autoStorageHeight`)、
+     * 伸ばすとその値が捨てられる。
+     *
+     * **揃える先は芯**。 #578 では上端に揃えていたが、高さの違う箱が横に並ぶと
+     * 図全体が上へ寄って見えた (user 指摘)。 芯で揃えると上端も下端も箱ごとに違うが、
+     * 並びの重心が 1 本に通る。 見た目検査の `row-alignment` もこの前提で書かれている。
+     */
+    const 自前の高さ = n.rowMarks !== undefined;
+    const h = n.h ?? (自前の高さ ? autoStorageHeight(n, size.h) : 段の高さ);
+    const cy = 段の芯;
     // n.w 明示時は尊重、 未指定で rows[] を持つ node は内容長に合わせて auto 拡張。
     const w = autoRowsWidth(n, size.w);
     out.push({

package/src/layout/spec.ts

@@ -64,7 +64,7 @@ export function hasRenderedLabel(e: { label?: string; sub?: string }): boolean {
  *
  * 3 群ある。 形だけを描く `dyn-*` 5 種は `DynShapeNode` に回り、 `node.title` を一度も参照しない
  * (描くのは形と数値の小さな label だけ)。 payload を自前 layout する chart / timeline / analytic
- * 10 種は、 描くのが payload 側の label で `title` は使わない。 流れの始まりと終わりの印 2 種は
+ * 10 種と時系列のやり取り 1 種は、 描くのが payload 側の label で `title` は使わない。 流れの始まりと終わりの印 2 種は
  * 印そのものが意味を持ち、 丸の中に名前を入れても読めない (#560)。
  *
  * 一覧は手で持つと描画側とずれるため、 `test/node-title-render.test.tsx` が `NODE_KINDS` を
@@ -72,6 +72,9 @@ export function hasRenderedLabel(e: { label?: string; sub?: string }): boolean {
  * 足すと `NODE_KINDS` に載った時点で検査対象に入るので、 追記を忘れれば必ず落ちる。
  */
 const KINDS_WITHOUT_TITLE_TEXT: ReadonlySet<string> = new Set([
+  // 時系列のやり取り (#578)。 図を丸ごと描く種別で、描くのは面々の名前と言づての語。
+  // 箱の `title` は使わない
+  "sequence-board",
   // 形だけを描く (DynShapeNode)
   "dyn-rect",
   "dyn-circle",
@@ -239,8 +242,13 @@ export function genericTitleBaselineY(kind: string | undefined, h: number, hasRo
     : GENERIC_TITLE_TOP + genericTextShift(kind);
 }
 
-/** `kinds/storage.tsx` の 1 行目 baseline と行送り。 */
-export const ROW_TOP_STORAGE = 130;
+/**
+ * `kinds/storage.tsx` の 1 行目 baseline と行送り。
+ *
+ * 1 行目は #1468 で 130 から下げた。 題を 22 から 34 に上げたぶん、題の下に空きが要る
+ * (実測 = 130 のままだと題の descender と 1 行目の cap が 6 まで詰まる)。
+ */
+export const ROW_TOP_STORAGE = 152;
 export const ROW_PITCH_STORAGE = 56;
 
 /** `kinds/generic.tsx` の 1 行目 baseline と行送り。 */
@@ -273,8 +281,31 @@ export const GLYPH_CAP_RATIO = 0.72;
 export const ROW_FONT_STORAGE = 26;
 export const ROW_FONT_GENERIC = 21;
 
-/** `kinds/storage.tsx` の名前 (title) の baseline。 */
-export const STORAGE_TITLE_BASELINE = 78;
+/**
+ * `kinds/storage.tsx` の名前 (title) の baseline。
+ *
+ * #1468 で 78 から下げた。 題が 34 になり、上端から baseline までに cap 分の余白が要る。
+ */
+export const STORAGE_TITLE_BASELINE = 86;
+
+/**
+ * `kinds/storage.tsx` の名前 (title) の字の大きさ (#1468)。
+ *
+ * **行 (`ROW_FONT_STORAGE` = 26) より大きい**。 22 だった間は題の方が小さく、箱の中で
+ * 何が見出しか読み取れなかった (user 指摘)。 題 34 / 行 26 / 型 22 の 3 段にして、
+ * 上から順に読む順序を字の大きさで示す。
+ */
+export const STORAGE_TITLE_FONT = 34;
+
+/**
+ * 呼び名を出す箱で、行の群をどれだけ下げるか (#578)。
+ *
+ * 題の段が 1 行ぶん増えるので、その分だけ行を下へずらす。 ずらさないと呼び名と 1 行目が
+ * 詰まって、どちらも題の一部に見える。
+ *
+ * **描き手と高さの計算が同じ値を引く**。 片方だけ変えると、箱の下が空くか行が下端から出る。
+ */
+export const SUBTITLE_ROW_SHIFT = 46;
 
 /**
  * `storage` の名前と列の間に引く区切り線の Y。

package/src/layout/tokens.ts

@@ -138,6 +138,9 @@ export const TOKENS = {
     // 箱としての最小 (80x40) より大きく、名前を持つ箱 (card 320x150) よりは明らかに小さい
     "mark-start": { w: 96, h: 96 },
     "mark-end": { w: 96, h: 96 },
+    // 時系列のやり取り (#578)。 実寸は中身から決まる (`sequenceBoardMetrics`) ので、
+    // ここは書かなかった時の受け皿
+    "sequence-board": { w: 960, h: 640 },
   } as Record<NodeKind, { w: number; h: number }>,
 
   // row gap (stack 間の vertical gap、 lane 内 / 跨ぎ共通)