@cardenelabs/cdl 0.113.0 → 0.115.0

package/package.json

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

@@ -1,10 +1,17 @@
 import type { JSX } from "react";
 import { 使える幅, 幅に収める, 箱に積む, type 積む行 } from "./box-lines";
+/*
+  名前を描く幅の見積り。 **切る側と同じ物差しを使う** (#966)。
+
+  `箱に積む` と `幅に収める` はこの `textWidth` で切るかどうかを決める。 置き場所を別の
+  見積り (`layout/text-width` の `measureTextWidth`) で決めていたため、ちょうど収まる位置に
+  置いたつもりの名前が描く側で切られた (実測 = `Features` が `Featur…` になった)。
+*/
+import { textWidth as 名前の幅 } from "./text-width";
 import type { LaidNode, Tone, MindBranchNode, MindBranchPayload } from "../types";
 import { TONE } from "../render/tone";
 import { resolveMindData } from "../render/payload-binding";
 import { 進みを畳む, 伸ばすdash, 段の伸び } from "./draw-progress";
-import { measureTextWidth } from "../layout/text-width";
 
 const MIND_TONES: Tone[] = ["accent", "teal", "success", "warning", "info", "error"];
 
@@ -302,11 +309,11 @@ type LayoutEdge = {
  * 名前が描画域に入らない時、描く側は字を縮めてから切る。 ここで出すのは縮める前の幅 =
  * 実際に描く幅の上限になる。 縮むのは名前が溢れる図だけで、その時も箱の幅で測るより近い。
  */
-function 描く横の端(n: LayoutNode): [number, number] {
+export function 描く横の端(n: LayoutNode): [number, number] {
   if (n.isRoot || !n.isLeaf) return [n.x - n.w / 2, n.x + n.w / 2];
   const 起点 = n.x + (n.side === "right" ? -n.w / 2 : n.w / 2);
   const 名前 = 放射の行(n)[0]!;
-  const 幅 = measureTextWidth(名前.text, { fontSize: 名前.fontSize, fontWeight: 600 });
+  const 幅 = 名前の幅(名前.text, 名前.fontSize);
   return n.side === "right" ? [起点, 起点 + 幅] : [起点 - 幅, 起点];
 }
 
@@ -401,72 +408,108 @@ export function computeMindMapLayout(
     return kids.reduce((sum, k) => sum + leafCountOf(k.id, seen), 0);
   };
 
-  const maxSubDepth =
-    firstLevel.length > 0
-      ? Math.max(0, ...firstLevel.map((br) => subDepthOf(br.id, new Set())))
-      : 0;
+  // 左右の振り分け。 横の置き場所を側ごとに決めるので、割付より先に分ける (#966)
+  const leftBranches = firstLevel.slice(0, leftCount);
+  const rightBranches = firstLevel.slice(leftCount);
 
   // branch を root からどれだけ離すか。 深いネストがあるほど sub 世代のぶん内側に寄せる。
   const minLayer1XOffset = rootW / 2 + branchW / 2 + MIND_BOX_GAP;
   const preferredSubDx = subBranchW + 20;
-  const reserve = maxSubDepth > 0 ? branchW / 2 + maxSubDepth * preferredSubDx : 0;
-  const maxLayer1XOffset = Math.max(minLayer1XOffset, canvasW / 2 - reserve);
-  /*
-    第 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 より広くないと重なる。
-  const room = canvasW / 2 - layer1XOffset;
   /** 箱の中の文字が読める最小の幅。 これを割ると文字だけが縮まず箱からはみ出す。 */
   const MIN_SUB_W = 56;
   /** 親と子の箱の間隔として望ましい値。 中心 → 第 1 階層と同じ `MIND_BOX_GAP` を使う。 */
   const PREFERRED_GAP = MIND_BOX_GAP;
-  //
-  // **箱の幅を先に確保し、 余った分を間隔に回す**。 浅い図では望ましい値になり、 深い図では
-  // 従来どおりまで詰まる = 箱が潰れる形は増やさない。
-  const gapRoom =
-    maxSubDepth > 0 ? (room - branchW / 2 - maxSubDepth * MIN_SUB_W) / maxSubDepth : 0;
-  const gap = Math.max(8, Math.min(PREFERRED_GAP, gapRoom));
-  // 最深 box の外端が canvas 端に収まる effSubW を解く。
-  //   layer1XOffset + branchW/2 + effSubW*maxSubDepth + maxSubDepth*gap <= canvasW/2
-  //   (step1 = (branchW+effSubW)/2 + gap、 stepN = effSubW + gap、 最深 box 半幅 effSubW/2 込み)
-  // 下限は極小 (1)。 大きな floor は深いネストで subOffset の累積を膨らませる。 位置の
-  // はみ出しは最終スケール (下部) が捌くので、 ここでは重なり回避に必要な最小だけ残す。
-  const effSubW =
-    maxSubDepth > 0
-      ? Math.max(1, Math.min(subBranchW, (room - branchW / 2 - maxSubDepth * gap) / maxSubDepth))
-      : subBranchW;
-  const step1 = (branchW + effSubW) / 2 + gap; // branch → 第 1 sub
-  const stepN = effSubW + gap; // sub → sub
-  const subOffset = (subDepth: number): number =>
-    subDepth <= 0 ? 0 : step1 + (subDepth - 1) * stepN;
+  /** 枝の名前を描く幅。 字の級は `放射の行` から取る (#538、 書き写すと 2 経路で別の値になる) */
+  const 枝の名前の幅 = (title: string): number => {
+    const 名前 = 放射の行({ title, isRoot: false })[0]!;
+    return 名前の幅(名前.text, 名前.fontSize);
+  };
+
+  /** 片側の横の割付。 枝の離れと、その側の sub box の幅と、深さごとの追い出し量を持つ */
+  type 横の割付 = {
+    layer1XOffset: number;
+    effSubW: number;
+    subOffset: (subDepth: number) => number;
+  };
+
+  /*
+    横の割付を **枝ごとに** 出す (#966)。
+
+    それまでは図全体で 1 つの値を使っていた。 入れ子を持つ枝は子のぶんを内側に空ける必要が
+    あるので、その都合が入れ子を持たない枝にも効く。 左が入れ子で右が葉 1 枚の図では
+    右の枝も中心から 149 に留まり、右には空ける相手が居ないのにその 171 を誰も使わない
+    (実測 = 左が 320 届くのに右は 108 で、札の横を 52% しか使わなかった)。
+
+    式そのものは #964 と同じで、材料をその枝の subtree だけから取る。
+    枝は自分の中身が許すところまで外へ出る。
+  */
+  const 枝の横を決める = (br: MindBranchNode): 横の割付 => {
+    const maxSubDepth = subDepthOf(br.id, new Set());
+    /*
+      どこまで外に出られるかは **枝が末端かどうか** で変わる (#966)。
+
+      子を持つ枝は箱が描かれるので、子の世代のぶんを内側に空けて箱ごと描画域に収める。
+      末端の枝は枠を持たず (#907)、名前を枠があった位置の内側の端から外へ伸ばすだけなので、
+      収めるのは名前で、箱ではない。 箱まで収めると、名前より 41 広い箱の都合で
+      名前が描画域の内側で終わる (実測 = 名前 24 の図で端まで 41 余った)。
+
+      名前の右端は `offset - branchW / 2 + 名前の幅` に来る。 これが `canvasW / 2` に
+      一致する offset が末端の上限になる。 決め打ちの割合 (以前は `canvasW * 0.32`) だと
+      名前の長さと無関係に中央寄りへ留まった (#964 の実測で横の使用率 66%)。
+    */
+    const 上限 =
+      maxSubDepth > 0
+        ? canvasW / 2 - (branchW / 2 + maxSubDepth * preferredSubDx)
+        : canvasW / 2 + branchW / 2 - 枝の名前の幅(br.title);
+    /*
+      **整数に落とす** (#966)。 枝の長さは座標の差から出るので、端数を持ったまま置くと
+      丸め誤差が乗る (実測 = 24 であるべき枝が 23.99999999999997 になり `render-polish-240`
+      が落ちた)。 下に倒すのは、上限を 1px でも超えると描く側が名前を 1 級縮めるため。
+      すぐ下の寄せが整数に丸めているのと同じ理由になる。
+    */
+    const layer1XOffset = Math.floor(Math.max(minLayer1XOffset, 上限));
+
+    // branch の外側に残る横の余白。 これを深さで割り、 sub box もそこに収まる幅に縮める。
+    // 単一 chain は同じ縦レーンを共有するので、 横 step が box より広くないと重なる。
+    const room = canvasW / 2 - layer1XOffset;
+    //
+    // **箱の幅を先に確保し、 余った分を間隔に回す**。 浅い図では望ましい値になり、 深い図では
+    // 従来どおりまで詰まる = 箱が潰れる形は増やさない。
+    const gapRoom =
+      maxSubDepth > 0 ? (room - branchW / 2 - maxSubDepth * MIN_SUB_W) / maxSubDepth : 0;
+    const gap = Math.floor(Math.max(8, Math.min(PREFERRED_GAP, gapRoom)));
+    // 最深 box の外端が canvas 端に収まる effSubW を解く。
+    //   layer1XOffset + branchW/2 + effSubW*maxSubDepth + maxSubDepth*gap <= canvasW/2
+    //   (step1 = (branchW+effSubW)/2 + gap、 stepN = effSubW + gap、 最深 box 半幅 effSubW/2 込み)
+    // 下限は極小 (1)。 大きな floor は深いネストで subOffset の累積を膨らませる。 位置の
+    // はみ出しは最終スケール (下部) が捌くので、 ここでは重なり回避に必要な最小だけ残す。
+    const effSubW =
+      maxSubDepth > 0
+        ? Math.floor(
+            Math.max(1, Math.min(subBranchW, (room - branchW / 2 - maxSubDepth * gap) / maxSubDepth)),
+          )
+        : subBranchW;
+    const step1 = (branchW + effSubW) / 2 + gap; // branch → 第 1 sub
+    const stepN = effSubW + gap; // sub → sub
+    return {
+      layer1XOffset,
+      effSubW,
+      subOffset: (subDepth: number): number =>
+        subDepth <= 0 ? 0 : step1 + (subDepth - 1) * stepN,
+    };
+  };
+  /** 枝ごとの横の割付。 同じ枝を 2 度計算しない */
+  const 横の割付表 = new Map<string, 横の割付>(
+    firstLevel.map((br) => [br.id, 枝の横を決める(br)]),
+  );
+  /** 一番内側に置かれた枝の離れ。 帯の間隔の上限に使う */
+  const 一番内側の離れ = Math.min(
+    ...(firstLevel.length > 0
+      ? firstLevel.map((br) => 横の割付表.get(br.id)!.layer1XOffset)
+      : [minLayer1XOffset]),
+  );
 
   // 縦レーン。 左右それぞれの branch 群の葉数合計でレーンを割る。
-  const leftBranches = firstLevel.slice(0, leftCount);
-  const rightBranches = firstLevel.slice(leftCount);
   const leavesOfSide = (brs: MindBranchNode[]): number =>
     Math.max(
       1,
@@ -483,7 +526,12 @@ export function computeMindMapLayout(
   const laneBandH = Math.max(0, canvasH - BRANCH_BOX_H_MAX);
   const rowGap =
     sideLaneCount > 1
-      ? Math.min(laneBandH / (sideLaneCount - 1), 縦の間隔の上限(layer1XOffset))
+      ? Math.min(
+          laneBandH / (sideLaneCount - 1),
+          // 帯は図で 1 つなので、**一番内側の枝** から上限を取る (#966)。
+          // 外へ出た枝に合わせると、内側に残った枝の傾きが 45 度を超える
+          縦の間隔の上限(一番内側の離れ),
+        )
       : subBranchH + 14;
   // box 高は必ず rowGap の一定割合に収める。 加算的な floor を置くと、 leaf が多く rowGap が
   // 小さいとき floor が rowGap を超えて縦重なりする。 rowGap の 70% にすれば規模によらず gap が残る。
@@ -525,11 +573,12 @@ export function computeMindMapLayout(
     tone: Tone | undefined,
     placed: Set<string>,
     laneRef: { cursor: number },
+    横: 横の割付,
   ): number => {
     placed.add(node.id);
     const dirX = isLeft ? -1 : 1;
-    const x = cx + dirX * (layer1XOffset + subOffset(subDepth));
-    const w = subDepth === 0 ? branchW : effSubW;
+    const x = cx + dirX * (横.layer1XOffset + 横.subOffset(subDepth));
+    const w = subDepth === 0 ? branchW : 横.effSubW;
     const h = subDepth === 0 ? effBranchH : effSubH;
     const myTone = node.tone ?? tone;
 
@@ -547,6 +596,7 @@ export function computeMindMapLayout(
           myTone ?? MIND_TONES[i % MIND_TONES.length]!,
           placed,
           laneRef,
+          横,
         ),
       );
       y = (ys[0]! + ys[ys.length - 1]!) / 2;
@@ -583,7 +633,7 @@ export function computeMindMapLayout(
     const placed = new Set<string>();
     brs.forEach((br, i) => {
       const tone = br.tone ?? MIND_TONES[(toneBase + i) % MIND_TONES.length]!;
-      placeSubtree(br, 0, isLeft, tone, placed, laneRef);
+      placeSubtree(br, 0, isLeft, tone, placed, laneRef, 横の割付表.get(br.id) ?? 枝の横を決める(br));
     });
   };
   placeSide(leftBranches, true, 0);

package/src/kinds/tree.tsx

@@ -409,6 +409,53 @@ export function computeTreeLayout(
     return Math.min(Math.max(要る, nodeW), slotW * 0.92);
   };
 
+  /*
+    置く前に、葉の並びと段を先に出す (#968)。
+
+    端の葉の箱がどれだけ幅を取るかが判らないと、箱の辺を描画域の端へ合わせられない。
+    箱の幅は名前と段から決まる (`箱の幅`) ので、位置より先に出せる。
+
+    走査の順は `place` と同じ (同じ `childrenOf` を同じ順に辿り、既訪で打ち切る)。
+  */
+  const 葉の並び: string[] = [];
+  const 段の表 = new Map<string, number>();
+  const 幅の表 = new Map<string, number>();
+  {
+    const 見た = new Set<string>();
+    const 下見 = (n: TreeNodePayload, depth: number): void => {
+      見た.add(n.id);
+      段の表.set(n.id, depth);
+      幅の表.set(n.id, 箱の幅(n, depth));
+      const kids = (childrenOf.get(n.id) ?? []).filter((k) => !見た.has(k.id));
+      if (kids.length === 0) {
+        葉の並び.push(n.id);
+        return;
+      }
+      for (const k of kids) 下見(k, depth + 1);
+    };
+    for (const r of roots) if (!見た.has(r.id)) 下見(r, 0);
+  }
+
+  /*
+    葉と葉の隙間を、**段と段の隙間に揃える** (#968)。
+
+    それまでは葉を `canvasW / 葉の数` で等分した区画の中央に置いていた。
+    葉が少ない図では区画が箱よりずっと広くなり、兄弟どうしが遠くへ離れる
+    (実測 = 葉 2 枚の図で箱の縁の間が 196 空き、段の隙間 95 の 2 倍になった)。
+
+    木は根から下へ辿る図なので、横の隙間だけが縦の 2 倍あると、離れた 2 本の列に見える。
+    横の隙間を縦の隙間と同じにすれば、図の中の間隔が 1 つの調子で揃う。
+
+    **今より広げない** (`Math.min(slotW, ...)`)。 葉が多い図では区画の方が狭いので、
+    そちらが効いて位置は 1 ポイントも動かない。
+  */
+  const 葉の数 = Math.max(葉の並び.length, 1);
+  const 段の隙間 = depthGap - nodeH;
+  const 葉の間隔 = Math.min(slotW, nodeW + 段の隙間);
+  /** 葉の列全体を描画域の真ん中に置く。 葉が 1 枚なら間隔が要らない */
+  const 葉のx = (i: number): number =>
+    canvasW / 2 - ((葉の数 - 1) * 葉の間隔) / 2 + i * 葉の間隔;
+
   const posOf = new Map<string, { x: number; y: number }>();
   const nodes: LayoutNode[] = [];
   const placed = new Set<string>();
@@ -420,7 +467,7 @@ export function computeTreeLayout(
     const kids = (childrenOf.get(n.id) ?? []).filter((k) => !placed.has(k.id));
     let x: number;
     if (kids.length === 0) {
-      x = leafCursor * slotW + slotW / 2;
+      x = 葉のx(leafCursor);
       leafCursor += 1;
     } else {
       const xs = kids.map((k) => place(k, depth + 1));
@@ -434,7 +481,7 @@ export function computeTreeLayout(
       ...(n.subtitle !== undefined ? { subtitle: n.subtitle } : {}),
       x,
       y,
-      w: 箱の幅(n, depth),
+      w: 幅の表.get(n.id) ?? 箱の幅(n, depth),
       h: nodeH,
       depth,
       ...((n as { unresolved?: true }).unresolved ? { unresolved: true as const } : {}),