@cardenelabs/cdl 0.30.2 → 0.31.0

package/src/render/stage.tsx

@@ -1,4 +1,8 @@
 import { useMemo, type JSX } from "react";
+import { 折れ線の目盛, type ChartLineScale } from "../kinds/chart-line";
+import { 描く進みに直す } from "../kinds/draw-ratio";
+import { lifelineStartYs, uniformLifelineEndY } from "../layout/lifeline";
+import { buildDiagramAltText } from "../layout/spec";
 import {
   EDGE_HEADS,
   EDGE_HEAD_FILLS,
@@ -7,13 +11,18 @@ import {
   type CdlPhase,
   type LaidDiagram,
 } from "../types";
+import {
+  EDGE_HEAD_MUTED_MARKER_ID,
+  EDGE_HEAD_SHAPE,
+  edgeHeadMarkerId,
+  edgeHeadMarkerName,
+  edgeHeadPaint,
+} from "./edge-head";
 import { CdlEdgeView, CdlEdgeGlowView, CdlEdgeLabelView } from "./edges";
 import { CdlNodeView } from "./nodes";
+import { resolveChartData } from "./payload-binding";
 import { TONE, TONE_HEX } from "./tone";
-import { EDGE_HEAD_SHAPE, edgeHeadMarkerId, edgeHeadPaint } from "./edge-head";
-import { buildDiagramAltText } from "../layout/spec";
-import { lifelineStartYs, uniformLifelineEndY } from "../layout/lifeline";
-import { 描く進みに直す } from "../kinds/draw-ratio";
+import { computeStateValues } from "./utils";
 
 export function CdlStage({
   laid,
@@ -81,6 +90,28 @@ export function CdlStage({
   // この phase で左の起点から描き始める node (cdl#512)。 `activate` とは別集合で持つ =
   // 焦点が当たり続ける図で毎 phase 引き直すことになるため、 光っているかを引き金にしない
   const drawSet = new Set(currentPhase?.draw ?? []);
+  // 目盛は全 phase を見渡せる stage で一度だけ決める。 node 内で現在値から測ると段ごとに軸が動く。
+  const chartLineScales = useMemo(() => {
+    const nodes = laid.nodes.filter((node) => node.kind === "chart-line");
+    if (nodes.length === 0) return new Map<string, ChartLineScale>();
+
+    const frames = [
+      // phase index -1 はどの段にも入る前の初期値。
+      computeStateValues(laid, -1, 0),
+      ...laid.phases.flatMap((_, phaseIndex) => [
+        computeStateValues(laid, phaseIndex, 0),
+        computeStateValues(laid, phaseIndex, 1),
+      ]),
+    ];
+    const scales = new Map<string, ChartLineScale>();
+    for (const node of nodes) {
+      const values = frames.flatMap((stateValues) =>
+        resolveChartData(node.chartData ?? [], stateValues).map((datum) => datum.value),
+      );
+      scales.set(node.id, 折れ線の目盛(values));
+    }
+    return scales;
+  }, [laid]);
   // 描く対象から見た進み (cdl#570)。 `drawRatio` を書かない phase では `progress` と同値で、
   // 描く速さを phase の長さから切り離すためだけに使う
   const 描く進み = 描く進みに直す(progress, currentPhase?.drawRatio);
@@ -100,6 +131,67 @@ export function CdlStage({
       uniformFooterTop: uniformLifelineEndY(laid.lanes, laid.nodes, starts),
     };
   }, [laid]);
+  const edgeHeadMarkers = useMemo(() => {
+    const referenced = new Set<string>();
+    const add = (
+      tone: string,
+      head: (typeof laid.edges)[number]["head"],
+      fill: (typeof laid.edges)[number]["headFill"],
+    ): void => {
+      for (const small of [false, true]) {
+        const id = edgeHeadMarkerName(tone, head, small, fill);
+        if (id !== undefined) referenced.add(id);
+      }
+    };
+    for (const edge of laid.edges) {
+      add(edge.tone, edge.head, edge.headFill);
+      if (edge.tailHead !== undefined) add(edge.tone, edge.tailHead, edge.tailHeadFill);
+    }
+
+    return Object.entries(TONE).flatMap(([tone, color]) =>
+      (
+        [
+          [false, 14],
+          [true, 10],
+        ] as const
+      ).flatMap(([small, size]) =>
+        EDGE_HEADS.flatMap((head) =>
+          EDGE_HEAD_FILLS.map((fill) => {
+            const 形 = EDGE_HEAD_SHAPE[head];
+            const id = edgeHeadMarkerId(tone, head, small, fill);
+            if (!referenced.has(id) || 形.d === "") return null;
+            if (fill !== EDGE_HEAD_FILL_DEFAULT && !形.filled) return null;
+            const 塗 = edgeHeadPaint(head, fill, color);
+            return (
+              <marker
+                key={id}
+                id={id}
+                viewBox={`0 0 ${形.w} ${形.h}`}
+                refX={形.refX}
+                refY={形.h / 2}
+                markerWidth={(size * (形.scale ?? 1) * 形.w) / 形.h}
+                markerHeight={size * (形.scale ?? 1)}
+                markerUnits="userSpaceOnUse"
+                orient="auto-start-reverse"
+              >
+                <path
+                  data-cdl-role="edge-arrowhead"
+                  data-cdl-edge-head={head}
+                  data-cdl-edge-head-fill={fill}
+                  d={形.d}
+                  fill={塗.fill}
+                  stroke={塗.stroke}
+                  strokeWidth={塗.strokeWidth}
+                  strokeLinecap={塗.strokeWidth === undefined ? undefined : "round"}
+                  strokeLinejoin={塗.strokeWidth === undefined ? undefined : "round"}
+                />
+              </marker>
+            );
+          }),
+        ),
+      ),
+    );
+  }, [laid]);
   const diagramScale = laid.diagramScale ?? 1;
   return (
     <div className={compact ? "px-3 py-3" : "px-6 py-6"} style={compact ? undefined : { minHeight: 460 }}>
@@ -157,55 +249,12 @@ export function CdlStage({
           {/* CAR-643 = cdl は geometry only。 shadow / border effect の filter は cdl SVG 内に
               持たず、 consumer app (dragon 等) が独自 filter を CSS 経由で data-cdl-role selector
               に適用する。 marker (cdl-arrow-*) は edge routing の SSOT なので cdl 内に維持。 */}
-          {/* 光っている edge 用 (14) と光っていない edge 用 (10) を tone ごとに用意する。
-              光っていない edge も tone の色で描くが、 矢頭の大きさは従来通り小さいまま保つ
-              (Issue の制約 = 色だけを足す)。 */}
-          {Object.entries(TONE).flatMap(([tone, color]) =>
-            ([["", 14], ["-sm", 10]] as const).flatMap(([suffix, size]) =>
-              EDGE_HEADS.flatMap((head) =>
-                // 塗り方は形と別の軸 (#578)。 塗らない形では 2 つが同じ名前に畳まれるので、
-                // `edgeHeadMarkerId` が返す名前で重複を外す
-                EDGE_HEAD_FILLS.map((fill) => {
-                  const 形 = EDGE_HEAD_SHAPE[head];
-                  const id = edgeHeadMarkerId(tone, head, suffix === "-sm", fill);
-                  // 何も描かない端は marker を定義しない (#578)。 線側も参照しない
-                  if (形.d === "") return null;
-                  if (fill !== EDGE_HEAD_FILL_DEFAULT && !形.filled) return null;
-                  const 塗 = edgeHeadPaint(head, fill, color);
-                  return (
-                    <marker
-                      key={id}
-                      id={id}
-                      viewBox={`0 0 ${形.w} ${形.h}`}
-                      refX={形.refX}
-                      refY={形.h / 2}
-                      // 枠の縦を 10 に揃えてあるので、横だけが形の比で伸びる
-                      markerWidth={(size * (形.scale ?? 1) * 形.w) / 形.h}
-                      markerHeight={size * (形.scale ?? 1)}
-                      markerUnits="userSpaceOnUse"
-                      orient="auto-start-reverse"
-                    >
-                      <path
-                        data-cdl-role="edge-arrowhead"
-                        data-cdl-edge-head={head}
-                        data-cdl-edge-head-fill={fill}
-                        d={形.d}
-                        fill={塗.fill}
-                        stroke={塗.stroke}
-                        strokeWidth={塗.strokeWidth}
-                        strokeLinecap={塗.strokeWidth === undefined ? undefined : "round"}
-                        strokeLinejoin={塗.strokeWidth === undefined ? undefined : "round"}
-                      />
-                    </marker>
-                  );
-                }),
-              ),
-            ),
-          )}
+          {/* 大小は phase ごとに入れ替わるため、配置が参照する両方を保持する。 */}
+          {edgeHeadMarkers}
           {/* tone が TONE 定義に無い edge の受け皿。 visual-validate の tone-marker-ref 軸が
               dead ref を検知するが、 検知するまでの間に矢頭が消えないようにする。 */}
           <marker
-            id="cdl-arrow-muted"
+            id={EDGE_HEAD_MUTED_MARKER_ID}
             viewBox="0 0 10 10"
             refX="9"
             refY="5"
@@ -315,6 +364,7 @@ export function CdlStage({
               progress={描く ? 描く進み : progress}
               stateValues={stateValues}
               currentPhaseId={currentPhase?.id}
+              chartLineScale={chartLineScales.get(node.id)}
             />
           );
           return <g key={node.id}>{view}</g>;

package/src/render/template-fields.ts

@@ -34,6 +34,7 @@ const NUMERIC_FIELDS = ["opacity", "renderOffsetX", "renderOffsetY"] as const;
  * |---|---|
  * | `id` / `lane` / `kind` / `role` / `tone` | 名前や区分で、 描画側が置換に掛けない |
  * | `stack` / `w` / `h` / `pos*` / `ganttAxisMax` | 数のみ。 型が `number` で文字を受けない |
+ * | `chartFillUnder` / `chartValueRise` / `chartTrace` | 動きを選ぶ真偽値で、文字を受けない |
  * | `shape` | 入れ子の構造。 下の `shapeTexts` が中の文字を全部拾う |
  * | `*Data` | 図表 payload。 入れ子の構造で、 下の `payloadTexts` が中の文字を拾う |
  */
@@ -52,6 +53,9 @@ type 読まない欄 =
   | "tone"
   | "shape"
   | "chartData"
+  | "chartFillUnder"
+  | "chartValueRise"
+  | "chartTrace"
   | "ganttData"
   | "ganttAxisMax"
   | "mindData"

package/src/types.ts

@@ -463,6 +463,12 @@ export 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 描画する。