@cardenelabs/cdl 0.39.0 → 0.40.0

package/dist/{render-B1ArenZ7.d.cts → render-UGswDfAh.d.cts}

@@ -2356,6 +2356,7 @@ type CdlPhase = {
      * | `chart-gauge` | 9 時 | 弧が上を通って 3 時へ伸びる | 合計と内訳は最初から出る |
      * | `chart-radial` | 12 時 | 各輪が時計回りに開く | 軌道と一覧は最初から出る |
      * | `chart-stacked-bar` | 左端 | 帯が右へ伸びる | 区画の字はその区画が広がった時 |
+     * | `chart-waffle` | 左上 | 印が読む向きに 1 個ずつ埋まる | 一覧は最初から出る |
      *
      * 対象種別の一覧は `validate.ts` の `DRAW_KINDS` が持つ。
      *

package/dist/{render-B1ArenZ7.d.ts → render-UGswDfAh.d.ts}

@@ -2356,6 +2356,7 @@ type CdlPhase = {
      * | `chart-gauge` | 9 時 | 弧が上を通って 3 時へ伸びる | 合計と内訳は最初から出る |
      * | `chart-radial` | 12 時 | 各輪が時計回りに開く | 軌道と一覧は最初から出る |
      * | `chart-stacked-bar` | 左端 | 帯が右へ伸びる | 区画の字はその区画が広がった時 |
+     * | `chart-waffle` | 左上 | 印が読む向きに 1 個ずつ埋まる | 一覧は最初から出る |
      *
      * 対象種別の一覧は `validate.ts` の `DRAW_KINDS` が持つ。
      *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cardenelabs/cdl",
-  "version": "0.39.0",
+  "version": "0.40.0",
   "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-waffle.tsx

@@ -4,6 +4,7 @@ import { TONE, chartSeriesColor } from "../render/tone";
 import { resolveChartData } from "../render/payload-binding";
 import { textWidth } from "./text-width";
 import { 実値表記 } from "./chart-number";
+import { 進みを畳む } from "./draw-progress";
 
 /**
  * chart-waffle kind ... 100 個の印で割合を **数えて確かめられる** 図 (cdl#552)。
@@ -24,6 +25,16 @@ import { 実値表記 } from "./chart-number";
  *
  * `印の割付` が最大剰余法で配る = まず切り捨てで配り、余った分を小数部の大きい件から 1 個ずつ
  * 足す。 合計は定義上ちょうど 100 になる。
+ *
+ * ## 段の `draw` では印が読む向きに埋まる (cdl#719)
+ *
+ * 印は上の行から左詰めで配るので、埋まる順もそのまま読む向きになる。
+ *
+ * **切り抜きでは表せない**。 弧の 3 種 (cdl#715) は切り抜きで隠したが、この図に当てると
+ * 升の途中が斜めや半分で切れる = 1 個 = 1% の印が半分だけ出て、数えられない図になる。
+ *
+ * 代わりに **塗りだけを変える**。 印は 100 個とも最初から描き、進みまで届いていない印を
+ * 持ち主のいない印と同じ地の色にする。 升の形も持ち主の欄も触らない。
  */
 
 /** 印の総数。 1 個 = 1% にするための値で、変えると「数えれば分かる」 が成り立たない */
@@ -70,10 +81,16 @@ export function ChartWaffleNode({
   node,
   active,
   stateValues = {},
+  drawing = false,
+  progress = 1,
 }: {
   node: LaidNode;
   active: boolean;
   stateValues?: Record<string, string>;
+  /** この phase の `draw` に載っているか (cdl#719) */
+  drawing?: boolean;
+  /** phase の進み (0→1)。 `drawing` が true の時だけ読む */
+  progress?: number;
 }): JSX.Element {
   const x0 = node.cx - node.w / 2;
   const y0 = node.cy - node.h / 2;
@@ -112,6 +129,14 @@ export function ChartWaffleNode({
     for (let k = 0; k < n; k++) 持ち主.push(idx);
   });
 
+  /**
+   * 埋まった印の数 (cdl#719)。 畳み方は `draw-progress.ts` が持つ。
+   *
+   * **四捨五入する**。 切り捨てると進み 1 の手前で 1 個足りない図が続き、切り上げると
+   * 進み 0 の時点で 1 個埋まる。 どちらも「数えれば分かる」 が崩れる。
+   */
+  const 埋まった = Math.round(進みを畳む(drawing, progress) * WAFFLE_TOTAL);
+
   const 一覧の始まり = PAD + (使える高さ - 行の高さ * data.length) / 2 + 行の高さ / 2;
 
   return (
@@ -136,6 +161,11 @@ export function ChartWaffleNode({
         const 行 = Math.floor(k / WAFFLE_COLS);
         const 列 = k % WAFFLE_COLS;
         const owner = 持ち主[k];
+        /**
+         * 色を付けるか (cdl#719)。 **持ち主の欄は触らない** = 印から持ち主を読む利用側が、
+         * 進みの途中で別の値を読まないようにする (形を表す属性と同じ扱い)。
+         */
+        const 埋まっている = owner !== undefined && k < 埋まった;
         return (
           <rect
             key={`cell-${k}`}
@@ -146,8 +176,8 @@ export function ChartWaffleNode({
             width={印}
             height={印}
             rx={2}
-            fill={owner === undefined ? "var(--cdl-divider, #d4d4d8)" : 印の色(data[owner]!.tone, owner)}
-            fillOpacity={owner === undefined ? 0.35 : 1}
+            fill={埋まっている ? 印の色(data[owner]!.tone, owner) : "var(--cdl-divider, #d4d4d8)"}
+            fillOpacity={埋まっている ? 1 : 0.35}
           />
         );
       })}

package/src/render/nodes.tsx

@@ -228,8 +228,16 @@ export function CdlNodeView({
           />
         );
       case "chart-waffle":
-        // 1 個 = 1% の印を 100 個。 段の進みで印が埋まる動きは別 Issue (cdl#552 で対象外)
-        return <ChartWaffleNode node={resolvedNode} active={active} stateValues={stateValues} />;
+        // 1 個 = 1% の印を 100 個。 段の進みでは読む向きに 1 個ずつ埋まる (cdl#719)
+        return (
+          <ChartWaffleNode
+            node={resolvedNode}
+            active={active}
+            stateValues={stateValues}
+            drawing={drawing}
+            progress={progress}
+          />
+        );
       case "chart-stat":
         // 数値が主役で、弧は輪郭だけの補助。 段の進みで数値が動く演出は既存の tween が担う
         return <ChartStatNode node={resolvedNode} active={active} stateValues={stateValues} />;

package/src/types.ts

@@ -2433,6 +2433,7 @@ export type CdlPhase = {
    * | `chart-gauge` | 9 時 | 弧が上を通って 3 時へ伸びる | 合計と内訳は最初から出る |
    * | `chart-radial` | 12 時 | 各輪が時計回りに開く | 軌道と一覧は最初から出る |
    * | `chart-stacked-bar` | 左端 | 帯が右へ伸びる | 区画の字はその区画が広がった時 |
+   * | `chart-waffle` | 左上 | 印が読む向きに 1 個ずつ埋まる | 一覧は最初から出る |
    *
    * 対象種別の一覧は `validate.ts` の `DRAW_KINDS` が持つ。
    *

package/src/validate.ts

@@ -26,6 +26,7 @@ const TONES = new Set<string>(TONE_NAMES);
  * | `chart-gauge` | 9 時 | 弧が上を通って 3 時へ伸びる |
  * | `chart-radial` | 12 時 | 各輪が時計回りに開く |
  * | `chart-stacked-bar` | 左端 | 帯が右へ伸びる |
+ * | `chart-waffle` | 左上 | 印が読む向きに 1 個ずつ埋まる |
  */
 export const DRAW_KINDS: ReadonlySet<string> = new Set([
   "chart-line",
@@ -40,6 +41,7 @@ export const DRAW_KINDS: ReadonlySet<string> = new Set([
   "chart-gauge",
   "chart-radial",
   "chart-stacked-bar",
+  "chart-waffle",
 ]);
 const KINDS = new Set<string>(NODE_KINDS);
 const ENG_BANNED = /\b(FUNCTION|STORAGE|EVENT LOG|BALANCES MAPPING|READ|WRITE|EMIT|CALL)\b/;