@cardenelabs/cdl 0.25.0 → 0.26.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cardenelabs/cdl",
-  "version": "0.25.0",
+  "version": "0.26.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

@@ -53,6 +53,15 @@ const ROW_GLYPH_RISE = 8;
  */
 const SUBTITLE_BASELINE = 118;
 
+/**
+ * 縞を敷く最少の行数 (#627)。
+ *
+ * 縞の役目は「隣り合う行を見分ける」 こと。 1 行しか無い箱には見分ける相手が居ないので、
+ * 敷くとその 1 行が「主役」 に見える。 閾値ではなく役目から導いた値なので、
+ * 図種を増やしても同じ規則が効く。
+ */
+const STRIPE_MIN_ROWS = 2;
+
 /** 呼び名の級。 行の名前 (26) より小さく、型 (24) と同じ */
 const SUBTITLE_FONT = 20;
 
@@ -169,8 +178,13 @@ export function StorageNode({
 
         帯の左右は枠の内側に 1 だけ寄せる。 枠と同じ x に置くと、角の丸みから帯の角が
         はみ出して四隅に色が出る。
+
+        **行が 1 つの箱には敷かない** (#627)。 縞の役目は「隣り合う行を見分ける」 ことで、
+        1 行しか無い箱には見分ける相手が居ない。 敷くとその 1 行が「主役」 に見える
+        (実測 = クラス図の 1 行の箱で縞が強調に読めた)。
       */}
       {node.rowStripe &&
+        rows.length >= STRIPE_MIN_ROWS &&
         rows.map((_, idx) => {
           if (idx % 2 !== 0) return null;
           const 帯 = rowStripeBand("storage", idx, 行の下げ);

package/src/presets.ts

@@ -1425,6 +1425,17 @@ export type ClassDiagramPreset = {
    * 帯ではなく **箱** の幅。 帯は `箱の幅 + 余白 × 2` で宣言する。
    */
   classWidth?: number;
+  /**
+   * 行に 1 行おきの縞を敷くか (既定 = 敷く、 #627)。
+   *
+   * クラス図の箱は ER 図と同じ作り (行頭の印 + 左に名前 + 右に型) をしており、名前と型が
+   * 離れて並ぶので行を横に追う目印が要る。 `er()` と同じ既定にする。
+   */
+  rowStripe?: boolean;
+  /**
+   * 図の配色の名前 (#627)。 描き手は色を持たないので、名前をそのまま markup に出す。
+   */
+  palette?: string;
 };
 
 export type ClassDiagramBuilder = {
@@ -1447,7 +1458,9 @@ export type ClassDiagramBuilder = {
 export function classDiagram(preset: ClassDiagramPreset): ClassDiagramBuilder {
   const classW = resolveStorageBoxW(preset.classWidth, "classDiagram", "classWidth");
   const tone: Tone = preset.defaultTone ?? "info";
-  const b = diagram(preset.id, { topic: preset.topic });
+  // 縞と配色は `er()` と同じ扱い (#627)。 箱の作りが同じなので、既定も揃える
+  const 縞を敷く = preset.rowStripe ?? true;
+  const b = diagram(preset.id, { topic: preset.topic, palette: preset.palette });
 
   const classes: string[] = [];
   const phaseActivate: string[] = [];
@@ -1509,6 +1522,8 @@ export function classDiagram(preset: ClassDiagramPreset): ClassDiagramBuilder {
           // あることしか言わず、図の中の全ての箱に同じ字が並ぶ
           ...(m.c.stereotype ? { eyebrow: m.c.stereotype } : {}),
           ...(m.rows.length > 0 ? { rows: m.rows, rowMarks: m.rowMarks } : {}),
+          // 縞は行を持つ箱にだけ敷く (#627)。 行が無い箱に書いても描き手が読まない
+          ...(m.rows.length > 0 && 縞を敷く ? { rowStripe: true } : {}),
         });
         classes.push(m.c.id);
         phaseActivate.push(m.c.id);