@cardenelabs/cdl 0.40.0 → 0.40.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cardenelabs/cdl",
-  "version": "0.40.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.色}
                   >