@cardenelabs/cdl 0.121.0 → 0.123.0

package/src/kinds/tree.tsx

@@ -1,8 +1,15 @@
 import type { JSX } from "react";
-import type { LaidNode, TreeNodePayload } from "../types";
+import type { CdlTextMetrics, LaidNode, TreeNodePayload } from "../types";
 import { TONE } from "../render/tone";
 import { resolveTreeData } from "../render/payload-binding";
-import { 使える幅, 幅に収める, 箱に積む, type 積む行, type 積んだ行 } from "../kinds/box-lines";
+import {
+  使える幅,
+  幅に収める,
+  箱に積む,
+  箱の字を測る,
+  type 積む行,
+  type 積んだ行,
+} from "../kinds/box-lines";
 import { measureTextWidth } from "../layout/text-width";
 import { 進みを畳む, 伸ばすdash, 段の伸び } from "./draw-progress";
 
@@ -157,10 +164,16 @@ export const 木の枝の太さ = (段: number): number => Math.max(1.1, 2.6 -
 export function 木の中身(
   node: LaidNode,
   stateValues: Record<string, string> = {},
+  textMetrics: CdlTextMetrics = "proportional",
 ): { nodes: LayoutNode[]; edges: LayoutEdge[] } {
   // 名前は状態を読める (#467)。 解決できない名前は書いたまま残して印を付ける
   const treeNodes = resolveTreeData(node.treeData ?? [], stateValues);
-  return computeTreeLayout(treeNodes, node.w - PAD_LEFT - PAD_RIGHT, node.h - PAD_TOP - PAD_BOTTOM);
+  return computeTreeLayout(
+    treeNodes,
+    node.w - PAD_LEFT - PAD_RIGHT,
+    node.h - PAD_TOP - PAD_BOTTOM,
+    textMetrics,
+  );
 }
 
 /**
@@ -182,6 +195,7 @@ export function TreeNode({
   stateValues = {},
   drawing = false,
   progress = 1,
+  textMetrics = "proportional",
 }: {
   node: LaidNode;
   active: boolean;
@@ -190,12 +204,15 @@ export function TreeNode({
   drawing?: boolean;
   /** phase の進み (0→1)。 `drawing` が true の時だけ読む */
   progress?: number;
+  /** 図全体の字幅規則。省略時は比例幅 */
+  textMetrics?: CdlTextMetrics;
 }): JSX.Element {
   const x0 = node.cx - node.w / 2;
   const y0 = node.cy - node.h / 2;
   const gradientId = `tree-root-grad-${node.id}`;
 
-  const layout = 木の中身(node, stateValues);
+  const layout = 木の中身(node, stateValues, textMetrics);
+  const 測る = 箱の字を測る(textMetrics);
 
   /**
    * 枝がどこまで伸びたか (0..1、 cdl#520)。 描く指定が無ければ常に 1 = 全部出ている。
@@ -273,7 +290,7 @@ export function TreeNode({
         const isRoot = n.depth === 0;
         // 補足は箱の中の 2 行目に出す (#471)。 箱の高さは変えないため、 入らない時は落ちる
         const 材料 = 木の行(n);
-        const 行 = 箱に積む(材料, n.w, n.h);
+        const 行 = 箱に積む(材料, n.w, n.h, 測る);
         // **判定は行数でなく「補足を渡したか」 で行う**。 行数で見ると、 箱が低くて補足が落ちた時に
         // 従来の 1 行の経路へ戻り、 幅で切っていない名前が箱から横にはみ出す (#471 Round 1)
         const 補足あり = (n.subtitle ?? "").trim() !== "";
@@ -283,7 +300,7 @@ export function TreeNode({
         const 名前 = 材料[0]!;
         const 収めた名前 = 補足あり
           ? undefined
-          : 幅に収める(名前.text, 名前.fontSize, 使える幅(n.w));
+          : 幅に収める(名前.text, 名前.fontSize, 使える幅(n.w), 測る);
         return (
           <g
             key={`n-${n.id}`}
@@ -395,6 +412,7 @@ export function computeTreeLayout(
   treeNodes: TreeNodePayload[],
   canvasW: number,
   canvasH: number,
+  textMetrics: CdlTextMetrics = "proportional",
 ): {
   nodes: LayoutNode[];
   edges: LayoutEdge[];
@@ -480,7 +498,7 @@ export function computeTreeLayout(
     const 名前 = 材料[0]!;
     // `使える幅` が引く左右の余白を足し戻す = 余白の値をここに書き写さない
     const 要る =
-      measureTextWidth(名前.text, { fontSize: 名前.fontSize, fontWeight: 600 }) +
+      measureTextWidth(名前.text, { fontSize: 名前.fontSize, fontWeight: 600, textMetrics }) +
       (nodeW - 使える幅(nodeW));
     return Math.min(Math.max(要る, nodeW), slotW * 0.92);
   };

package/src/layout/collisions.ts

@@ -1,4 +1,4 @@
-import type { BBox, LaidEdge, LaidLane, LaidNode } from "../types";
+import type { BBox, CdlTextMetrics, LaidEdge, LaidLane, LaidNode } from "../types";
 import { CHAIN_SHIFT_MAX_ACCUMULATED, computeLabelBBoxWorld, EDGE_STUB_OUT, hasRenderedLabel, LABEL_TO_PATH_CLEARANCE, requiredNearClearance } from "./spec";
 import { DIST_LABEL_PATH_MAX } from "./clearance-constants";
 import { footerShapeDrops } from "./footer-shape";
@@ -22,7 +22,12 @@ const NEAR_MISS_MARGIN = LANE_LABEL_CLEARANCE_MARGIN;
 /**
  * 全要素の AABB を集約。 engine が「キャンバスに何があるか」 を全部把握する SSOT。
  */
-export function collectBBoxes(lanes: LaidLane[], nodes: LaidNode[], edges: LaidEdge[]): BBox[] {
+export function collectBBoxes(
+  lanes: LaidLane[],
+  nodes: LaidNode[],
+  edges: LaidEdge[],
+  textMetrics: CdlTextMetrics = "proportional",
+): BBox[] {
   const out: BBox[] = [];
 
   for (const lane of lanes) {
@@ -32,7 +37,7 @@ export function collectBBoxes(lanes: LaidLane[], nodes: LaidNode[], edges: LaidE
       id: lane.id,
       x: lane.x + 16,
       y: lane.y + 8,
-      w: measureTextWidth(lane.label, { fontSize: 20, letterSpacing: 2 }) + 24,
+      w: measureTextWidth(lane.label, { fontSize: 20, letterSpacing: 2, textMetrics }) + 24,
       h: 28,
     });
   }
@@ -62,7 +67,7 @@ export function collectBBoxes(lanes: LaidLane[], nodes: LaidNode[], edges: LaidE
     // だったが、 render 側は boxH = 68 + yOffset shifted で描画するため実測 bbox と layout 予測が
     // 乖離、 near-collision detection の偽陰性を生んでいた。 本 SSOT 統一で render 実 rect 位置と
     // 一致する。
-    const bbox = computeLabelBBoxWorld(e);
+    const bbox = computeLabelBBoxWorld(e, textMetrics);
     out.push({
       kind: "edge-label",
       id: e.id,
@@ -688,7 +693,7 @@ export function detectCollisions(
 /**
  * path d 文字列を、 描画する線分の列に分解
  *
- * 曲線 (Q / C) は端点を結ぶ弦に落とす。 交差判定には十分だが、 弦は実際の曲線が通る場所とは
+ * 曲線 (Q / C / A) は端点を結ぶ弦に落とす。 交差判定には十分だが、 弦は実際の曲線が通る場所とは
  * ずれる。 「この線分は本当に真っ直ぐか」 を知る必要がある呼出側のために、 由来の command
  * (`cmd`) と制御点 (`ctrl`、 曲線のみ) を併せて返す。 弦を直線として扱うと、 端点が同じ高さで
  * 大きく膨らむ曲線を「水平な直線」 と誤認する。
@@ -700,7 +705,7 @@ export function extractPathSegments(
   y1: number;
   x2: number;
   y2: number;
-  cmd: "L" | "Q" | "C";
+  cmd: "L" | "Q" | "C" | "A";
   ctrl?: Array<{ x: number; y: number }>;
 }> {
   const segs: Array<{
@@ -708,10 +713,10 @@ export function extractPathSegments(
     y1: number;
     x2: number;
     y2: number;
-    cmd: "L" | "Q" | "C";
+    cmd: "L" | "Q" | "C" | "A";
     ctrl?: Array<{ x: number; y: number }>;
   }> = [];
-  const commandRegex = /([MLCQZmlcqz])([^MLCQZmlcqz]*)/g;
+  const commandRegex = /([MLCQAZmlcqaz])([^MLCQAZmlcqaz]*)/g;
   let cur: { x: number; y: number } = { x: 0, y: 0 };
   let m: RegExpExecArray | null;
   while ((m = commandRegex.exec(d)) !== null) {
@@ -719,7 +724,7 @@ export function extractPathSegments(
     const args = (m[2] ?? "").trim().split(/[\s,]+/).filter(Boolean).map(parseFloat);
     // 引数が足りない command は読み飛ばす。 `args[n]!` で埋めると undefined が座標に入り、
     // 以降の segment が全て NaN になる = 距離判定が黙って対象外になる (#370)。
-    const need = cmd === "M" || cmd === "L" ? 2 : cmd === "Q" ? 4 : cmd === "C" ? 6 : 0;
+    const need = cmd === "M" || cmd === "L" ? 2 : cmd === "Q" ? 4 : cmd === "C" ? 6 : cmd === "A" ? 7 : 0;
     if (need > 0 && (args.length < need || !args.slice(0, need).every(Number.isFinite))) continue;
     if (cmd === "M") {
       cur = { x: args[0]!, y: args[1]! };
@@ -741,13 +746,17 @@ export function extractPathSegments(
         ctrl: [{ x: args[0]!, y: args[1]! }, { x: args[2]!, y: args[3]! }],
       });
       cur = next;
+    } else if (cmd === "A") {
+      const next = { x: args[5]!, y: args[6]! };
+      segs.push({ x1: cur.x, y1: cur.y, x2: next.x, y2: next.y, cmd: "A" });
+      cur = next;
     }
   }
   return segs;
 }
 
 /**
- * 曲線 (Q / C) を、 実際に描かれる線に沿った折れ線に開く。
+ * 曲線 (Q / C) を、 実際に描かれる線に沿った折れ線に開く。円弧 (A) は弦のまま返す。
  *
  * `extractPathSegments` は曲線を端点どうしの弦に落とす。 交差判定はそれで足りるが、
  * 「線からどれだけ離れているか」 を測る用途では弦は使えない = 弦は描かれていないため、
@@ -788,7 +797,7 @@ export function extractPathSegments(
  * 無い形を勝手に作ることになる。
  *
  * @param segs `extractPathSegments()` の出力
- * @returns 直線のみからなる segment 列。 `L` はそのまま。 曲線は `FLATTEN_MIN_DIVISIONS` 以上
+ * @returns 直線のみからなる segment 列。 `L` と `A` の弦はそのまま。`Q` / `C` は `FLATTEN_MIN_DIVISIONS` 以上
  *   `FLATTEN_MAX_DIVISIONS` 以下の本数に開く。 誤差が `FLATTEN_TOLERANCE` 以下に収まるのは、
  *   必要な分割数が上限以下に収まる曲線 (`dev ≤ 4 · 許容差 · 上限²`) に限る。 上限を超える
  *   曲線では保証されず、 許容差を超えることがある (幅 4e7 の対称な弧では式の上限が 0.596
@@ -804,7 +813,7 @@ export function flattenPathSegments(
     y1: number;
     x2: number;
     y2: number;
-    cmd: "L" | "Q" | "C";
+    cmd: "L" | "Q" | "C" | "A";
     ctrl?: ReadonlyArray<{ x: number; y: number }>;
   }>,
 ): Array<{ x1: number; y1: number; x2: number; y2: number }> {
@@ -1345,6 +1354,7 @@ export function resolveEdgeLabelOverlapsWithChain(
   fixedObstacles: BBox[],
   minClearance = 16,
   maxIter = 20,
+  textMetrics: CdlTextMetrics = "proportional",
 ): LaidEdge[] {
   if (edges.length === 0) return edges;
 
@@ -1352,7 +1362,7 @@ export function resolveEdgeLabelOverlapsWithChain(
   // 本 function / render/edges.tsx / predict-bbox.ts 4 箇所の drift を解消)。 shift 探索中の
   // offsetX / offsetY 追加は label 位置探索の temporal offset なので helper 呼出後に加算する。
   const labelBBox = (e: LaidEdge, offsetX: number, offsetY: number): BBox => {
-    const base = computeLabelBBoxWorld(e);
+    const base = computeLabelBBoxWorld(e, textMetrics);
     return {
       kind: "edge-label",
       id: e.id,
@@ -1540,6 +1550,7 @@ export function resolveEdgeLabelOverlapsWithChainAndPropagate(
    * などで label が sibling path 近傍 (LABEL_INIT_CLEARANCE 26) にある正常状態を誤検知しない。
    */
   pathLabelClearance = LABEL_TO_PATH_CLEARANCE,
+  textMetrics: CdlTextMetrics = "proportional",
 ): {
   edges: LaidEdge[];
   nodeShifts: Map<string, { dx: number; dy: number }>;
@@ -1560,7 +1571,7 @@ export function resolveEdgeLabelOverlapsWithChainAndPropagate(
 
   // label bbox 生成 helper (spec.ts SSOT、 shift offset 込み)。
   const labelBBox = (e: LaidEdge, offsetX: number, offsetY: number): BBox => {
-    const base = computeLabelBBoxWorld(e);
+    const base = computeLabelBBoxWorld(e, textMetrics);
     return {
       kind: "edge-label",
       id: e.id,
@@ -2357,16 +2368,17 @@ export function resolveEdgeLabelOverlapsWithChainAndPropagate(
 }
 
 /** 札の逃がし先を測るのに使う、 線の区間と外接矩形。 同じ図の中で使い回す (#810)。 */
-interface 線の測り方 {
+export interface 線の測り方 {
   readonly 区間: (id: string, d: string) => Seg[];
   readonly 遠い: (box: BBox, edgeId: string, d: string, 余裕: number) => boolean;
 }
 
 /**
- * 線の測り方を作る。 逃がし pass と、 門が「なぜ動かせなかったか」 を説明する側
- * (`札が動けない理由`) の両方が使う = 2 箇所で別に書くと、 片方だけ直してずれる。
+ * 線の測り方を作る。 逃がし pass、 門が「なぜ動かせなかったか」 を説明する側
+ * (`札が動けない理由`)、 終点をずらした線の札の追従 (`followLabelsToFannedTails`、 #1002) が
+ * 同じ測り方を引く = どれかに別の測り方を書くと、 置けるかの判断がずれる。
  */
-function 線の測り方を作る(): 線の測り方 {
+export function 線の測り方を作る(): 線の測り方 {
   /*
    * 線の区間は **曲線を開いた形** で持つ (`detectCollisions` の札 branch と同じ)。
    *
@@ -2453,7 +2465,7 @@ export interface 札の移動を塞ぐ相手 {
 }
 
 /** 札を動かす判定に使う、 図の中の相手 */
-interface 札の周り {
+export interface 札の周り {
   readonly 箱たち: readonly BBox[];
   readonly labels: readonly BBox[];
   readonly edges: readonly LaidEdge[];
@@ -2464,10 +2476,11 @@ interface 札の周り {
 /**
  * 札 1 つを動かした先が、 いまより近づく相手を作らないか。 作るなら最初の 1 つを返す。
  *
- * 逃がし pass の `安全か` と、 門の説明 (`札が動けない理由`) が同じものを引く (#810)。
- * 2 箇所で別に書くと、 「pass は動かせないのに説明は動かせると言う」 ずれが生まれる。
+ * 逃がし pass の `安全か`、 門の説明 (`札が動けない理由`)、 終点をずらした線の札の追従
+ * (`followLabelsToFannedTails`、 #1002) が同じものを引く (#810)。 別に書くと、 追従で置いた札を
+ * 逃がし pass が押し直すか、 「pass は動かせないのに説明は動かせると言う」 ずれが生まれる。
  */
-function 札の移動を塞ぐ相手を探す(
+export function 札の移動を塞ぐ相手を探す(
   周り: 札の周り,
   label: BBox,
   行き先: BBox,
@@ -2591,13 +2604,18 @@ export function 札が動けない理由(
   相手: BBox,
   edges: readonly LaidEdge[],
   obstacles: readonly BBox[],
+  textMetrics: CdlTextMetrics = "proportional",
 ): string | null {
   const edgeById = new Map(edges.map((e) => [e.id, e] as const));
   const 自分 = edgeById.get(labelId);
   if (!自分) return null;
   const labels: BBox[] = edges
     .filter((e) => e.label?.trim() || e.sub?.trim())
-    .map((e) => ({ kind: "edge-label" as const, id: e.id, ...computeLabelBBoxWorld(e) }));
+    .map((e) => ({
+      kind: "edge-label" as const,
+      id: e.id,
+      ...computeLabelBBoxWorld(e, textMetrics),
+    }));
   const label = labels.find((l) => l.id === labelId);
   if (!label) return null;
   const 測り方 = 線の測り方を作る();
@@ -2649,10 +2667,14 @@ export function 札が動けない理由(
  *
  * ## なぜ最終 pass が要るか
  *
- * `resolveEdgeLabelOverlapsWithChainAndPropagate` は経路を動かす 4 つの pass
+ * `resolveEdgeLabelOverlapsWithChainAndPropagate` の chain 伝搬後に、 経路を動かす 4 つの pass
  * (`bowSharedStraightPaths` / `pullOutgoingFirstCorner` / `fanIncomingEndpoints` /
- * `separateSharedStraightRuns`) の **前** に走る。 札の初期位置は経路から決まるため、
- * 後の pass が経路を動かすと札も一緒に動く。 動いた後を見る者が誰も居なかった。
+ * `separateSharedStraightRuns`) が走る。 4 つとも経路を動かすが、 札も動かすのは
+ * `pullOutgoingFirstCorner` だけで、 動かす区間に一番近い札に限る (`edges.ts` の `labelも動かす`)。
+ *
+ * `bowSharedStraightPaths` と `separateSharedStraightRuns` は札を動かさず、 `fanIncomingEndpoints` が
+ * 残した札は `followLabelsToFannedTails` が追従させる。 追従も `札の移動を塞ぐ相手を探す` で
+ * 置けるかを決める = 別の判定で余白を割る位置へ置くと、 この pass が同じ札を押し直す (#1002)。
  *
  * 0.30.0 で `pullOutgoingFirstCorner` (#651) と `fanIncomingEndpoints` (#649) が経路を
  * 大きく動かすようになり、 消費側の見本帳で札が 11 件動いた (実測 = 最大 217 world)。
@@ -2684,6 +2706,7 @@ export function resolveLabelClearanceAfterPathPasses(
   edges: LaidEdge[],
   obstacles: BBox[],
   maxIter = 8,
+  textMetrics: CdlTextMetrics = "proportional",
 ): LaidEdge[] {
   if (edges.length === 0) return edges;
 
@@ -2707,7 +2730,7 @@ export function resolveLabelClearanceAfterPathPasses(
     const out: BBox[] = [];
     for (const e of edges) {
       if (!labeledIds.has(e.id)) continue;
-      const base = computeLabelBBoxWorld(e);
+      const base = computeLabelBBoxWorld(e, textMetrics);
       const s = getShift(e.id);
       out.push({ kind: "edge-label", id: e.id, x: base.x + s.dx, y: base.y + s.dy, w: base.w, h: base.h });
     }
@@ -2886,4 +2909,3 @@ function applyEdgeLabelAndPathShifts(
     return next;
   });
 }
-

package/src/layout/curve-path.ts

@@ -0,0 +1,126 @@
+import type { CdlEdge, CdlTextMetrics, LaidNode, Side } from "../types";
+import { computeLabelBoxW, EDGE_STUB_OUT, labelPathClearanceHorizontal, labelPillH } from "./spec";
+
+type 箱 = Pick<LaidNode, "cx" | "cy" | "w" | "h">;
+
+type 曲線の結果 = {
+  d: string;
+  fromSide: Side;
+  toSide: Side;
+  labelX: number;
+  labelY: number;
+  labelAnchor: "middle";
+};
+
+/** `routePath` が横の直線を選ぶ値と揃え、既存の直線判定との境を増やさない。 */
+export const SAME_HEIGHT_THRESHOLD = 1;
+
+/**
+ * 2 つの箱を、両端で水平になる線で結ぶ。
+ *
+ * 行き先が左右へ離れていれば向かい合う左右の辺を使い、横の範囲が重なる時は両方の右辺を
+ * 使う。 2 点が同じ高さなら曲線にしても形が変わらないため、余分な制御点を持たない直線にする。
+ * 張り出しには `EDGE_STUB_OUT` の下限を置く。 制御点が端点に重なって接線が縦へ倒れるのを防ぎ、
+ * 箱を出てすぐ曲がらないことで、どの箱から出た線かを読めるようにするため。
+ *
+ * 札は曲線の中点から接線の法線方向へ離す。 線に沿ってずらすより、線と札の間の隙間を直接
+ * 保てるため。 この道筋は書き手が形を選ぶためのもので、途中の箱は避けない。
+ */
+export function curvePath(
+  from: 箱,
+  to: 箱,
+  edge?: Pick<CdlEdge, "label" | "sub" | "style" | "overlay">,
+  labelMarginExtra = 0,
+  textMetrics: CdlTextMetrics = "proportional",
+): 曲線の結果 {
+  const fromLeft = from.cx - from.w / 2;
+  const fromRight = from.cx + from.w / 2;
+  const toLeft = to.cx - to.w / 2;
+  const toRight = to.cx + to.w / 2;
+
+  let fromSide: Side;
+  let toSide: Side;
+  let x1: number;
+  let x2: number;
+
+  if (toLeft >= fromRight) {
+    fromSide = "right";
+    toSide = "left";
+    x1 = fromRight;
+    x2 = toLeft;
+  } else if (toRight <= fromLeft) {
+    fromSide = "left";
+    toSide = "right";
+    x1 = fromLeft;
+    x2 = toRight;
+  } else {
+    fromSide = "right";
+    toSide = "right";
+    x1 = fromRight;
+    x2 = toRight;
+  }
+
+  const y1 = from.cy;
+  const y2 = to.cy;
+  const sameHeight = Math.abs(y2 - y1) < SAME_HEIGHT_THRESHOLD;
+
+  let d: string;
+  let midX: number;
+  let midY: number;
+  let tangentX: number;
+  let tangentY: number;
+
+  if (sameHeight) {
+    d = `M ${x1} ${y1} L ${x2} ${y2}`;
+    midX = (x1 + x2) / 2;
+    midY = (y1 + y2) / 2;
+    tangentX = x2 - x1;
+    tangentY = y2 - y1;
+  } else {
+    let c1x: number;
+    let c2x: number;
+    if (fromSide !== toSide) {
+      const direction = x2 > x1 ? 1 : -1;
+      const bulge = Math.max(Math.abs(x2 - x1) / 2, EDGE_STUB_OUT);
+      c1x = x1 + direction * bulge;
+      c2x = x2 - direction * bulge;
+    } else {
+      const bulgeX = Math.max(x1, x2) + EDGE_STUB_OUT;
+      c1x = bulgeX;
+      c2x = bulgeX;
+    }
+    d = `M ${x1} ${y1} C ${c1x} ${y1}, ${c2x} ${y2}, ${x2} ${y2}`;
+    midX = (x1 + 3 * c1x + 3 * c2x + x2) / 8;
+    midY = (y1 + 3 * y1 + 3 * y2 + y2) / 8;
+    tangentX = x2 + c2x - c1x - x1;
+    tangentY = y2 + y2 - y1 - y1;
+  }
+
+  if (edge?.overlay) {
+    return { d, fromSide, toSide, labelX: midX, labelY: midY, labelAnchor: "middle" };
+  }
+
+  const tangentLength = Math.hypot(tangentX, tangentY);
+  let normalX = tangentY / tangentLength;
+  let normalY = -tangentX / tangentLength;
+  if (normalY > Number.EPSILON || (Math.abs(normalY) <= Number.EPSILON && normalX < 0)) {
+    normalX *= -1;
+    normalY *= -1;
+  }
+
+  const labelW = computeLabelBoxW(edge?.label, edge?.sub, textMetrics);
+  const labelH = labelPillH(edge?.sub);
+  const distance =
+    labelPathClearanceHorizontal(edge) +
+    (Math.abs(normalX) * labelW + Math.abs(normalY) * labelH) / 2 +
+    labelMarginExtra;
+
+  return {
+    d,
+    fromSide,
+    toSide,
+    labelX: midX + normalX * distance,
+    labelY: midY + normalY * distance,
+    labelAnchor: "middle",
+  };
+}