@cardenelabs/cdl 0.11.0 → 0.12.1

package/src/kinds/mind-map.tsx

@@ -1,8 +1,9 @@
 import type { JSX } from "react";
-import { 箱に積む } from "./box-lines";
+import { 使える幅, 幅で切る, 箱に積む } from "./box-lines";
 import type { LaidNode, Tone, MindBranchNode } from "../types";
 import { TONE } from "../render/tone";
 import { resolveMindData } from "../render/payload-binding";
+import { 進みを畳む, 伸ばすdash, 段の伸び } from "./draw-progress";
 
 const MIND_TONES: Tone[] = ["accent", "teal", "success", "warning", "info", "error"];
 
@@ -31,10 +32,16 @@ export function MindMapNode({
   node,
   active,
   stateValues = {},
+  drawing = false,
+  progress = 1,
 }: {
   node: LaidNode;
   active: boolean;
   stateValues?: Record<string, string>;
+  /** この phase の `draw` に載っているか (cdl#520) */
+  drawing?: boolean;
+  /** phase の進み (0→1)。 `drawing` が true の時だけ読む */
+  progress?: number;
 }): JSX.Element {
   const x0 = node.cx - node.w / 2;
   const y0 = node.cy - node.h / 2;
@@ -50,6 +57,16 @@ export function MindMapNode({
 
   const layout = computeMindMapLayout(mindData, canvasCx, canvasCy, canvasW, canvasH);
 
+  /**
+   * 枝がどこまで伸びたか (0..1、 cdl#520)。 描く指定が無ければ常に 1 = 全部出ている。
+   *
+   * 中心に近い段から順に伸ばす。 全部を同時に伸ばすと、離れた枝が宙に浮いたまま伸びる。
+   */
+  const 伸び = 進みを畳む(drawing, progress);
+  const 最大深さ = layout.nodes.reduce((m, n) => Math.max(m, n.depth), 0);
+  /** その箱が出るか。 中心 (深さ 0) は起点なので進み 0 でも出す */
+  const 箱が出る = (深さ: number): boolean => !drawing || 段の伸び(伸び, 深さ, 最大深さ) >= 1;
+
   return (
     <g transform={`translate(${x0} ${y0})`}>
       <rect
@@ -64,20 +81,29 @@ export function MindMapNode({
         strokeWidth={active ? 3 : 1.25}
       />
 
-      {layout.edges.map((e, i) => (
-        <path
-          key={`edge-${i}`}
-          data-cdl-role="mind-edge"
-          d={e.d}
-          fill="none"
-          stroke={toneColor(e.tone)}
-          strokeWidth={2.5}
-          strokeOpacity={0.55}
-          strokeLinecap="round"
-        />
-      ))}
+      {layout.edges.map((e, i) => {
+        // 循環を閉じる枝は根から外へ向かう枝ではないため、全 node が出てから表示する
+        const 枝の伸び = e.deferUntilComplete
+          ? (伸び >= 1 ? 1 : 0)
+          : 段の伸び(伸び, e.depth, 最大深さ);
+        return (
+          <path
+            key={`edge-${i}`}
+            data-cdl-role="mind-edge"
+            d={e.d}
+            fill="none"
+            stroke={toneColor(e.tone)}
+            strokeWidth={2.5}
+            strokeOpacity={0.55}
+            strokeLinecap="round"
+            {...伸ばすdash(drawing, 枝の伸び)}
+          />
+        );
+      })}
 
       {layout.nodes.map((n) => {
+        // 枝が届いてから箱を出す。 届く前に出すと、繋がっていない箱が宙に浮く
+        if (!箱が出る(n.depth)) return null;
         // 補足は箱の中の 2 行目に出す (#471)。 箱の高さは変えないため、 入らない時は落ちる
         const 行 = 箱に積む(
           [
@@ -121,6 +147,9 @@ export function MindMapNode({
               </text>
             ))
           ) : (
+            // 補足が無くても **幅に収める** (#526)。 `箱に積む` を通らないこの経路だけが
+            // 幅を見ておらず、長い名前がそのまま箱の外へ出て枝の線と重なっていた
+            // (実測 = 中心の箱で文字 163px に対し箱 120px)
             <text
               x={n.x}
               y={n.y + 5}
@@ -129,7 +158,7 @@ export function MindMapNode({
               textAnchor="middle"
               fill={文字の色}
             >
-              {n.title}
+              {幅で切る(n.title, n.isRoot ? 15 : 13, 使える幅(n.w))}
             </text>
           )}
         </g>
@@ -150,6 +179,8 @@ type LayoutNode = {
   h: number;
   tone?: Tone;
   isRoot: boolean;
+  /** 中心からの段数 (中心が 0、 cdl#520)。 段ごとに順に伸ばすのに使う */
+  depth: number;
   /** 名前を状態から解決できなかった項目に付く印 (#467) */
   unresolved?: true;
 };
@@ -157,6 +188,10 @@ type LayoutNode = {
 type LayoutEdge = {
   d: string;
   tone?: Tone;
+  /** 枝の先 (子) の段数 (cdl#520)。 段ごとに順に伸ばすのに使う */
+  depth: number;
+  /** 循環により、元の親が layout 上で子と同じ深さか深くなった枝 */
+  deferUntilComplete: boolean;
 };
 
 export function computeMindMapLayout(
@@ -179,6 +214,8 @@ export function computeMindMapLayout(
     w: rootW,
     h: rootH,
     isRoot: true,
+    // 中心は起点なので段数 0 (cdl#520)
+    depth: 0,
     ...((mindData as { unresolved?: true }).unresolved ? { unresolved: true as const } : {}),
   });
 
@@ -339,6 +376,8 @@ export function computeMindMapLayout(
       y,
       w,
       h,
+      // 第 1 階層が段数 1 (`subDepth` は 0 始まり、 cdl#520)
+      depth: subDepth + 1,
       tone: myTone,
       isRoot: false,
       ...((node as { unresolved?: true }).unresolved ? { unresolved: true as const } : {}),
@@ -388,6 +427,9 @@ export function computeMindMapLayout(
     }
   }
 
+  // 枝の段数は「その枝の先 (子)」 の段数にする (cdl#520)。 箱を置き終えた後に引く
+  const 段数 = new Map(nodes.map((n) => [n.id, n.depth]));
+
   // edge = 親の辺 → 子の辺。 root → 第 1 branch は root の辺から。
   for (const br of mindData.branches) {
     const childPos = nodePos.get(br.id);
@@ -395,17 +437,29 @@ export function computeMindMapLayout(
     const isLeft = nodeSide.get(br.id) === "left";
     const childHalfW = nodeHalfW.get(br.id) ?? subBranchW / 2;
     const tone = nodeTone.get(br.id);
+    const childDepth = 段数.get(br.id) ?? 1;
+    const parentDepth = 段数.get(br.parent) ?? 0;
     if (br.parent === mindData.rootId) {
       const startX = rootEdgeXFor(isLeft);
       const endX = childPos.x + (isLeft ? childHalfW : -childHalfW);
-      edges.push({ d: makeCurve(startX, cy, endX, childPos.y, isLeft), tone });
+      edges.push({
+        d: makeCurve(startX, cy, endX, childPos.y, isLeft),
+        tone,
+        depth: childDepth,
+        deferUntilComplete: false,
+      });
     } else {
       const parentPos = nodePos.get(br.parent);
       if (!parentPos) continue;
       const parentHalfW = nodeHalfW.get(br.parent) ?? branchW / 2;
       const startX = parentPos.x + (isLeft ? -parentHalfW : parentHalfW);
       const endX = childPos.x + (isLeft ? childHalfW : -childHalfW);
-      edges.push({ d: makeCurve(startX, parentPos.y, endX, childPos.y, isLeft), tone });
+      edges.push({
+        d: makeCurve(startX, parentPos.y, endX, childPos.y, isLeft),
+        tone,
+        depth: Math.max(parentDepth, childDepth),
+        deferUntilComplete: parentDepth >= childDepth,
+      });
     }
   }
 

package/src/kinds/tree.tsx

@@ -2,7 +2,8 @@ import type { JSX } from "react";
 import type { LaidNode, TreeNodePayload } from "../types";
 import { TONE } from "../render/tone";
 import { resolveTreeData } from "../render/payload-binding";
-import { 箱に積む, type 積んだ行 } from "../kinds/box-lines";
+import { 使える幅, 幅で切る, 箱に積む, type 積んだ行 } from "../kinds/box-lines";
+import { 進みを畳む, 伸ばすdash, 段の伸び } from "./draw-progress";
 
 /**
  * tree-hierarchy kind ... 1 node に tree node 配列 (treeData) を保持し、
@@ -53,10 +54,16 @@ export function TreeNode({
   node,
   active,
   stateValues = {},
+  drawing = false,
+  progress = 1,
 }: {
   node: LaidNode;
   active: boolean;
   stateValues?: Record<string, string>;
+  /** この phase の `draw` に載っているか (cdl#520) */
+  drawing?: boolean;
+  /** phase の進み (0→1)。 `drawing` が true の時だけ読む */
+  progress?: number;
 }): JSX.Element {
   const x0 = node.cx - node.w / 2;
   const y0 = node.cy - node.h / 2;
@@ -72,6 +79,16 @@ export function TreeNode({
   const canvasH = node.h - PAD_TOP - PAD_BOTTOM;
 
   const layout = computeTreeLayout(treeNodes, canvasW, canvasH);
+
+  /**
+   * 枝がどこまで伸びたか (0..1、 cdl#520)。 描く指定が無ければ常に 1 = 全部出ている。
+   *
+   * 根に近い段から順に伸ばす。 全部を同時に伸ばすと、離れた枝が宙に浮いたまま伸びる。
+   */
+  const 伸び = 進みを畳む(drawing, progress);
+  const 最大深さ = layout.nodes.reduce((m, n) => Math.max(m, n.depth), 0);
+  /** その箱が出るか。 根 (深さ 0) は起点なので進み 0 でも出す */
+  const 箱が出る = (深さ: number): boolean => !drawing || 段の伸び(伸び, 深さ, 最大深さ) >= 1;
   const depthColors = [TONE.accent, TONE.teal, TONE.success, TONE.warning, TONE.info];
 
   return (
@@ -106,6 +123,10 @@ export function TreeNode({
         const y2 = PAD_TOP + e.y2;
         const midY = (y1 + y2) / 2;
         const path = `M ${x1} ${y1} L ${x1} ${midY} L ${x2} ${midY} L ${x2} ${y2}`;
+        // 循環を閉じる枝は根から外へ向かう枝ではないため、全 node が出てから表示する
+        const 枝の伸び = e.deferUntilComplete
+          ? (伸び >= 1 ? 1 : 0)
+          : 段の伸び(伸び, e.depth, 最大深さ);
         return (
           <g key={`edge-${i}`}>
             <path
@@ -116,13 +137,19 @@ export function TreeNode({
               strokeOpacity={0.55}
               strokeWidth={1.5}
               strokeLinejoin="round"
+              {...伸ばすdash(drawing, 枝の伸び)}
             />
-            <circle cx={x1} cy={midY} r={2.5} fill={TONE.accent} fillOpacity={0.75} />
+            {/* 曲がり角の点は枝が届いてから出す。 先に出ると線の無い場所に点が浮く */}
+            {(!drawing || 枝の伸び >= 1) && (
+              <circle cx={x1} cy={midY} r={2.5} fill={TONE.accent} fillOpacity={0.75} />
+            )}
           </g>
         );
       })}
 
       {layout.nodes.map((n) => {
+        // 枝が届いてから箱を出す。 届く前に出すと、繋がっていない箱が宙に浮く
+        if (!箱が出る(n.depth)) return null;
         const accent = depthColors[Math.min(n.depth, depthColors.length - 1)] ?? depthColors[0]!;
         const isRoot = n.depth === 0;
         // 補足は箱の中の 2 行目に出す (#471)。 箱の高さは変えないため、 入らない時は落ちる
@@ -163,6 +190,8 @@ export function TreeNode({
                     名前の太さ: 700,
                   })
                 ) : (
+                  // 補足が無くても幅に収める (#526)。 `箱の文字` を通らないこの経路だけが
+                  // 幅を見ておらず、長い名前が箱の外へ出ていた
                   <text
                     x={n.w / 2}
                     y={n.h / 2 + 5}
@@ -171,7 +200,7 @@ export function TreeNode({
                     textAnchor="middle"
                     fill="var(--cdl-text-on-tone, #ffffff)"
                   >
-                    {n.title}
+                    {幅で切る(n.title, 13, 使える幅(n.w))}
                   </text>
                 )}
               </>
@@ -206,7 +235,7 @@ export function TreeNode({
                     textAnchor="middle"
                     fill="var(--cdl-chip-text, #1a1f2a)"
                   >
-                    {n.title}
+                    {幅で切る(n.title, 12, 使える幅(n.w))}
                   </text>
                 )}
               </>
@@ -232,13 +261,23 @@ type LayoutNode = {
   unresolved?: true;
 };
 
+type LayoutEdge = {
+  x1: number;
+  y1: number;
+  x2: number;
+  y2: number;
+  depth: number;
+  /** 循環により、元の親が layout 上で子と同じ深さか深くなった枝 */
+  deferUntilComplete: boolean;
+};
+
 export function computeTreeLayout(
   treeNodes: TreeNodePayload[],
   canvasW: number,
   canvasH: number,
 ): {
   nodes: LayoutNode[];
-  edges: Array<{ x1: number; y1: number; x2: number; y2: number }>;
+  edges: LayoutEdge[];
 } {
   // parent が実在しない node は root 扱いにする。 そうしないと root からの再帰で辿れず、
   // node が silent に消える (旧実装は全 node を列挙していたので消えなかった)。
@@ -357,7 +396,9 @@ export function computeTreeLayout(
   }
   const hById = new Map(nodes.map((n) => [n.id, n.h]));
 
-  const edges: Array<{ x1: number; y1: number; x2: number; y2: number }> = [];
+  // 枝の段数は「その枝の先 (子)」 の段数 (cdl#520)。 段ごとに順に伸ばすのに使う
+  const 段数 = new Map(nodes.map((n) => [n.id, n.depth]));
+  const edges: LayoutEdge[] = [];
   for (const n of treeNodes) {
     if (!n.parent) continue;
     const parent = posOf.get(n.parent);
@@ -365,7 +406,16 @@ export function computeTreeLayout(
     if (!parent || !child) continue;
     const parentH = hById.get(n.parent) ?? nodeH;
     const childH = hById.get(n.id) ?? nodeH;
-    edges.push({ x1: parent.x, y1: parent.y + parentH / 2, x2: child.x, y2: child.y - childH / 2 });
+    const parentDepth = 段数.get(n.parent) ?? 0;
+    const childDepth = 段数.get(n.id) ?? 1;
+    edges.push({
+      x1: parent.x,
+      y1: parent.y + parentH / 2,
+      x2: child.x,
+      y2: child.y - childH / 2,
+      depth: Math.max(parentDepth, childDepth),
+      deferUntilComplete: parentDepth >= childDepth,
+    });
   }
 
   return { nodes, edges };

package/src/kinds/user-journey.tsx

@@ -2,6 +2,7 @@ import type { JSX } from "react";
 import type { LaidNode, JourneyEmotion } from "../types";
 import { TONE } from "../render/tone";
 import { resolveJourneyData } from "../render/payload-binding";
+import { 進みを畳む, 伸ばすdash, ベジエの累積割合 } from "./draw-progress";
 
 /**
  * journey-map kind ... 1 node に step 配列 (journeyData) を保持し、 UX journey map を SVG 描画する。
@@ -18,10 +19,16 @@ export function UserJourneyNode({
   node,
   active,
   stateValues = {},
+  drawing = false,
+  progress = 1,
 }: {
   node: LaidNode;
   active: boolean;
   stateValues?: Record<string, string>;
+  /** この phase の `draw` に載っているか (cdl#520) */
+  drawing?: boolean;
+  /** phase の進み (0→1)。 `drawing` が true の時だけ読む */
+  progress?: number;
 }): JSX.Element {
   const x0 = node.cx - node.w / 2;
   const y0 = node.cy - node.h / 2;
@@ -70,6 +77,21 @@ export function UserJourneyNode({
 
   // smooth curve for emotion path
   const pts = steps.map((s, i) => ({ x: xAt(i), y: yAt(s.emotion) }));
+  /**
+   * 線がどこまで伸びたか (0..1、 cdl#520)。 描く指定が無ければ常に 1 = 全長。
+   */
+  const 伸び = 進みを畳む(drawing, progress);
+  /**
+   * 各段までの累積割合。 **点番号の比率ではなく実際の経路長で測る** (#513 の指摘)。
+   * 気持ちの上下で区間の長さが変わるため、比率で判定すると先端と丸がずれる。
+   */
+  const 段までの割合 = ベジエの累積割合(pts, (前, 後) => {
+    const midX = (前.x + 後.x) / 2;
+    return [{ x: midX, y: 前.y }, { x: midX, y: 後.y }];
+  });
+  /** その段まで線の先が届いたか。 左端は進み 0 でも出す (そこが線の起点) */
+  const 線の先が届いた = (idx: number): boolean => !drawing || 伸び >= (段までの割合[idx] ?? 0);
+
   const smoothPath = pts.length > 1
     ? pts.reduce((acc, p, i) => {
         if (i === 0) return `M ${p.x} ${p.y}`;
@@ -144,6 +166,10 @@ export function UserJourneyNode({
 
       {steps.length > 1 && (
         <>
+          {/*
+            影と本体は同じ進みで伸ばす。 片方だけ先行すると、線の先に影だけが伸びた
+            形になる (cdl#520)
+          */}
           <path
             data-cdl-role="journey-line-glow"
             d={smoothPath}
@@ -152,6 +178,7 @@ export function UserJourneyNode({
             strokeOpacity={0.18}
             strokeWidth={10}
             strokeLinecap="round"
+            {...伸ばすdash(drawing, 伸び)}
           />
           <path
             data-cdl-role="journey-line"
@@ -161,11 +188,12 @@ export function UserJourneyNode({
             strokeWidth={2.75}
             strokeLinejoin="round"
             strokeLinecap="round"
+            {...伸ばすdash(drawing, 伸び)}
           />
         </>
       )}
 
-      {steps.map((s, idx) => (
+      {steps.map((s, idx) => !線の先が届いた(idx) ? null : (
         <g
           key={`step-${s.id}`}
           data-cdl-role="journey-step"

package/src/render/nodes.tsx

@@ -190,17 +190,57 @@ export function CdlNodeView({
           />
         );
       case "gantt-timeline":
-        return <GanttNode node={resolvedNode} active={active} stateValues={stateValues} />;
+        return (
+          <GanttNode
+            node={resolvedNode}
+            active={active}
+            stateValues={stateValues}
+            drawing={drawing}
+            progress={progress}
+          />
+        );
       case "mind-map":
-        return <MindMapNode node={resolvedNode} active={active} stateValues={stateValues} />;
+        return (
+          <MindMapNode
+            node={resolvedNode}
+            active={active}
+            stateValues={stateValues}
+            drawing={drawing}
+            progress={progress}
+          />
+        );
       case "funnel-stages":
-        return <FunnelNode node={resolvedNode} active={active} stateValues={stateValues} />;
+        return (
+          <FunnelNode
+            node={resolvedNode}
+            active={active}
+            stateValues={stateValues}
+            drawing={drawing}
+            progress={progress}
+          />
+        );
       case "quadrant-matrix":
         return <QuadrantNode node={resolvedNode} active={active} stateValues={stateValues} />;
       case "tree-hierarchy":
-        return <TreeHierarchyNode node={resolvedNode} active={active} stateValues={stateValues} />;
+        return (
+          <TreeHierarchyNode
+            node={resolvedNode}
+            active={active}
+            stateValues={stateValues}
+            drawing={drawing}
+            progress={progress}
+          />
+        );
       case "journey-map":
-        return <UserJourneyNode node={resolvedNode} active={active} stateValues={stateValues} />;
+        return (
+          <UserJourneyNode
+            node={resolvedNode}
+            active={active}
+            stateValues={stateValues}
+            drawing={drawing}
+            progress={progress}
+          />
+        );
       case "shape-file":
         return <ShapeFileNode node={resolvedNode} active={active} />;
       case "shape-folder":

package/src/types.ts

@@ -2135,6 +2135,11 @@ export type CdlPhase = {
    * | `chart-line` | 左端 | 線が右へ伸びる | 点と数字は線の先が届いた時 |
    * | `chart-bar` | 横軸 | 棒が上へ伸びる | 数字は棒の頭に付いて動く |
    * | `chart-pie` | 12 時 | 扇が時計回りに開く | 凡例はその扇が開き始めた時 |
+   * | `journey-map` | 左端 | 気持ちの線が右へ伸びる | 段はその点に線の先が届いた時 |
+   * | `mind-map` | 中心 | 枝が段ごとに外へ伸びる | 箱はその枝が届いた時 |
+   * | `tree-hierarchy` | 根 | 枝が段ごとに下へ伸びる | 箱はその枝が届いた時 |
+   * | `gantt-timeline` | 各帯の始端 | 帯が右へ伸びる | 依存の矢印は帯が出揃った時 |
+   * | `funnel-stages` | 上端 | 段が上から順に積まれる | 件数と離脱率はその段が出切った時 |
    *
    * 対象種別の一覧は `validate.ts` の `DRAW_KINDS` が持つ。
    *

package/src/validate.ts

@@ -17,8 +17,22 @@ const TONES = new Set<string>(TONE_NAMES);
  * | `chart-line` | 左端 | 線が右へ伸びる |
  * | `chart-bar` | 横軸 | 棒が上へ伸びる |
  * | `chart-pie` | 12 時 | 扇が時計回りに開く |
+ * | `journey-map` | 左端 | 気持ちの線が右へ伸びる |
+ * | `mind-map` | 中心 | 枝が中心から外へ伸びる |
+ * | `tree-hierarchy` | 根 | 枝が上の段から下の段へ伸びる |
+ * | `gantt-timeline` | 各帯の始端 | 帯が右へ伸びる |
+ * | `funnel-stages` | 上端 | 段が上から順に積まれる |
  */
-export const DRAW_KINDS: ReadonlySet<string> = new Set(["chart-line", "chart-bar", "chart-pie"]);
+export const DRAW_KINDS: ReadonlySet<string> = new Set([
+  "chart-line",
+  "chart-bar",
+  "chart-pie",
+  "journey-map",
+  "mind-map",
+  "tree-hierarchy",
+  "gantt-timeline",
+  "funnel-stages",
+]);
 const KINDS = new Set<string>(NODE_KINDS);
 const ENG_BANNED = /\b(FUNCTION|STORAGE|EVENT LOG|BALANCES MAPPING|READ|WRITE|EMIT|CALL)\b/;