@cardenelabs/cdl 0.64.0 → 0.65.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cardenelabs/cdl",
-  "version": "0.64.0",
+  "version": "0.65.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/layout/edges.ts

@@ -18,9 +18,10 @@ import {
   EDGE_STUB_OUT,
   hasRenderedLabel,
   labelInitClearance,
-  LANE_BORDER_CLEARANCE_TOL,
+  laneVerticalRange,
   labelPathClearanceHorizontal,
   labelPillH,
+  rectCrossesLaneBorder,
   spreadWithMinimalShift,
   PARALLEL_EDGE_BOW,
   SYMMETRIC_PAIR_SHIFT,
@@ -47,6 +48,25 @@ const VERTICAL_DETOUR_CORNER = 14;
 export function verticalCornerDir(from: number, to: number): 1 | -1 {
   return to < from ? -1 : 1;
 }
+
+/**
+ * 角の丸みを、その角が使える長さで頭打ちにする (`#865`)。
+ *
+ * 丸めた角は「手前で半径だけ直線を止め、弧で半径だけ先へ抜ける」 形で作る。 走りがその分を
+ * 持っていないと、止めた点が走りの向こう側へ回り込み、直線が逆走して角の外に突起が出る。
+ *
+ * `走り` には **その走りを 1 つの角が使える長さ** を渡す。 両端の 2 角で使う走り (L 字の縦)
+ * は半分を渡し、片端の 1 角しか使わない走り (L 字の横) はそのまま渡す。
+ *
+ * 0 を返す時は丸める余地が無い。 呼び出し側は弧の切り口が角そのものに重なった形を出すので、
+ * 見た目は折れ線のまま繋がる。 `verticesToPath` が同じ規則を別の経路で持っている。
+ *
+ * 走りの向きは見ない = 経路は右にも左にも上にも下にも走るため、呼び出し側は符号付きの差を
+ * そのまま渡せる。 返り値が負にならないのは、半径を負で呼ばない限り長さが下限になるため。
+ */
+export function cornerRadiusFor(半径: number, ...走り: readonly number[]): number {
+  return Math.min(半径, ...走り.map((v) => Math.abs(v)));
+}
 /** 縦 detour が source から曲がるまで直進する距離 (world unit)。 EDGE_STUB_OUT を上回る。 */
 const VERTICAL_DETOUR_EXIT = 45;
 
@@ -172,6 +192,8 @@ export function layoutEdges(diag: CdlDiagram, nodes: LaidNode[], lanes: LaidLane
     (diag.viewport?.labelMargin ?? diag.viewport?.gap ?? DEFAULT_LABEL_MARGIN) - DEFAULT_LABEL_MARGIN;
   const nmap = new Map(nodes.map((n) => [n.id, n]));
   const lmap = new Map(lanes.map((l) => [l.id, l]));
+  // label が lane の枠線を跨ぐかを見る 2 か所 (左への迂回と label の反転) が使う縦の範囲 (#863)。
+  const laneRangeById = new Map(lanes.map((l) => [l.id, laneVerticalRange(l, nodes)]));
 
   // canvas pivot 新 spec (dragon canvas pivot spec §layout-role-conversion)。
   // posX1 / posY1 / posX2 / posY2 全て set 済 edge は「user が固定した絶対 path」 = 直線 path
@@ -614,14 +636,12 @@ export function layoutEdges(diag: CdlDiagram, nodes: LaidNode[], lanes: LaidLane
     const pill = { x: centerX - boxW / 2, y: (exitY + returnY) / 2 - boxH / 2, w: boxW, h: boxH };
     if (others.some((n) => rectsOverlap(pill, nodeRect(n)))) return true;
 
-    // 発着 lane の枠線は跨いでよい (visual-validate の lane-border-clearance と同一規約)。
+    // 発着 lane の枠線は跨いでよい。 跨ぐかは visual-validate の lane-border-clearance と同じ関数で見る。
     const endpointLanes = new Set(
       nodes.filter((n) => n.id === c.from || n.id === c.to).map((n) => n.lane),
     );
     return lanes.some(
-      (l) =>
-        !endpointLanes.has(l.id) &&
-        (crossesVerticalLine(pill, l.x) || crossesVerticalLine(pill, l.x + l.width)),
+      (l) => !endpointLanes.has(l.id) && rectCrossesLaneBorder(pill, l, laneRangeById.get(l.id)) !== undefined,
     );
   };
 
@@ -968,13 +988,13 @@ export function layoutEdges(diag: CdlDiagram, nodes: LaidNode[], lanes: LaidLane
         nodes.reduce((acc, n) => Math.min(acc, rectGap(box, nodeRect(n))), Infinity);
       if (minNodeGap(alt) < Math.min(CLEARANCE_NODE_LABEL, minNodeGap(cur)) - 1e-6) continue;
 
-      // 発着 lane の枠線は跨いでよい (visual-validate の lane-border-clearance と同一規約)。
+      // 発着 lane の枠線は跨いでよい。 跨ぐかは visual-validate の lane-border-clearance と同じ関数で見る。
       const endpointLanes = new Set(
         [laneOfNode.get(r.e.from), laneOfNode.get(r.e.to)].filter((v): v is string => v !== undefined),
       );
       const crossesLaneBorder = lanes.some((l) => {
         if (endpointLanes.has(l.id)) return false;
-        return crossesVerticalLine(alt, l.x) || crossesVerticalLine(alt, l.x + l.width);
+        return rectCrossesLaneBorder(alt, l, laneRangeById.get(l.id)) !== undefined;
       });
       if (crossesLaneBorder) continue;
 
@@ -1465,14 +1485,6 @@ function segmentsBBox(segs: Array<{ x1: number; y1: number; x2: number; y2: numb
   return { x: minX, y: minY, w: maxX - minX, h: maxY - minY };
 }
 
-/**
- * rect が縦線 x = lineX を跨ぐか。 `visual-validate` の lane-border-clearance と同一規約で、
- * 端が線に触れるだけ (許容差 LANE_BORDER_CLEARANCE_TOL 以内) は跨いだ扱いにしない。
- */
-function crossesVerticalLine(rect: Rect, lineX: number): boolean {
-  return rect.x < lineX - LANE_BORDER_CLEARANCE_TOL && rect.x + rect.w > lineX + LANE_BORDER_CLEARANCE_TOL;
-}
-
 function distributeBySides(
   list: Array<{
     e: CdlEdge;
@@ -1940,6 +1952,13 @@ function routePath(
         iter++;
       }
     }
+    // 角の丸みは `midX` が決まってから頭打ちにする (`#865`)。 上の繰り返しが札を避けて `midX` を
+    // 中央から動かすため、中央のつもりで先に計算すると、動いた後の横の走りを測り損ねる。
+    //
+    // 縦の走りは両端の 2 角で使うので半分を渡し、横の走りは片端の 1 角しか使わないのでそのまま
+    // 渡す。 頭打ちにしないと、中心の高さの差が 28 (丸み 14 の 2 倍) より近い対で縦の走りが
+    // 逆走する = 実測で 506 → 516 の対が `500 520` から `500 502` へ 18 戻る形を出していた。
+    const lCorner = cornerRadiusFor(corner, (B.y - A.y) / 2, midX - A.x, B.x - midX);
     // label 初期位置 = L 字 corner の垂直 segment 中点、 A.y と B.y の中間 高さ (routing v6)。
     // 旧実装は labelX=(A.x+midX)/2, labelY=A.y の水平 segment 上に置いていたが、 label 幅の広い
     // edge (幅 230px 等) では A 側 node bbox に食い込んで overlap 発生 (rollback pattern e3 の
@@ -1997,10 +2016,10 @@ function routePath(
     // enter 水平 (539.11→400) 139 world、 最長 = mid 垂直、 中点 = (553.11, 410)、
     // pill (label 幅 102 × 高さ 36) 中心 = (553.11, 410) で垂直 segment 上 straddle。
     if (edge?.overlay) {
-      const exitEndX = midX - xDir * corner;
-      const enterStartX = midX + xDir * corner;
-      const midStartY = A.y + yDir * corner;
-      const midEndY = B.y - yDir * corner;
+      const exitEndX = midX - xDir * lCorner;
+      const enterStartX = midX + xDir * lCorner;
+      const midStartY = A.y + yDir * lCorner;
+      const midEndY = B.y - yDir * lCorner;
       const segments = [
         { len: Math.abs(exitEndX - A.x), midXVal: (A.x + exitEndX) / 2, midYVal: A.y },
         { len: Math.abs(midEndY - midStartY), midXVal: midX, midYVal: (midStartY + midEndY) / 2 },
@@ -2009,10 +2028,10 @@ function routePath(
       const longest = segments.reduce((a, b) => (b.len > a.len ? b : a));
       return {
         d: `M ${A.x} ${A.y}
-          L ${midX - xDir * corner} ${A.y}
-          Q ${midX} ${A.y}, ${midX} ${A.y + yDir * corner}
-          L ${midX} ${B.y - yDir * corner}
-          Q ${midX} ${B.y}, ${midX + xDir * corner} ${B.y}
+          L ${midX - xDir * lCorner} ${A.y}
+          Q ${midX} ${A.y}, ${midX} ${A.y + yDir * lCorner}
+          L ${midX} ${B.y - yDir * lCorner}
+          Q ${midX} ${B.y}, ${midX + xDir * lCorner} ${B.y}
           L ${B.x} ${B.y}`,
         labelX: longest.midXVal,
         labelY: longest.midYVal,
@@ -2021,10 +2040,10 @@ function routePath(
     }
     return {
       d: `M ${A.x} ${A.y}
-        L ${midX - xDir * corner} ${A.y}
-        Q ${midX} ${A.y}, ${midX} ${A.y + yDir * corner}
-        L ${midX} ${B.y - yDir * corner}
-        Q ${midX} ${B.y}, ${midX + xDir * corner} ${B.y}
+        L ${midX - xDir * lCorner} ${A.y}
+        Q ${midX} ${A.y}, ${midX} ${A.y + yDir * lCorner}
+        L ${midX} ${B.y - yDir * lCorner}
+        Q ${midX} ${B.y}, ${midX + xDir * lCorner} ${B.y}
         L ${B.x} ${B.y}`,
       labelX: midX,
       labelY: verticalMidY,

package/src/layout/spec.ts

@@ -18,7 +18,7 @@
 import { CLEARANCE_LABEL_LABEL, CLEARANCE_NODE_LABEL } from "./clearance-constants";
 import { measureTextWidth } from "./text-width";
 import { EDGE_LABEL_TEXT } from "../label-text";
-import type { CdlEdge, LaidEdge } from "../types";
+import type { CdlEdge, LaidEdge, LaidLane, LaidNode } from "../types";
 
 // ─── edge label pill bbox SSOT (CAR-431 で 3 定義箇所を集約) ──
 
@@ -951,6 +951,64 @@ export const COLUMN_GAP_VARIANCE_TOL = 40;
  */
 export const LANE_BORDER_CLEARANCE_TOL = 2;
 
+/** lane が占める縦の範囲 (world unit)。 `laneVerticalRange` が返す。 */
+export type LaneVerticalRange = { top: number; bottom: number };
+
+/**
+ * 縦の範囲で比べてよい lane の上端と下端。 上下いっぱいの列として比べる lane は `undefined` (#863)。
+ *
+ * 範囲を持つのは 2 種だけ。
+ *
+ * | lane | 範囲 |
+ * |---|---|
+ * | `contain` | 中の node を囲む枠 (`recomputeContainedLanes` が決める `y` / `height`)。 描画もこの枠を描く |
+ * | `posX` / `posY` / `posH` を揃えた lane | 著者が置いた `posY` から `posH` まで |
+ *
+ * それ以外の lane の `height` は名札の帯 (`LANE_LABEL_H`) の高さで、 列の縦の広がりではない。
+ * 列は中の node が段の位置に並ぶ下端まで続く。 `posH` を持たない固定の lane も、 `posX` と `posY` が
+ * 揃わず layout が座標を採らなかった lane も同じ。 lifeline の lane は縦線が図の下まで伸びる。
+ * どれも上下いっぱいの列として比べないと、 列の中にある説明文を取りこぼす。
+ *
+ * 範囲を持つ lane でも、 中の node が範囲の外にあれば、 その node の上下まで広げる。 高さを指定した
+ * lane に座標を持たない node を入れると、 node は段の位置に並んで範囲の外に出るため。
+ */
+export function laneVerticalRange(lane: LaidLane, nodes: readonly LaidNode[]): LaneVerticalRange | undefined {
+  const pinnedWithHeight = lane.posX !== undefined && lane.posY !== undefined && lane.posH !== undefined;
+  if (!lane.contain && !pinnedWithHeight) return undefined;
+  let top = lane.y;
+  let bottom = lane.y + lane.height;
+  for (const n of nodes) {
+    if (n.lane !== lane.id) continue;
+    top = Math.min(top, n.cy - n.h / 2);
+    bottom = Math.max(bottom, n.cy + n.h / 2);
+  }
+  return { top, bottom };
+}
+
+/**
+ * rect が lane の左右の枠線 (`lane.x` / `lane.x + lane.width`) を跨ぐ側。 跨がなければ `undefined` (#863)。
+ *
+ * 検証器の軸 64 (`lane-border-clearance`) と、 engine が説明文の置き場所を選ぶ 2 か所
+ * (`layout/edges.ts` の左への迂回と説明文の反転) がこの関数で判定する。 規則を 1 か所に置き、
+ * engine が避ける枠線と検証器が指摘する枠線を食い違わせない。
+ *
+ * `range` (`laneVerticalRange` の値) があれば、 rect と縦に重なる時だけ比べる。 接するだけ
+ * (重なりの高さ 0) は重ならない扱い。 横は枠線から `LANE_BORDER_CLEARANCE_TOL` 以内に端が
+ * 触れるだけなら跨がない扱い。 左右の両方を跨ぐ rect は左を返す。
+ */
+export function rectCrossesLaneBorder(
+  rect: { x: number; y: number; w: number; h: number },
+  lane: Pick<LaidLane, "x" | "width">,
+  range: LaneVerticalRange | undefined,
+): "left" | "right" | undefined {
+  if (range !== undefined && (rect.y + rect.h <= range.top || rect.y >= range.bottom)) return undefined;
+  const crosses = (lineX: number) =>
+    rect.x < lineX - LANE_BORDER_CLEARANCE_TOL && rect.x + rect.w > lineX + LANE_BORDER_CLEARANCE_TOL;
+  if (crosses(lane.x)) return "left";
+  if (crosses(lane.x + lane.width)) return "right";
+  return undefined;
+}
+
 // ─── near-collision policy SSOT (CAR-424 で collisions.ts から集約) ──
 
 /**

package/src/visual-validate.ts

@@ -131,7 +131,6 @@ import {
   DETOUR_SLOT_GAP,
   EDGE_STUB_OUT,
   LABEL_PILL_PAD_X,
-  computeLabelBoxW,
   buildDiagramAltText,
   computeLabelBBoxWorld,
   hasRenderedLabel,
@@ -143,7 +142,8 @@ import {
   fitsOwnTitleWidth,
   rowBaselineY,
   rowGlyphDepth,
-  LANE_BORDER_CLEARANCE_TOL,
+  laneVerticalRange,
+  rectCrossesLaneBorder,
   MIN_COLUMN_ALIGNMENT_TOLERANCE,
   MIN_ROW_ALIGNMENT_TOLERANCE,
   ROW_GAP_VARIANCE_TOL,
@@ -4246,8 +4246,14 @@ function runAxes(
   //
   // 例外 = edge 発着 node の lane (from lane / to lane) 内は判定対象外、 その 2 lane 内なら
   // label が lane 縁近くにあっても違和感なし。
+  //
+  // 縦の範囲を持つ lane (`contain` の枠と、 `posX` / `posY` / `posH` を揃えた lane) は、 label と
+  // 縦に重なる時だけ比べる (#863)。 別の段に置いた lane の枠線の延長上に label が来ても、 枠線は
+  // そこに描かれていない。 判定の規則は `rectCrossesLaneBorder` (`layout/spec.ts`) が持ち、
+  // engine が label の置き場所を選ぶ時も同じ関数を使う。
   // ───────────────────────────────────────────────────────────
   {
+    const rangeByLane = new Map(laid.lanes.map((lane) => [lane.id, laneVerticalRange(lane, laid.nodes)]));
     for (const e of laid.edges) {
       if (!hasRenderedLabel(e)) continue;
       const fromNode = nodeById.get(e.from);
@@ -4258,29 +4264,14 @@ function runAxes(
       const allowedLanes = new Set<string>();
       if (fromNode) allowedLanes.add(fromNode.lane);
       if (toNode) allowedLanes.add(toNode.lane);
-      // label bbox 復元 (Axis 59 と同 logic、 lane border 判定は x 軸のみ使うので高さ不要)
-      const boxW = computeLabelBoxW(e.label, e.sub);
-      const anchor = e.labelAnchor;
-      const boxLeftX = anchor === "start" ? 0 : anchor === "end" ? -boxW : -boxW / 2;
-      const bx = e.labelX + boxLeftX;
-      const bxRight = bx + boxW;
+      const box = computeLabelBBoxWorld(e);
       for (const lane of laid.lanes) {
         if (allowedLanes.has(lane.id)) continue;
-        const laneLeft = lane.x;
-        const laneRight = lane.x + lane.width;
-        // border 貫通 = bbox が border 線と交差 (border 左端 と bbox 左/右端 の関係)
-        // 左 border 貫通 = bx < laneLeft && bxRight > laneLeft + TOL
-        // 右 border 貫通 = bx < laneRight - TOL && bxRight > laneRight
-        const crossesLeft =
-          bx < laneLeft - LANE_BORDER_CLEARANCE_TOL &&
-          bxRight > laneLeft + LANE_BORDER_CLEARANCE_TOL;
-        const crossesRight =
-          bx < laneRight - LANE_BORDER_CLEARANCE_TOL &&
-          bxRight > laneRight + LANE_BORDER_CLEARANCE_TOL;
-        if (crossesLeft || crossesRight) {
+        const side = rectCrossesLaneBorder(box, lane, rangeByLane.get(lane.id));
+        if (side !== undefined) {
           push(
             "lane-border-clearance",
-            `edge "${e.id}" label bbox (${bx.toFixed(0)}..${bxRight.toFixed(0)}) が非発着 lane "${lane.id}" (${laneLeft.toFixed(0)}..${laneRight.toFixed(0)}) の ${crossesLeft ? "左" : "右"} border を貫通`,
+            `edge "${e.id}" label bbox (${box.x.toFixed(0)}..${(box.x + box.w).toFixed(0)}) が非発着 lane "${lane.id}" (${lane.x.toFixed(0)}..${(lane.x + lane.width).toFixed(0)}) の ${side === "left" ? "左" : "右"} border を貫通`,
           );
           break; // 1 edge 1 発火に留める
         }