@cardenelabs/dragon 0.18.3 → 0.20.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cardenelabs/dragon",
-  "version": "0.18.3",
+  "version": "0.20.0",
   "description": "Dragon — Mermaid 感覚で animated SVG を生成する Text DSL。 cdl engine を内部利用。",
   "license": "MIT",
   "author": "cardene777",
@@ -57,7 +57,7 @@
     "prepublishOnly": "pnpm run typecheck && pnpm run test && pnpm run build"
   },
   "dependencies": {
-    "@cardenelabs/cdl": "^0.22.0"
+    "@cardenelabs/cdl": "^0.27.0"
   },
   "peerDependencies": {
     "react": "^19.0.0",

package/src/compile.ts

@@ -544,9 +544,81 @@ export function compileToCdl(doc: DslDocument, opts?: CompileToCdlOpts): CdlDiag
   // 作り替えた名前を表示だけ戻す (#1220)。 **図への追加を全て終えた後**に戻す = 途中で戻すと、
   // 後続の処理が名前で引く時に作り替え前と後が混ざる
   restoreActorNames(merged, 分けた.元の名前, 作り替えた対象);
+  // 配色と行の縞は **図への追加を全て終えた後**に当てる (#1553)。 図種ごとの組み立ては
+  // 20 か所以上あり、そのどれに足しても残りが取り残される
+  配色と縞を当てる(merged, doc);
+  静止した図の焦点を外す(merged, doc);
   return merged;
 }
 
+/**
+ * 段を書かない図では、どの箱も「いま」 にしない (#1557)。
+ *
+ * ## 何が起きていたか
+ *
+ * `animation:` を書かない図でも段は 1 つ作られる。 作るのは 2 経路あり、cdl の組み立て器
+ * (`er()` / `flow()` / `topology()` 等) が図種ごとに 1 段を作る経路と、どちらも作らない図種に
+ * dragon が 1 段を足す経路 (`injectStaticPhase`)。 どちらも **全ての箱と矢印を段に載せる**。
+ *
+ * 描画側は段に載った箱を「いま」 として描く (枠を主役色にして太くする)。 その結果、静止した図は
+ * 全ての箱が「いま」 になり、止まっている箱の枠が 1 度も出ない (実測 = ER 図 3 箱 / 流れ図 2 箱)。
+ *
+ * 全部を強調するのと何も強調しないのは、どちらも「区別が無い」 状態。 後者の方が落ち着いて読める。
+ *
+ * ## 矢印は段に載せたまま置く
+ *
+ * 描画側の既定 (`edgeReveal: "phase"`) は「段が名指しする矢印は、その段が来るまで描かない」。
+ * 矢印まで外すと、静止した図から線が 1 本も出なくなる。
+ *
+ * ## 判定は書いた内容で決める
+ *
+ * 「段に全ての箱が載っている図」 を目印にしない = 書き手が 1 段だけ書いて全部を焦点にした図と
+ * 見分けが付かない。 見るのは `animation:` を書いたかどうかで、これは書き手が段のために書く値。
+ */
+function 静止した図の焦点を外す(diagram: CdlDiagram, doc: DslDocument): void {
+  if ((doc.animate?.phases.length ?? 0) > 0) return;
+  const 箱 = new Set(diagram.nodes.map((n) => n.id));
+  for (const phase of diagram.phases) {
+    phase.activate = phase.activate.filter((id) => !箱.has(id));
+  }
+}
+
+const 既定の配色を持つ図種: ReadonlySet<DslDocument["type"]> = new Set(["er", "class"]);
+
+/**
+ * 図の配色と、表の箱の行の縞を当てる (#1553)。
+ *
+ * ## 配色
+ *
+ * cdl は色を持たない。 名前だけを `data-cdl-palette` として markup に出し、消費側
+ * (`cdl-theme.css`) が名前を見て 7 つの口 (台 / 行の面 / 縞 / 枠 / 字 / 型名 / 線) に色を当てる。
+ *
+ * ER 図とクラス図は書かなくても `kinari` (生成りに茶) になる。
+ * どちらも箱の作りが同じ (行頭の印 + 左に名前 + 右に型) で、名前と型が離れて並ぶため、
+ * 行を横に追う目印 (行の縞) が要る。
+ * 縞の色は配色からしか来ないので、既定が無いと縞が箱の面と同じ色に落ちて 1 本も出ない。
+ * 書き手が `palette:` を書いた時はそちらが勝つ。
+ *
+ * クラス図の意匠は `docs/design/class/note.md` が持つ。
+ *
+ * ## 行の縞
+ *
+ * cdl の `er()` 組み立て器は縞を既定で敷くが、**動きを持つ ER 図はその経路を通らない**
+ * (`compileGenericWithAnimate` が箱を直に組む)。 同じ図が動きの有無で縞を持ったり持たなかったり
+ * しないよう、出口で揃える。
+ *
+ * 縞を描くのは表の箱 (`storage`) だけ。 他の種別の箱に書いても描画側が読まないので、
+ * ここで対象を絞って「書いたのに出ない」 欄を残さない。
+ */
+function 配色と縞を当てる(diagram: CdlDiagram, doc: DslDocument): void {
+  const 配色 = doc.palette ?? (既定の配色を持つ図種.has(doc.type) ? "kinari" : undefined);
+  if (配色 !== undefined) diagram.palette = 配色;
+  if (doc.type !== "er") return;
+  for (const node of diagram.nodes) {
+    if (node.kind === "storage") node.rowStripe = true;
+  }
+}
+
 /**
  * readout の配色配列から外部参照を落とす (#1374)。
  *
@@ -599,11 +671,15 @@ function materializeStates(diagram: CdlDiagram, doc: DslDocument): void {
  * 描画側は段が 1 件以上あることを要求する。 一方で段を作るかどうかは種類ごとにばらけており、
  * `animation:` を書かない図は 12 種のうち 6 種だけが描かれ、 残り 6 種は弾かれていた。
  *
- * ## 何も光らせない段にはしない
+ * ## 空の段にはしない
  *
- * 段には「この段で何が主役か」 を示す役割がある。 空の段を入れると図は描かれるが、 全ての
- * 要素が主役でない状態 (薄い表示) になり、 動かない図として読めない。 全部を光らせる段なら、
- * 動かない図が「常に全部が主役」 として自然に読める。
+ * 描画側の既定 (`edgeReveal: "phase"`) は「段が名指しする矢印は、その段が来るまで描かない」。
+ * 空の段を入れると、静止した図から線が 1 本も出ない。
+ *
+ * **箱は段に載せた後で外す** (#1557)。 ここで載せるのは矢印を描かせるためで、箱まで
+ * 「いま」 のままにすると静止した図の全ての箱が主役色の枠になる。 外すのは出口の
+ * `静止した図の焦点を外す` が 1 か所で行う = 段を作る経路は cdl の組み立て器にもあり、
+ * ここだけ直しても図種によって残る。
  *
  * ## 既に段がある図には触らない
  *
@@ -3436,6 +3512,10 @@ function 矢印へ書き写す(target: CdlEdge, s: DslStep, doc: DslDocument): v
   if (s.tailHead !== undefined) target.tailHead = s.tailHead;
   if (s.headFill !== undefined) target.headFill = s.headFill;
   if (s.tailHeadFill !== undefined) target.tailHeadFill = s.tailHeadFill;
+  // 辺の役目と名前の下地 (cdl#618)。 主となる道を朱で引き、丸い下地を外せる。
+  // 書かない辺には値を入れない = 既存の図が変わらない
+  if (s.role !== undefined) target.role = s.role;
+  if (s.labelPlate !== undefined) target.labelPlate = s.labelPlate;
   if (s.labelOffsetX !== undefined) target.labelOffsetX = s.labelOffsetX;
   if (s.labelOffsetY !== undefined) target.labelOffsetY = s.labelOffsetY;
   if (s.overlay !== undefined) target.overlay = s.overlay;
@@ -5443,9 +5523,13 @@ function 行を組み立て器が持つ(type: DslDocument["type"]): boolean {
 /**
  * 行と印を組む (#1466)。 群の分け方は図の種類が決める。
  *
- * ER は **鍵の群を上にまとめ、間を空の行 1 つで開ける** (組み立て器 `er()` と同じ形)。
- * 記法に空の行を書かせないのは、`rows` が空の要素を捨てるため = 書いても消える。
+ * ER は **鍵の群を上にまとめる** (組み立て器 `er()` と同じ形)。
  * 状態遷移は群を分けないので、書いた並びのまま。
+ *
+ * **空の行では開けない** (cdl `#606`)。 群の区切りは行頭の印が持っている = ER は鍵の名前に
+ * 下線が付く。 空の行はその 2 つ目の手掛かりで、代わりに行の間隔を不揃いにしていた
+ * (鍵と値を持つ箱だけ境目が広がる)。 組み立て器が cdl 0.23.0 で空の行をやめたので、
+ * こちらも同時にやめる = 片方だけ残ると記法と図の照合が落ちる。
  */
 function 行と印を組む(
   type: DslDocument["type"],
@@ -5460,10 +5544,10 @@ function 行と印を組む(
   const 鍵: number[] = [];
   const 値: number[] = [];
   rows.forEach((_, i) => ((印[i]?.underline === true ? 鍵 : 値).push(i)));
-  const 並び = 鍵.length > 0 && 値.length > 0 ? [...鍵, -1, ...値] : [...鍵, ...値];
+  const 並び = [...鍵, ...値];
   return {
-    rows: 並び.map((i) => (i < 0 ? "" : (rows[i] ?? ""))),
-    rowMarks: 並び.map((i) => (i < 0 ? null : (印[i] ?? null))),
+    rows: 並び.map((i) => rows[i] ?? ""),
+    rowMarks: 並び.map((i) => 印[i] ?? null),
   };
 }
 
@@ -6607,6 +6691,17 @@ const 縦列を選べる図種: ReadonlySet<PresetType> = new Set<PresetType>([
   "swimlane",
   "class",
   "state",
+  /*
+   * ER 図 (#1571)。
+   *
+   * `er` の組み立て器は実体 1 つにつき帯を 1 本作り、必ず段 0 に置く = 表が横 1 列にしか
+   * 並ばない。 関係を 4 本持つ実体があると、どう並べ替えても 2 本は隣を飛び越す
+   * (意匠帳 `docs/design/er/note.md` § 記法の制約 が 4 通りを実測しており、1 列は縦横比 7.0 /
+   * 最長の線 4068、格子は 3.5 / 836)。
+   *
+   * **全ての箱が縦列を書いた時だけ** 効くので、書かない図はいままでどおり組み立て器が並べる。
+   */
+  "er",
 ]);
 
 /**

package/src/json-parser.ts

@@ -36,6 +36,10 @@ import {
   EVENT_KINDS,
   type 図形の定義,
 } from "./v05/parser";
+// 図の配色 (#1553)。 記法の読み手と同じ解決を通す = 別名 (`生成り` / `青磁`) の受け方が
+// 記法と JSON でずれない
+import { resolvePalette } from "./keywords";
+import type { DslPalette } from "./keywords";
 import type { CompileToCdlOpts } from "./compile";
 import type {
   CdlDiagram,
@@ -189,6 +193,16 @@ export interface DragonJson {
   reveal?: EdgeReveal;
   /** 図の並ぶ向き (#1494)。 記法の最上位 `direction:` と同じ。 JSON は英語の語で書く */
   direction?: "vertical" | "horizontal";
+  /**
+   * 図の配色 (#1553)。 記法の最上位 `palette:` と同じ。
+   *
+   * 名前だけを図に載せる = cdl は色を持たず、値は `cdl-theme.css` が決める。
+   * ER 図とクラス図は書かなくても `kinari` (生成りに茶) になる。 どちらも箱の作りが同じ
+   * (行頭の印 + 左に名前 + 右に型) で、名前と型が離れて並ぶため、行を横に追う目印
+   * (行の縞) が要る。 縞の色は配色からしか来ないので、既定が無いと縞が箱の面と同じ色に
+   * 落ちて 1 本も出ない。 書き手が `palette:` を書いた時はそちらが勝つ。
+   */
+  palette?: DslPalette;
 }
 
 export interface JsonActor {
@@ -347,6 +361,14 @@ export interface JsonStep {
   tailHead?: EdgeHead;
   headFill?: EdgeHeadFill;
   tailHeadFill?: EdgeHeadFill;
+  /**
+   * 辺の役目 (cdl#618)。 記法の `{ role: main }` と同じ。
+   *
+   * `main` を書いた辺だけ「いま」 の色で引く。 主となる 1 本 (または 1 続き) にだけ書く。
+   */
+  role?: "main";
+  /** 名前の下地を敷くか (cdl#618)。 記法の `{ labelPlate: false }` と同じ。 既定は敷く */
+  labelPlate?: boolean;
   /** クラス図の関係の語 (#1466)。 書くと端の形 / 塗り / 線種がまとめて決まる */
   relation?: ClassRelationType;
   /** 順序図の言づての種類 (#1466)。 `call` / `return` / `fire` */
@@ -491,6 +513,8 @@ export const ACCEPTED_KEYS = {
     "reveal",
     // 図の並ぶ向き (#1494)
     "direction",
+    // 図の配色 (#1553)
+    "palette",
   ],
   actor: [
     "name",
@@ -548,6 +572,9 @@ export const ACCEPTED_KEYS = {
     "headFill",
     "tailHeadFill",
     "relation",
+    // 辺の役目と名前の下地 (cdl#618)
+    "role",
+    "labelPlate",
     "kind",
     "tone",
     "style",
@@ -649,6 +676,8 @@ export const 欄の型表 = {
     reveal: "非空の文字列",
     // 図の並ぶ向き (#1494)
     direction: "非空の文字列",
+    // 図の配色 (#1553)
+    palette: "非空の文字列",
   },
   actor: {
     name: "必須の非空文字列",
@@ -704,6 +733,9 @@ export const 欄の型表 = {
     headFill: "非空の文字列",
     tailHeadFill: "非空の文字列",
     relation: "非空の文字列",
+    // 辺の役目と名前の下地 (cdl#618)
+    role: "非空の文字列",
+    labelPlate: "真偽",
     kind: "非空の文字列",
     tone: "色",
     style: "線種",
@@ -2348,6 +2380,9 @@ export function jsonToDoc(json: DragonJson): DslDocument {
       pos: p0,
     };
   });
+  // 図の配色 (#1553)。 解くのは 1 度だけにする
+  const 配色 = json.palette === undefined ? null : resolvePalette(json.palette);
+
   const flow: DslStep[] = json.flow.map((s, i) => ({
     no: i + 1,
     from: s.from,
@@ -2362,6 +2397,9 @@ export function jsonToDoc(json: DragonJson): DslDocument {
     headFill: s.headFill,
     tailHeadFill: s.tailHeadFill,
     relation: s.relation,
+    // 辺の役目と名前の下地 (cdl#618)
+    role: s.role,
+    labelPlate: s.labelPlate,
     msgKind: s.kind,
     // 箱と同じ読み替えを通す (#1304)。 通さないと `tone: "成功"` が色名として解決されないまま
     // 図に届き、同じ値が箱では色になり矢印では色にならない
@@ -2502,6 +2540,9 @@ export function jsonToDoc(json: DragonJson): DslDocument {
     reveal: json.reveal,
     // 図の並ぶ向き (#1494)。 JSON は英語で書くので、記法と同じ語に直してから渡す
     ...(json.direction !== undefined ? { direction: json.direction === "horizontal" ? ("横" as const) : ("縦" as const) } : {}),
+    // 図の配色 (#1553)。 記法と同じ解決を通す = 別名 (`生成り` / `青磁`) の受け方がずれない。
+    // 読めない語は渡さない = 上流の型検査が語を絞っているので、ここに来るのは書き間違いだけ
+    ...(配色 !== null ? { palette: 配色 } : {}),
     pos: p0,
   };
 }

package/src/keywords.ts

@@ -45,6 +45,44 @@ export function resolveDirection(s: string): DslDirection | null {
   return Object.hasOwn(DIRECTION_ALIAS, k) ? DIRECTION_ALIAS[k]! : null;
 }
 
+/**
+ * 図の配色 (`palette:`、 #1553)。
+ *
+ * cdl は色を持たない (形だけを描く)。 名前を `data-cdl-palette` として markup に出すので、
+ * dragon の `cdl-theme.css` がその名前を見て 7 つの口 (台 / 行の面 / 縞 / 枠 / 字 / 型名 / 線)
+ * に色を当てる。
+ *
+ * **名前を自由文字列にしない**。 書き間違えると既定の色みのまま出るので、書き手には
+ * 「効かない」 としか見えない。 語を絞れば読めない語をその場で知らせられる。
+ */
+export const PALETTES = ["kinari", "celadon"] as const;
+export type DslPalette = (typeof PALETTES)[number];
+
+/**
+ * 配色の別名。 向きと同じく日本語と英語の両方で書ける。
+ *
+ * `kinari` = 生成りに茶、 `celadon` = 青磁に墨。
+ *
+ * ER 図とクラス図は書かなくても `kinari` (生成りに茶) になる。 どちらも箱の作りが同じ
+ * (行頭の印 + 左に名前 + 右に型) で、名前と型が離れて並ぶため、行を横に追う目印
+ * (行の縞) が要る。 縞の色は配色からしか来ないので、既定が無いと縞が箱の面と同じ色に
+ * 落ちて 1 本も出ない。 書き手が `palette:` を書いた時はそちらが勝つ。
+ */
+export const PALETTE_ALIAS: Record<string, DslPalette> = {
+  kinari: "kinari",
+  celadon: "celadon",
+  生成り: "kinari",
+  生成りに茶: "kinari",
+  青磁: "celadon",
+  青磁に墨: "celadon",
+};
+
+/** 書いた配色を正規の語に直す。 読めない語は `null`。 */
+export function resolvePalette(s: string): DslPalette | null {
+  const k = s.trim().toLowerCase();
+  return Object.hasOwn(PALETTE_ALIAS, k) ? PALETTE_ALIAS[k]! : null;
+}
+
 /** NodeKind 別名 (日本語 → English) */
 export const NODE_KIND_ALIAS: Record<string, NodeKind> = {
   // 日本語