@cardenelabs/cdl 0.110.0 → 0.112.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cardenelabs/cdl",
-  "version": "0.110.0",
+  "version": "0.112.0",
   "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/mind-map.tsx

@@ -43,8 +43,23 @@ export const 枝の太さ = (段: number): number => Math.max(1.2, 3.2 - 段 * 0
 const BRANCH_BOX_H_MAX = 48;
 const SUB_BOX_H_MAX = 40;
 
-/** 隣り合う枝の縦の間隔の上限 (cdl#913)。 置かないと、枝の少ない図で枝が細長く伸びる */
-const ROW_GAP_MAX = 96;
+/**
+ * 隣り合う枝の縦の間隔の上限 (cdl#913 / cdl#962)。
+ *
+ * 置かないと、枝の少ない図で枝が細長く伸びる。 枝が左右 2 本ずつの図では割り算の側が
+ * 432 になるため、上限を置かなければ枝が 432 離れ、中心から出る曲線がほぼ縦になる。
+ *
+ * **上限は px の定数ではなく、枝が横に伸びる量から出す** (cdl#962)。
+ * 定数 96 にしていた間、横に 230 伸びる図でも縦は 96 までしか開かず、枝の傾きが
+ * 12 度にしかならなかった。 札の縦は 4 分の 1 しか埋まらない
+ * (見本帳の実測で 3 図とも 23% から 43%)。
+ *
+ * 横の伸びを超えない範囲で開けば、隣り合う枝の傾きは 45 度を超えない。
+ * 「細長く伸びる」 を px ではなく角度で抑える形になる。
+ *
+ * 枝が多い図では割り算の側が先に効くため、この上限を上げても位置は変わらない。
+ */
+const 縦の間隔の上限 = (枝の横の伸び: number): number => 枝の横の伸び;
 
 /**
  * mind-map kind ... 1 node に mindData (rootId / rootTitle / branches) を保持し、
@@ -444,7 +459,7 @@ export function computeMindMapLayout(
   const laneBandH = Math.max(0, canvasH - BRANCH_BOX_H_MAX);
   const rowGap =
     sideLaneCount > 1
-      ? Math.min(laneBandH / (sideLaneCount - 1), ROW_GAP_MAX)
+      ? Math.min(laneBandH / (sideLaneCount - 1), 縦の間隔の上限(layer1XOffset))
       : subBranchH + 14;
   // box 高は必ず rowGap の一定割合に収める。 加算的な floor を置くと、 leaf が多く rowGap が
   // 小さいとき floor が rowGap を超えて縦重なりする。 rowGap の 70% にすれば規模によらず gap が残る。

package/src/kinds/shape-blockchain.tsx

@@ -141,11 +141,16 @@ function bottomLabel(node: LaidNode, cx: number, plan: ReturnType<typeof labelPl
   // 下限を当てるのは題の行だけ (#957) = 補いの行に当てると、収まっている行を大きくしてから
   // 切ることになる
   const 収める = (t: string, 大きさ: number, 字間: number, 題か = false) => {
+    // **縮める時と切る時で同じ測り方を使う** (#959)。 絵の中の字は等幅の字送りと字形の
+    // 大きい方を採る (`絵の中の字の幅`) ので、`幅の倍率` の `textWidth` で倍率を出すと
+    // 「収まる」 と言った行を切る側が「はみ出す」 と判定する (実測 = 幅 140 の箱で 9 種)
     const 測る = (u: string, f: number, ls: number) => 字の幅(u, f) + ls * [...u].length;
+    const 素の幅 = 測る(t, 大きさ, 字間);
+    const 収まる = 素の幅 > node.w && node.w > 0 ? node.w / 素の幅 : 1;
     const 下限 = 題か ? 切って収まる下限(t, 大きさ, 字間, node.w, 測る) : 0;
-    const 倍率 = Math.max(幅の倍率(t, 大きさ, 字間, node.w), 下限);
+    const 倍率 = Math.max(収まる, 下限);
     const size = 大きさ * 倍率;
-    return { 倍率, text: 帯で切る(t, size, node.w, (u, f) => 字の幅(u, f) + 字間 * 倍率 * [...u].length) };
+    return { 倍率, text: 帯で切る(t, size, node.w, (u, f) => 測る(u, f, 字間 * 倍率)) };
   };
   const 肩 = node.eyebrow && plan.肩書 ? 収める(node.eyebrow, plan.肩書.size, 2) : { 倍率: 1, text: node.eyebrow ?? "" };
   const 名 = 収める(node.title ?? "", plan.名前.size, 0, true);