@cardenelabs/cdl 0.64.0 → 0.64.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cardenelabs/cdl",
-  "version": "0.64.0",
+  "version": "0.64.1",
   "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",
@@ -57,16 +57,6 @@
     "node": ">=18"
   },
   "sideEffects": false,
-  "scripts": {
-    "build": "tsup",
-    "dev": "tsup --watch",
-    "typecheck": "tsc --noEmit",
-    "test": "cd ../.. && vitest run packages/cdl",
-    "lint": "tsc --noEmit",
-    "prepublishOnly": "pnpm run typecheck && pnpm run build",
-    "prepack": "node scripts/prepack-check.mjs",
-    "postpack": "node scripts/prepack-check.mjs"
-  },
   "peerDependencies": {
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
@@ -78,5 +68,12 @@
     "typedoc": "^0.28.19",
     "typedoc-plugin-markdown": "^4.12.0",
     "typescript": "^5.8.0"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "test": "cd ../.. && vitest run packages/cdl",
+    "lint": "tsc --noEmit"
   }
-}
+}

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,
@@ -172,6 +173,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 +617,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 +969,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 +1466,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;

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 発火に留める
         }