@cardenelabs/cdl 0.6.1 → 0.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cardenelabs/cdl",
-  "version": "0.6.1",
+  "version": "0.7.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/mind-map.tsx

@@ -1,6 +1,7 @@
 import type { JSX } from "react";
 import type { LaidNode, Tone, MindBranchNode } from "../types";
 import { TONE } from "../render/tone";
+import { resolveMindData } from "../render/payload-binding";
 
 const MIND_TONES: Tone[] = ["accent", "teal", "success", "warning", "info", "error"];
 
@@ -25,10 +26,19 @@ export const MIND_BOX_GAP = 24;
  * 深い階層は parent 方向へ扇状展開。 depth 別 tone を rotate。
  * curved edge = bezier で親子を接続、 node は rounded rect で読みやすさ優先。
  */
-export function MindMapNode({ node, active }: { node: LaidNode; active: boolean }): JSX.Element {
+export function MindMapNode({
+  node,
+  active,
+  stateValues = {},
+}: {
+  node: LaidNode;
+  active: boolean;
+  stateValues?: Record<string, string>;
+}): JSX.Element {
   const x0 = node.cx - node.w / 2;
   const y0 = node.cy - node.h / 2;
-  const mindData = node.mindData;
+  // 名前は状態を読める (#467)。 中心と枝の両方を解決層に通す
+  const mindData = node.mindData ? resolveMindData(node.mindData, stateValues) : undefined;
   if (!mindData) return <g transform={`translate(${x0} ${y0})`} />;
 
   const PAD = 40;
@@ -67,7 +77,7 @@ export function MindMapNode({ node, active }: { node: LaidNode; active: boolean
       ))}
 
       {layout.nodes.map((n) => (
-        <g key={`n-${n.id}`}>
+        <g key={`n-${n.id}`} data-cdl-unresolved={n.unresolved ? "true" : undefined}>
           <rect
             x={n.x - n.w / 2}
             y={n.y - n.h / 2}
@@ -103,6 +113,8 @@ type LayoutNode = {
   h: number;
   tone?: Tone;
   isRoot: boolean;
+  /** 名前を状態から解決できなかった項目に付く印 (#467) */
+  unresolved?: true;
 };
 
 type LayoutEdge = {
@@ -130,6 +142,7 @@ export function computeMindMapLayout(
     w: rootW,
     h: rootH,
     isRoot: true,
+    ...((mindData as { unresolved?: true }).unresolved ? { unresolved: true as const } : {}),
   });
 
   const childrenOf = new Map<string, MindBranchNode[]>();
@@ -281,7 +294,17 @@ export function computeMindMapLayout(
       y = (ys[0]! + ys[ys.length - 1]!) / 2;
     }
 
-    nodes.push({ id: node.id, title: node.title, x, y, w, h, tone: myTone, isRoot: false });
+    nodes.push({
+      id: node.id,
+      title: node.title,
+      x,
+      y,
+      w,
+      h,
+      tone: myTone,
+      isRoot: false,
+      ...((node as { unresolved?: true }).unresolved ? { unresolved: true as const } : {}),
+    });
     nodePos.set(node.id, { x, y });
     nodeSide.set(node.id, isLeft ? "left" : "right");
     nodeHalfW.set(node.id, w / 2);

package/src/kinds/tree.tsx

@@ -1,6 +1,7 @@
 import type { JSX } from "react";
 import type { LaidNode, TreeNodePayload } from "../types";
 import { TONE } from "../render/tone";
+import { resolveTreeData } from "../render/payload-binding";
 
 /**
  * tree-hierarchy kind ... 1 node に tree node 配列 (treeData) を保持し、
@@ -11,10 +12,19 @@ import { TONE } from "../render/tone";
  *   - depth 1+ は tone 別 accent の left-border + 白 fill card
  *   - parent-child edge は elbow line + 中間 join dot で「分岐点」 を強調
  */
-export function TreeNode({ node, active }: { node: LaidNode; active: boolean }): JSX.Element {
+export function TreeNode({
+  node,
+  active,
+  stateValues = {},
+}: {
+  node: LaidNode;
+  active: boolean;
+  stateValues?: Record<string, string>;
+}): JSX.Element {
   const x0 = node.cx - node.w / 2;
   const y0 = node.cy - node.h / 2;
-  const treeNodes = node.treeData ?? [];
+  // 名前は状態を読める (#467)。 解決できない名前は書いたまま残して印を付ける
+  const treeNodes = resolveTreeData(node.treeData ?? [], stateValues);
   const gradientId = `tree-root-grad-${node.id}`;
 
   const PAD_TOP = 40;
@@ -79,7 +89,11 @@ export function TreeNode({ node, active }: { node: LaidNode; active: boolean }):
         const accent = depthColors[Math.min(n.depth, depthColors.length - 1)] ?? depthColors[0]!;
         const isRoot = n.depth === 0;
         return (
-          <g key={`n-${n.id}`} transform={`translate(${PAD_LEFT + n.x - n.w / 2} ${PAD_TOP + n.y - n.h / 2})`}>
+          <g
+            key={`n-${n.id}`}
+            data-cdl-unresolved={n.unresolved ? "true" : undefined}
+            transform={`translate(${PAD_LEFT + n.x - n.w / 2} ${PAD_TOP + n.y - n.h / 2})`}
+          >
             {isRoot ? (
               <>
                 <rect
@@ -143,6 +157,8 @@ type LayoutNode = {
   w: number;
   h: number;
   depth: number;
+  /** 名前を状態から解決できなかった項目に付く印 (#467) */
+  unresolved?: true;
 };
 
 export function computeTreeLayout(
@@ -231,7 +247,16 @@ export function computeTreeLayout(
     }
     const y = depth * depthGap + depthGap / 2;
     posOf.set(n.id, { x, y });
-    nodes.push({ id: n.id, title: n.title, x, y, w: nodeW, h: nodeH, depth });
+    nodes.push({
+      id: n.id,
+      title: n.title,
+      x,
+      y,
+      w: nodeW,
+      h: nodeH,
+      depth,
+      ...((n as { unresolved?: true }).unresolved ? { unresolved: true as const } : {}),
+    });
     return x;
   };
   for (const r of roots) if (!placed.has(r.id)) place(r, 0);

package/src/render/nodes.tsx

@@ -149,9 +149,10 @@ export function CdlNodeView({
         return <EventNode node={resolvedNode} active={active} progress={progress} />;
       case "card":
         return <CardNode node={resolvedNode} active={active} />;
-      // 図表 7 種は payload の数と語が `{signal}` を取れるので stateValues を渡す
-      // (`render/payload-binding.ts` が描画直前に解決する)。 動かさない 2 種
-      // (mind-map / tree-hierarchy) は構造だけを持つため渡さない。
+      // 図表 9 種は payload が `{signal}` を取れるので stateValues を渡す
+      // (`render/payload-binding.ts` が描画直前に解決する)。 取れる欄は種別で違い、
+      // 数と語を取る 7 種に対し、mind-map / tree-hierarchy は **名前だけ** を取る (#467)。
+      // 親子の繋がりと、描かれない欄 (補足) は解決しない。
       case "chart-line":
         return <ChartLineNode node={resolvedNode} active={active} stateValues={stateValues} />;
       case "chart-pie":
@@ -161,13 +162,13 @@ export function CdlNodeView({
       case "gantt-timeline":
         return <GanttNode node={resolvedNode} active={active} stateValues={stateValues} />;
       case "mind-map":
-        return <MindMapNode node={resolvedNode} active={active} />;
+        return <MindMapNode node={resolvedNode} active={active} stateValues={stateValues} />;
       case "funnel-stages":
         return <FunnelNode node={resolvedNode} active={active} stateValues={stateValues} />;
       case "quadrant-matrix":
         return <QuadrantNode node={resolvedNode} active={active} stateValues={stateValues} />;
       case "tree-hierarchy":
-        return <TreeHierarchyNode node={resolvedNode} active={active} />;
+        return <TreeHierarchyNode node={resolvedNode} active={active} stateValues={stateValues} />;
       case "journey-map":
         return <UserJourneyNode node={resolvedNode} active={active} stateValues={stateValues} />;
       case "shape-file":

package/src/render/payload-binding.ts

@@ -6,11 +6,14 @@ import type {
   GanttTaskPayload,
   JourneyEmotion,
   JourneyStepPayload,
+  MindBranchNode,
+  MindBranchPayload,
   QuadrantItemPayload,
   QuadrantKey,
   QuadrantPayload,
+  TreeNodePayload,
 } from "../types";
-import { interpolate } from "./utils";
+import { hasUnresolvedRef, interpolate } from "./utils";
 
 /**
  * 図表 payload が状態を読むための解決層 (dragon#1161 段 3)。
@@ -24,8 +27,15 @@ import { interpolate } from "./utils";
  * (spec § 4.2 が輪について同じ判断をしている = 1 箇所の壊れで図が消えると原因が分からない)。
  * 印は各 kind が `data-cdl-unresolved="true"` として DOM に出す。
  *
- * 動かさない 2 種 (`mind-map` / `tree-hierarchy`) はここに resolver を持たない。
- * 構造だけを持ち動かせる数が無く、 動かすとしたら項目の増減になるため (Issue の実装しない条件)。
+ * `mind-map` / `tree-hierarchy` の 2 種は **名前だけ** を解決する (#467)。 この 2 種が持つのは
+ * 数ではなく構造と名前で、動かせるのは名前の側だけ。
+ *
+ * 解決するのは **描かれる欄だけ** にする。 この 2 種は補足 (`subtitle`) を描かないため
+ * (実測で確認)、解決しても画面には出ず、解決できない時だけ印が付く = 見た目は何も変わらない
+ * のに印だけ出る状態になる。 描く方を足すかは別 Issue (#471)。
+ *
+ * 親子の繋がり (`parent`) も解決しない = 状態で繋ぎ替えると木の形そのものが変わり、
+ * 配置の計算と印の付け方が別問題になる。
  */
 
 /** 解決の結果。 `ok` が false なら既定値に落ちたことを表す */
@@ -194,3 +204,55 @@ export function resolveJourneyData(
     return e.ok ? { ...s, emotion: e.value } : { ...s, emotion: e.value, unresolved: true as const };
   });
 }
+
+/** 名前の欄を解決した結果。 解決できなければ書いたまま残して印を付ける */
+export type ResolvedTreeNode = TreeNodePayload & UnresolvedMark;
+export type ResolvedMindBranch = MindBranchNode & UnresolvedMark;
+export type ResolvedMindData = Omit<MindBranchPayload, "branches"> & {
+  branches: ResolvedMindBranch[];
+} & UnresolvedMark;
+
+/**
+ * 名前の欄を状態で埋める (#467)。
+ *
+ * **解決できなかった時も文字を消さない**。 数の欄は既定値 (0 等) に落とすが、名前は落とす先が
+ * 無く、空にすると図から項目の存在まで消えてしまう。 書いた `{名前}` をそのまま残せば、
+ * どの名前が解決できなかったかが図の上で読める。 印は他の欄と同じ `data-cdl-unresolved`。
+ */
+function resolveBoundText(raw: string, values: Record<string, string>): BindingResult<string> {
+  // 状態を読まない名前は組み直さない (毎 frame の割当てを避ける近道、 他の resolver と同じ)
+  if (!raw.includes("{")) return { value: raw, ok: true };
+  const resolved = interpolate(raw, values);
+  return hasUnresolvedRef(resolved) ? { value: resolved, ok: false } : { value: resolved, ok: true };
+}
+
+/** 木の名前を解決する。 描かれない欄 (補足) と親子の繋がりは触らない */
+export function resolveTreeData(
+  nodes: TreeNodePayload[],
+  values: Record<string, string>,
+): ResolvedTreeNode[] {
+  if (!nodes.some((n) => n.title.includes("{"))) return nodes as ResolvedTreeNode[];
+  return nodes.map((n) => {
+    const title = resolveBoundText(n.title, values);
+    const 解決後: ResolvedTreeNode = { ...n, title: title.value };
+    return title.ok ? 解決後 : { ...解決後, unresolved: true as const };
+  });
+}
+
+/** 放射の名前を解決する。 中心の名前と枝の名前の両方を見る */
+export function resolveMindData(
+  data: MindBranchPayload,
+  values: Record<string, string>,
+): ResolvedMindData {
+  const 読む = data.rootTitle.includes("{") || data.branches.some((b) => b.title.includes("{"));
+  if (!読む) return data as ResolvedMindData;
+
+  const root = resolveBoundText(data.rootTitle, values);
+  const branches = data.branches.map((b) => {
+    const title = resolveBoundText(b.title, values);
+    const 解決後: ResolvedMindBranch = { ...b, title: title.value };
+    return title.ok ? 解決後 : { ...解決後, unresolved: true as const };
+  });
+  const 解決後: ResolvedMindData = { ...data, rootTitle: root.value, branches };
+  return root.ok ? 解決後 : { ...解決後, unresolved: true as const };
+}