@cardenelabs/cdl 0.65.0 → 0.66.0

package/package.json

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

@@ -67,6 +67,25 @@ export function verticalCornerDir(from: number, to: number): 1 | -1 {
 export function cornerRadiusFor(半径: number, ...走り: readonly number[]): number {
   return Math.min(半径, ...走り.map((v) => Math.abs(v)));
 }
+
+/**
+ * 横に走る線が箱の中を通るか (`#867`)。
+ *
+ * 判定は箱そのもので行い、余白を足さない = 絵の検査 (`edge-node-cross`) が箱の矩形で
+ * 貫通を数えるため、余白を足すと「検査は通るのに経路だけ動く」 図が出る。
+ *
+ * 端がちょうど箱の縁に載る形は通さない (不等号は全て開いた側)。 箱の縁から出る線は必ず
+ * 縁に載るので、閉じた側にすると自分の出入口を障害物と読む。
+ */
+export function runCrossesBox(
+  走り: { readonly y: number; readonly x1: number; readonly x2: number },
+  箱: { readonly cx: number; readonly cy: number; readonly w: number; readonly h: number },
+): boolean {
+  if (走り.y <= 箱.cy - 箱.h / 2 || 走り.y >= 箱.cy + 箱.h / 2) return false;
+  return (
+    箱.cx + 箱.w / 2 > Math.min(走り.x1, 走り.x2) && 箱.cx - 箱.w / 2 < Math.max(走り.x1, 走り.x2)
+  );
+}
 /** 縦 detour が source から曲がるまで直進する距離 (world unit)。 EDGE_STUB_OUT を上回る。 */
 const VERTICAL_DETOUR_EXIT = 45;
 
@@ -1931,11 +1950,35 @@ function routePath(
         const labelIntersect = oTop < labelBottom && oBottom > labelTop;
         return segIntersect || labelIntersect;
       };
+      // 折れる位置を決めると、横の走りは A.x → midX と midX → B.x の 2 本になる。 この 2 本が
+      // 箱の中を通るかを見る (`#867`)。
+      //
+      // **退いた側で横の走りが伸びる**。 縦の走りだけを見て箱の向こう側へ退くと、避けたはずの
+      // 同じ箱を横の走りが横切る = 実測で「右へ 228 退く」 と「左へ 228 退く」 が並び、同点を
+      // 右に倒す規則が塞がる側を選んでいた (dragon#2011)。
+      const 横の走りが塞がる = (mx: number): boolean =>
+        labelObstacles.some((o) => {
+          if (o.id === from.id || o.id === to.id) return false;
+          return (
+            runCrossesBox({ y: A.y, x1: A.x, x2: mx }, o) ||
+            runCrossesBox({ y: B.y, x1: mx, x2: B.x }, o)
+          );
+        });
       // xDir 方向に obstacle を避けて midX を retreat する。
       let iter = 0;
       while (iter < 12) {
         const band = labelBand(midX);
-        const hit = labelObstacles.find((o) => intersects(o, band));
+        // 縦の走りと札の帯に当たる箱を先に探し、当たらなければ横の走りが通る箱を探す。
+        // 後者を見ないと、初期の midX で既に横の走りが箱を横切っている形は 1 度も退かない。
+        const hit =
+          labelObstacles.find((o) => intersects(o, band)) ??
+          labelObstacles.find(
+            (o) =>
+              o.id !== from.id &&
+              o.id !== to.id &&
+              (runCrossesBox({ y: A.y, x1: A.x, x2: midX }, o) ||
+                runCrossesBox({ y: B.y, x1: midX, x2: B.x }, o)),
+          );
         if (!hit) break;
         // hit を xDir 方向に回避、 obstacle right/left から labelHalfW + clearance を確保
         // xDir=1 (右向き) なら hit.right + labelHalfW + clearance より右へ、
@@ -1945,10 +1988,24 @@ function routePath(
         const hitRight = hit.cx + hit.w / 2;
         const retreatRight = hitRight + labelHalfW + CLEARANCE_NODE_LABEL + 4;
         const retreatLeft = hitLeft - labelHalfW - CLEARANCE_NODE_LABEL - 4;
-        // 現 midX と近い方の retreat 側を選ぶ。 midX を大きく動かさない方向優先。
+        // 退く向きは「横の走りが箱を横切らない側」 を先に見る (`#867`)。 片方だけが塞がるなら
+        // 塞がらない側へ退く。 どちらも同じ (両方塞がる / 両方通る) 時だけ、今までどおり
+        // midX を大きく動かさない側を選ぶ。
+        const 右が塞がる = 横の走りが塞がる(retreatRight);
+        const 左が塞がる = 横の走りが塞がる(retreatLeft);
         const dRight = Math.abs(retreatRight - midX);
         const dLeft = Math.abs(retreatLeft - midX);
-        midX = dRight <= dLeft ? retreatRight : retreatLeft;
+        const 次 =
+          右が塞がる === 左が塞がる
+            ? dRight <= dLeft
+              ? retreatRight
+              : retreatLeft
+            : 右が塞がる
+              ? retreatLeft
+              : retreatRight;
+        // 同じ位置へ退こうとしたら止める。 進まない繰り返しは上限まで回すだけで形が変わらない。
+        if (次 === midX) break;
+        midX = 次;
         iter++;
       }
     }