@cardenelabs/cdl 0.26.0 → 0.28.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cardenelabs/cdl",
-  "version": "0.26.0",
+  "version": "0.28.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/nodes.ts

@@ -3,8 +3,9 @@ import type { CdlDiagram, LaidLane, LaidNode } from "../types";
 import {
   hasRenderedLabel,
   labelPillH,
-  requiredVerticalLabelGap,
+  requiredMarkedRowsHeight,
   requiredRowsHeight,
+  requiredVerticalLabelGap,
   SUBTITLE_ROW_SHIFT,
   中身から出す高さ,
   目印なしの繰り上げ,
@@ -15,8 +16,8 @@ import { DEFAULT_NODE_GAP, HEADER_RESERVE, LANE_TOP_PAD, NODE_SIZE, STACK_GAP }
  * kind=storage で rows[] を持つ node の自動 h を計算する。
  *
  * rows 数に応じて h が足りないと最後の rows が node 枠外にはみ出す (ER preset User entity 等)。
- * 最終行の baseline (`rowBaselineY`、 描画側の式の SSOT) に下余白を足した値を default h と
- * max() して必要 h を確保する。
+ * 行頭の印を持たない箱は最終行の baseline、 持つ箱は最後の縞の帯から必要 h を出す。
+ * 描画側の式を SSOT にすることで、行送りを変えた時も字・帯・箱の下余白を一緒に動かす。
  *
  * 本関数が扱うのは `storage` だけ。 `GenericNode` 側の 21 種も rows を描くが、 そちらは
  * 自動で h を伸ばさない (著者が指定した h をそのまま使う)。 行が枠外に出ていないかは
@@ -51,7 +52,10 @@ function autoStorageHeight(
   // 下限を全体から外さないのは、印を持たない既存の図がすべて縮むため。 印を持つ行は
   // 書き方そのものが変わる形なので、高さの決め方もそちらに寄せる
   // 呼び名を出す箱は題の段が 1 行ぶん増える。 描き手 (`storage.tsx`) が行を下げる値と同じ
-  if (印あり) return 必要 + 呼び名の分;
+  if (印あり) {
+    const 帯から必要 = requiredMarkedRowsHeight("storage", n.rows.length) ?? defaultH;
+    return 帯から必要 + 呼び名の分;
+  }
   return Math.max(defaultH, 必要);
 }
 

package/src/layout/spec.ts

@@ -400,12 +400,24 @@ export function rowGlyphDepth(kind: string | undefined): number | null {
 export const ROW_LAYOUT_BOTTOM_PAD = 20;
 
 /**
- * `rows` を持つ node に必要な高さ (SSOT)。
+ * 行頭の印を持つ箱で、最後の縞の帯から枠の下端までに確保する余白。
+ *
+ * `kinds/storage.tsx` の枠の角の丸み (`rx={16}`) より大きくする。 角の丸みを下回ると、
+ * 縞の四角い角が丸みからはみ出して四隅に色が出る。
+ */
+export const ROW_STRIPE_BOTTOM_PAD = 24;
+
+/**
+ * 行頭の印を **持たない** node に必要な高さ (SSOT)。
  *
  * 最終行の baseline から 1 行送りぶんとレイアウト余白を確保する。 行を描かない種別は `null`。
  *
- * `layout/nodes.ts` の `autoStorageHeight` と、 下流 (dragon の sequence header 等) が
- * 同じ値を使う。 各所で式を写すと、 描画を変えた時に一部だけ古くなる。
+ * **印を持つ箱はこの式で決まらない**。 そちらは縞の帯の下端を起点にする
+ * (`requiredMarkedRowsHeight`) = 帯を敷く箱では「行が終わる位置」 が帯の下端になるため、
+ * baseline から数えると帯の下に 1 行ぶんに近い余白が残る。
+ *
+ * 使うのは `layout/nodes.ts` の `autoStorageHeight` の印なし経路。 各所で式を写すと、
+ * 描画を変えた時に一部だけ古くなるので、下流も同じ形が要る時はここを引く。
  *
  * これは「そう置くとよい高さ」 で、 「これを下回ると破綻する高さ」 ではない。 後者は
  * `rowBaselineY` + `rowGlyphDepth` で、 軸 16 はそちらを見る。
@@ -418,6 +430,22 @@ export function requiredRowsHeight(kind: string | undefined, rowCount: number):
   return lastBaseline + pitch + ROW_LAYOUT_BOTTOM_PAD;
 }
 
+/**
+ * 行頭の印を持つ箱で、`rows` に必要な高さ。
+ *
+ * 最後の縞の帯の下端から `ROW_STRIPE_BOTTOM_PAD` を確保する。 帯と別の位置定数から
+ * 足し算すると、行送りを変えた時に字と帯だけが動いて下余白が取り残される。
+ */
+export function requiredMarkedRowsHeight(
+  kind: string | undefined,
+  rowCount: number,
+): number | null {
+  if (rowCount <= 0) return null;
+  const lastBand = rowStripeBand(kind, rowCount - 1, 0);
+  if (lastBand === null) return null;
+  return lastBand.y + lastBand.h + ROW_STRIPE_BOTTOM_PAD;
+}
+
 /**
  * その node が画面に出るか (SSOT)。
  *

package/src/presets.ts

@@ -1347,6 +1347,38 @@ export const CLASS_RELATION_LOOK: Record<
   uses: { head: "open", fill: "solid", tailHead: "none", tailFill: "solid", style: "dashed" },
 };
 
+/**
+ * 関係の 6 種を 3 群に寄せた色み (#641)。
+ *
+ * 足す前は 6 種とも 1 色で、種類の違いが色に出なかった。 見分けを担うのは 線 / 印の形 /
+ * 印が付く側 の 3 軸だけで、6 種を 1 枚に並べると印の形まで見ないとどれがどれか判らない。
+ *
+ * **群の中は色を分けない**。 群の中の 2 種は既に線か印の塗りで分かれているので、色まで足すと
+ * 同じことを 2 回言うことになる。 色が担うのは群の見分けだけ。
+ *
+ * | 群 | 種類 | 群の中の見分け |
+ * |---|---|---|
+ * | 縦の関係 | `extends` / `implements` | 線 (実線 / 破線) |
+ * | 所有 | `aggregates` / `composes` | 印の塗り (白抜き / 塗る) |
+ * | 向きだけ | `associates` / `uses` | 線 (実線 / 破線) |
+ *
+ * 群の分け方は `CLASS_RELATION_LOOK` と同じ = あちらの 印の形 が群を表しており、
+ * 三角 = 縦の関係 / 菱 = 所有 / 開いた矢 = 向きだけ に 1 対 1 で対応する。
+ *
+ * **色の値は持たない**。 描き手は名前だけを図に載せ、実際の色は消費側が `data-cdl-tone` を
+ * 見て当てる。 値を持たせると、色を変えるたびに描き手を出し直すことになる。
+ *
+ * `Record<ClassRelationType, Tone>` なので、種類を足すと色みも要る。
+ */
+export const CLASS_RELATION_TONE: Record<ClassRelationType, Tone> = {
+  extends: "accent",
+  implements: "accent",
+  aggregates: "teal",
+  composes: "teal",
+  associates: "success",
+  uses: "success",
+};
+
 /** 端の形だけを引く経路 (cdl#574 からの名前を残す)。 実体は `CLASS_RELATION_LOOK` */
 export const CLASS_RELATION_HEAD: Record<ClassRelationType, EdgeHead> = Object.fromEntries(
   Object.entries(CLASS_RELATION_LOOK).map(([k, v]) => [k, v.head]),
@@ -1457,7 +1489,13 @@ export type ClassDiagramBuilder = {
  */
 export function classDiagram(preset: ClassDiagramPreset): ClassDiagramBuilder {
   const classW = resolveStorageBoxW(preset.classWidth, "classDiagram", "classWidth");
-  const tone: Tone = preset.defaultTone ?? "info";
+  /**
+   * 図ぜんぶに効く色み (#641)。 **書かなければ種類ごとに決まる**。
+   *
+   * 書いた図は「全部同じ色みにする」 と宣言しているので、種類の既定より勝たせる。
+   * 優先順位は 関係に書いた色み > 図に書いた既定 > 種類から決まる既定 の 3 段。
+   */
+  const 図の既定 = preset.defaultTone;
   // 縞と配色は `er()` と同じ扱い (#627)。 箱の作りが同じなので、既定も揃える
   const 縞を敷く = preset.rowStripe ?? true;
   const b = diagram(preset.id, { topic: preset.topic, palette: preset.palette });
@@ -1536,7 +1574,7 @@ export function classDiagram(preset: ClassDiagramPreset): ClassDiagramBuilder {
           id: edgeId,
           label: r.label ?? r.type,
           ...(r.cardinality ? { sub: r.cardinality } : {}),
-          tone: r.tone ?? tone,
+          tone: r.tone ?? 図の既定 ?? CLASS_RELATION_TONE[r.type],
           // 関係の種類から線と端の形を決める (cdl#574 / #578)。 書いた値が勝つ
           style: r.style ?? 見た目.style,
           head: r.head ?? 見た目.head,