@cardenelabs/cdl 0.9.0 → 0.10.0

package/dist/index.d.cts

@@ -1,5 +1,5 @@
-import { C as CdlDiagram, S as Signal, a as CdlInput, b as CdlLane, c as CdlNode, T as Tone, d as Side, E as EdgeStyle, e as CdlState, f as CdlEventTarget, g as Computed, h as CdlDerivedValue, i as CdlScrollTrigger, L as LaidDiagram, j as CdlDiagramViewProps, k as LaidEdge, l as LaidNode, m as CdlEdge, B as BBox, N as NodeKind, J as JourneyEmotion, Q as QuadrantKey } from './render-hmFRAabt.cjs';
-export { n as CdlDiagramView, o as CdlEventBinding, p as CdlEventKind, q as CdlFormula, r as CdlPhase, I as InteractiveHandlerMap, s as InteractiveSignalsAccessor, t as LaidLane, u as NODE_KINDS, v as ScrollProgressHandle, w as TONES, x as computeEventBindingKey, y as computeFormulaKey, z as computeInputSignalKey, A as computeScrollTriggerKey, D as computed, F as createInteractiveSignalsAccessor, G as createScrollProgressHandle, H as createScrollProgressSignals, K as hasInteractivePrimitives, M as signal } from './render-hmFRAabt.cjs';
+import { C as CdlDiagram, S as Signal, a as CdlInput, b as CdlLane, c as CdlNode, T as Tone, d as Side, E as EdgeStyle, e as CdlState, f as CdlEventTarget, g as Computed, h as CdlDerivedValue, i as CdlScrollTrigger, L as LaidDiagram, j as CdlDiagramViewProps, k as LaidEdge, l as LaidNode, m as CdlEdge, B as BBox, N as NodeKind, J as JourneyEmotion, Q as QuadrantKey } from './render-CH1Qn3Jv.cjs';
+export { n as CdlDiagramView, o as CdlEventBinding, p as CdlEventKind, q as CdlFormula, r as CdlPhase, I as InteractiveHandlerMap, s as InteractiveSignalsAccessor, t as LaidLane, u as NODE_KINDS, v as ScrollProgressHandle, w as TONES, x as computeEventBindingKey, y as computeFormulaKey, z as computeInputSignalKey, A as computeScrollTriggerKey, D as computed, F as createInteractiveSignalsAccessor, G as createScrollProgressHandle, H as createScrollProgressSignals, K as hasInteractivePrimitives, M as signal } from './render-CH1Qn3Jv.cjs';
 import { JSX } from 'react';
 
 declare function effect(fn: () => void | (() => void)): () => void;
@@ -997,6 +997,11 @@ type InputChain = {
 };
 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 なし) */

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { C as CdlDiagram, S as Signal, a as CdlInput, b as CdlLane, c as CdlNode, T as Tone, d as Side, E as EdgeStyle, e as CdlState, f as CdlEventTarget, g as Computed, h as CdlDerivedValue, i as CdlScrollTrigger, L as LaidDiagram, j as CdlDiagramViewProps, k as LaidEdge, l as LaidNode, m as CdlEdge, B as BBox, N as NodeKind, J as JourneyEmotion, Q as QuadrantKey } from './render-hmFRAabt.js';
-export { n as CdlDiagramView, o as CdlEventBinding, p as CdlEventKind, q as CdlFormula, r as CdlPhase, I as InteractiveHandlerMap, s as InteractiveSignalsAccessor, t as LaidLane, u as NODE_KINDS, v as ScrollProgressHandle, w as TONES, x as computeEventBindingKey, y as computeFormulaKey, z as computeInputSignalKey, A as computeScrollTriggerKey, D as computed, F as createInteractiveSignalsAccessor, G as createScrollProgressHandle, H as createScrollProgressSignals, K as hasInteractivePrimitives, M as signal } from './render-hmFRAabt.js';
+import { C as CdlDiagram, S as Signal, a as CdlInput, b as CdlLane, c as CdlNode, T as Tone, d as Side, E as EdgeStyle, e as CdlState, f as CdlEventTarget, g as Computed, h as CdlDerivedValue, i as CdlScrollTrigger, L as LaidDiagram, j as CdlDiagramViewProps, k as LaidEdge, l as LaidNode, m as CdlEdge, B as BBox, N as NodeKind, J as JourneyEmotion, Q as QuadrantKey } from './render-CH1Qn3Jv.js';
+export { n as CdlDiagramView, o as CdlEventBinding, p as CdlEventKind, q as CdlFormula, r as CdlPhase, I as InteractiveHandlerMap, s as InteractiveSignalsAccessor, t as LaidLane, u as NODE_KINDS, v as ScrollProgressHandle, w as TONES, x as computeEventBindingKey, y as computeFormulaKey, z as computeInputSignalKey, A as computeScrollTriggerKey, D as computed, F as createInteractiveSignalsAccessor, G as createScrollProgressHandle, H as createScrollProgressSignals, K as hasInteractivePrimitives, M as signal } from './render-CH1Qn3Jv.js';
 import { JSX } from 'react';
 
 declare function effect(fn: () => void | (() => void)): () => void;
@@ -997,6 +997,11 @@ type InputChain = {
 };
 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 なし) */

package/dist/index.js

@@ -9361,6 +9361,10 @@ function makePhaseBuilder(acc) {
       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;
@@ -11440,7 +11444,7 @@ function diagram(id, options) {
       }
     },
     phase(phaseId, opts, build) {
-      const acc = { activate: [], tweens: [], sets: [] };
+      const acc = { activate: [], draw: [], tweens: [], sets: [] };
       build(makePhaseBuilder(acc));
       phases.push({
         id: phaseId,
@@ -11448,6 +11452,8 @@ function diagram(id, options) {
         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
@@ -15919,7 +15925,7 @@ function validate(diag) {
     ...(diag.formulas ?? []).map((f) => f.id),
     ...(diag.scrollTriggers ?? []).map((t) => t.id)
   ]);
-  const suggest = (target, candidates) => {
+  const suggest = (target, candidates, candidateKind = "lane") => {
     const list = [...candidates];
     if (list.length === 0) return "";
     let best = "";
@@ -15931,7 +15937,7 @@ function validate(diag) {
         best = c;
       }
     }
-    return bestD <= 2 ? ` (\u3082\u3057\u304B\u3057\u3066 "${best}"?)` : ` (\u5B9A\u7FA9\u6E08 lane: ${list.slice(0, 5).join(", ")}${list.length > 5 ? "..." : ""})`;
+    return bestD <= 2 ? ` (\u3082\u3057\u304B\u3057\u3066 "${best}"?)` : ` (\u5B9A\u7FA9\u6E08 ${candidateKind}: ${list.slice(0, 5).join(", ")}${list.length > 5 ? "..." : ""})`;
   };
   for (const n of diag.nodes) {
     if (!laneIds.has(n.lane)) {
@@ -15944,13 +15950,13 @@ function validate(diag) {
   for (const e of diag.edges) {
     if (!nodeIds.has(e.from)) {
       errors.push(
-        `[cdl] unknown-ref: edge "${e.id}" \u306E from "${e.from}" \u304C node \u306B\u5B58\u5728\u3057\u307E\u305B\u3093${suggest(e.from, nodeIds)}
+        `[cdl] unknown-ref: edge "${e.id}" \u306E from "${e.from}" \u304C node \u306B\u5B58\u5728\u3057\u307E\u305B\u3093${suggest(e.from, nodeIds, "node")}
   \u2192 \u4FEE\u6B63\u4F8B: .node("${e.from}", { lane: "...", stack: 0, kind: "actor", title: "..." }) \u3092 edge \u5BA3\u8A00\u524D\u306B\u8FFD\u52A0`
       );
     }
     if (!nodeIds.has(e.to)) {
       errors.push(
-        `[cdl] unknown-ref: edge "${e.id}" \u306E to "${e.to}" \u304C node \u306B\u5B58\u5728\u3057\u307E\u305B\u3093${suggest(e.to, nodeIds)}
+        `[cdl] unknown-ref: edge "${e.id}" \u306E to "${e.to}" \u304C node \u306B\u5B58\u5728\u3057\u307E\u305B\u3093${suggest(e.to, nodeIds, "node")}
   \u2192 \u4FEE\u6B63\u4F8B: .node("${e.to}", { lane: "...", stack: 0, kind: "...", title: "..." }) \u3092 edge \u5BA3\u8A00\u524D\u306B\u8FFD\u52A0`
       );
     }
@@ -15967,6 +15973,16 @@ function validate(diag) {
         errors.push(`[cdl] unknown-ref: phase "${p.id}" \u306E activate "${id}" \u306F node \u3067\u3082 edge \u3067\u3082\u306A\u3044 (typo \u306E\u53EF\u80FD\u6027)`);
       }
     }
+    for (const id of p.draw ?? []) {
+      if (!nodeIds.has(id)) {
+        errors.push(`[cdl] unknown-ref: phase "${p.id}" \u306E draw "${id}" \u306F node \u3067\u306F\u306A\u3044 (typo \u306E\u53EF\u80FD\u6027)${suggest(id, nodeIds, "node")}`);
+        continue;
+      }
+      const kind = diag.nodes.find((n) => n.id === id)?.kind;
+      if (kind !== "chart-line") {
+        warnings.push(`phase "${p.id}" \u306E draw "${id}" \u306F kind "${kind}" \u3067\u3001 \u5DE6\u304B\u3089\u63CF\u304F\u52D5\u304D\u3092\u6301\u305F\u306A\u3044 (\u5BFE\u8C61\u306F chart-line)`);
+      }
+    }
     for (const t of p.tweens) {
       if (!stateIds.has(t.stateId)) {
         errors.push(`[cdl] unknown-ref: phase "${p.id}" tween \u5BFE\u8C61 state "${t.stateId}" \u672A\u5B9A\u7FA9`);
@@ -21264,7 +21280,9 @@ function resolveMindData(data, values) {
 function ChartLineNode({
   node,
   active,
-  stateValues = {}
+  stateValues = {},
+  drawing = false,
+  progress = 1
 }) {
   const x0 = node.cx - node.w / 2;
   const y0 = node.cy - node.h / 2;
@@ -21285,6 +21303,24 @@ function ChartLineNode({
   const xAt = (idx) => PAD_LEFT + (data.length <= 1 ? canvasW / 2 : canvasW * idx / (data.length - 1));
   const yAt = (v) => plotTop + plotH - (v - vMin) / vRange * plotH;
   const points = data.map((d, idx) => `${xAt(idx)},${yAt(d.value)}`).join(" ");
+  const \u70B9\u307E\u3067\u306E\u9577\u3055 = [];
+  let \u7DDA\u306E\u5168\u9577 = 0;
+  let \u524D\u306E\u70B9;
+  for (const [idx, datum] of data.entries()) {
+    const \u4ECA\u306E\u70B9 = { x: xAt(idx), y: yAt(datum.value) };
+    if (\u524D\u306E\u70B9) {
+      \u7DDA\u306E\u5168\u9577 += Math.hypot(\u4ECA\u306E\u70B9.x - \u524D\u306E\u70B9.x, \u4ECA\u306E\u70B9.y - \u524D\u306E\u70B9.y);
+    }
+    \u70B9\u307E\u3067\u306E\u9577\u3055.push(\u7DDA\u306E\u5168\u9577);
+    \u524D\u306E\u70B9 = \u4ECA\u306E\u70B9;
+  }
+  const \u4F38\u3073 = drawing ? Math.min(1, Math.max(0, Number.isFinite(progress) ? progress : 1)) : 1;
+  const \u7DDA\u306E\u5148\u304C\u5C4A\u3044\u305F = (idx) => {
+    if (!drawing) return true;
+    if (data.length <= 1) return true;
+    if (\u7DDA\u306E\u5168\u9577 === 0) return true;
+    return \u4F38\u3073 >= (\u70B9\u307E\u3067\u306E\u9577\u3055[idx] ?? 0) / \u7DDA\u306E\u5168\u9577;
+  };
   const gridCount = 4;
   const gridTicks = Array.from({ length: gridCount + 1 }, (_, i) => {
     const v = vMin + vRange * i / gridCount;
@@ -21362,7 +21398,8 @@ function ChartLineNode({
         stroke: "var(--cdl-tone-accent, #2d6a8f)",
         strokeWidth: 2.5,
         strokeLinejoin: "round",
-        strokeLinecap: "round"
+        strokeLinecap: "round",
+        ...drawing ? { pathLength: 1, strokeDasharray: 1, strokeDashoffset: 1 - \u4F38\u3073 } : {}
       }
     ),
     data.map((d, idx) => {
@@ -21373,40 +21410,43 @@ function ChartLineNode({
       const isValley = (prev === void 0 || d.value <= prev) && (next === void 0 || d.value <= next);
       const labelAbove = !isValley;
       const labelY = labelAbove ? cy - 12 : cy + 18;
+      const \u51FA\u3059 = \u7DDA\u306E\u5148\u304C\u5C4A\u3044\u305F(idx);
       return /* @__PURE__ */ jsxs("g", { "data-cdl-unresolved": d.unresolved ? "true" : void 0, children: [
-        /* @__PURE__ */ jsx(
-          "circle",
-          {
-            cx,
-            cy,
-            r: 5,
-            fill: "var(--cdl-node-fill, #ffffff)",
-            stroke: "var(--cdl-tone-accent, #2d6a8f)",
-            strokeWidth: 2.5
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "circle",
-          {
-            cx,
-            cy,
-            r: 2.5,
-            fill: "var(--cdl-tone-accent, #2d6a8f)"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "text",
-          {
-            "data-cdl-role": "chart-line-value",
-            x: cx,
-            y: labelY,
-            fontSize: 11,
-            fontWeight: 600,
-            textAnchor: "middle",
-            fill: "var(--cdl-text, #1a1f2a)",
-            children: d.value.toLocaleString()
-          }
-        ),
+        \u51FA\u3059 && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            "circle",
+            {
+              cx,
+              cy,
+              r: 5,
+              fill: "var(--cdl-node-fill, #ffffff)",
+              stroke: "var(--cdl-tone-accent, #2d6a8f)",
+              strokeWidth: 2.5
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "circle",
+            {
+              cx,
+              cy,
+              r: 2.5,
+              fill: "var(--cdl-tone-accent, #2d6a8f)"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "text",
+            {
+              "data-cdl-role": "chart-line-value",
+              x: cx,
+              y: labelY,
+              fontSize: 11,
+              fontWeight: 600,
+              textAnchor: "middle",
+              fill: "var(--cdl-text, #1a1f2a)",
+              children: d.value.toLocaleString()
+            }
+          )
+        ] }),
         /* @__PURE__ */ jsx(
           "text",
           {
@@ -26701,6 +26741,7 @@ function ShapeCustomerServiceNode({ node, active }) {
 function CdlNodeView({
   node,
   active,
+  drawing = false,
   progress,
   stateValues,
   currentPhaseId
@@ -26750,7 +26791,16 @@ function CdlNodeView({
       // 数と語を取る 7 種に対し、mind-map / tree-hierarchy は **名前だけ** を取る (#467)。
       // 親子の繋がりと、描かれない欄 (補足) は解決しない。
       case "chart-line":
-        return /* @__PURE__ */ jsx(ChartLineNode, { node: resolvedNode, active, stateValues });
+        return /* @__PURE__ */ jsx(
+          ChartLineNode,
+          {
+            node: resolvedNode,
+            active,
+            stateValues,
+            drawing,
+            progress
+          }
+        );
       case "chart-pie":
         return /* @__PURE__ */ jsx(ChartPieNode, { node: resolvedNode, active, stateValues });
       case "chart-bar":
@@ -26944,6 +26994,7 @@ function CdlStage({
   svgRef
 }) {
   const activeSet = new Set(currentPhase?.activate ?? []);
+  const drawSet = new Set(currentPhase?.draw ?? []);
   const { lifelineStarts, uniformFooterTop } = useMemo(() => {
     const starts = lifelineStartYs(laid.nodes);
     return {
@@ -27080,6 +27131,7 @@ function CdlStage({
               {
                 node,
                 active: activeSet.has(node.id),
+                drawing: drawSet.has(node.id),
                 progress,
                 stateValues,
                 currentPhaseId: currentPhase?.id