@cardenelabs/cdl 0.9.0 → 0.10.0

package/dist/{render-hmFRAabt.d.cts → render-CH1Qn3Jv.d.cts}

@@ -2047,6 +2047,20 @@ type CdlPhase = {
     title: string;
     body: string;
     activate: string[];
+    /**
+     * この phase で「左の起点から描き始める」 node の id (cdl#512)。
+     *
+     * `activate` と同じ形で node id を並べる。 対象の node は phase の進み (0→1) に合わせて
+     * 描かれ、 進みが 1 に達した時点で全体が出る。 現在の対象は `chart-line` だけで、
+     * 折れ線が左端から右へ伸び、 点と値の数字は線の先が届いた時に現れる。
+     *
+     * **`activate` を兼ねさせない**。 1 箱で図全体を描く種別 (`chart-*` 等) では焦点が
+     * その箱に解決されるため、 連続する phase で光り続ける図が実在する。 「光っていたら
+     * 描く」 にすると、 値が動くだけの phase でも線を引き直すことになる。
+     *
+     * 書かない phase では従来どおり全長で描く (DOM に dash 属性も付かない)。
+     */
+    draw?: string[];
     /** 数値 state の線形補間 (write phase で 100→90 等) */
     tweens: Array<{
         stateId: string;

package/dist/{render-hmFRAabt.d.ts → render-CH1Qn3Jv.d.ts}

@@ -2047,6 +2047,20 @@ type CdlPhase = {
     title: string;
     body: string;
     activate: string[];
+    /**
+     * この phase で「左の起点から描き始める」 node の id (cdl#512)。
+     *
+     * `activate` と同じ形で node id を並べる。 対象の node は phase の進み (0→1) に合わせて
+     * 描かれ、 進みが 1 に達した時点で全体が出る。 現在の対象は `chart-line` だけで、
+     * 折れ線が左端から右へ伸び、 点と値の数字は線の先が届いた時に現れる。
+     *
+     * **`activate` を兼ねさせない**。 1 箱で図全体を描く種別 (`chart-*` 等) では焦点が
+     * その箱に解決されるため、 連続する phase で光り続ける図が実在する。 「光っていたら
+     * 描く」 にすると、 値が動くだけの phase でも線を引き直すことになる。
+     *
+     * 書かない phase では従来どおり全長で描く (DOM に dash 属性も付かない)。
+     */
+    draw?: string[];
     /** 数値 state の線形補間 (write phase で 100→90 等) */
     tweens: Array<{
         stateId: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cardenelabs/cdl",
-  "version": "0.9.0",
+  "version": "0.10.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/builder.ts

@@ -1355,6 +1355,11 @@ export type InputChain = {
 
 export type PhaseBuilder = {
   activate: (...ids: string[]) => PhaseBuilder;
+  /**
+   * この phase で左の起点から描き始める node を指定する (cdl#512)。
+   * 対象は phase の進み (0→1) に合わせて描かれる。 現在の対象種別は `chart-line`。
+   */
+  draw: (...ids: string[]) => PhaseBuilder;
   /** 数値 state の線形補間 (write phase で 100→90 等) */
   tween: (stateId: string, from: number, to: number) => PhaseBuilder;
   /** 任意型 state を即時切替 (この phase 到達で value 上書き、 lerp なし) */
@@ -1364,6 +1369,7 @@ export type PhaseBuilder = {
 
 type PhaseAcc = {
   activate: string[];
+  draw: string[];
   tweens: Array<{ stateId: string; from: number; to: number }>;
   sets: Array<{ stateId: string; value: string | number }>;
   badge?: string;
@@ -1375,6 +1381,10 @@ function makePhaseBuilder(acc: PhaseAcc): PhaseBuilder {
       acc.activate.push(...ids);
       return api;
     },
+    draw(...ids) {
+      acc.draw.push(...ids);
+      return api;
+    },
     tween(stateId, from, to) {
       acc.tweens.push({ stateId, from, to });
       return api;
@@ -3690,7 +3700,7 @@ export function diagram(
       },
     },
     phase(phaseId, opts, build) {
-      const acc: PhaseAcc = { activate: [], tweens: [], sets: [] };
+      const acc: PhaseAcc = { activate: [], draw: [], tweens: [], sets: [] };
       build(makePhaseBuilder(acc));
       phases.push({
         id: phaseId,
@@ -3698,6 +3708,8 @@ export function diagram(
         title: opts.title,
         body: opts.body,
         activate: acc.activate,
+        // 空なら欄ごと置かない。 置くと `draw` を使わない図の JSON の形が変わる
+        ...(acc.draw.length > 0 ? { draw: acc.draw } : {}),
         tweens: acc.tweens,
         sets: acc.sets,
         badge: acc.badge,

package/src/kinds/chart-line.tsx

@@ -7,15 +7,29 @@ import { resolveChartData } from "../render/payload-binding";
  * layout は node bbox (node.w × node.h) 内側に padding (top/right/bottom/left) を確保し、
  * その内側 rect を chart canvas とみなす。 縦軸 = value min-max、 横軸 = datum index。
  * 各 value は数でも `{signal}` でもよく、 後者は状態が動くたび折れ線が追随する。
+ *
+ * phase の `draw` にこの node の id が載っている間は、 折れ線が左の起点から伸びる (cdl#512)。
+ * 伸ばし方は dash (`pathLength` / `strokeDasharray` / `strokeDashoffset`) で、 `points` は
+ * 進みに関わらず全点を持つ。 点と値の数字は線の先が自分の位置に届いた時に現れ、
+ * 軸 / 格子 / 横軸の名前は最初から出る。
  */
 export function ChartLineNode({
   node,
   active,
   stateValues = {},
+  drawing = false,
+  progress = 1,
 }: {
   node: LaidNode;
   active: boolean;
   stateValues?: Record<string, string>;
+  /**
+   * この phase の `draw` に載っているか (cdl#512)。 true の間だけ折れ線が左の起点から
+   * 伸び、 点と値の数字は線の先が自分の位置に届いた時に現れる。
+   */
+  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;
@@ -45,6 +59,44 @@ export function ChartLineNode({
 
   const points = data.map((d, idx) => `${xAt(idx)},${yAt(d.value)}`).join(" ");
 
+  // dash は polyline の実際の経路長で進むため、 点の表示判定も同じ経路長に揃える。
+  // 点番号の比率では、 急傾斜と平坦な区間が混ざる線で先端と点がずれる。
+  const 点までの長さ: number[] = [];
+  let 線の全長 = 0;
+  let 前の点: { x: number; y: number } | undefined;
+  for (const [idx, datum] of data.entries()) {
+    const 今の点 = { x: xAt(idx), y: yAt(datum.value) };
+    if (前の点) {
+      線の全長 += Math.hypot(今の点.x - 前の点.x, 今の点.y - 前の点.y);
+    }
+    点までの長さ.push(線の全長);
+    前の点 = 今の点;
+  }
+
+  /**
+   * 線がどこまで伸びたか (0..1、 cdl#512)。 描く指定が無ければ常に 1 = 全長。
+   *
+   * 進みは呼出側から来る値なので、 範囲の外 (負 / 1 超 / NaN) が入りうる。 そのまま
+   * `strokeDashoffset` に渡すと線が消えたり逆向きに縮んだりするため、 ここで畳む。
+   */
+  const 伸び = drawing ? Math.min(1, Math.max(0, Number.isFinite(progress) ? progress : 1)) : 1;
+
+  /**
+   * その点まで線の先が届いたか。
+   *
+   * 点の位置は polyline の累積経路長で判定する。 **左端は進み 0 でも出す** = そこが
+   * 線の起点で、 起点が無いと線がどこから伸びているのか読めない。
+   *
+   * 点が 1 つの図では線を引かない (下の `data.length > 1`) ため、 割り算の分母が 0 に
+   * なる形には入らないが、 呼出の順に依らず成り立つよう先に返す。
+   */
+  const 線の先が届いた = (idx: number): boolean => {
+    if (!drawing) return true;
+    if (data.length <= 1) return true;
+    if (線の全長 === 0) return true;
+    return 伸び >= (点までの長さ[idx] ?? 0) / 線の全長;
+  };
+
   const gridCount = 4;
   const gridTicks = Array.from({ length: gridCount + 1 }, (_, i) => {
     const v = vMin + (vRange * i) / gridCount;
@@ -114,6 +166,16 @@ export function ChartLineNode({
           strokeWidth={2.5}
           strokeLinejoin="round"
           strokeLinecap="round"
+          // 伸ばすのは dash で行い、 **`points` は触らない** (cdl#512)。 点を削る形にすると
+          // 利用側が数えている点の数が進みの途中で変わる (dragon の `kind-geometry-check`)。
+          //
+          // `pathLength={1}` を置くのは、 実長を測るには DOM の ref が要り、 静的な書き出しでは
+          // 測れないため。 長さを 1 に正規化すれば進みをそのまま offset に使える。
+          //
+          // 描く指定が無い図には属性を 1 つも足さない = 既存の図の DOM を変えない
+          {...(drawing
+            ? { pathLength: 1, strokeDasharray: 1, strokeDashoffset: 1 - 伸び }
+            : {})}
         />
       )}
       {data.map((d, idx) => {
@@ -129,33 +191,40 @@ export function ChartLineNode({
           (prev === undefined || d.value <= prev) && (next === undefined || d.value <= next);
         const labelAbove = !isValley;
         const labelY = labelAbove ? cy - 12 : cy + 18;
+        // 点と値の数字は線の先に合わせて現れる。 **横軸の名前は最初から出す** =
+        // 名前は図の枠 (軸 / 格子) の側で、 これが順に増えると軸そのものが伸びて見える
+        const 出す = 線の先が届いた(idx);
         return (
           <g key={`pt-${idx}`} data-cdl-unresolved={d.unresolved ? "true" : undefined}>
-            <circle
-              cx={cx}
-              cy={cy}
-              r={5}
-              fill="var(--cdl-node-fill, #ffffff)"
-              stroke="var(--cdl-tone-accent, #2d6a8f)"
-              strokeWidth={2.5}
-            />
-            <circle
-              cx={cx}
-              cy={cy}
-              r={2.5}
-              fill="var(--cdl-tone-accent, #2d6a8f)"
-            />
-            <text
-              data-cdl-role="chart-line-value"
-              x={cx}
-              y={labelY}
-              fontSize={11}
-              fontWeight={600}
-              textAnchor="middle"
-              fill="var(--cdl-text, #1a1f2a)"
-            >
-              {d.value.toLocaleString()}
-            </text>
+            {出す && (
+              <>
+                <circle
+                  cx={cx}
+                  cy={cy}
+                  r={5}
+                  fill="var(--cdl-node-fill, #ffffff)"
+                  stroke="var(--cdl-tone-accent, #2d6a8f)"
+                  strokeWidth={2.5}
+                />
+                <circle
+                  cx={cx}
+                  cy={cy}
+                  r={2.5}
+                  fill="var(--cdl-tone-accent, #2d6a8f)"
+                />
+                <text
+                  data-cdl-role="chart-line-value"
+                  x={cx}
+                  y={labelY}
+                  fontSize={11}
+                  fontWeight={600}
+                  textAnchor="middle"
+                  fill="var(--cdl-text, #1a1f2a)"
+                >
+                  {d.value.toLocaleString()}
+                </text>
+              </>
+            )}
             <text
               x={cx}
               y={PAD_TOP + canvasH + 20}

package/src/render/nodes.tsx

@@ -84,12 +84,18 @@ import { hasUnresolvedRef, interpolate, resolveNumericAttr } from "./utils";
 export function CdlNodeView({
   node,
   active,
+  drawing = false,
   progress,
   stateValues,
   currentPhaseId,
 }: {
   node: LaidNode;
   active: boolean;
+  /**
+   * この phase の `draw` に載っているか (cdl#512)。 true の間だけ、 対象の種別が
+   * phase の進み (`progress`) に合わせて左の起点から描かれる。
+   */
+  drawing?: boolean;
   progress: number;
   stateValues: Record<string, string>;
   currentPhaseId: string | undefined;
@@ -154,7 +160,15 @@ export function CdlNodeView({
       // 数と語を取る 7 種に対し、mind-map / tree-hierarchy は **名前だけ** を取る (#467)。
       // 親子の繋がりと、描かれない欄 (補足) は解決しない。
       case "chart-line":
-        return <ChartLineNode node={resolvedNode} active={active} stateValues={stateValues} />;
+        return (
+          <ChartLineNode
+            node={resolvedNode}
+            active={active}
+            stateValues={stateValues}
+            drawing={drawing}
+            progress={progress}
+          />
+        );
       case "chart-pie":
         return <ChartPieNode node={resolvedNode} active={active} stateValues={stateValues} />;
       case "chart-bar":

package/src/render/stage.tsx

@@ -25,6 +25,9 @@ export function CdlStage({
   svgRef?: React.RefObject<SVGSVGElement | null>;
 }): JSX.Element {
   const activeSet = new Set(currentPhase?.activate ?? []);
+  // この phase で左の起点から描き始める node (cdl#512)。 `activate` とは別集合で持つ =
+  // 焦点が当たり続ける図で毎 phase 引き直すことになるため、 光っているかを引き金にしない
+  const drawSet = new Set(currentPhase?.draw ?? []);
   // 縦線の終点は全 lane で 1 つに揃える (等長保証)。 値の決め方と、 1 lane の異常が図全体から
   // 縦線を消していた形の対処は `uniformLifelineEndY` の説明。
   //
@@ -208,6 +211,7 @@ export function CdlStage({
             <CdlNodeView
               node={node}
               active={activeSet.has(node.id)}
+              drawing={drawSet.has(node.id)}
               progress={progress}
               stateValues={stateValues}
               currentPhaseId={currentPhase?.id}

package/src/types.ts

@@ -2124,6 +2124,20 @@ export type CdlPhase = {
   title: string;
   body: string;
   activate: string[];
+  /**
+   * この phase で「左の起点から描き始める」 node の id (cdl#512)。
+   *
+   * `activate` と同じ形で node id を並べる。 対象の node は phase の進み (0→1) に合わせて
+   * 描かれ、 進みが 1 に達した時点で全体が出る。 現在の対象は `chart-line` だけで、
+   * 折れ線が左端から右へ伸び、 点と値の数字は線の先が届いた時に現れる。
+   *
+   * **`activate` を兼ねさせない**。 1 箱で図全体を描く種別 (`chart-*` 等) では焦点が
+   * その箱に解決されるため、 連続する phase で光り続ける図が実在する。 「光っていたら
+   * 描く」 にすると、 値が動くだけの phase でも線を引き直すことになる。
+   *
+   * 書かない phase では従来どおり全長で描く (DOM に dash 属性も付かない)。
+   */
+  draw?: string[];
   /** 数値 state の線形補間 (write phase で 100→90 等) */
   tweens: Array<{ stateId: string; from: number; to: number }>;
   /** 任意型 state の即時切替 (この phase に到達したら値を上書き、 lerp なし) */

package/src/validate.ts

@@ -108,7 +108,7 @@ export function validate(diag: CdlDiagram): void {
   ]);
 
   // 「もしかして」 サジェスト (typo 検出): edit distance 1 で最も近い候補 1 件
-  const suggest = (target: string, candidates: Set<string>): string => {
+  const suggest = (target: string, candidates: Set<string>, candidateKind: "lane" | "node" = "lane"): string => {
     const list = [...candidates];
     if (list.length === 0) return "";
     let best = "";
@@ -120,7 +120,7 @@ export function validate(diag: CdlDiagram): void {
         best = c;
       }
     }
-    return bestD <= 2 ? ` (もしかして "${best}"?)` : ` (定義済 lane: ${list.slice(0, 5).join(", ")}${list.length > 5 ? "..." : ""})`;
+    return bestD <= 2 ? ` (もしかして "${best}"?)` : ` (定義済 ${candidateKind}: ${list.slice(0, 5).join(", ")}${list.length > 5 ? "..." : ""})`;
   };
   for (const n of diag.nodes) {
     if (!laneIds.has(n.lane)) {
@@ -132,12 +132,12 @@ export function validate(diag: CdlDiagram): void {
   for (const e of diag.edges) {
     if (!nodeIds.has(e.from)) {
       errors.push(
-        `[cdl] unknown-ref: edge "${e.id}" の from "${e.from}" が node に存在しません${suggest(e.from, nodeIds)}\n  → 修正例: .node("${e.from}", { lane: "...", stack: 0, kind: "actor", title: "..." }) を edge 宣言前に追加`,
+        `[cdl] unknown-ref: edge "${e.id}" の from "${e.from}" が node に存在しません${suggest(e.from, nodeIds, "node")}\n  → 修正例: .node("${e.from}", { lane: "...", stack: 0, kind: "actor", title: "..." }) を edge 宣言前に追加`,
       );
     }
     if (!nodeIds.has(e.to)) {
       errors.push(
-        `[cdl] unknown-ref: edge "${e.id}" の to "${e.to}" が node に存在しません${suggest(e.to, nodeIds)}\n  → 修正例: .node("${e.to}", { lane: "...", stack: 0, kind: "...", title: "..." }) を edge 宣言前に追加`,
+        `[cdl] unknown-ref: edge "${e.id}" の to "${e.to}" が node に存在しません${suggest(e.to, nodeIds, "node")}\n  → 修正例: .node("${e.to}", { lane: "...", stack: 0, kind: "...", title: "..." }) を edge 宣言前に追加`,
       );
     }
     if (e.from === e.to) {
@@ -156,6 +156,20 @@ export function validate(diag: CdlDiagram): void {
         errors.push(`[cdl] unknown-ref: phase "${p.id}" の activate "${id}" は node でも edge でもない (typo の可能性)`);
       }
     }
+    // 描き始める対象は node に限る (cdl#512)。 edge は `activate` された phase で自分から
+    // 伸びるため (`render/edges.tsx` の `SolidEdgePath`)、 `draw` で指す相手にならない
+    for (const id of p.draw ?? []) {
+      if (!nodeIds.has(id)) {
+        errors.push(`[cdl] unknown-ref: phase "${p.id}" の draw "${id}" は node ではない (typo の可能性)${suggest(id, nodeIds, "node")}`);
+        continue;
+      }
+      // 描き方を持たない種別を指しても図は出るが、 書いた指定は何もしない。
+      // 黙って捨てると「書いたのに伸びない」 が手掛かりなしで起きる
+      const kind = diag.nodes.find((n) => n.id === id)?.kind;
+      if (kind !== "chart-line") {
+        warnings.push(`phase "${p.id}" の draw "${id}" は kind "${kind}" で、 左から描く動きを持たない (対象は chart-line)`);
+      }
+    }
     for (const t of p.tweens) {
       if (!stateIds.has(t.stateId)) {
         errors.push(`[cdl] unknown-ref: phase "${p.id}" tween 対象 state "${t.stateId}" 未定義`);