@cardenelabs/cdl 0.111.0 → 0.113.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cardenelabs/cdl",
-  "version": "0.111.0",
+  "version": "0.113.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) を保持し、
@@ -89,7 +104,7 @@ export function 放射の中身(
  *
  * 字の大きさをここに集める (#538)。 理由は `木の行` と同じ。
  */
-export function 放射の行(n: LayoutNode): 積む行[] {
+export function 放射の行(n: Pick<LayoutNode, "title" | "subtitle" | "isRoot">): 積む行[] {
   return [
     { 役割: "title", text: n.title, fontSize: n.isRoot ? 15 : 13 },
     { 役割: "subtitle", text: n.subtitle ?? "", fontSize: 9 },
@@ -396,7 +411,31 @@ export function computeMindMapLayout(
   const preferredSubDx = subBranchW + 20;
   const reserve = maxSubDepth > 0 ? branchW / 2 + maxSubDepth * preferredSubDx : 0;
   const maxLayer1XOffset = Math.max(minLayer1XOffset, canvasW / 2 - reserve);
-  const layer1XOffset = Math.max(minLayer1XOffset, Math.min(canvasW * 0.32, maxLayer1XOffset));
+  /*
+    第 1 階層の葉の名前のうち一番広いもの。 葉は枠を持たず、名前を枠があった位置の内側の端から
+    外へ伸ばす (#907)。 つまり **枝をどこまで外に置けるかは名前の幅が決める**。
+
+    葉が 1 つも無ければ 0 になり、下の上限は描画域の端そのものになる = 名前では決まらない。
+  */
+  const 葉の名前の最大幅 = Math.max(
+    0,
+    ...firstLevel
+      .filter((br) => (childrenOf.get(br.id) ?? []).length === 0)
+      .map((br) => {
+        const 名前 = 放射の行({ title: br.title, isRoot: false })[0]!;
+        return measureTextWidth(名前.text, { fontSize: 名前.fontSize, fontWeight: 600 });
+      }),
+  );
+  /*
+    名前の右端が描画域の端に届く位置。 枝は `layer1XOffset` だけ中心から離れ、名前は
+    そこから `branchW / 2` 内側を起点に外へ伸びるので、右端は
+    `offset - branchW / 2 + 名前の幅` になる。 これが `canvasW / 2` に一致する offset が上限。
+
+    ここを決め打ちの割合 (以前は `canvasW * 0.32`) にすると、名前が短い図でも枝が中央寄りのまま
+    留まり、外側に誰も使わない余白が残る (#963 の実測で横の使用率 66%)。
+  */
+  const 名前で決まる上限 = canvasW / 2 + branchW / 2 - 葉の名前の最大幅;
+  const layer1XOffset = Math.max(minLayer1XOffset, Math.min(名前で決まる上限, maxLayer1XOffset));
 
   // branch の外側に残る横の余白。 これを深さで割り、 sub box もそこに収まる幅に縮める。
   // 単一 chain は同じ縦レーンを共有するので、 横 step が box より広くないと重なる。
@@ -444,7 +483,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 が残る。
@@ -561,7 +600,13 @@ export function computeMindMapLayout(
     let maxExtentX = rootW / 2;
     let maxExtentY = rootH / 2;
     for (const n of nodes) {
-      maxExtentX = Math.max(maxExtentX, Math.abs(n.x - cx) + n.w / 2);
+      // 横は **描く端** で測る (#964)。 末端は枠を持たず (#907)、箱は名前を置く目印としてしか
+      // 残っていない。 箱で測ると、枠の無い末端が描いてもいない幅を占めていることになり、
+      // 何もはみ出していない図まで縮む (実測 = 枝 1 本の図が 0.83 倍になり、
+      // 箱の高さが 30.8 → 25.6 に縮んで補足の行が落ちた)。
+      // すぐ下の寄せも同じ `描く横の端` で測るので、縮めると寄せの基準も揃う。
+      const [左, 右] = 描く横の端(n);
+      maxExtentX = Math.max(maxExtentX, Math.abs(左 - cx), Math.abs(右 - cx));
       maxExtentY = Math.max(maxExtentY, Math.abs(n.y - cy) + n.h / 2);
     }
     const scale = Math.min(1, drawableHalfW / maxExtentX, drawableHalfH / maxExtentY);