@cardenelabs/cdl 0.40.0 → 0.40.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cardenelabs/cdl",
-  "version": "0.40.0",
+  "version": "0.40.2",
   "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-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)。
@@ -68,6 +69,17 @@ import { 進みを畳む, 伸ばすdash } from "./draw-progress";
  *
  * **この形では「線の傾きが動いた量」 が成立しない**。 `+40` と `+30` がどちらも水平線に
  * なる。 書いた図だけに効く割り切りで、量は字を読む。
+ *
+ * ## 名札は重ならないようにほどく (cdl#723)
+ *
+ * 名札を点と同じ y に置くと、**値が同じ / 近い系列があると名札どうしが重なって読めない**。
+ * 実測で 59 と 59 の 2 件が同じ y になり、値も名前も二重に印字されていた。
+ *
+ * 動かすのは **名札だけ**。 点と線は真の位置に残す = 位置をずらすと、書いていない差を
+ * 絵が主張することになる (同順位を段でずらさないのと同じ理由)。 同じ値の点は重なったまま
+ * でよく、どの名札がどの系列かは名前の色が担う。
+ *
+ * ほどき方は `名札の段をほどく` が持つ。
  */
 
 /** 線を引くのに最低限要る横幅。 名札が長い図でもこれだけは残す */
@@ -218,6 +230,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 +302,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 +349,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 +360,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 +372,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 +388,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 +399,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/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 結果;
+}