@cardenelabs/cdl 0.30.3 → 0.31.1

package/dist/{render-CabTMeao.d.cts → render-D6wVFGfI.d.cts}

@@ -405,6 +405,12 @@ type CdlNode = {
      * 数値 chart の全 datum を 1 node に格納し、 kinds/chart-*.tsx が自己完結で SVG 描画する。
      */
     chartData?: ChartDatumPayload[];
+    /** chart-line の線から下を、上端 0.22 から下端 0 へ薄く塗る */
+    chartFillUnder?: boolean;
+    /** chart-line の値を、点への到着直後だけ下からせり上げる */
+    chartValueRise?: boolean;
+    /** chart-line を描き切った後、粒で経路をなぞって点を順に出す */
+    chartTrace?: boolean;
     /**
      * gantt-timeline 専用の task payload。 task 全件を 1 node に格納し、
      * kinds/gantt.tsx が縦軸 task lane + 横軸日付 rect bar で SVG 描画する。

package/dist/{render-CabTMeao.d.ts → render-D6wVFGfI.d.ts}

@@ -405,6 +405,12 @@ type CdlNode = {
      * 数値 chart の全 datum を 1 node に格納し、 kinds/chart-*.tsx が自己完結で SVG 描画する。
      */
     chartData?: ChartDatumPayload[];
+    /** chart-line の線から下を、上端 0.22 から下端 0 へ薄く塗る */
+    chartFillUnder?: boolean;
+    /** chart-line の値を、点への到着直後だけ下からせり上げる */
+    chartValueRise?: boolean;
+    /** chart-line を描き切った後、粒で経路をなぞって点を順に出す */
+    chartTrace?: boolean;
     /**
      * gantt-timeline 専用の task payload。 task 全件を 1 node に格納し、
      * kinds/gantt.tsx が縦軸 task lane + 横軸日付 rect bar で SVG 描画する。

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cardenelabs/cdl",
-  "version": "0.30.3",
+  "version": "0.31.1",
   "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/kinds/chart-line.tsx

@@ -3,6 +3,36 @@ import type { LaidNode } from "../types";
 import { resolveChartData } from "../render/payload-binding";
 import { 進みを畳む, 伸ばすdash } from "./draw-progress";
 
+export type ChartLineScale = { min: number; max: number; ticks: number[] };
+
+const 数を書く = (value: number): string =>
+  value.toLocaleString("en-US", { maximumFractionDigits: 12 });
+
+export function 折れ線の目盛(values: readonly number[]): ChartLineScale {
+  let rawMin = values.length > 0 ? Math.min(...values) : 0;
+  let rawMax = values.length > 0 ? Math.max(...values) : 1;
+  if (rawMin === rawMax) {
+    const room = 10 ** Math.floor(Math.log10(Math.abs(rawMin) || 1) - 1);
+    rawMin -= room;
+    rawMax += room;
+  }
+
+  const roughStep = (rawMax - rawMin) / 4;
+  const power = 10 ** Math.floor(Math.log10(roughStep));
+  const fraction = roughStep / power;
+  const niceFraction =
+    fraction <= 1 ? 1 : fraction <= 2 ? 2 : fraction <= 2.5 ? 2.5 : fraction <= 5 ? 5 : 10;
+  const step = niceFraction * power;
+  const min = Math.floor(rawMin / step) * step;
+  const max = Math.ceil(rawMax / step) * step;
+  const tickCount = Math.round((max - min) / step);
+  const ticks = Array.from({ length: tickCount + 1 }, (_, i) => {
+    const value = min + step * i;
+    return Math.abs(value) < step * 1e-12 ? 0 : value;
+  });
+  return { min, max, ticks };
+}
+
 /**
  * chart-line kind ... 1 node に datum 配列 (chartData) を保持し、 SVG polyline で折れ線描画する。
  * layout は node bbox (node.w × node.h) 内側に padding (top/right/bottom/left) を確保し、
@@ -18,12 +48,15 @@ export function ChartLineNode({
   node,
   active,
   stateValues = {},
+  scale: fixedScale,
   drawing = false,
   progress = 1,
 }: {
   node: LaidNode;
   active: boolean;
   stateValues?: Record<string, string>;
+  /** 全 phase を通して固定する目盛。 単独描画では現在の系列から決める */
+  scale?: ChartLineScale;
   /**
    * この phase の `draw` に載っているか (cdl#512)。 true の間だけ折れ線が左の起点から
    * 伸び、 点と値の数字は線の先が自分の位置に届いた時に現れる。
@@ -43,10 +76,8 @@ export function ChartLineNode({
   const canvasW = node.w - PAD_LEFT - PAD_RIGHT;
   const canvasH = node.h - PAD_TOP - PAD_BOTTOM;
 
-  const values = data.map((d) => d.value);
-  const vMin = values.length > 0 ? Math.min(...values) : 0;
-  const vMax = values.length > 0 ? Math.max(...values) : 1;
-  const vRange = vMax - vMin || 1;
+  const scale = fixedScale ?? 折れ線の目盛(data.map((d) => d.value));
+  const vRange = scale.max - scale.min;
 
   // 最大値 / 最小値の点が描画領域の上下端に張り付くと、 値 label が線に重なる。
   // 上下に label 1 行ぶんの余白を確保して、 その内側に折れ線を描く。
@@ -54,50 +85,59 @@ export function ChartLineNode({
   const plotTop = PAD_TOP + LABEL_ROOM;
   const plotH = Math.max(canvasH - LABEL_ROOM * 2, 1);
 
+  const POINT_EDGE_ROOM = 24;
+  const plotW = Math.max(canvasW - POINT_EDGE_ROOM * 2, 1);
   const xAt = (idx: number) =>
-    PAD_LEFT + (data.length <= 1 ? canvasW / 2 : (canvasW * idx) / (data.length - 1));
-  const yAt = (v: number) => plotTop + plotH - ((v - vMin) / vRange) * plotH;
+    PAD_LEFT + POINT_EDGE_ROOM + (data.length <= 1 ? plotW / 2 : (plotW * idx) / (data.length - 1));
+  const yAt = (v: number) => plotTop + plotH - ((v - scale.min) / vRange) * plotH;
 
-  const points = data.map((d, idx) => `${xAt(idx)},${yAt(d.value)}`).join(" ");
+  const plotBottom = PAD_TOP + canvasH;
 
   // 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) };
+  const 描画点 = data.map((datum, idx) => {
+    const 今の点 = { datum, x: xAt(idx), y: yAt(datum.value), ここまでの長さ: 0 };
     if (前の点) {
       線の全長 += Math.hypot(今の点.x - 前の点.x, 今の点.y - 前の点.y);
     }
-    点までの長さ.push(線の全長);
+    今の点.ここまでの長さ = 線の全長;
     前の点 = 今の点;
-  }
+    return 今の点;
+  });
+  const points = 描画点.map((点) => `${点.x},${点.y}`).join(" ");
 
-  /** 線がどこまで伸びたか (0..1、 cdl#512)。 畳み方は `draw-progress.ts` が持つ */
-  const 伸び = 進みを畳む(drawing, progress);
+  /** phase がどこまで進んだか (0..1、 cdl#512)。 畳み方は `draw-progress.ts` が持つ */
+  const 段の進み = 進みを畳む(drawing, progress);
+  const 粒を走らせる = drawing && node.chartTrace === true;
+  // 0.5 で線を完成させてから 0.55 まで間を置くため、線と粒の順が混ざらない。
+  const 伸び = 粒を走らせる ? Math.min(1, 段の進み / 0.5) : 段の進み;
+  const 粒の進み = 粒を走らせる ? Math.min(1, Math.max(0, (段の進み - 0.55) / 0.45)) : 伸び;
+  const 粒が出る = 粒を走らせる && 段の進み >= 0.55 && 段の進み < 1;
+  const 到着窓 = 0.12;
 
-  /**
-   * その点まで線の先が届いたか。
-   *
-   * 点の位置は 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;
-    return { y: yAt(v), value: v };
-  });
+  let 粒の位置: { x: number; y: number } | undefined;
+  const 最初の点 = 描画点[0];
+  if (粒が出る && 最初の点) {
+    const 粒までの長さ = 粒の進み * 線の全長;
+    let 区間の前 = 最初の点;
+    let 区間の後 = 最初の点;
+    for (const 点 of 描画点.slice(1)) {
+      区間の後 = 点;
+      if (点.ここまでの長さ >= 粒までの長さ) break;
+      区間の前 = 点;
+    }
+    const 区間の始め = 区間の前.ここまでの長さ;
+    const 区間の長さ = 区間の後.ここまでの長さ - 区間の始め;
+    const 区間の進み = 区間の長さ === 0 ? 0 : (粒までの長さ - 区間の始め) / 区間の長さ;
+    粒の位置 = {
+      x: 区間の前.x + (区間の後.x - 区間の前.x) * 区間の進み,
+      y: 区間の前.y + (区間の後.y - 区間の前.y) * 区間の進み,
+    };
+  }
+
+  const gridTicks = scale.ticks.map((value) => ({ y: yAt(value), value }));
 
   return (
     <g transform={`translate(${x0} ${y0})`}>
@@ -109,8 +149,8 @@ export function ChartLineNode({
         height={node.h}
         rx={16}
         fill="var(--cdl-node-fill, #ffffff)"
-        stroke={active ? "var(--cdl-tone-accent, #2d6a8f)" : "var(--cdl-divider, #d4d4d8)"}
-        strokeWidth={active ? 3 : 1.25}
+        stroke="var(--cdl-divider, #d4d4d8)"
+        strokeWidth={active ? 1.5 : 1}
       />
       {gridTicks.map((t, i) => (
         <g key={`grid-${i}`}>
@@ -131,35 +171,41 @@ export function ChartLineNode({
             textAnchor="end"
             fill="var(--cdl-text-dim, #5a6270)"
           >
-            {Math.round(t.value)}
+            {数を書く(t.value)}
           </text>
         </g>
       ))}
 
-      <line
-        x1={PAD_LEFT}
-        y1={plotTop + plotH}
-        x2={PAD_LEFT + canvasW}
-        y2={plotTop + plotH}
-        stroke="var(--cdl-text-mute, #8a8678)"
-        strokeWidth={1.25}
-      />
-      <line
-        x1={PAD_LEFT}
-        y1={plotTop}
-        x2={PAD_LEFT}
-        y2={plotTop + plotH}
-        stroke="var(--cdl-text-mute, #8a8678)"
-        strokeWidth={1.25}
-      />
-
+      {node.chartFillUnder && data.length > 1 && (
+        <>
+          <defs>
+            <linearGradient
+              id={`chart-line-fill-${node.id}`}
+              gradientUnits="userSpaceOnUse"
+              x1={0}
+              y1={plotTop}
+              x2={0}
+              y2={plotBottom}
+            >
+              <stop offset="0%" stopColor="var(--cdl-tone-accent, #2d6a8f)" stopOpacity={0.22} />
+              <stop offset="100%" stopColor="var(--cdl-tone-accent, #2d6a8f)" stopOpacity={0} />
+            </linearGradient>
+          </defs>
+          <path
+            data-cdl-role="chart-line-fill-under"
+            d={`M ${xAt(0)} ${plotBottom} L ${points.replaceAll(",", " ")} L ${xAt(data.length - 1)} ${plotBottom} Z`}
+            fill={`url(#chart-line-fill-${node.id})`}
+            stroke="none"
+          />
+        </>
+      )}
       {data.length > 1 && (
         <polyline
           data-cdl-role="chart-line"
           points={points}
           fill="none"
           stroke="var(--cdl-tone-accent, #2d6a8f)"
-          strokeWidth={2.5}
+          strokeWidth={active ? 3 : 2}
           strokeLinejoin="round"
           strokeLinecap="round"
           // 伸ばすのは dash で行い、 **`points` は触らない** (cdl#512)。 点を削る形にすると
@@ -172,53 +218,96 @@ export function ChartLineNode({
           {...伸ばすdash(drawing, 伸び)}
         />
       )}
-      {data.map((d, idx) => {
-        const cx = xAt(idx);
-        const cy = yAt(d.value);
+      {粒の位置 && (
+        <circle
+          data-cdl-role="chart-line-trace"
+          cx={粒の位置.x}
+          cy={粒の位置.y}
+          r={4.5}
+          fill="var(--cdl-now)"
+        />
+      )}
+      {描画点.map(({ datum: d, x: cx, y: cy, ここまでの長さ }, idx) => {
         // value label は marker の上に置くのが基本、 canvas 上端 6px より内側になる場合は
         // 下に反転して他要素と重ならないようにする
         // 折れ線に重ならない側へ置く。 山 (両隣より高い) なら上、 谷なら下。
         // 単調な区間では上に置く。 上下端には LABEL_ROOM を確保してあるので反転は不要。
-        const prev = idx > 0 ? data[idx - 1]!.value : undefined;
-        const next = idx < data.length - 1 ? data[idx + 1]!.value : undefined;
+        const prev = data[idx - 1]?.value;
+        const next = data[idx + 1]?.value;
         const isValley =
           (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
+        const 到着後 = 線の全長 === 0 ? 粒の進み : 粒の進み - ここまでの長さ / 線の全長;
+        // 粒を使う図は線を描き切ってから点を出す。 左端は粒の開始と同時に出す。
+        const 出す = !drawing || ((!粒を走らせる || 段の進み >= 0.55) && 到着後 >= 0);
+        // ちょうど 0.12 は窓の外に含め、輪と到着色を残さない。
+        const 光る = drawing && 出す && 到着後 < 到着窓;
+        const 光の進み = 光る ? 到着後 / 到着窓 : 1;
+        let 点と値: JSX.Element | undefined;
+        if (出す) {
+          const 光の半径 = 6 + 16 * 光の進み;
+          const 値 = (
+            <text
+              data-cdl-role="chart-line-value"
+              x={cx}
+              y={labelY}
+              fontSize={11}
+              fontWeight={600}
+              textAnchor="middle"
+              fill="var(--cdl-text, #1a1f2a)"
+            >
+              {数を書く(d.value)}
+            </text>
+          );
+          点と値 = (
+            <>
+              {光る && (
+                // marker の `circle` を数える利用側へ混ぜず、専用 role の等径 ellipse として輪を出す。
+                <ellipse
+                  data-cdl-role="chart-line-arrival-ring"
                   cx={cx}
                   cy={cy}
-                  r={2.5}
-                  fill="var(--cdl-tone-accent, #2d6a8f)"
+                  rx={光の半径}
+                  ry={光の半径}
+                  fill="none"
+                  stroke="var(--cdl-now)"
+                  strokeWidth={2}
+                  opacity={0.85 * (1 - 光の進み)}
                 />
-                <text
-                  data-cdl-role="chart-line-value"
-                  x={cx}
-                  y={labelY}
-                  fontSize={11}
-                  fontWeight={600}
-                  textAnchor="middle"
-                  fill="var(--cdl-text, #1a1f2a)"
+              )}
+              <circle
+                cx={cx}
+                cy={cy}
+                r={5}
+                fill="var(--cdl-node-fill, #ffffff)"
+                stroke={光る ? "var(--cdl-now)" : "var(--cdl-tone-accent, #2d6a8f)"}
+                strokeWidth={2.5}
+              />
+              <circle
+                cx={cx}
+                cy={cy}
+                r={2.5}
+                fill={光る ? "var(--cdl-now)" : "var(--cdl-tone-accent, #2d6a8f)"}
+              />
+              {node.chartValueRise && 光る ? (
+                <g
+                  data-cdl-role="chart-line-value-rise"
+                  transform={`translate(0 ${8 * (1 - 光の進み)})`}
                 >
-                  {d.value.toLocaleString()}
-                </text>
-              </>
-            )}
+                  {値}
+                </g>
+              ) : (
+                値
+              )}
+            </>
+          );
+        }
+        return (
+          <g key={`pt-${idx}`} data-cdl-unresolved={d.unresolved ? "true" : undefined}>
+            {点と値}
             <text
               x={cx}
               y={PAD_TOP + canvasH + 20}

package/src/render/edge-head.ts

@@ -1,4 +1,12 @@
-import { EDGE_HEAD_DEFAULT, EDGE_HEAD_FILL_DEFAULT, type EdgeHead, type EdgeHeadFill } from "../types";
+import {
+  EDGE_HEAD_DEFAULT,
+  EDGE_HEAD_FILL_DEFAULT,
+  type EdgeHead,
+  type EdgeHeadFill,
+} from "../types";
+import { hasTone } from "./tone";
+
+export const EDGE_HEAD_MUTED_MARKER_ID = "cdl-arrow-muted";
 
 /**
  * 関係の端の形の **描き方と marker の名前** (SSOT、 #560)。
@@ -88,6 +96,20 @@ export function edgeHeadMarkerId(
     : `cdl-arrow-${tone}-${head}${塗}${小}`;
 }
 
+/** 辺の端が実際に参照する marker 名。定義側と描画側で同じ判定を使う。 */
+export function edgeHeadMarkerName(
+  tone: string,
+  head: EdgeHead | undefined,
+  small: boolean,
+  fill: EdgeHeadFill | undefined,
+): string | undefined {
+  const 実際の形 = head ?? EDGE_HEAD_DEFAULT;
+  if (実際の形 === "none") return undefined;
+  return hasTone(tone)
+    ? edgeHeadMarkerId(tone, 実際の形, small, fill ?? EDGE_HEAD_FILL_DEFAULT)
+    : EDGE_HEAD_MUTED_MARKER_ID;
+}
+
 /**
  * marker を 1 つ描くのに要る 4 つ。 定義側 (`render/stage.tsx`) が引く。
  *

package/src/render/edges.tsx

@@ -1,9 +1,8 @@
 import type { JSX } from "react";
-import { EDGE_HEAD_DEFAULT, EDGE_HEAD_FILL_DEFAULT, type LaidEdge } from "../types";
-import { edgeHeadMarkerId } from "./edge-head";
 import { computeLabelBBoxWorld, hasRenderedLabel, LABEL_PILL_PAD_X } from "../layout/spec";
-import { hasTone, toneColor } from "./tone";
-import type { EdgeRole, Tone } from "../types";
+import type { EdgeRole, LaidEdge, Tone } from "../types";
+import { edgeHeadMarkerName } from "./edge-head";
+import { toneColor } from "./tone";
 
 /**
  * 辺の色 (#618)。 役目を書いた辺だけ「いま」 の色で引く。
@@ -75,18 +74,13 @@ export function CdlEdgeView({
   // その色なら 0.9 で 4.51-4.92 と 4.5:1 を満たす (0.8 では 3.69-4.04 で届かない)。
   // 実線と点線で同じ組を使い、 光らせた側が薄くなる逆転を作らない。
   // 端の形は線の種類と別の軸 (#560)。 書かなければ既定の塗った三角で、名前も従来のまま
-  const 端の名前 = (h: typeof edge.head, f: typeof edge.headFill): string | undefined => {
-    const 形 = h ?? EDGE_HEAD_DEFAULT;
-    // 何も描かない端は marker を持たない (#578)。 参照すると解決できない url が残る
-    if (形 === "none") return undefined;
-    return hasTone(edge.tone)
-      ? edgeHeadMarkerId(edge.tone, 形, !active, f ?? EDGE_HEAD_FILL_DEFAULT)
-      : "cdl-arrow-muted";
-  };
-  const marker = 端の名前(edge.head, edge.headFill);
+  const marker = edgeHeadMarkerName(edge.tone, edge.head, !active, edge.headFill);
   // 出どころ側の印 (#578)。 marker は経路の向きに従って回るので、始点に置いた印は
   // 自動で外向きになる (`orient="auto-start-reverse"`)。 書かない図では端が無い
-  const tailMarker = edge.tailHead === undefined ? undefined : 端の名前(edge.tailHead, edge.tailHeadFill);
+  const tailMarker =
+    edge.tailHead === undefined
+      ? undefined
+      : edgeHeadMarkerName(edge.tone, edge.tailHead, !active, edge.tailHeadFill);
 
   const style = edge.style ?? "solid";
   const isDotted = style === "dotted-flow";

package/src/render/nodes.tsx

@@ -8,7 +8,7 @@ import { StorageNode } from "../kinds/storage";
 import { GenericNode } from "../kinds/generic";
 import { MarkStartNode, MarkEndNode } from "../kinds/terminal-mark";
 import { DynShapeNode } from "../kinds/dyn-shape";
-import { ChartLineNode } from "../kinds/chart-line";
+import { ChartLineNode, type ChartLineScale } from "../kinds/chart-line";
 import { ChartPieNode } from "../kinds/chart-pie";
 import { ChartGaugeNode } from "../kinds/chart-gauge";
 import { ChartRadialNode } from "../kinds/chart-radial";
@@ -95,6 +95,7 @@ export function CdlNodeView({
   progress,
   stateValues,
   currentPhaseId,
+  chartLineScale,
 }: {
   node: LaidNode;
   active: boolean;
@@ -106,6 +107,7 @@ export function CdlNodeView({
   progress: number;
   stateValues: Record<string, string>;
   currentPhaseId: string | undefined;
+  chartLineScale?: ChartLineScale;
 }): JSX.Element {
   const value = node.value ? interpolate(node.value, stateValues) : undefined;
   const rows = (node.rows ?? []).map((r) => interpolate(r, stateValues));
@@ -175,6 +177,7 @@ export function CdlNodeView({
             node={resolvedNode}
             active={active}
             stateValues={stateValues}
+            scale={chartLineScale}
             drawing={drawing}
             progress={progress}
           />