@cardenelabs/cdl 0.64.1 → 0.65.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cardenelabs/cdl",
-  "version": "0.64.1",
+  "version": "0.65.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,25 @@ 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)));
+}
 /** 縦 detour が source から曲がるまで直進する距離 (world unit)。 EDGE_STUB_OUT を上回る。 */
 const VERTICAL_DETOUR_EXIT = 45;
 
@@ -1933,6 +1952,13 @@ function routePath(
         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 +2016,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 +2028,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 +2040,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,