@markdy/renderer-dom 1.0.22 → 1.0.24

package/dist/index.js

@@ -625,9 +625,68 @@ function circleBoundaryRoute(from, to) {
     { x: toCenter.x - ux * toRadius, y: toCenter.y - uy * toRadius }
   ]);
 }
+function snapPortToNodeShape(node, port, neighbor, isSource) {
+  if (!node.shape || node.shape === "card" || node.shape === "rounded" || node.shape === "terminal" || node.shape === "container") {
+    return port;
+  }
+  const cx = node.x + node.width / 2;
+  const cy = node.y + node.height / 2;
+  const hw = node.width / 2;
+  const hh = node.height / 2;
+  if (node.shape === "diamond") {
+    const isVert = Math.abs(port.x - neighbor.x) < 0.01;
+    const isHoriz = Math.abs(port.y - neighbor.y) < 0.01;
+    if (isVert) {
+      const goingDown = isSource ? neighbor.y > port.y : port.y > neighbor.y;
+      const boundaryY = goingDown ? cy + hh * (1 - Math.min(1, Math.abs(port.x - cx) / hw)) : cy - hh * (1 - Math.min(1, Math.abs(port.x - cx) / hw));
+      return { x: port.x, y: Math.round(boundaryY * 10) / 10 };
+    }
+    if (isHoriz) {
+      const goingRight = isSource ? neighbor.x > port.x : port.x > neighbor.x;
+      const boundaryX = goingRight ? cx + hw * (1 - Math.min(1, Math.abs(port.y - cy) / hh)) : cx - hw * (1 - Math.min(1, Math.abs(port.y - cy) / hh));
+      return { x: Math.round(boundaryX * 10) / 10, y: port.y };
+    }
+  }
+  if (node.shape === "circle") {
+    const r = Math.min(node.width, node.height) / 2;
+    const isVert = Math.abs(port.x - neighbor.x) < 0.01;
+    const isHoriz = Math.abs(port.y - neighbor.y) < 0.01;
+    if (isVert) {
+      const goingDown = isSource ? neighbor.y > port.y : port.y > neighbor.y;
+      return { x: cx, y: goingDown ? cy + r : cy - r };
+    }
+    if (isHoriz) {
+      const goingRight = isSource ? neighbor.x > port.x : port.x > neighbor.x;
+      return { x: goingRight ? cx + r : cx - r, y: cy };
+    }
+  }
+  if (node.shape === "pill") {
+    const r = node.height / 2;
+    const isVert = Math.abs(port.x - neighbor.x) < 0.01;
+    const isHoriz = Math.abs(port.y - neighbor.y) < 0.01;
+    if (isHoriz) {
+      const goingRight = isSource ? neighbor.x > port.x : port.x > neighbor.x;
+      return { x: goingRight ? node.x + node.width : node.x, y: cy };
+    }
+    if (isVert) {
+      const goingDown = isSource ? neighbor.y > port.y : port.y > neighbor.y;
+      const clampedX = Math.max(node.x + r, Math.min(node.x + node.width - r, port.x));
+      return { x: clampedX, y: goingDown ? node.y + node.height : node.y };
+    }
+  }
+  return port;
+}
+function snapRouteEndpointsToShapes(points, from, to) {
+  if (points.length < 2) return points;
+  const out = [...points];
+  out[0] = snapPortToNodeShape(from, out[0], out[1], true);
+  out[out.length - 1] = snapPortToNodeShape(to, out[out.length - 1], out[out.length - 2], false);
+  return dedupePoints(out);
+}
 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);
+  const raw = routeOrthogonal(boxRect(from), boxRect(to), routeObstacles, bounds, lane);
+  return snapRouteEndpointsToShapes(raw, from, to);
 }
 function ensureEdgeLayer(scene) {
   const existing = scene.querySelector(`svg[${EDGE_LAYER_ATTR}='1']`);
@@ -1782,8 +1841,30 @@ function ensureNodeStyles(doc) {
   opacity: 1;
   transform: translateY(0);
 }
+.markdy-node[data-shape="diamond"],
+.markdy-node[data-shape="diamond"][data-visible="1"],
+.markdy-node[data-shape="diamond"][data-focal="1"],
+.markdy-node[data-shape="diamond"][data-focused="1"],
+.markdy-node[data-shape="diamond"][data-glow="1"],
+.markdy-scene-root .markdy-node[data-shape="diamond"],
+.markdy-scene-root .markdy-node[data-shape="diamond"][data-visible="1"],
+.markdy-scene-root .markdy-node[data-shape="diamond"][data-focal="1"],
+.markdy-scene-root .markdy-node[data-shape="diamond"][data-focused="1"],
+.markdy-scene-root .markdy-node[data-shape="diamond"][data-glow="1"],
+.markdy-scene-root[data-flat="1"] .markdy-node[data-shape="diamond"],
+.markdy-scene-root[data-flat="1"] .markdy-node[data-shape="diamond"][data-visible="1"],
+.markdy-scene-root[data-flat="1"] .markdy-node[data-shape="diamond"][data-focal="1"],
+.markdy-scene-root[data-markdy-theme="terminal"] .markdy-node[data-shape="diamond"],
+.markdy-scene-root[data-markdy-theme="terminal"] .markdy-node[data-shape="diamond"][data-focal="1"],
+.markdy-scene-root[data-markdy-theme="sketchy"] .markdy-node[data-shape="diamond"],
+.markdy-scene-root[data-markdy-theme="sketchy"] .markdy-node[data-shape="diamond"][data-focal="1"],
+.markdy-scene-root[data-markdy-theme="nebula"] .markdy-node[data-shape="diamond"],
+.markdy-scene-root[data-markdy-theme="nebula"] .markdy-node[data-shape="diamond"][data-focal="1"] {
+  border: none;
+  box-shadow: none;
+}
 .markdy-node[data-shape="diamond"] {
-  border-radius: 4px;
+  border-radius: 0;
   transform: rotate(0deg);
   clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
   filter: drop-shadow(0 0 1px var(--md-hairline, rgba(15, 23, 42, 0.2))) drop-shadow(0 4px 12px var(--md-shadow, rgba(2, 6, 23, 0.15)));
@@ -1791,6 +1872,12 @@ function ensureNodeStyles(doc) {
 .markdy-node[data-shape="diamond"][data-focal="1"] {
   filter: drop-shadow(0 0 1.5px var(--md-accent)) drop-shadow(0 4px 14px var(--md-shadow, rgba(2, 6, 23, 0.15)));
 }
+.markdy-node[data-shape="diamond"][data-focused="1"] {
+  filter: drop-shadow(0 0 2px var(--md-accent)) drop-shadow(0 0 14px color-mix(in srgb, var(--md-accent) 60%, transparent));
+}
+.markdy-node[data-shape="diamond"][data-glow="1"] {
+  filter: drop-shadow(0 0 2px color-mix(in srgb, var(--md-glow-color, var(--md-accent)) 70%, transparent)) drop-shadow(0 0 24px color-mix(in srgb, var(--md-glow-color, var(--md-accent)) 55%, transparent));
+}
 .markdy-node[data-shape="diamond"] .markdy-node__body {
   justify-content: center;
   padding: 6px 16%;

package/package.json

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