@cardenelabs/cdl 0.112.0 → 0.113.0

package/package.json

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

@@ -104,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 },
@@ -411,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 より広くないと重なる。
@@ -576,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);