@cardenelabs/cdl 0.123.0 → 0.124.0

package/CHANGELOG.md

@@ -5,6 +5,17 @@ CDL (Chainome Diagram Language) の主要変更履歴。
 
 ## [Unreleased]
 
+## [0.124.0] - 2026-10-06
+
+### Changed
+
+- **箱の上を回る戻り線が、途中の箱を貫かない道筋を選べるようにした** (#1014)
+
+  上へ回る今までの道筋が両端以外の箱と交わる時だけ、左右の外側の列を通る道筋に替え、交わる箱が少なく短い方を選ぶ。
+  両端は今までどおり上辺から出て、上辺へ入る。
+  1 段前へ戻る線と間に箱が無い戻り線の座標は変わらない。
+  外側を回っても避けられない箱は `edge-node-cross` として検査結果に残る。
+
 ## [0.123.0] - 2026-10-05
 
 ### Added
@@ -4864,7 +4875,8 @@ Initial OSS release.
 使わない = annotated tag を push しても GitHub Release は作られず、 Release を作っていない版で
 行き止まりになる。
 
-[Unreleased]: https://github.com/cardene777/cdl/compare/v0.123.0...HEAD
+[Unreleased]: https://github.com/cardene777/cdl/compare/v0.124.0...HEAD
+[0.124.0]: https://github.com/cardene777/cdl/compare/v0.123.0...v0.124.0
 [0.123.0]: https://github.com/cardene777/cdl/compare/v0.122.0...v0.123.0
 [0.122.0]: https://github.com/cardene777/cdl/compare/v0.121.0...v0.122.0
 [0.121.0]: https://github.com/cardene777/cdl/compare/v0.120.0...v0.121.0

package/README.md

@@ -268,10 +268,15 @@ export const custom = diagram("custom", { topic: "Custom" })
 | 値 | 道筋 | 向く場面 |
 |---|---|---|
 | `default` | 箱を避け、角を丸めた直角の線 | 箱を避けたい図、直角の線に揃えたい図 |
-| `back-detour` | 箱の上を回って戻る線 | 前の箱へ戻る関係 |
+| `back-detour` | 箱の上を回って戻り、途中の箱と交わる時は外側を回る線 | 前の箱へ戻る関係 |
 | `curve` | 両端で水平になる 3 次曲線 | 段や列をまたぐ関係を柔らかくつなぐ図 |
 | `metro` | 横線と傾き ±1 の斜線を円弧で結ぶ線 | 路線図の線路と乗り換え |
 
+`back-detour` は始点と終点の上辺を結び、両端より 100 上を横に渡る。
+途中の箱と交わる時だけ、縦に並ぶ箱を避けた最も近い外側の列を通り、交わる箱が少なく短い方を選ぶ。
+両端は外側へ回る時も上辺から出て、上辺へ入る。
+外側を回っても避けられない箱は `edge-node-cross` として検査結果に残る。
+
 `curve` は、行き先が右なら始点の右辺から終点の左辺へ、左なら始点の左辺から終点の右辺へ結ぶ。
 2 つの箱の横の範囲が重なる時は、両方の右辺を結ぶ。
 2 点の高さが同じなら直線になる。

package/dist/index.cjs

@@ -20514,6 +20514,55 @@ function bowSharedStraightPaths(edges, nodes, skipIds, textMetrics = "proportion
 function nodeRect(n) {
   return { x: n.cx - n.w / 2, y: n.cy - n.h / 2, w: n.w, h: n.h };
 }
+function countPathObstacleCrossings(d, obstacles) {
+  const segments = flattenPathSegments(extractPathSegments(d));
+  return obstacles.filter((obstacle) => segmentsCrossRect(segments, nodeRect(obstacle))).length;
+}
+function makeBackDetourCandidate(A, B, from, to, obstacles, detourY, side) {
+  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 = [
+    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)
+  };
+}
+function chooseBackDetourCandidate(A, B, from, to, obstacles, detourY) {
+  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;
+  const preferred = Math.abs(A.x - B.x) < 0.5 ? "right" : A.x < B.x ? "left" : "right";
+  return preferred === "left" ? left : right;
+}
 function rectGap(a, b) {
   const dx = Math.max(0, a.x - (b.x + b.w), b.x - (a.x + a.w));
   const dy = Math.max(0, a.y - (b.y + b.h), b.y - (a.y + a.h));
@@ -20964,7 +21013,7 @@ function routePath(from, to, fromSide, toSide, obstacles = [], detourSide, _from
     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}
@@ -20978,6 +21027,16 @@ function routePath(from, to, fromSide, toSide, obstacles = [], detourSide, _from
       labelY: detourY - labelInit,
       labelAnchor: "middle"
     };
+    const existingCrossings = countPathObstacleCrossings(existing.d, obstacles);
+    if (existingCrossings === 0) return existing;
+    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"
+    };
   }
   const midX = fromSide === "left" || fromSide === "right" ? B.x : A.x;
   const midY = fromSide === "top" || fromSide === "bottom" ? B.y : A.y;