@cardenelabs/cdl 0.83.0 → 0.102.0

package/src/kinds/mind-map.tsx

@@ -4,6 +4,7 @@ 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"];
 
@@ -21,6 +22,30 @@ const MIND_TONES: Tone[] = ["accent", "teal", "success", "warning", "info", "err
  */
 export const MIND_BOX_GAP = 24;
 
+/**
+ * 枝の太さ。 中心に近いほど太く、外へ行くほど細い (#907)。
+ *
+ * 放射の図は「中心から外へ広がる」 ことを描く図なので、太さが一様だと構造が絵に出ない。
+ *
+ * **下限を置く**。 段数に上限が無いため、引き算だけだと深い図で 0 を割り、線が消える。
+ * 消えた線は「繋がっていない」 と読まれるので、細くても残す方を採る。
+ */
+export const 枝の太さ = (段: number): number => Math.max(1.2, 3.2 - 段 * 0.7);
+
+/**
+ * 箱の高さの上限 (cdl#913)。
+ *
+ * 葉が少ない図では帯の間隔が広く開くので、箱もそのぶん高くする。 上限が無いと、
+ * 葉が 1 枚の図で箱だけがカードいっぱいに伸びる。
+ *
+ * 中心 (52) を超えない範囲で段の差を残す = 中心 > 第 1 階層 > その先 の順に低くする。
+ */
+const BRANCH_BOX_H_MAX = 48;
+const SUB_BOX_H_MAX = 40;
+
+/** 隣り合う枝の縦の間隔の上限 (cdl#913)。 置かないと、枝の少ない図で枝が細長く伸びる */
+const ROW_GAP_MAX = 96;
+
 /**
  * mind-map kind ... 1 node に mindData (rootId / rootTitle / branches) を保持し、
  * 中心 root + 放射 branch を SVG 描画する。
@@ -118,7 +143,9 @@ export function MindMapNode({
       {layout.edges.map((e, i) => {
         // 循環を閉じる枝は根から外へ向かう枝ではないため、全 node が出てから表示する
         const 枝の伸び = e.deferUntilComplete
-          ? (伸び >= 1 ? 1 : 0)
+          ? 伸び >= 1
+            ? 1
+            : 0
           : 段の伸び(伸び, e.depth, 最大深さ);
         return (
           <path
@@ -127,7 +154,7 @@ export function MindMapNode({
             d={e.d}
             fill="none"
             stroke={toneColor(e.tone)}
-            strokeWidth={2.5}
+            strokeWidth={枝の太さ(e.depth)}
             strokeOpacity={0.55}
             strokeLinecap="round"
             {...伸ばすdash(drawing, 枝の伸び)}
@@ -140,63 +167,79 @@ export function MindMapNode({
         if (!箱が出る(n.depth)) return null;
         // 補足は箱の中の 2 行目に出す (#471)。 箱の高さは変えないため、 入らない時は落ちる
         const 材料 = 放射の行(n);
-        const 行 = 箱に積む(材料, n.w, n.h);
         // 判定は行数でなく「補足を渡したか」 で行う (理由は tree.tsx と同じ、 #471 Round 1)
         const 補足あり = (n.subtitle ?? "").trim() !== "";
         // 補足ありでは `箱に積む` が既に同じ処理を済ませているため、1 行の経路だけ計算する。
         // 名前の大きさは `放射の行` から取る (#538、 理由は tree.tsx と同じ)
         const 名前 = 材料[0]!;
-        const 収めた名前 = 補足あり
-          ? undefined
-          : 幅に収める(名前.text, 名前.fontSize, 使える幅(n.w));
+        /*
+          末端は枠を持たない (#907)。 枠があると名前が枠の幅まで縮められるか切られる。
+          枠の幅は段の深さで決まるため、深い図では下限まで縮んで名前が読めなくなる。
+
+          代わりに名前を **中心から外へ** 伸ばす。 起点は枠があった位置の内側の端で、
+          使える幅はそこから描画域の端まで。 外向きなら隣の段とぶつからない
+          = 隣の段は中心側に在り、外側には描画域の端しか無い。
+        */
+        const 枠なし = !n.isRoot && n.isLeaf;
+        const 外へ = n.side === "right";
+        const 文字のx = 枠なし ? n.x + (外へ ? -n.w / 2 : n.w / 2) : n.x;
+        const 文字の寄せ = 枠なし ? (外へ ? "start" : "end") : "middle";
+        const 描画域の端 = 外へ ? node.w - MIND_PAD : MIND_PAD;
+        const 使える = 枠なし ? Math.abs(描画域の端 - 文字のx) : 使える幅(n.w);
+        const 収めた名前 = 補足あり ? undefined : 幅に収める(名前.text, 名前.fontSize, 使える);
+        // 積む側は箱の幅から余白を引いて使える幅を出すので、枠が無い時は同じ幅になる
+        // 箱の幅を渡す。 助っ人の引数を増やすと木の側にも要らない欄が付く
+        const 行 = 箱に積む(材料, 枠なし ? 使える + (n.w - 使える幅(n.w)) : n.w, n.h);
         const 文字の色 = n.isRoot
           ? "var(--cdl-text-on-tone, #ffffff)"
           : "var(--cdl-chip-text, #1a1f2a)";
         return (
-        <g key={`n-${n.id}`} data-cdl-unresolved={n.unresolved ? "true" : undefined}>
-          <rect
-            x={n.x - n.w / 2}
-            y={n.y - n.h / 2}
-            width={n.w}
-            height={n.h}
-            rx={n.isRoot ? 22 : 10}
-            fill={n.isRoot ? toneColor(n.tone ?? "accent") : "var(--cdl-chip-fill, #f4f6fb)"}
-            stroke={n.isRoot ? toneColor(n.tone ?? "accent") : toneColor(n.tone)}
-            strokeWidth={n.isRoot ? 2 : 1.75}
-          />
-          {収めた名前 === undefined ? (
-            行.map((r) => (
+          <g key={`n-${n.id}`} data-cdl-unresolved={n.unresolved ? "true" : undefined}>
+            {枠なし ? null : (
+              <rect
+                x={n.x - n.w / 2}
+                y={n.y - n.h / 2}
+                width={n.w}
+                height={n.h}
+                rx={n.isRoot ? 22 : 10}
+                fill={n.isRoot ? toneColor(n.tone ?? "accent") : "var(--cdl-chip-fill, #f4f6fb)"}
+                stroke={n.isRoot ? toneColor(n.tone ?? "accent") : toneColor(n.tone)}
+                strokeWidth={n.isRoot ? 2 : 1.75}
+              />
+            )}
+            {収めた名前 === undefined ? (
+              行.map((r) => (
+                <text
+                  key={r.役割}
+                  data-cdl-role={r.役割 === "subtitle" ? "mind-node-subtitle" : undefined}
+                  x={文字のx}
+                  y={n.y + r.dy}
+                  fontSize={r.fontSize}
+                  fontWeight={r.役割 === "title" ? (n.isRoot ? 700 : 600) : 500}
+                  textAnchor={文字の寄せ}
+                  fill={文字の色}
+                  opacity={r.役割 === "subtitle" ? 0.85 : undefined}
+                >
+                  {r.text}
+                </text>
+              ))
+            ) : (
+              // 補足が無くても **幅に収める** (#526)。 `箱に積む` を通らないこの経路だけが
+              // 幅を見ておらず、長い名前がそのまま箱の外へ出て枝の線と重なっていた
+              // (実測 = 中心の箱で文字 163px に対し箱 120px)。
+              // 収める手段は縮めるのが先で、切るのは下限まで縮めても入らない時だけ (#534)
               <text
-                key={r.役割}
-                data-cdl-role={r.役割 === "subtitle" ? "mind-node-subtitle" : undefined}
-                x={n.x}
-                y={n.y + r.dy}
-                fontSize={r.fontSize}
-                fontWeight={r.役割 === "title" ? (n.isRoot ? 700 : 600) : 500}
-                textAnchor="middle"
+                x={文字のx}
+                y={n.y + 5}
+                fontSize={収めた名前.fontSize}
+                fontWeight={n.isRoot ? 700 : 600}
+                textAnchor={文字の寄せ}
                 fill={文字の色}
-                opacity={r.役割 === "subtitle" ? 0.85 : undefined}
               >
-                {r.text}
+                {収めた名前.text}
               </text>
-            ))
-          ) : (
-            // 補足が無くても **幅に収める** (#526)。 `箱に積む` を通らないこの経路だけが
-            // 幅を見ておらず、長い名前がそのまま箱の外へ出て枝の線と重なっていた
-            // (実測 = 中心の箱で文字 163px に対し箱 120px)。
-            // 収める手段は縮めるのが先で、切るのは下限まで縮めても入らない時だけ (#534)
-            <text
-              x={n.x}
-              y={n.y + 5}
-              fontSize={収めた名前.fontSize}
-              fontWeight={n.isRoot ? 700 : 600}
-              textAnchor="middle"
-              fill={文字の色}
-            >
-              {収めた名前.text}
-            </text>
-          )}
-        </g>
+            )}
+          </g>
         );
       })}
     </g>
@@ -214,6 +257,10 @@ type LayoutNode = {
   h: number;
   tone?: Tone;
   isRoot: boolean;
+  /** 子を持たないか。 末端は枠を持たず、名前を外へ伸ばす */
+  isLeaf: boolean;
+  /** 中心の左右どちら側に置かれたか。 名前を伸ばす向きを決める */
+  side: "left" | "right";
   /** 中心からの段数 (中心が 0、 cdl#520)。 段ごとに順に伸ばすのに使う */
   depth: number;
   /** 名前を状態から解決できなかった項目に付く印 (#467) */
@@ -229,6 +276,25 @@ type LayoutEdge = {
   deferUntilComplete: boolean;
 };
 
+/**
+ * その箱が横にどこまで描かれるか (cdl#913)。
+ *
+ * **枠なしの末端は箱で測れない**。 末端は枠を持たず (#907)、名前を枠があった位置の
+ * 内側の端から **中心の反対側へ** 伸ばす。 箱の幅で測ると、短い名前の末端が実際より
+ * 外まで占めているように見え、寄せ幅がそのぶんずれる
+ * (実測 = 左の余り 21% に対し右の余り 27%)。
+ *
+ * 名前が描画域に入らない時、描く側は字を縮めてから切る。 ここで出すのは縮める前の幅 =
+ * 実際に描く幅の上限になる。 縮むのは名前が溢れる図だけで、その時も箱の幅で測るより近い。
+ */
+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 });
+  return n.side === "right" ? [起点, 起点 + 幅] : [起点 - 幅, 起点];
+}
+
 export function computeMindMapLayout(
   mindData: MindBranchPayload,
   cx: number,
@@ -251,6 +317,9 @@ export function computeMindMapLayout(
     w: rootW,
     h: rootH,
     isRoot: true,
+    // 中心は枝を持たなくても枠を描く = 図の起点なので、無いと何から広がるのかが読めない
+    isLeaf: false,
+    side: "right",
     // 中心は起点なので段数 0 (cdl#520)
     depth: 0,
     ...((mindData as { unresolved?: true }).unresolved ? { unresolved: true as const } : {}),
@@ -293,7 +362,8 @@ export function computeMindMapLayout(
   const firstCount = firstLevel.length;
   const leftCount = Math.ceil(firstCount / 2);
   const branchW = 130;
-  const branchH = 38;
+  // 箱の高さは帯の間隔から出す (cdl#913)。 決め打ちの高さは上限としてだけ残る
+  // (`BRANCH_BOX_H_MAX` / `SUB_BOX_H_MAX`)
   const subBranchW = 100;
   const subBranchH = 30;
 
@@ -316,7 +386,10 @@ 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;
+  const maxSubDepth =
+    firstLevel.length > 0
+      ? Math.max(0, ...firstLevel.map((br) => subDepthOf(br.id, new Set())))
+      : 0;
 
   // branch を root からどれだけ離すか。 深いネストがあるほど sub 世代のぶん内側に寄せる。
   const minLayer1XOffset = rootW / 2 + branchW / 2 + MIND_BOX_GAP;
@@ -335,7 +408,8 @@ export function computeMindMapLayout(
   //
   // **箱の幅を先に確保し、 余った分を間隔に回す**。 浅い図では望ましい値になり、 深い図では
   // 従来どおりまで詰まる = 箱が潰れる形は増やさない。
-  const gapRoom = maxSubDepth > 0 ? (room - branchW / 2 - maxSubDepth * MIN_SUB_W) / maxSubDepth : 0;
+  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
@@ -348,33 +422,60 @@ export function computeMindMapLayout(
       : 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);
+  const subOffset = (subDepth: number): number =>
+    subDepth <= 0 ? 0 : step1 + (subDepth - 1) * stepN;
 
   // 縦レーン。 左右それぞれの branch 群の葉数合計でレーンを割る。
   const leftBranches = firstLevel.slice(0, leftCount);
   const rightBranches = firstLevel.slice(leftCount);
   const leavesOfSide = (brs: MindBranchNode[]): number =>
-    Math.max(1, brs.reduce((sum, br) => sum + leafCountOf(br.id, new Set()), 0));
+    Math.max(
+      1,
+      brs.reduce((sum, br) => sum + leafCountOf(br.id, new Set()), 0),
+    );
   const sideLaneCount = Math.max(leavesOfSide(leftBranches), leavesOfSide(rightBranches));
-  const laneBandH = Math.min(canvasH * 0.9, sideLaneCount * (subBranchH + 14));
-  const rowGap = sideLaneCount > 1 ? laneBandH / (sideLaneCount - 1) : subBranchH + 14;
+  // 帯の高さはカードから決める (cdl#913)。 葉の数で頭打ちにすると、葉が 3 枚の図は
+  // 3 × 44 = 132 に固定され、カードが 600 あっても中身は真ん中の 132 にしか広がらない。
+  // 見本帳の実測で、放射の図は文字がカードの 13% しか覆っていなかった。
+  //
+  // **一番高い箱のぶんを先に引く**。 引かずにカードの 9 割を帯にすると、端の帯に置いた箱が
+  // カードから出て、末尾の一様縮小が効く。 縮小は横にも効くため、枝の長さまで縮む
+  // (実測 = 枝の長さが 24 を下回り `render-polish-240` が落ちた)。
+  const laneBandH = Math.max(0, canvasH - BRANCH_BOX_H_MAX);
+  const rowGap =
+    sideLaneCount > 1
+      ? Math.min(laneBandH / (sideLaneCount - 1), ROW_GAP_MAX)
+      : subBranchH + 14;
   // box 高は必ず rowGap の一定割合に収める。 加算的な floor を置くと、 leaf が多く rowGap が
   // 小さいとき floor が rowGap を超えて縦重なりする。 rowGap の 70% にすれば規模によらず gap が残る。
-  const effSubH = Math.min(subBranchH, rowGap * 0.7);
-  const effBranchH = Math.min(branchH, rowGap * 0.7);
+  //
+  // **上限を決め打ちの高さではなく別に持つ** (cdl#913)。 葉が少ない図では rowGap が広く開くので、
+  // 決め打ちを上限にすると箱だけが取り残されて間が空く。 一方で上限を外すと、葉が 1 枚の図で
+  // 箱だけが伸びる。 葉が多い図の挙動 (rowGap の 70%) は変えない。
+  const effSubH = Math.min(SUB_BOX_H_MAX, rowGap * 0.7);
+  const effBranchH = Math.min(BRANCH_BOX_H_MAX, rowGap * 0.7);
   // canvas の上下端 (full-node 座標)。 lane はこの内側に収める。
-  const laneTop = cy - canvasH / 2 + effSubH / 2;
-  const laneBottom = cy + canvasH / 2 - effSubH / 2;
+  // 引くのは **高いほうの箱** の半分 = 第 1 階層の箱は末端より高く、末端に合わせると端で出る
+  const 端の余り = Math.max(effSubH, effBranchH) / 2;
+  const laneTop = cy - canvasH / 2 + 端の余り;
+  const laneBottom = cy + canvasH / 2 - 端の余り;
+  /**
+   * 帯の中の縦位置 (cdl#913)。
+   *
+   * **実際に使う高さで中央に置く**。 帯の上端から置くと、間隔に上限が効いた図で
+   * 中身が上に寄る = 帯は広いのに使うのは一部、という形になる。
+   */
+  const 使う高さ = (sideLaneCount - 1) * rowGap;
   const laneY = (lane: number): number => {
     if (sideLaneCount <= 1) return cy;
-    const y = cy - laneBandH / 2 + lane * rowGap;
+    const y = cy - 使う高さ / 2 + lane * rowGap;
     return Math.max(laneTop, Math.min(laneBottom, y));
   };
 
   // scale 後の root 半幅を使う (最終スケールで root も縮む)。
-  const rootEdgeXFor = (isLeft: boolean): number => {
+  const rootEdgeXFor = (isLeft: boolean, 中心のx: number): number => {
     const half = nodeHalfW.get(mindData.rootId) ?? rootW / 2;
-    return cx + (isLeft ? -half : half);
+    return 中心のx + (isLeft ? -half : half);
   };
 
   // subtree を再帰配置する。 leaf は次のレーン、 親は子レーンの中央。 x は深さで決まる。
@@ -400,7 +501,14 @@ export function computeMindMapLayout(
       laneRef.cursor += 1;
     } else {
       const ys = kids.map((k, i) =>
-        placeSubtree(k, subDepth + 1, isLeft, myTone ?? MIND_TONES[i % MIND_TONES.length]!, placed, laneRef),
+        placeSubtree(
+          k,
+          subDepth + 1,
+          isLeft,
+          myTone ?? MIND_TONES[i % MIND_TONES.length]!,
+          placed,
+          laneRef,
+        ),
       );
       y = (ys[0]! + ys[ys.length - 1]!) / 2;
     }
@@ -417,6 +525,8 @@ export function computeMindMapLayout(
       depth: subDepth + 1,
       tone: myTone,
       isRoot: false,
+      isLeaf: kids.length === 0,
+      side: isLeft ? "left" : "right",
       ...((node as { unresolved?: true }).unresolved ? { unresolved: true as const } : {}),
     });
     nodePos.set(node.id, { x, y });
@@ -427,7 +537,10 @@ export function computeMindMapLayout(
   };
 
   const placeSide = (brs: MindBranchNode[], isLeft: boolean, toneBase: number): void => {
-    const laneRef = { cursor: 0 };
+    // 葉の少ない側を帯の中で中央へ寄せる (cdl#913)。 0 番から置くと、左が 3 枚で右が 1 枚の
+    // 図で右の 1 枚が帯の上端に付き、中心の箱と高さが揃わない
+    const 葉数 = brs.reduce((sum, br) => sum + leafCountOf(br.id, new Set()), 0);
+    const laneRef = { cursor: Math.max(0, (sideLaneCount - 葉数) / 2) };
     const placed = new Set<string>();
     brs.forEach((br, i) => {
       const tone = br.tone ?? MIND_TONES[(toneBase + i) % MIND_TONES.length]!;
@@ -464,6 +577,36 @@ export function computeMindMapLayout(
     }
   }
 
+  // 全体を横中央へ寄せる (cdl#913)。
+  //
+  // 中心の箱はカードの真ん中に置いているが、左右で段数が違うと伸びた側に絵の重心が寄る。
+  // 左が 2 段で右が 1 段の図では、右にだけ余りが残る。
+  //
+  // **箱を置き終えた後に、塊ごと動かす**。 置く時に寄せると、寄せ幅が置く順に依存する。
+  // 動かすのは横だけ = 縦は帯が既に中央で、動かすと上下の釣り合いが崩れる。
+  {
+    let 左端 = Number.POSITIVE_INFINITY;
+    let 右端 = Number.NEGATIVE_INFINITY;
+    for (const n of nodes) {
+      const [l, r] = 描く横の端(n);
+      左端 = Math.min(左端, l);
+      右端 = Math.max(右端, r);
+    }
+    // 整数に丸める。 端数を足すと、枝の長さが座標の差から出るぶん丸め誤差が乗る
+    // (実測 = 24 であるべき枝が 23.999999999999943 になり `render-polish-240` が落ちた)。
+    // 寄せは見た目の調整なので、1px 未満の精度は要らない
+    const 寄せ = Math.round((cx - 左端 - (右端 - cx)) / 2);
+    if (Number.isFinite(寄せ) && 寄せ !== 0) {
+      for (const n of nodes) {
+        n.x += 寄せ;
+        nodePos.set(n.id, { x: n.x, y: n.y });
+      }
+    }
+  }
+
+  /** 中心の箱の横位置。 横中央へ寄せた後の値を使う = 寄せる前だと枝が箱の辺から離れる */
+  const rootX = nodePos.get(mindData.rootId)?.x ?? cx;
+
   // 枝の段数は「その枝の先 (子)」 の段数にする (cdl#520)。 箱を置き終えた後に引く
   const 段数 = new Map(nodes.map((n) => [n.id, n.depth]));
 
@@ -477,7 +620,7 @@ export function computeMindMapLayout(
     const childDepth = 段数.get(br.id) ?? 1;
     const parentDepth = 段数.get(br.parent) ?? 0;
     if (br.parent === mindData.rootId) {
-      const startX = rootEdgeXFor(isLeft);
+      const startX = rootEdgeXFor(isLeft, rootX);
       const endX = childPos.x + (isLeft ? childHalfW : -childHalfW);
       edges.push({
         d: makeCurve(startX, cy, endX, childPos.y, isLeft),
@@ -508,7 +651,6 @@ function makeCurve(x1: number, y1: number, x2: number, y2: number, _leftBound: b
   return `M ${x1} ${y1} C ${midX} ${y1}, ${midX} ${y2}, ${x2} ${y2}`;
 }
 
-
 function toneColor(tone: Tone | undefined, alpha = 1): string {
   const hex = tone ? TONE[tone] : TONE.accent;
   if (alpha >= 1) return hex;