@cardenelabs/cdl 0.9.0 → 0.10.0

package/dist/react.cjs

@@ -4949,7 +4949,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 = "";
@@ -4961,7 +4961,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)) {
@@ -4974,13 +4974,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`
       );
     }
@@ -4997,6 +4997,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`);
@@ -6574,7 +6584,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;
@@ -6595,6 +6607,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;
@@ -6672,7 +6702,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) => {
@@ -6683,40 +6714,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__ */ jsxRuntime.jsxs("g", { "data-cdl-unresolved": d.unresolved ? "true" : void 0, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "circle",
-          {
-            cx,
-            cy,
-            r: 5,
-            fill: "var(--cdl-node-fill, #ffffff)",
-            stroke: "var(--cdl-tone-accent, #2d6a8f)",
-            strokeWidth: 2.5
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "circle",
-          {
-            cx,
-            cy,
-            r: 2.5,
-            fill: "var(--cdl-tone-accent, #2d6a8f)"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "circle",
+            {
+              cx,
+              cy,
+              r: 5,
+              fill: "var(--cdl-node-fill, #ffffff)",
+              stroke: "var(--cdl-tone-accent, #2d6a8f)",
+              strokeWidth: 2.5
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "circle",
+            {
+              cx,
+              cy,
+              r: 2.5,
+              fill: "var(--cdl-tone-accent, #2d6a8f)"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
           "text",
           {
@@ -12192,6 +12226,7 @@ function ShapeCustomerServiceNode({ node, active }) {
 function CdlNodeView({
   node,
   active,
+  drawing = false,
   progress,
   stateValues,
   currentPhaseId
@@ -12241,7 +12276,16 @@ function CdlNodeView({
       // 数と語を取る 7 種に対し、mind-map / tree-hierarchy は **名前だけ** を取る (#467)。
       // 親子の繋がりと、描かれない欄 (補足) は解決しない。
       case "chart-line":
-        return /* @__PURE__ */ jsxRuntime.jsx(ChartLineNode, { node: resolvedNode, active, stateValues });
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          ChartLineNode,
+          {
+            node: resolvedNode,
+            active,
+            stateValues,
+            drawing,
+            progress
+          }
+        );
       case "chart-pie":
         return /* @__PURE__ */ jsxRuntime.jsx(ChartPieNode, { node: resolvedNode, active, stateValues });
       case "chart-bar":
@@ -12435,6 +12479,7 @@ function CdlStage({
   svgRef
 }) {
   const activeSet = new Set(currentPhase?.activate ?? []);
+  const drawSet = new Set(currentPhase?.draw ?? []);
   const { lifelineStarts, uniformFooterTop } = react.useMemo(() => {
     const starts = lifelineStartYs(laid.nodes);
     return {
@@ -12571,6 +12616,7 @@ function CdlStage({
               {
                 node,
                 active: activeSet.has(node.id),
+                drawing: drawSet.has(node.id),
                 progress,
                 stateValues,
                 currentPhaseId: currentPhase?.id