@cardenelabs/cdl 0.11.0 → 0.12.0

package/src/kinds/tree.tsx

@@ -3,6 +3,7 @@ import type { LaidNode, TreeNodePayload } from "../types";
 import { TONE } from "../render/tone";
 import { resolveTreeData } from "../render/payload-binding";
 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)。 箱の高さは変えないため、 入らない時は落ちる
@@ -232,13 +259,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 +394,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 +404,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/;