@cardenelabs/cdl 0.39.0 → 0.40.1

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.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-slope.tsx

@@ -68,11 +68,87 @@ import { 進みを畳む, 伸ばすdash } from "./draw-progress";
  *
  * **この形では「線の傾きが動いた量」 が成立しない**。 `+40` と `+30` がどちらも水平線に
  * なる。 書いた図だけに効く割り切りで、量は字を読む。
+ *
+ * ## 名札は重ならないようにほどく (cdl#723)
+ *
+ * 名札を点と同じ y に置くと、**値が同じ / 近い系列があると名札どうしが重なって読めない**。
+ * 実測で 59 と 59 の 2 件が同じ y になり、値も名前も二重に印字されていた。
+ *
+ * 動かすのは **名札だけ**。 点と線は真の位置に残す = 位置をずらすと、書いていない差を
+ * 絵が主張することになる (同順位を段でずらさないのと同じ理由)。 同じ値の点は重なったまま
+ * でよく、どの名札がどの系列かは名前の色が担う。
+ *
+ * ほどき方は `名札の段をほどく` が持つ。
  */
 
 /** 線を引くのに最低限要る横幅。 名札が長い図でもこれだけは残す */
 export const 線の最小幅 = 120;
 
+/**
+ * 名札の縦の位置をほどく (cdl#723)。
+ *
+ * ## 重なった連なりは元の位置の中心へ置き直す
+ *
+ * 上から順に押し下げるだけだと塊が下へ寄り、点との対応が片側だけ遠くなる。
+ * **元の位置からの動きが最も小さくなる並べ方** を選ぶ = 重なった連なりごとに、元の位置の
+ * 平均を中心にして間隔ぶんずつ均等に置く。
+ *
+ * 実装は単調回帰。 `y[k+1] - y[k] >= 間隔` は `y[k] - 間隔 * k` が単調非減少と同じなので、
+ * その量に隣接違反の併合を当てて戻す。 併合した塊は二度と割れないので、件数ぶんで終わる。
+ *
+ * @param 真のy 点の縦の位置。 並びは系列の順
+ * @param 間隔 名札 1 行が縦に要する高さ
+ * @param 上限 名札を置いてよい上端
+ * @param 下限 名札を置いてよい下端
+ * @returns 系列の順に対応する名札の縦の位置
+ */
+export function 名札の段をほどく(
+  真のy: readonly number[],
+  間隔: number,
+  上限: number,
+  下限: number,
+): number[] {
+  const 件数 = 真のy.length;
+  if (件数 === 0) return [];
+  // 上から順に解く。 元の並び順は最後に戻す。 同じ y の件は系列の順で上下を決める
+  const 並び = 真のy.map((y, i) => ({ y, i })).sort((a, b) => a.y - b.y || a.i - b.i);
+  const 結果 = new Array<number>(件数);
+
+  /**
+   * **入り切らない図では均等に割り付ける**。 間隔を守る置き方が無いので、どれか 1 つを
+   * 枠の外へ出すのではなく全部を等しく詰める。 重なりは残るが、寄る先が偏らない。
+   */
+  if (間隔 * (件数 - 1) > 下限 - 上限) {
+    並び.forEach((e, k) => {
+      結果[e.i] = 件数 > 1 ? 上限 + ((下限 - 上限) / (件数 - 1)) * k : (上限 + 下限) / 2;
+    });
+    return 結果;
+  }
+
+  // 塊は「合計」 と「件数」 だけ持てば平均が出る
+  const 塊たち: { 合計: number; 件数: number }[] = [];
+  並び.forEach((e, k) => {
+    塊たち.push({ 合計: e.y - 間隔 * k, 件数: 1 });
+    while (塊たち.length >= 2) {
+      const 後 = 塊たち[塊たち.length - 1]!;
+      const 前 = 塊たち[塊たち.length - 2]!;
+      if (前.合計 / 前.件数 <= 後.合計 / 後.件数) break;
+      塊たち.splice(塊たち.length - 2, 2, { 合計: 前.合計 + 後.合計, 件数: 前.件数 + 後.件数 });
+    }
+  });
+
+  const ほどいた: number[] = [];
+  塊たち.forEach((塊) => {
+    const 平均 = 塊.合計 / 塊.件数;
+    for (let j = 0; j < 塊.件数; j++) ほどいた.push(平均 + 間隔 * ほどいた.length);
+  });
+
+  // 枠へ収める。 **全体を同じだけ動かす** ので、ほどいた間隔は崩れない
+  const ずれ = Math.max(0, 上限 - ほどいた[0]!) - Math.max(0, ほどいた[件数 - 1]! - 下限);
+  並び.forEach((e, k) => (結果[e.i] = ほどいた[k]! + ずれ));
+  return 結果;
+}
+
 type 系列 = {
   名前: string;
   前: number;
@@ -218,6 +294,20 @@ export function ChartSlopeNode({
   /** 右の点と右の名札は、線が届いてから出る */
   const 右を出す = !drawing || 伸び >= 1;
 
+  // `rank` は縦の位置を順位の段にする (cdl#707)。 値の尺は使わない
+  const 左の点y = 系列たち.map((s, i) =>
+    形 === "rank" ? 段のyを取る(前の順位[i]!) : yを取る(s.前),
+  );
+  const 右の点y = 系列たち.map((s, i) =>
+    形 === "rank" ? 段のyを取る(今の順位[i]!) : yを取る(s.今),
+  );
+
+  /** 名札 1 行が縦に要する高さ。 大きい方の字に、行どうしが触れない余りを足す */
+  const 名札の行 = Math.max(値の級, 名前の級) + 4;
+  /** 名札の縦の位置 (cdl#723)。 点は真の位置のまま、字だけを重ならない段へ移す */
+  const 左の名札y = 前あり ? 名札の段をほどく(左の点y, 名札の行, 上端, 下端) : 左の点y;
+  const 右の名札y = 名札の段をほどく(右の点y, 名札の行, 上端, 下端);
+
   return (
     <g transform={`translate(${x0} ${y0})`}>
       <rect
@@ -276,9 +366,11 @@ export function ChartSlopeNode({
       )}
 
       {系列たち.map((s, i) => {
-        // `rank` は縦の位置を順位の段にする (cdl#707)。 値の尺は使わない
-        const 左y = 形 === "rank" ? 段のyを取る(前の順位[i]!) : yを取る(s.前);
-        const 右y = 形 === "rank" ? 段のyを取る(今の順位[i]!) : yを取る(s.今);
+        const 左y = 左の点y[i]!;
+        const 右y = 右の点y[i]!;
+        // 名札は重なりをほどいた段に置く (cdl#723)
+        const 左札y = 左の名札y[i]!;
+        const 右札y = 右の名札y[i]!;
         const 未解決 = s.未解決 ? "true" : undefined;
         return (
           <g key={`slope-${i}`}>
@@ -321,7 +413,7 @@ export function ChartSlopeNode({
                 <text
                   data-cdl-role="chart-slope-value"
                   x={左軸x - 軸から値まで}
-                  y={左y + 5}
+                  y={左札y + 5}
                   textAnchor="end"
                   fontSize={値の級}
                   fontWeight={600}
@@ -332,7 +424,7 @@ export function ChartSlopeNode({
                 <text
                   data-cdl-role="chart-slope-name"
                   x={左軸x - 軸から値まで - 左値幅 - 値から名前まで}
-                  y={左y + 5}
+                  y={左札y + 5}
                   textAnchor="end"
                   fontSize={名前の級}
                   fill={s.色}
@@ -344,7 +436,7 @@ export function ChartSlopeNode({
               <text
                 data-cdl-role="chart-slope-name"
                 x={左軸x - 軸から値まで}
-                y={右y + 5}
+                y={右札y + 5}
                 textAnchor="end"
                 fontSize={名前の級}
                 fill={s.色}
@@ -360,7 +452,7 @@ export function ChartSlopeNode({
                   // 消費側が増減だけに色を当てたくなる経路がある
                   data-cdl-role={形 === "delta" ? "chart-slope-delta" : "chart-slope-value"}
                   x={右軸x + 軸から値まで}
-                  y={右y + 5}
+                  y={右札y + 5}
                   fontSize={値の級}
                   fontWeight={600}
                   fill="var(--cdl-text, #1a1f2a)"
@@ -371,7 +463,7 @@ export function ChartSlopeNode({
                   <text
                     data-cdl-role="chart-slope-name"
                     x={右軸x + 軸から値まで + 右値幅 + 値から名前まで}
-                    y={右y + 5}
+                    y={右札y + 5}
                     fontSize={名前の級}
                     fill={s.色}
                   >

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/;