@cardenelabs/cdl 0.123.0 → 0.124.0

package/dist/{render-CVczwfRb.d.cts → render-U6omSNH2.d.cts}

@@ -145,7 +145,7 @@ type EdgeStyle = "solid" | "dotted-flow" | "dashed";
  * 線の道筋。
  *
  * - `"default"` ... 自動。 箱を避け、角を丸めた直角の線を引く。 書かない時も同じ
- * - `"back-detour"` ... 箱の上を回って前の箱へ戻る
+ * - `"back-detour"` ... 箱の上を回って前の箱へ戻り、途中の箱と交わる時は外側を回る
  * - `"curve"` ... 始点から水平に出て終点へ水平に入る 3 次曲線。 途中の箱は避けず、
  *   2 点が同じ高さなら直線になる。 終点の矢印は水平を向く
  * - `"metro"` ... 横線と傾き ±1 の斜線だけで結び、角を半径 r の円弧で丸める。
@@ -766,7 +766,8 @@ type CdlEdge = {
     /** label の y 方向 fine offset (default 0、 + で下、 - で上) */
     labelOffsetY?: number;
     /**
-     * 線の道筋。 `default` は箱を避ける自動経路、 `back-detour` は箱の上を回る戻り線、
+     * 線の道筋。 `default` は箱を避ける自動経路、 `back-detour` は箱の上を回り、途中の箱と
+     * 交わる時は外側を回る戻り線、
      * `curve` は途中の箱を避けず、両端で水平になる 3 次曲線。 `metro` は途中の箱を避けず、
      * 横線と傾き ±1 の斜線を半径 r の円弧で結ぶ。2 点が同じ高さなら横 1 本。書かなければ `default`。
      */

package/dist/{render-CVczwfRb.d.ts → render-U6omSNH2.d.ts}

@@ -145,7 +145,7 @@ type EdgeStyle = "solid" | "dotted-flow" | "dashed";
  * 線の道筋。
  *
  * - `"default"` ... 自動。 箱を避け、角を丸めた直角の線を引く。 書かない時も同じ
- * - `"back-detour"` ... 箱の上を回って前の箱へ戻る
+ * - `"back-detour"` ... 箱の上を回って前の箱へ戻り、途中の箱と交わる時は外側を回る
  * - `"curve"` ... 始点から水平に出て終点へ水平に入る 3 次曲線。 途中の箱は避けず、
  *   2 点が同じ高さなら直線になる。 終点の矢印は水平を向く
  * - `"metro"` ... 横線と傾き ±1 の斜線だけで結び、角を半径 r の円弧で丸める。
@@ -766,7 +766,8 @@ type CdlEdge = {
     /** label の y 方向 fine offset (default 0、 + で下、 - で上) */
     labelOffsetY?: number;
     /**
-     * 線の道筋。 `default` は箱を避ける自動経路、 `back-detour` は箱の上を回る戻り線、
+     * 線の道筋。 `default` は箱を避ける自動経路、 `back-detour` は箱の上を回り、途中の箱と
+     * 交わる時は外側を回る戻り線、
      * `curve` は途中の箱を避けず、両端で水平になる 3 次曲線。 `metro` は途中の箱を避けず、
      * 横線と傾き ±1 の斜線を半径 r の円弧で結ぶ。2 点が同じ高さなら横 1 本。書かなければ `default`。
      */

package/package.json

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

@@ -1522,10 +1522,98 @@ interface Rect {
   h: number;
 }
 
+/** 経路の角の点。 */
+type Vertex = { x: number; y: number };
+
 function nodeRect(n: LaidNode): Rect {
   return { x: n.cx - n.w / 2, y: n.cy - n.h / 2, w: n.w, h: n.h };
 }
 
+/** 絵の `edge-node-cross` と同じ判定で、経路が貫く箱を 1 箱 1 回で数える。 */
+function countPathObstacleCrossings(d: string, obstacles: readonly LaidNode[]): number {
+  const segments = flattenPathSegments(extractPathSegments(d));
+  return obstacles.filter((obstacle) => segmentsCrossRect(segments, nodeRect(obstacle))).length;
+}
+
+type BackDetourCandidate = {
+  d: string;
+  labelX: number;
+  crossings: number;
+  length: number;
+};
+
+/** top-top の戻り線を、帯に掛かる箱を避けた最も近い外側の列へ回す候補を作る。 */
+function makeBackDetourCandidate(
+  A: Vertex,
+  B: Vertex,
+  from: LaidNode,
+  to: LaidNode,
+  obstacles: readonly LaidNode[],
+  detourY: number,
+  side: DetourSide,
+): BackDetourCandidate {
+  const lowIsA = A.y >= B.y;
+  const low = lowIsA ? A : B;
+  const lowBendY = low.y - VERTICAL_DETOUR_EXIT;
+  const bandTop = Math.min(detourY, lowBendY);
+  const bandBottom = Math.max(detourY, lowBendY);
+  const bandObstacles = obstacles
+    .map(nodeRect)
+    .filter((rect) => rect.y + rect.h >= bandTop && rect.y <= bandBottom);
+  let columnX = detourColumnFor([from, to], side);
+  while (true) {
+    const blockers = bandObstacles.filter(
+      (rect) => rect.x - VERTICAL_DETOUR_GAP < columnX
+        && columnX < rect.x + rect.w + VERTICAL_DETOUR_GAP,
+    );
+    if (blockers.length === 0) break;
+    columnX = side === "left"
+      ? Math.min(...blockers.map((rect) => rect.x - VERTICAL_DETOUR_GAP))
+      : Math.max(...blockers.map((rect) => rect.x + rect.w + VERTICAL_DETOUR_GAP));
+  }
+  const bendAY = lowIsA ? lowBendY : detourY;
+  const bendBY = lowIsA ? detourY : lowBendY;
+  const vertices: Vertex[] = [
+    A,
+    { x: A.x, y: bendAY },
+    { x: columnX, y: bendAY },
+    { x: columnX, y: bendBY },
+    { x: B.x, y: bendBY },
+    B,
+  ];
+  const d = verticesToPath(vertices);
+  const high = lowIsA ? B : A;
+  return {
+    d,
+    labelX: (high.x + columnX) / 2,
+    crossings: countPathObstacleCrossings(d, obstacles),
+    length: vertices.slice(1).reduce((sum, vertex, index) => {
+      const previous = vertices[index]!;
+      return sum + Math.hypot(vertex.x - previous.x, vertex.y - previous.y);
+    }, 0),
+  };
+}
+
+/** 交差数、長さ、終点へ入る線の並びを保つ側の順で、左右候補を 1 つに決める。 */
+function chooseBackDetourCandidate(
+  A: Vertex,
+  B: Vertex,
+  from: LaidNode,
+  to: LaidNode,
+  obstacles: readonly LaidNode[],
+  detourY: number,
+): BackDetourCandidate {
+  const left = makeBackDetourCandidate(A, B, from, to, obstacles, detourY, "left");
+  const right = makeBackDetourCandidate(A, B, from, to, obstacles, detourY, "right");
+  if (left.crossings !== right.crossings) return left.crossings < right.crossings ? left : right;
+  if (Math.abs(left.length - right.length) >= 0.5) return left.length < right.length ? left : right;
+
+  // 同じ長さなら始点側へ回すと、同じ上辺へ入る線の左右の並びを従来から入れ替えずに済む。
+  // 同じ列は左右の基準を持たないため、縦 detour と同じ右を既定にする。
+  const preferred: DetourSide = Math.abs(A.x - B.x) < 0.5 ? "right" : A.x < B.x ? "left" : "right";
+  return preferred === "left" ? left : right;
+}
+
 /** 2 rect の最短距離 (world unit)。 重なっていれば 0。 */
 function rectGap(a: Rect, b: Rect): number {
   const dx = Math.max(0, a.x - (b.x + b.w), b.x - (a.x + a.w));
@@ -2374,7 +2462,7 @@ function routePath(
     const detourY = Math.min(A.y, B.y) - 100;
     const corner = 14;
     const xDir = B.x > A.x ? 1 : -1;
-    return {
+    const existing = {
       d: `M ${A.x} ${A.y}
         L ${A.x} ${detourY + corner}
         Q ${A.x} ${detourY}, ${A.x + xDir * corner} ${detourY}
@@ -2386,6 +2474,20 @@ function routePath(
       // CAR-518 SSOT ... dotted-flow は 62 world (marker glow radius 分拡張) を labelInit で参照。
       // top-top detour の水平 segment 上方 labelInit world = spec 準拠距離。
       labelY: detourY - labelInit,
+      labelAnchor: "middle" as const,
+    };
+    const existingCrossings = countPathObstacleCrossings(existing.d, obstacles);
+    if (existingCrossings === 0) return existing;
+
+    // 帯に掛かる箱を避けた最も近い外側の列なら、経路に関わらない遠い箱を足しても列を動かさない。
+    // 遠回りは交差を実際に減らす時だけ採り、減らない時は短く読める従来経路を保って、
+    // 残る交差を `edge-node-cross` に報告させる。
+    const candidate = chooseBackDetourCandidate(A, B, from, to, obstacles, detourY);
+    if (candidate.crossings >= existingCrossings) return existing;
+    return {
+      d: candidate.d,
+      labelX: candidate.labelX,
+      labelY: detourY - labelInit,
       labelAnchor: "middle",
     };
   }
@@ -3062,9 +3164,6 @@ const SHARED_RUN_CORNER = VERTICAL_DETOUR_CORNER;
 /** 同じ直線上とみなす座標の差 (world unit)。 */
 const SHARED_RUN_EPS = 0.5;
 
-/** 経路の角の点。 */
-type Vertex = { x: number; y: number };
-
 /**
  * 経路を「角の点の並び」 に開く。 開けない形なら `null` を返す。
  *

package/src/types.ts

@@ -222,7 +222,7 @@ export type EdgeStyle = "solid" | "dotted-flow" | "dashed";
  * 線の道筋。
  *
  * - `"default"` ... 自動。 箱を避け、角を丸めた直角の線を引く。 書かない時も同じ
- * - `"back-detour"` ... 箱の上を回って前の箱へ戻る
+ * - `"back-detour"` ... 箱の上を回って前の箱へ戻り、途中の箱と交わる時は外側を回る
  * - `"curve"` ... 始点から水平に出て終点へ水平に入る 3 次曲線。 途中の箱は避けず、
  *   2 点が同じ高さなら直線になる。 終点の矢印は水平を向く
  * - `"metro"` ... 横線と傾き ±1 の斜線だけで結び、角を半径 r の円弧で丸める。
@@ -891,7 +891,8 @@ export type CdlEdge = {
   /** label の y 方向 fine offset (default 0、 + で下、 - で上) */
   labelOffsetY?: number;
   /**
-   * 線の道筋。 `default` は箱を避ける自動経路、 `back-detour` は箱の上を回る戻り線、
+   * 線の道筋。 `default` は箱を避ける自動経路、 `back-detour` は箱の上を回り、途中の箱と
+   * 交わる時は外側を回る戻り線、
    * `curve` は途中の箱を避けず、両端で水平になる 3 次曲線。 `metro` は途中の箱を避けず、
    * 横線と傾き ±1 の斜線を半径 r の円弧で結ぶ。2 点が同じ高さなら横 1 本。書かなければ `default`。
    */