@cardenelabs/cdl 0.64.1 → 0.66.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cardenelabs/cdl",
-  "version": "0.64.1",
+  "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",
@@ -57,6 +57,16 @@
     "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"
@@ -68,12 +78,5 @@
     "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

@@ -48,6 +48,44 @@ 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)));
+}
+
+/**
+ * 横に走る線が箱の中を通るか (`#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;
 
@@ -1912,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 より右へ、
@@ -1926,13 +1988,34 @@ 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++;
       }
     }
+    // 角の丸みは `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 の
@@ -1990,10 +2073,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 },
@@ -2002,10 +2085,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,
@@ -2014,10 +2097,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,