@cardenelabs/dragon 0.9.0 → 0.11.0

package/package.json

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

package/src/compile.ts

@@ -560,10 +560,10 @@ function reportDocEyebrowNotHonored(doc: DslDocument, onNotice?: (n: CompileNoti
 }
 
 /**
- * 左から描く動きを持たない図種で段に `draw:` を書いた時に伝える (#1312)。
+ * 起点から描く動きを持たない図種で段に `draw:` を書いた時に伝える (#1312 / #1318)。
  *
- * 描く動きを持つのは今のところ折れ線だけ。 他の図種では書いても何も起きないため、
- * 黙って捨てると「書いたのに伸びない」 が手掛かりなしで起きる。
+ * 対応する 8 図種以外では書いても何も起きないため、黙って捨てると
+ * 「書いたのに現れない」 が手掛かりなしで起きる。
  *
  * 段ごとに知らせる = 5 段のうち 1 段だけに書いた形で、どの段が効いていないかを読めるようにする。
  */
@@ -598,10 +598,10 @@ function reportDrawNotHonored(doc: DslDocument, onNotice?: (n: CompileNotice) =>
 }
 
 /**
- * 段の `draw:` が効く図種 (#1312 / #1314)。
+ * 段の `draw:` が効く図種 (#1312 / #1314 / #1318)。
  *
  * **語と図種の対応表から導く** (`DRAW_TARGETS`)。 一覧を写すと、語を足した時に片方だけ
- * 古いまま残る。 描画側 (`cdl` の `CdlPhase.draw`) が対応する 3 種と一致する。
+ * 古いまま残る。 描画側 (`cdl` の `CdlPhase.draw`) が対応する 8 種と一致する。
  */
 const DRAWABLE_DOC_TYPES: ReadonlySet<PresetType> = new Set<PresetType>(DRAW_TARGETS.values());
 
@@ -4645,7 +4645,9 @@ function compileTree(doc: DslDocument, onNotice?: (n: CompileNotice) => void): C
   const data: NonNullable<CdlDiagram["nodes"][number]["treeData"]> = doc.actors.map((a) => {
     const id = slugify(a.name);
     const p3 = 親.get(id);
-    return { id, title: a.name, ...(p3 !== undefined ? { parent: p3 } : {}) };
+    // 木も放射と同じく名前と補足を分けて渡す (#1332)。 分けないと補足が捨てられ、
+    // 書いた文字が図に出ない
+    return { id, ...放射に出す文字(a), ...(p3 !== undefined ? { parent: p3 } : {}) };
   });
   b.node(`${slugify(doc.title) || "tree"}-chart`, {
     lane: "chart", stack: 0, kind: "tree-hierarchy", title: doc.title, ...図の小見出し(doc), w: W, h: H, treeData: data,
@@ -4997,14 +4999,13 @@ type 放射で描ける欄 =
   /** 中心の名前 / 枝の名前になる */
   | "name"
   /**
-   * 名前の後ろに続けて出す 2 欄。
+   * 名前とは分けて補足に出す 2 欄。
    *
    * `- 描く量を減らす: "{draw} ms"` の形は副題として解析されるため、 値の欄だけを見ると
    * 記法で最も普通な書き方が届かない (#1230 で実測)。 明示的に書いた値の欄も同じ場所へ出す。
    *
-   * 描画側が描くのは枝と中心の `title` だけで (`mind-map.tsx` は型にある `subtitle` を
-   * 1 度も描かない)、 状態を読み替えるのも `title` と `rootTitle` に限る
-   * (`resolveMindData`)。 届ける先が他に無いため名前と同じ欄へ載せる。
+   * 描画側は枝の `subtitle` と中心の `rootSubtitle` を名前とは別の行に描く。 2 欄を
+   * `放射に出す文字` で 1 つの補足にまとめ、 名前とは分けて渡す。
    */
   | "subtitle"
   | "value"
@@ -5115,18 +5116,17 @@ function 放射で描けない欄を書いたか(a: DslActor, 欄: 放射で描
 }
 
 /**
- * 放射の枝と中心に出す文字を組む (#1230)。
+ * 放射と木の箱に出す名前と補足 (#1332)。
  *
- * 値の欄を書いた登場人物は名前の後ろに空白 1 つで続ける。 書いていない図は名前だけになり、
- * 変更前と同じ文字列になる。
+ * **連結しない**。 描画側は名前と補足を別々に受け取れば箱の中で 2 行に積む。 1 つの文字列に
+ * すると 1 行に全部入り、箱幅を超えて末尾が切られる (実測 = 箱 120px に対し文字 163px)。
  *
- * **名前と同じ欄に載せるしかない**。 描画側が描くのは枝と中心の `title` だけで
- * (`mind-map.tsx` は型にある `subtitle` を 1 度も描かない)、 状態を読み替えるのも
- * `title` と `rootTitle` に限る (`resolveMindData`)。 値を別の欄へ渡しても絵に出ない。
+ * `subtitle` と `value` の両方が書かれた場合は空白で繋いで 1 つの補足にする。 描画側の
+ * 補足は 1 行なので、2 つを別々の行にはできない。
  */
-function 放射に出す文字(a: DslActor): string {
+function 放射に出す文字(a: DslActor): { title: string; subtitle?: string } {
   const 続き = [a.subtitle, a.value].map((x) => x?.trim()).filter((x): x is string => !!x);
-  return 続き.length > 0 ? `${a.name} ${続き.join(" ")}` : a.name;
+  return { title: a.name, ...(続き.length > 0 ? { subtitle: 続き.join(" ") } : {}) };
 }
 
 function compileMind(doc: DslDocument, onNotice?: (n: CompileNotice) => void): CdlDiagram {
@@ -5246,7 +5246,7 @@ function compileMind(doc: DslDocument, onNotice?: (n: CompileNotice) => void): C
     // 枝は色を持てる (`MindBranchNode.tone`)
     branches.push({
       id,
-      title: 放射に出す文字(a),
+      ...放射に出す文字(a),
       parent: 親.get(id) ?? rootId,
       ...(a.tone ? { tone: a.tone } : {}),
     });
@@ -5269,7 +5269,15 @@ function compileMind(doc: DslDocument, onNotice?: (n: CompileNotice) => void): C
     ...図の小見出し(doc),
     w: W,
     h: H,
-    mindData: { rootId, rootTitle: 放射に出す文字(root), branches },
+    mindData: (() => {
+      const 中心 = 放射に出す文字(root);
+      return {
+        rootId,
+        rootTitle: 中心.title,
+        ...(中心.subtitle === undefined ? {} : { rootSubtitle: 中心.subtitle }),
+        branches,
+      };
+    })(),
   });
   return b.build();
 }
@@ -5615,8 +5623,8 @@ function injectPhasesFallback(diagram: CdlDiagram, doc: DslDocument): void {
   // phase 注入。 CdlPhase.tweens[].stateId / sets[].stateId で state 参照 (state ではない)。
   for (const p of doc.animate.phases) {
     const activateIds: string[] = [...resolveIds(p.highlight ?? [])];
-    // `draw: line` を描画側の欄へ写す (#1312)。 相手は 1 箱で図全体を描く種別の箱で、
-    // 折れ線は必ずこの形になるため名前を書かせずに引ける。
+    // `draw:` を描画側の欄へ写す (#1312 / #1314 / #1318)。 相手は 1 箱で図全体を描く
+    // 対象 8 種の箱で、必ず 1 つに決まるため名前を書かせずに引ける。
     //
     // **`activate` と兼ねない**。 描画側は焦点と別集合で持つ (`cdl#512`) = 焦点が当たり
     // 続ける図で毎段引き直しになるため。 書いた段だけが欄を持つ

package/src/index.ts

@@ -13,7 +13,7 @@ export { compileToCdl } from "./compile";
 export type { CompileNotice } from "./compile";
 export { parseTextDslV05 } from "./v05";
 // 記法一覧が「実際に受け付ける値」 を実装から引くための公開。 手書きすると説明と実装がずれる。
-export { DRAW_TARGETS, DRAW_WORDS, PRESET_TYPES, TOP_LEVEL_KEYS } from "./v05/parser";
+export { DRAW_TARGETS, DRAW_WORDS, PHASE_ITEM_WORDS, PRESET_TYPES, TOP_LEVEL_KEYS } from "./v05/parser";
 export { TONE_ALIAS, NODE_KIND_ALIAS } from "./keywords";
 export { lintDiagram, autoFix } from "./notation-lint";
 export type { LintIssue, LintReport, LintSeverity } from "./notation-lint";

package/src/json-parser.ts

@@ -268,10 +268,9 @@ export interface JsonPhase {
   /** badge label */
   badge?: string;
   /**
-   * その段で左の起点から描くもの (#1312)。 記法の `draw: line` と同じ。
+   * その段で起点から描くもの (#1312 / #1314 / #1318)。 記法の `draw:` と同じ。
    *
-   * 受ける語は `line` だけ (`DRAW_WORDS`)。 折れ線の図で、その段の間に線が左端から
-   * 右へ伸びる。
+   * 受ける 8 語は `DRAW_WORDS` が持つ。 語と同じ図種で、その段の間に図が起点から現れる。
    */
   draw?: string;
   /**

package/src/schemas/diagram.json

@@ -373,8 +373,8 @@
           },
           "draw": {
             "type": "string",
-            "enum": ["line", "bar", "pie"],
-            "description": "この phase で起点から描くもの。 語は図種と揃える。 line = 折れ線が左端から右へ伸びる / bar = 棒が横軸から上へ伸びる / pie = 扇が 12 時から時計回りに開く"
+            "enum": ["line", "bar", "pie", "journey", "mind", "tree", "gantt", "funnel"],
+            "description": "この phase で起点から描くもの。 語は図種と揃える。 line / journey = 線が左端から右へ伸びる / bar = 棒が横軸から上へ伸びる / pie = 扇が 12 時から時計回りに開く / mind = 枝が中心から外へ伸びる / tree = 枝が根から下へ伸びる / gantt = 帯が各始端から右へ伸びる / funnel = 段が上端から順に積まれる"
           },
           "tween": {
             "type": "object",

package/src/types.ts

@@ -394,15 +394,15 @@ export type DslPhase = {
   body?: string;
   badge?: string;
   /**
-   * その段で左の起点から描くもの (`draw: line`、 #1312)。
+   * その段で起点から描くもの (#1312 / #1314 / #1318)。
    *
-   * 受ける語は今のところ `line` だけ。 折れ線 (`type: line`) の図で、その段の間に線が
-   * 左端から右へ伸び、点と値の数字は線の先が届いた時に現れる。
+   * 受ける語は `line` / `bar` / `pie` / `journey` / `mind` / `tree` / `gantt` / `funnel`。
+   * 語と同じ図種で、その段の間に線・棒・扇・枝・帯・段が各図の起点から現れる。
    *
    * **最上位ではなく段に置く**。 記法は動き (`tween` / `set` / `focus` / `badge`) を段に、
-   * 静的な性質 (`eyebrow` / `axes`) を最上位に書く分け方を既に持つ。 線が伸びるのは動き。
+   * 静的な性質 (`eyebrow` / `axes`) を最上位に書く分け方を既に持つ。 起点から描くのは動き。
    *
-   * 相手の名前は書かせない = 折れ線は図全体を 1 箱で描くため相手が 1 つに決まる。
+   * 相手の名前は書かせない = 対象の 8 図種はいずれも図全体を 1 箱で描くため相手が決まる。
    */
   draw?: string;
   /**

package/src/v05/parser.ts

@@ -2174,6 +2174,18 @@ function ensureAnimate(a: DslAnimate | undefined, lineNo: number): DslAnimate {
   return { states: [], phases: [], pos: { line: lineNo } };
 }
 
+/**
+ * 段に書ける項目の英語名。 `parsePhase` が受け付ける名前の入口でも使う。
+ *
+ * 誤りの案内で使うほか、**見本が値の名前にこの語を使っていないか** を見るのにも使う
+ * (#1330)。 段の項目と値は階層が違うので衝突しないが、同じ語が 2 つの意味で並ぶと
+ * 見本を読む人が階層から意味を判断することになる。
+ */
+export const PHASE_ITEM_WORDS = ["focus", "badge", "body", "description", "tween", "set", "draw"] as const;
+
+const 段の項目の英語 = PHASE_ITEM_WORDS;
+const 段の項目の集合: ReadonlySet<string> = new Set(PHASE_ITEM_WORDS);
+
 function parsePhase(block: Line[], errors: DslError[]): DslPhase | null {
   // block[0]!: `step: "request" 1.5s`
   const head = block[0]!;
@@ -2220,6 +2232,17 @@ function parsePhase(block: Line[], errors: DslError[]): DslPhase | null {
     }
     const key = (propMatch[1] ?? "").toLowerCase();
     const value = (propMatch[2] ?? "").trim();
+    // 一覧を parse の入口にも使う。 分岐だけを増やして一覧を更新し忘れると、見本の名前との
+    // 重なり検査が新しい項目を見落とすため、一覧にない語は各分岐へ到達させない。
+    if (!段の項目の集合.has(key)) {
+      errors.push({
+        line: ln.no,
+        message: `段の項目名が読めません: "${propMatch[1] ?? ""}"`,
+        hint: 段の項目のヒント(propMatch[1] ?? ""),
+      });
+      i += 1;
+      continue;
+    }
     if (key === "focus") {
       phase.highlight = parseFocusList(value);
       i += 1;
@@ -2304,8 +2327,8 @@ function parsePhase(block: Line[], errors: DslError[]): DslPhase | null {
       i = j;
       continue;
     }
-    // ここに来るのは上のどれにも当たらなかった名前 (#1301)。 黙って捨てると
-    // 「書いたのに段が変わらない」 が手掛かりなしで起きる
+    // ここに来るのは一覧へ語を足したのに処理分岐を足していない時だけ。 黙って捨てると
+    // 「一覧にはあるのに段が変わらない」 が手掛かりなしで起きる。
     errors.push({
       line: ln.no,
       message: `段の項目名が読めません: "${propMatch[1] ?? ""}"`,
@@ -2329,9 +2352,6 @@ function 段の項目のヒント(書いた名前: string): string {
     : `使える項目 = ${段の項目の英語.join(", ")}`;
 }
 
-/** 段に書ける項目の英語名。 `parsePhase` の分岐から導く一覧 */
-const 段の項目の英語 = ["focus", "badge", "body", "description", "tween", "set", "draw"] as const;
-
 /**
  * `draw:` に書ける語と、その語が効く図種 (#1312 / #1314)。
  *
@@ -2344,6 +2364,14 @@ const 段の項目の英語 = ["focus", "badge", "body", "description", "tween",
  * | `line` | `line` | 左端から右へ線が伸びる |
  * | `bar` | `bar` | 横軸から上へ棒が伸びる |
  * | `pie` | `pie` | 12 時から時計回りに扇が開く |
+ * | `journey` | `journey` | 左端から右へ気持ちの線が伸びる |
+ * | `mind` | `mind` | 中心から外へ枝が伸びる |
+ * | `tree` | `tree` | 根から下へ枝が伸びる |
+ * | `gantt` | `gantt` | 各帯の始端から右へ帯が伸びる |
+ * | `funnel` | `funnel` | 上端から順に段が積まれる |
+ *
+ * `quadrant` は入れない。 4 つの区画に項目を置く図で **項目に順序が無く**、起点を決められない
+ * (順番を書いた順で決めると、動きが図の意味を持たない)。
  *
  * いまは語と図種が同じ綴りだが、**同じものとして扱わない**。 語は書き手が書く名前で、
  * 図種は `type:` が取る値。 片方だけ別名を足したくなった時に、対応が表に残っている形にする。
@@ -2352,6 +2380,11 @@ export const DRAW_TARGETS: ReadonlyMap<string, PresetType> = new Map<string, Pre
   ["line", "line"],
   ["bar", "bar"],
   ["pie", "pie"],
+  ["journey", "journey"],
+  ["mind", "mind"],
+  ["tree", "tree"],
+  ["gantt", "gantt"],
+  ["funnel", "funnel"],
 ]);
 
 /** `draw:` に書ける語。 表から導く (#1314) */