@cardenelabs/cdl 0.40.1 → 0.40.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cardenelabs/cdl",
-  "version": "0.40.1",
+  "version": "0.40.3",
   "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-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/kinds/chart-pie.tsx

@@ -3,6 +3,7 @@ import type { ChartPieForm, LaidNode, Tone } from "../types";
 import { TONE, chartSeriesColor } from "../render/tone";
 import { resolveChartData, type ResolvedChartDatum } from "../render/payload-binding";
 import { 進みを畳む } from "./draw-progress";
+import { 名札の段をほどく } from "./label-stack";
 import { 扇形の切り抜き } from "./draw-arc";
 import { textWidth } from "./text-width";
 import { 実値表記, 割合表記 } from "./chart-number";
@@ -191,6 +192,47 @@ export function ChartPieNode({
   /** その扇が開き始めたか。 開き始めた扇の凡例だけを出す */
   const 開き始めた = (startFrac: number): boolean => !drawing || 開き > startFrac;
 
+  /**
+   * 名札 1 つが縦に要する高さ。 割合と名前の 2 行ぶんに、行どうしが触れない余りを足す
+   */
+  const 名札の行 = 割合の級 + 名前の級 + 3;
+  /**
+   * 名札の縦の位置 (cdl#727)。
+   *
+   * **角度がそのまま縦になる** ので、小さい扇が続くと名札が同じ場所に集まる
+   * (実測で 0.3% の小片 2 個が完全に重なった)。 左右それぞれで重なりをほどく。
+   *
+   * 扇の縁の点は動かさない = 名札がどの扇のものかは引き出し線が保つ。
+   *
+   * **まだ開いていない扇も数に入れる**。 出ている名札だけでほどくと、扇が開くたびに
+   * 既に出ている名札が動く = 段の進みの途中で字が跳ねる。
+   */
+  const 名札の側 = slices.map((s) => Math.cos(s.中央角) >= 0);
+  const 名札の真のy = slices.map((s) => cy + (radius + 引き出し) * Math.sin(s.中央角));
+  const 名札のy = (() => {
+    const 出す = [...名札の真のy];
+    for (const 側 of [true, false]) {
+      const 番号 = 名札の側.flatMap((右, i) => (右 === 側 ? [i] : []));
+      if (番号.length === 0) continue;
+      const 直した = 名札の段をほどく(
+        番号.map((i) => 名札の真のy[i]!),
+        名札の行,
+        PAD_TOP + 名札の縦の張り出し,
+        node.h - PAD_BOTTOM - 名札の縦の張り出し,
+      );
+      番号.forEach((i, k) => (出す[i] = 直した[k]!));
+    }
+    return 出す;
+  })();
+  /**
+   * 名札の横の位置。 **角度から決めず、円の外の決まった位置に置く** (cdl#727)。
+   *
+   * 角度から決めたままだと、縦をずらした名札が円の上へ乗る (実測)。 肘も同じ列に
+   * 揃えるので、引き出し線が円を横切らない = 肘は必ず半径の外にある。
+   */
+  const 肘のx = (右: boolean): number => cx + (右 ? 1 : -1) * (radius + 引き出し);
+  const 字のx = (右: boolean): number => 肘のx(右) + (右 ? 字までの間 : -字までの間);
+
 
   return (
     <g transform={`translate(${x0} ${y0})`}>
@@ -283,12 +325,12 @@ export function ChartPieNode({
       */}
       {slices.map((s, idx) => {
         if (!開き始めた(s.startFrac)) return null;
-        const 右 = Math.cos(s.中央角) >= 0;
+        const 右 = 名札の側[idx]!;
         const 縁x = cx + radius * Math.cos(s.中央角);
         const 縁y = cy + radius * Math.sin(s.中央角);
-        const 折れx = cx + (radius + 引き出し) * Math.cos(s.中央角);
-        const 折れy = cy + (radius + 引き出し) * Math.sin(s.中央角);
-        const 字x = 折れx + (右 ? 字までの間 : -字までの間);
+        const 折れx = 肘のx(右);
+        const 折れy = 名札のy[idx]!;
+        const 字x = 字のx(右);
         return (
           <g key={`callout-${idx}`}>
             <path

package/src/kinds/chart-slope.tsx

@@ -5,6 +5,7 @@ import { resolveChartData } from "../render/payload-binding";
 import { textWidth } from "./text-width";
 import { 実値表記 } from "./chart-number";
 import { 進みを畳む, 伸ばすdash } from "./draw-progress";
+import { 名札の段をほどく } from "./label-stack";
 
 /**
  * chart-slope kind ... 2 時点を 1 本の直線でつなぎ、増減と順位の入れ替わりを見せる図 (cdl#688)。
@@ -84,71 +85,6 @@ import { 進みを畳む, 伸ばすdash } from "./draw-progress";
 /** 線を引くのに最低限要る横幅。 名札が長い図でもこれだけは残す */
 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;

package/src/kinds/label-stack.ts

@@ -0,0 +1,77 @@
+/**
+ * 名札の縦の重なりをほどく (cdl#723 / cdl#727)。
+ *
+ * 字の位置を値から決める図 (傾き図 / 円グラフ) は、**値が同じ / 近い件があると名札が
+ * 重なって読めない**。 実測で傾き図は 59 と 59 の 2 件が、円グラフは 0.3% の小片 2 個が
+ * 完全に重なっていた。
+ *
+ * ## 動かすのは名札だけ
+ *
+ * 点や扇は真の位置に残す。 位置をずらすと、書いていない差を絵が主張することになる
+ * (同順位を段でずらさないのと同じ理由、cdl#707)。 名札は図の量を表さないので動かしてよい。
+ */
+
+/**
+ * 名札の縦の位置をほどく。
+ *
+ * ## 重なった連なりは元の位置の中心へ置き直す
+ *
+ * 上から順に押し下げるだけだと塊が下へ寄り、点との対応が片側だけ遠くなる。
+ * **元の位置からの動きが最も小さくなる並べ方** を選ぶ = 重なった連なりごとに、元の位置の
+ * 平均を中心にして間隔ぶんずつ均等に置く。
+ *
+ * 実装は単調回帰。 `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 結果;
+}