@markdy/renderer-dom 0.8.22 → 0.8.24

package/dist/index.js

@@ -280,6 +280,25 @@ function dedupePoints(points) {
   }
   return out.length >= 2 ? out : points;
 }
+function circleBoundaryRoute(from, to) {
+  const fromCenter = { x: from.x + from.width / 2, y: from.y + from.height / 2 };
+  const toCenter = { x: to.x + to.width / 2, y: to.y + to.height / 2 };
+  const dx = toCenter.x - fromCenter.x;
+  const dy = toCenter.y - fromCenter.y;
+  const distance = Math.hypot(dx, dy) || 1;
+  const ux = dx / distance;
+  const uy = dy / distance;
+  const fromRadius = Math.min(from.width, from.height) / 2;
+  const toRadius = Math.min(to.width, to.height) / 2;
+  return dedupePoints([
+    { x: fromCenter.x + ux * fromRadius, y: fromCenter.y + uy * fromRadius },
+    { x: toCenter.x - ux * toRadius, y: toCenter.y - uy * toRadius }
+  ]);
+}
+function routeEdgePoints(from, to, routeObstacles, bounds, lane) {
+  if (from.shape === "circle" && to.shape === "circle") return circleBoundaryRoute(from, to);
+  return routeOrthogonal(boxRect(from), boxRect(to), routeObstacles, bounds, lane);
+}
 function ensureEdgeLayer(scene) {
   const existing = scene.querySelector(`svg[${EDGE_LAYER_ATTR}='1']`);
   if (existing) return existing;
@@ -353,7 +372,7 @@ function createEdgeRuntime(svg, from, to, kind, label, theme, sceneId, routeObst
   const color = theme.edges[kind];
   const style = EDGE_STYLES[kind];
   const isSelfLoop = from.id === to.id;
-  const points = isSelfLoop ? dedupePoints(selfLoopPath(from)) : dedupePoints(routeOrthogonal(boxRect(from), boxRect(to), routeObstacles, bounds, lane));
+  const points = isSelfLoop ? dedupePoints(selfLoopPath(from)) : dedupePoints(routeEdgePoints(from, to, routeObstacles, bounds, lane));
   const d = toPathD(points);
   const len = polylineLength(points);
   const group = document.createElementNS("http://www.w3.org/2000/svg", "g");
@@ -1148,10 +1167,12 @@ function ensureNodeStyles(doc) {
   min-height: 56px;
 }
 .markdy-node[data-shape="circle"],
+.markdy-node[data-kind="dot"] {
+  border-radius: 50%;
+}
 .markdy-node[data-kind="dot"] {
   width: 64px;
   height: 64px;
-  border-radius: 50%;
 }
 .markdy-node[data-kind="matrix"] {
   background-image:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@markdy/renderer-dom",
-  "version": "0.8.22",
+  "version": "0.8.24",
   "description": "Browser renderer for diagram-native animated MarkdyScript architecture diagrams, built on the Web Animations API.",
   "license": "MIT",
   "type": "module",
@@ -44,14 +44,14 @@
     "access": "public"
   },
   "dependencies": {
-    "@markdy/core": "0.8.22"
+    "@markdy/core": "0.8.24"
   },
   "devDependencies": {
     "jsdom": "^29.1.1",
     "tsup": "^8.5.1",
     "typescript": "^5.9.3",
     "vitest": "^4.1.7",
-    "@markdy/stdlib-systems": "0.8.22"
+    "@markdy/stdlib-systems": "0.8.24"
   },
   "scripts": {
     "build": "tsup",