@cardenelabs/cdl 0.37.0 → 0.39.0

package/src/kinds/draw-arc.tsx

@@ -0,0 +1,42 @@
+import { type JSX } from "react";
+
+/**
+ * 弧で量を表す図を、起点から開いて見せるための切り抜き (cdl#516 / cdl#715)。
+ *
+ * 円グラフが持っていた私物の関数を、起点と回る量を引数に取る形へ広げた。 半円ゲージ (9 時から
+ * 半周) と放射 (12 時から 1 周) と円グラフ (12 時から 1 周) が同じ計算を使う。
+ *
+ * **形 (`d`) は触らず、切り抜きで隠す**。 弧の道を切り詰めると、形から量を測る利用側が進みの
+ * 途中で別の値を読む (`draw-progress.ts` が `path` について決めたのと同じ)。
+ *
+ * ここに置くのは切り抜きの形だけで、進みの畳み方は `draw-progress.ts` の `進みを畳む` が持つ。
+ * 2 つを 1 つの file に混ぜないのは、こちらが JSX を返すため = `.ts` のままにしておくと
+ * 進みの計算まで `.tsx` へ引きずられる。
+ */
+
+/**
+ * `起点` から時計回りに `開き` ぶん開く扇形。 開いていなければ **何も返さない**。
+ *
+ * @param 開き 0..1。 1 で `全周` ぶん開き切る
+ * @param 起点 弧が始まる角度 (`-Math.PI / 2` = 12 時、`Math.PI` = 9 時)
+ * @param 全周 開き切った時に回る量 (`Math.PI * 2` = 1 周、`Math.PI` = 半周)
+ */
+export function 扇形の切り抜き(
+  cx: number,
+  cy: number,
+  r: number,
+  開き: number,
+  起点: number = -Math.PI / 2,
+  全周: number = Math.PI * 2,
+): JSX.Element | null {
+  if (開き <= 0) return null;
+  // 1 周ちょうどは扇形で表せない (始点と終点が同じ点になり、弧の向きが決まらない)。
+  // その時だけ円をそのまま返す = 進み 1 で図が消える形を避ける。
+  // **半周までの図はこの形にならない** = 両端が別の点なので、扇形のまま描ける。
+  if (開き >= 1 && 全周 >= Math.PI * 2) return <circle cx={cx} cy={cy} r={r} />;
+  const a0 = 起点;
+  const a1 = a0 + Math.min(1, 開き) * 全周;
+  const large = a1 - a0 > Math.PI ? 1 : 0;
+  const d = `M ${cx} ${cy} L ${cx + r * Math.cos(a0)} ${cy + r * Math.sin(a0)} A ${r} ${r} 0 ${large} 1 ${cx + r * Math.cos(a1)} ${cy + r * Math.sin(a1)} Z`;
+  return <path d={d} />;
+}

package/src/render/nodes.tsx

@@ -194,11 +194,28 @@ export function CdlNodeView({
           />
         );
       case "chart-gauge":
-        // 段の進みで弧が開く動きは持たない (cdl#549 で対象外にした)
-        return <ChartGaugeNode node={resolvedNode} active={active} stateValues={stateValues} />;
+        // 段の進みでは 9 時から 3 時へ弧が伸びる (cdl#715)
+        return (
+          <ChartGaugeNode
+            node={resolvedNode}
+            active={active}
+            stateValues={stateValues}
+            drawing={drawing}
+            progress={progress}
+          />
+        );
       case "chart-stacked-bar":
-        // 帯を割合で区切る。 前の時点を書けば 2 本になる (cdl#551)
-        return <ChartStackedBarNode node={resolvedNode} active={active} stateValues={stateValues} />;
+        // 帯を割合で区切る。 前の時点を書けば 2 本になる (cdl#551)。
+        // 段の進みでは左から帯が伸びる (cdl#715)
+        return (
+          <ChartStackedBarNode
+            node={resolvedNode}
+            active={active}
+            stateValues={stateValues}
+            drawing={drawing}
+            progress={progress}
+          />
+        );
       case "chart-slope":
         // 2 時点を直線でつなぐ。 前の時点を書かない図は軸 1 本の点の並びになる (cdl#688)
         return (
@@ -217,8 +234,16 @@ export function CdlNodeView({
         // 数値が主役で、弧は輪郭だけの補助。 段の進みで数値が動く演出は既存の tween が担う
         return <ChartStatNode node={resolvedNode} active={active} stateValues={stateValues} />;
       case "chart-radial":
-        // 段の進みで弧が伸びる動きは持たない (cdl#550 で対象外にした)
-        return <ChartRadialNode node={resolvedNode} active={active} stateValues={stateValues} />;
+        // 段の進みでは各輪が 12 時から開く (cdl#715)
+        return (
+          <ChartRadialNode
+            node={resolvedNode}
+            active={active}
+            stateValues={stateValues}
+            drawing={drawing}
+            progress={progress}
+          />
+        );
       case "chart-bar":
         return (
           <ChartBarNode

package/src/render/stage.tsx

@@ -28,6 +28,7 @@ export function CdlStage({
   laid,
   currentPhase,
   progress,
+  drawProgress,
   stateValues,
   debug,
   compact = false,
@@ -36,6 +37,13 @@ export function CdlStage({
   laid: LaidDiagram;
   currentPhase: CdlPhase | undefined;
   progress: number;
+  /**
+   * 描く動きが読む進み (cdl#711)。 曲線を通す前の値で、 経過時間そのものの割合。
+   *
+   * 書かない呼出は `progress` と同じ値になる = 曲線を通した進みで描く従来の形。
+   * 検査から直接呼ぶ経路が既に多数あり、 そこでは 2 つを分ける意味がない。
+   */
+  drawProgress?: number;
   stateValues: Record<string, string>;
   debug: boolean;
   compact?: boolean;
@@ -112,9 +120,15 @@ export function CdlStage({
     }
     return scales;
   }, [laid]);
-  // 描く対象から見た進み (cdl#570)。 `drawRatio` を書かない phase では `progress` と同値で、
+  /**
+   * 描く動きの素の進み (cdl#711)。 渡されなければ従来どおり曲線を通した進みを使う。
+   *
+   * **`??` で受ける** = 0 は正しい進み (段の始まり) なので、 偽としては落とせない。
+   */
+  const 描く素の進み = drawProgress ?? progress;
+  // 描く対象から見た進み (cdl#570)。 `drawRatio` を書かない phase では `描く素の進み` と同値で、
   // 描く速さを phase の長さから切り離すためだけに使う
-  const 描く進み = 描く進みに直す(progress, currentPhase?.drawRatio);
+  const 描く進み = 描く進みに直す(描く素の進み, currentPhase?.drawRatio);
   // 縦線の終点は全 lane で 1 つに揃える (等長保証)。 値の決め方と、 1 lane の異常が図全体から
   // 縦線を消していた形の対処は `uniformLifelineEndY` の説明。
   //
@@ -345,7 +359,7 @@ export function CdlStage({
             edge={edge}
             active={activeSet.has(edge.id)}
             drawing={矢印の出番.伸ばすか(edge.id)}
-            progress={progress}
+            progress={矢印の出番.伸ばすか(edge.id) ? 描く進み : progress}
             stateValues={stateValues}
           />
         ))}

package/src/render.tsx

@@ -133,6 +133,13 @@ export function CdlDiagramView({ diagram, laid: laidProp, hideHeader = false, hi
     : state.phaseIndex;
   const currentPhase = laid.phases[Math.max(0, phaseIdx)] ?? laid.phases[0];
   const progress = reduced ? 1 : state.phaseProgress;
+  /**
+   * 描く動きが読む進み (cdl#711)。 曲線を通さない = 経過時間そのものの割合。
+   *
+   * 線を引く動きに `easeOutQuint` を当てると前半に寄り、 折れ線の 5 点のうち 4 点が
+   * 292 ms の間に出る。 ペンの速さは一定であるほど「1 つずつ現れる」 が読める。
+   */
+  const drawProgress = reduced ? 1 : state.phaseLinearProgress;
 
   // state 値を計算 (現在 phase + これまでの phase の最終 tween 値を集約)
   const baseStateValues = computeStateValues(laid, phaseIdx, progress);
@@ -184,7 +191,7 @@ export function CdlDiagramView({ diagram, laid: laidProp, hideHeader = false, hi
       {/* interactive panel = input widget / formula readout / scroll readout (SVG の上に配置)、
           diagram に interactive primitive がなければ null (SSR / render 影響なし) */}
       {isInteractive && interactive.panel}
-      <CdlStage laid={laid} currentPhase={currentPhase} progress={progress} stateValues={stateValues} debug={debug} compact={hideHeader} svgRef={isInteractive ? interactive.svgRef : undefined} />
+      <CdlStage laid={laid} currentPhase={currentPhase} progress={progress} drawProgress={drawProgress} stateValues={stateValues} debug={debug} compact={hideHeader} svgRef={isInteractive ? interactive.svgRef : undefined} />
       {/* hideHeader + multi-phase 時、 phase indicator が消えると動きが読めないため
           mini indicator (dot 列 + 現在 phase title + badge) を bottom に追加 */}
       {hideHeader && !hideMiniPhaseIndicator && currentPhase && laid.phases.length > 1 && (

package/src/types.ts

@@ -2424,11 +2424,15 @@ export type CdlPhase = {
    * | `chart-line` | 左端 | 線が右へ伸びる | 点と数字は線の先が届いた時 |
    * | `chart-bar` | 横軸 | 棒が上へ伸びる | 数字は棒の頭に付いて動く |
    * | `chart-pie` | 12 時 | 扇が時計回りに開く | 凡例はその扇が開き始めた時 |
+   * | `chart-slope` | 左の軸 | 線が右の軸へ伸びる | 右の値は線が右の軸に着いた時 |
    * | `journey-map` | 左端 | 気持ちの線が右へ伸びる | 段はその点に線の先が届いた時 |
    * | `mind-map` | 中心 | 枝が段ごとに外へ伸びる | 箱はその枝が届いた時 |
    * | `tree-hierarchy` | 根 | 枝が段ごとに下へ伸びる | 箱はその枝が届いた時 |
    * | `gantt-timeline` | 各帯の始端 | 帯が右へ伸びる | 依存の矢印は帯が出揃った時 |
    * | `funnel-stages` | 上端 | 段が上から順に積まれる | 件数と離脱率はその段が出切った時 |
+   * | `chart-gauge` | 9 時 | 弧が上を通って 3 時へ伸びる | 合計と内訳は最初から出る |
+   * | `chart-radial` | 12 時 | 各輪が時計回りに開く | 軌道と一覧は最初から出る |
+   * | `chart-stacked-bar` | 左端 | 帯が右へ伸びる | 区画の字はその区画が広がった時 |
    *
    * 対象種別の一覧は `validate.ts` の `DRAW_KINDS` が持つ。
    *

package/src/validate.ts

@@ -23,6 +23,9 @@ const TONES = new Set<string>(TONE_NAMES);
  * | `tree-hierarchy` | 根 | 枝が上の段から下の段へ伸びる |
  * | `gantt-timeline` | 各帯の始端 | 帯が右へ伸びる |
  * | `funnel-stages` | 上端 | 段が上から順に積まれる |
+ * | `chart-gauge` | 9 時 | 弧が上を通って 3 時へ伸びる |
+ * | `chart-radial` | 12 時 | 各輪が時計回りに開く |
+ * | `chart-stacked-bar` | 左端 | 帯が右へ伸びる |
  */
 export const DRAW_KINDS: ReadonlySet<string> = new Set([
   "chart-line",
@@ -34,6 +37,9 @@ export const DRAW_KINDS: ReadonlySet<string> = new Set([
   "tree-hierarchy",
   "gantt-timeline",
   "funnel-stages",
+  "chart-gauge",
+  "chart-radial",
+  "chart-stacked-bar",
 ]);
 const KINDS = new Set<string>(NODE_KINDS);
 const ENG_BANNED = /\b(FUNCTION|STORAGE|EVENT LOG|BALANCES MAPPING|READ|WRITE|EMIT|CALL)\b/;