@cardenelabs/cdl 0.40.3 → 0.40.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cardenelabs/cdl",
-  "version": "0.40.3",
+  "version": "0.40.5",
   "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

@@ -86,21 +86,85 @@ export function ChartGaugeNode({
    * 級を下げて 1 行に収める案は採らない = 件数 12 では級 7.7 が要り、この repo が
    * 他の図で使っている下限の 9 を下回る。
    */
-  const 内訳の数値 = data.map((d) => `${実値表記(d.value)}  ${割合表記(d.value / total)}`);
+  /** 内訳 1 件の数値の行 (実値と割合) */
+  const 数値の行 = (d: { value: number }): string =>
+    `${実値表記(d.value)}  ${割合表記(d.value / total)}`;
 
   /**
-   * 内訳 1 件が横に要る幅。 数値の行と色の印の広い方に、区画どうしの間を足す。
+   * 件の並びから、1 行に置ける件数と段数を出す。
    *
-   * **印の幅が広い方になる入力は組めない** = 数値の行は最も短い形 (`1  50%`) でも級 13 で
+   * **印が広い方になる入力は組めない** = 数値の行は最も短い形 (`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 割り付ける = (件たち: typeof data): { 行の件数: number; 段数: number } => {
+    const 幅 = Math.max(印の幅, ...件たち.map((d) => textWidth(数値の行(d), 数値の級))) + 区画の間;
+    const 行の件数 = Math.min(
+      Math.max(1, Math.floor(使える幅 / Math.max(幅, 1))),
+      Math.max(件たち.length, 1),
+    );
+    return { 行の件数, 段数: Math.ceil(Math.max(件たち.length, 1) / 行の件数) };
+  };
+
+  /**
+   * 段の数の上限 (cdl#735)。
+   *
+   * 段が増えると弧に残る高さが尽き、**合計の字が内訳の名前より小さくなる**。 この種別は
+   * 合計を大きく見せるために作ったので、主役が入れ替わると図の意味が変わる
+   * (実測で件数 22 から合計 13 に対し名前 14、件数 30 では合計が弧の穴から 9.3 はみ出した)。
+   *
+   * 弧に残す高さを先に確保し、そこから置ける段数を逆算する。 下限 48 は
+   * 「合計の級が名前の級 14 を上回る」 ことから決めた = 縦から決まる級は半径の 0.3224 倍
+   * (内半径 0.62 × 0.52) なので、14 を超えるには半径 43.4 が要る。
+   */
+  const 弧に残す高さ = 48;
+  const 置ける段数 = Math.max(
+    1,
+    Math.floor((使える高さ - 弧に残す高さ - 弧と内訳の間) / 段の高さ),
   );
-  const 内訳の段数 = Math.ceil(Math.max(data.length, 1) / 行の件数);
+
+  /**
+   * 入り切らない件を末尾 1 件に畳む。 合計は変えない = 畳んだ件の値を足して持たせる。
+   *
+   * 弧も同じ並びで描く = 内訳と扇が食い違うと、どの色がどの件かを読めなくなる。
+   */
+  const 畳む = (残す件数: number): typeof data => {
+    if (残す件数 >= data.length) return data;
+    const 前 = data.slice(0, Math.max(0, 残す件数 - 1));
+    const 残り = data.slice(Math.max(0, 残す件数 - 1));
+    const 値 = 残り.reduce((acc, d) => acc + d.value, 0);
+    // 前の時点の値は畳めない (どの件のものか決まらない) ので落とす。
+    // 読めなかった値が 1 件でもあれば、畳んだ件も読めなかった扱いにする
+    const 読めない = 残り.some((d) => d.unresolved);
+    const 畳んだ: (typeof data)[number] = {
+      ...残り[0]!,
+      label: "その他",
+      value: 値,
+      previous: undefined,
+      ...(読めない ? { unresolved: true as const } : { unresolved: undefined }),
+    };
+    return [...前, 畳んだ];
+  };
+
+  /**
+   * 段が上限に収まるまで畳む。
+   *
+   * 畳むと数値の行が変わるので、1 行に置ける件数も変わりうる。 畳んだ結果で割り付け直し、
+   * それでも収まらなければもう一度畳む。 **元の並びから畳む** = 畳んだ件を再び畳むと
+   * 「その他」 が入れ子になる。
+   */
+  const 出す件たち = ((): typeof data => {
+    let 件たち = data;
+    for (let i = 0; i < 4; i++) {
+      const { 行の件数, 段数 } = 割り付ける(件たち);
+      if (段数 <= 置ける段数) return 件たち;
+      件たち = 畳む(Math.max(1, 置ける段数 * 行の件数));
+    }
+    return 件たち;
+  })();
+
+  const 内訳の数値 = 出す件たち.map((d) => 数値の行(d));
+  const { 行の件数, 段数: 内訳の段数 } = 割り付ける(出す件たち);
   const 内訳の高さ = 段の高さ * 内訳の段数;
 
   /**
@@ -119,7 +183,7 @@ export function ChartGaugeNode({
   const cy = PAD_TOP + radius;
 
   let cumFrac = 0;
-  const slices = data.map((d) => {
+  const slices = 出す件たち.map((d) => {
     const frac = d.value / total;
     // 9 時 (π) から 3 時 (2π) へ、 上を通って進む
     const a0 = Math.PI + cumFrac * Math.PI;
@@ -139,17 +203,24 @@ export function ChartGaugeNode({
   /**
    * 合計の字の級。
    *
-   * **内側の空きに収める**。 弧の内側は半径 `内半径` の半円で、中央に置ける横幅は
-   * `内半径 * 2`、縦は `内半径` しかない。 桁数で必要な幅が変わるため、
-   * 実際の文字列を `textWidth` で測って逆算する。
+   * **内側の空きに収める**。 弧の内側は半径 `内半径` の半円で、中央に置ける広さは
+   * 高さによって変わる。 桁数で必要な幅が変わるため、実際の文字列を `textWidth` で
+   * 測って逆算する。
+   *
+   * **上の角で測る** (cdl#735)。 中心の高さの横幅 (`内半径 * 2`) で測ると、
+   * 字は中心より上に置かれるぶんだけ穴からはみ出す (実測で桁の多い合計が 3.8 出た)。
+   * 字の上端は `cy - 級 * 1.25` (置く高さ `級 * 0.5` + 字の高さ `級 * 0.75`) なので、
+   * 上の角が円に入る条件は `(単位幅 * 級 / 2)^2 + (1.25 * 級)^2 <= 内半径^2`。
+   * 級について解くと下の式になる。
    *
-   * 縦は見出し (「合計」) の行も入るので、2 行ぶんが半円の高さに収まる比で切る。
+   * 縦は見出し (「合計」) の行も入るので、2 行ぶんが半円の高さに収まる比で別に切る。
    */
   const 合計の文字 = 実値表記(Math.round(total));
-  const 横の上限 = 内半径 * 2 * 0.86;
+  /** 級 1 あたりの字幅 */
+  const 単位幅 = Math.max(textWidth(合計の文字, 100), 1) / 100;
   const 級の候補 = Math.min(
-    // 横 = 実際の字幅から逆算する
-    (横の上限 / Math.max(textWidth(合計の文字, 100), 1)) * 100,
+    // 横 = 字の上の角が内側の円に入る大きさ
+    内半径 / Math.sqrt((単位幅 / 2) ** 2 + 1.25 ** 2),
     // 縦 = 合計 1 行 + 見出し 1 行が内側の高さに収まる比
     内半径 * 0.52,
   );
@@ -239,7 +310,7 @@ export function ChartGaugeNode({
 
         字は区画の左端に揃える。 中央揃えにすると名前の長さで位置が動き、 縦の列が揃わない。
       */}
-      {data.map((d, idx) => {
+      {出す件たち.map((d, idx) => {
         const 列 = idx % 行の件数;
         const 段 = Math.floor(idx / 行の件数);
         const x = PAD_SIDE + 内訳の幅 * 列;

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;