@cardenelabs/cdl 0.40.2 → 0.40.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cardenelabs/cdl",
-  "version": "0.40.2",
+  "version": "0.40.4",
   "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/anim/core/timeline.ts

@@ -1,4 +1,4 @@
-import { clamp01, easeOutQuint } from "./easing";
+import { clamp01, easeOut } from "./easing";
 import type {
   EasingFn,
   PhaseDescriptor,
@@ -30,7 +30,7 @@ import type {
 export type TimelineOptions = {
   /** 自動進行時の Phase 間 wait (ms)、 デフォルト Phase の durationMs に従う */
   autoAdvanceMs?: number;
-  /** Phase 内補間の easing、 デフォルト easeOutQuint */
+  /** Phase 内補間の easing、 デフォルト easeOut */
   easing?: EasingFn;
   /** loop 再生するか (settled 後に最初に戻る)、 デフォルト false */
   loop?: boolean;
@@ -86,7 +86,17 @@ export class Timeline {
       throw new Error("Timeline requires at least one phase");
     }
     this.phases = phases;
-    this.easing = options.easing ?? easeOutQuint;
+    /**
+     * 既定の曲線 (cdl#736)。
+     *
+     * **`easeOutQuint` は動きが前半に寄りすぎる**。 実測で、段の長さ 1.2 秒の tween は
+     * 9 割が最初の 0.449 秒で終わり、残りの 0.75 秒はほとんど止まって見えた
+     * (半分に達するのが段の 13.1% の時点)。 段を長くしても形は変わらず、止まって
+     * 見える時間だけが伸びる。
+     *
+     * `easeOut` は半分に達するのが 34.2% の時点で、段の終わりまで動き続ける。
+     */
+    this.easing = options.easing ?? easeOut;
     this.loop = options.loop ?? false;
     this.autoAdvanceMsOverride = options.autoAdvanceMs;
     this.phaseHoldMs = options.phaseHoldMs ?? 0;

package/src/anim/core/types.ts

@@ -40,7 +40,7 @@ export type TimelineState = {
   /**
    * 曲線を通す前の進行度 (0..1、 cdl#711)。 経過時間そのものの割合。
    *
-   * `phaseProgress` は既定で `easeOutQuint` を通るため前半に動きが寄る。
+   * `phaseProgress` は既定で `easeOut` を通るため素の進みより先に出る。
    * **値が落ち着く動きには合うが、 線を引く動きには合わない** =
    * `1.2s` の段で半分に達するのが 158 ms になり、 折れ線の 5 点のうち 4 点が
    * 292 ms の間に出てしまう (実測)。

package/src/kinds/chart-gauge.tsx

@@ -65,10 +65,43 @@ export function ChartGaugeNode({
 
   const 名前の級 = 14;
   const 数値の級 = 13;
-  /** 内訳の 1 件が縦に使う高さ (印 + 名前 + 数値) */
-  const 内訳の高さ = 56;
+  /** 内訳の 1 段が縦に使う高さ (印 + 名前 + 数値) */
+  const 段の高さ = 56;
   /** 弧と内訳の間 */
   const 弧と内訳の間 = 16;
+  /** 色の印の幅と、区画どうしの間 */
+  const 印の幅 = 30;
+  const 区画の間 = 12;
+
+  /**
+   * 内訳の割付 (cdl#731)。
+   *
+   * **件数で等分するだけでは足りない**。 名前は区画に収まるまで切り詰めていたが数値は
+   * そのままだったので、件数が増えると数字が隣へはみ出してくっついた
+   * (実測で件数 10 から重なり始め、12 で 10 組)。
+   *
+   * 区画の幅を **中身から決めて**、1 行に置ける件数を出す。 余りは次の段へ送る。
+   * 段が増えたぶん弧は低くなる = 弧の高さは残りから決めているので自動で縮む。
+   *
+   * 級を下げて 1 行に収める案は採らない = 件数 12 では級 7.7 が要り、この repo が
+   * 他の図で使っている下限の 9 を下回る。
+   */
+  const 内訳の数値 = data.map((d) => `${実値表記(d.value)}  ${割合表記(d.value / total)}`);
+
+  /**
+   * 内訳 1 件が横に要る幅。 数値の行と色の印の広い方に、区画どうしの間を足す。
+   *
+   * **印の幅が広い方になる入力は組めない** = 数値の行は最も短い形 (`1  50%`) でも級 13 で
+   * 幅 56.7 あり、印の 30 を必ず上回る。 件数 0 の図で `Math.max` の引数が空になるのを
+   * 防ぐ下限として置いている。 万一この関係が崩れても印は区画に合わせて縮む (下の `Math.min`)。
+   */
+  const 件に要る幅 = Math.max(印の幅, ...内訳の数値.map((t) => textWidth(t, 数値の級))) + 区画の間;
+  const 行の件数 = Math.min(
+    Math.max(1, Math.floor(使える幅 / Math.max(件に要る幅, 1))),
+    Math.max(data.length, 1),
+  );
+  const 内訳の段数 = Math.ceil(Math.max(data.length, 1) / 行の件数);
+  const 内訳の高さ = 段の高さ * 内訳の段数;
 
   /**
    * 弧の外半径。
@@ -123,8 +156,8 @@ export function ChartGaugeNode({
   const 合計の級 = Math.max(11, Math.round(級の候補));
   const 見出しの級 = Math.max(9, Math.round(合計の級 * 0.38));
 
-  /** 内訳 1 件あたりの幅。 等分して左から並べる */
-  const 内訳の幅 = 使える幅 / Math.max(data.length, 1);
+  /** 内訳 1 件あたりの幅。 1 行に置く件数で等分する */
+  const 内訳の幅 = 使える幅 / 行の件数;
   const 内訳のy = cy + 弧と内訳の間;
 
   /** 弧がどこまで伸びたか (0..1、 cdl#715)。 畳み方は `draw-progress.ts` が持つ */
@@ -207,22 +240,34 @@ export function ChartGaugeNode({
         字は区画の左端に揃える。 中央揃えにすると名前の長さで位置が動き、 縦の列が揃わない。
       */}
       {data.map((d, idx) => {
-        const x = PAD_SIDE + 内訳の幅 * idx;
-        const 数値 = `${実値表記(d.value)}  ${割合表記(d.value / total)}`;
+        const 列 = idx % 行の件数;
+        const 段 = Math.floor(idx / 行の件数);
+        const x = PAD_SIDE + 内訳の幅 * 列;
+        const y = 内訳のy + 段の高さ * 段;
+        /** 区画に収まる字幅。 名前も数値も同じ幅で切る */
+        const 収まる幅 = 内訳の幅 - 区画の間;
         return (
           <g key={`legend-${idx}`} data-cdl-role="chart-gauge-item">
-            <rect x={x} y={内訳のy} width={30} height={4} rx={2} fill={arcColor(d.tone, idx)} />
+            <rect
+              x={x}
+              y={y}
+              width={Math.max(4, Math.min(印の幅, 収まる幅))}
+              height={4}
+              rx={2}
+              fill={arcColor(d.tone, idx)}
+            />
             <text
               x={x}
-              y={内訳のy + 26}
+              y={y + 26}
               fontSize={名前の級}
               fontWeight={700}
               fill="var(--cdl-text, #1a1f2a)"
             >
-              {切り詰める(d.label ?? "", 内訳の幅 - 12, 名前の級)}
+              {切り詰める(d.label ?? "", 収まる幅, 名前の級)}
             </text>
-            <text x={x} y={内訳のy + 46} fontSize={数値の級} fill="var(--cdl-text-dim, #5a6270)">
-              {数値}
+            {/* **数値も切り詰める** = 切らないと隣の区画の字とくっつく (cdl#731) */}
+            <text x={x} y={y + 46} fontSize={数値の級} fill="var(--cdl-text-dim, #5a6270)">
+              {切り詰める(内訳の数値[idx] ?? "", 収まる幅, 数値の級)}
             </text>
           </g>
         );

package/src/render.tsx

@@ -136,8 +136,10 @@ export function CdlDiagramView({ diagram, laid: laidProp, hideHeader = false, hi
   /**
    * 描く動きが読む進み (cdl#711)。 曲線を通さない = 経過時間そのものの割合。
    *
-   * 線を引く動きに `easeOutQuint` を当てると前半に寄り、 折れ線の 5 点のうち 4 点が
-   * 292 ms の間に出る。 ペンの速さは一定であるほど「1 つずつ現れる」 が読める。
+   * 線を引く動きに段の曲線を当てると前半に寄る。 当時の既定 (`easeOutQuint`) では
+   * 折れ線の 5 点のうち 4 点が 292 ms の間に出た。 曲線をゆるめた後 (`cdl#736` の
+   * `easeOut`) も寄る向きは同じなので、 描く動きは曲線を通さないままにする。
+   * ペンの速さは一定であるほど「1 つずつ現れる」 が読める。
    */
   const drawProgress = reduced ? 1 : state.phaseLinearProgress;