@markdy/renderer-dom 1.0.21 → 1.0.23

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%;
@@ -2722,6 +2809,13 @@ function ensureSceneStyles(doc) {
   transform: translateY(8px);
   will-change: opacity, transform;
 }
+.markdy-diagram-root {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  width: 100%;
+}
 .markdy-footer {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
   position: relative;
@@ -3191,37 +3285,13 @@ function ensureSceneStyles(doc) {
   color: #64748b !important;
 }
 /* Fullscreen & Fallback Pseudo-Fullscreen Views */
+.markdy-diagram-root:fullscreen,
+.markdy-diagram-root:-webkit-full-screen,
+.markdy-diagram-root:-moz-full-screen,
+.markdy-diagram-root:-ms-fullscreen,
+.markdy-viewport:fullscreen,
+.markdy-viewport:-webkit-full-screen,
 .markdy-fullscreen-host,
-:fullscreen {
-  background-color: var(--md-canvas, #0b101b) !important;
-  width: 100vw !important;
-  height: 100vh !important;
-  max-width: 100vw !important;
-  max-height: 100vh !important;
-  box-sizing: border-box !important;
-  display: flex !important;
-  flex-direction: column !important;
-  justify-content: space-between !important;
-  align-items: center !important;
-  padding: 16px 20px 12px !important;
-  overflow: hidden !important;
-}
-.markdy-fullscreen-host .markdy-viewport,
-:fullscreen .markdy-viewport {
-  flex: 1 1 auto !important;
-  width: 100% !important;
-  height: 100% !important;
-  max-width: 100% !important;
-  max-height: calc(100vh - 64px) !important;
-}
-.markdy-fullscreen-host .markdy-footer,
-:fullscreen .markdy-footer {
-  flex-shrink: 0 !important;
-  width: 100% !important;
-  max-width: 1400px !important;
-  margin: 0 auto !important;
-  padding: 8px 12px 4px !important;
-}
 .markdy--pseudo-fullscreen {
   position: fixed !important;
   inset: 0 !important;
@@ -3231,21 +3301,34 @@ function ensureSceneStyles(doc) {
   max-width: 100vw !important;
   max-height: 100vh !important;
   background-color: var(--md-canvas, #0b101b) !important;
+  box-sizing: border-box !important;
   display: flex !important;
   flex-direction: column !important;
   justify-content: space-between !important;
   align-items: center !important;
   padding: 16px 20px 12px !important;
-  box-sizing: border-box !important;
   overflow: hidden !important;
 }
+.markdy-diagram-root:fullscreen .markdy-viewport,
+.markdy-diagram-root:-webkit-full-screen .markdy-viewport,
+.markdy-diagram-root:-moz-full-screen .markdy-viewport,
+.markdy-diagram-root:-ms-fullscreen .markdy-viewport,
+.markdy-fullscreen-host .markdy-viewport,
 .markdy--pseudo-fullscreen .markdy-viewport {
   flex: 1 1 auto !important;
   width: 100% !important;
   height: 100% !important;
   max-width: 100% !important;
   max-height: calc(100vh - 64px) !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
 }
+.markdy-diagram-root:fullscreen .markdy-footer,
+.markdy-diagram-root:-webkit-full-screen .markdy-footer,
+.markdy-diagram-root:-moz-full-screen .markdy-footer,
+.markdy-diagram-root:-ms-fullscreen .markdy-footer,
+.markdy-fullscreen-host .markdy-footer,
 .markdy--pseudo-fullscreen .markdy-footer {
   flex-shrink: 0 !important;
   width: 100% !important;
@@ -3447,6 +3530,16 @@ function createDiagram(opts) {
   const DEFAULT_RAINBOW = "hsl(0,90%,60%), hsl(45,90%,55%), hsl(90,80%,50%), hsl(180,80%,50%), hsl(270,80%,55%), hsl(330,90%,60%)";
   const totalDurationMs = plan.duration * 1e3;
   const durationSeconds = plan.duration;
+  container.classList.add("markdy-diagram-root");
+  Object.assign(container.style, {
+    position: "relative",
+    display: "flex",
+    flexDirection: "column",
+    boxSizing: "border-box",
+    width: "100%"
+  });
+  if (container.style.aspectRatio) container.style.aspectRatio = "unset";
+  if (container.style.overflow === "hidden") container.style.overflow = "visible";
   const viewport = document.createElement("div");
   viewport.className = "markdy-viewport";
   Object.assign(viewport.style, {
@@ -3511,8 +3604,7 @@ function createDiagram(opts) {
       padding: "6px 8px 2px",
       background: "transparent"
     });
-    if (container.parentNode) container.parentNode.insertBefore(footer, container.nextSibling);
-    else container.appendChild(footer);
+    container.appendChild(footer);
     return footer;
   }
   let badge = null;
@@ -4057,8 +4149,11 @@ function createDiagram(opts) {
       removeFullscreenListeners?.();
       closeCodePanel?.();
       closeCodePanel = null;
+      container.classList.remove("markdy-diagram-root");
+      container.classList.remove("markdy-fullscreen-host");
+      container.classList.remove("markdy--pseudo-fullscreen");
       if (progressEl?.parentNode === viewport) viewport.removeChild(progressEl);
-      if (footer?.parentNode) footer.parentNode.removeChild(footer);
+      if (footer?.parentNode === container) container.removeChild(footer);
       if (viewport.parentNode === container) container.removeChild(viewport);
     }
   };
@@ -4366,10 +4461,10 @@ function createDiagram(opts) {
     const button = makeControlButton("Full", "Toggle fullscreen view", ICONS2.fullscreen);
     button.className = "markdy-control-fullscreen";
     button.setAttribute("aria-pressed", "false");
-    const host = footer && footer.parentElement ? footer.parentElement : container.parentElement ?? container;
+    const host = container;
     let isPseudoFull = false;
     function syncFullscreenState() {
-      const isFull = isPseudoFull || document.fullscreenElement === host || document.fullscreenElement === container || document.fullscreenElement === viewport || document.webkitFullscreenElement === host || document.webkitFullscreenElement === container;
+      const isFull = isPseudoFull || document.fullscreenElement === host || document.fullscreenElement === viewport || document.webkitFullscreenElement === host || document.webkitFullscreenElement === viewport || document.mozFullScreenElement === host || document.msFullscreenElement === host;
       button.setAttribute("aria-pressed", isFull ? "true" : "false");
       button.title = isFull ? "Exit fullscreen" : "Toggle fullscreen view";
       button.innerHTML = isFull ? `${ICONS2.fullscreen}Exit` : `${ICONS2.fullscreen}Full`;
@@ -4380,15 +4475,16 @@ function createDiagram(opts) {
         host.classList.remove("markdy--pseudo-fullscreen");
       }
       requestAnimationFrame(() => {
+        scaleScene();
         applyViewportTransform();
         syncControls();
       });
     }
     async function toggleFullscreen() {
       try {
-        const isCurrentlyFull = isPseudoFull || document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement;
+        const isCurrentlyFull = isPseudoFull || document.fullscreenElement === host || document.fullscreenElement === viewport || document.webkitFullscreenElement === host || document.mozFullScreenElement === host || document.msFullscreenElement === host;
         if (!isCurrentlyFull) {
-          const req = host.requestFullscreen?.bind(host) || host.webkitRequestFullscreen?.bind(host) || host.mozRequestFullScreen?.bind(host) || host.msRequestFullscreen?.bind(host) || container.requestFullscreen?.bind(container) || container.webkitRequestFullscreen?.bind(container);
+          const req = host.requestFullscreen?.bind(host) || host.webkitRequestFullscreen?.bind(host) || host.mozRequestFullScreen?.bind(host) || host.msRequestFullscreen?.bind(host) || viewport.requestFullscreen?.bind(viewport) || viewport.webkitRequestFullscreen?.bind(viewport);
           if (req) {
             try {
               await req();
@@ -4414,7 +4510,7 @@ function createDiagram(opts) {
             }
           }
         }
-      } catch (err) {
+      } catch {
         if (!isPseudoFull) {
           isPseudoFull = true;
           host.classList.add("markdy--pseudo-fullscreen");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@markdy/renderer-dom",
-  "version": "1.0.21",
+  "version": "1.0.23",
   "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.21"
+    "@markdy/core": "1.0.23"
   },
   "devDependencies": {
     "jsdom": "^29.1.1",
     "tsup": "^8.5.1",
     "typescript": "^5.9.3",
     "vitest": "^4.1.7",
-    "@markdy/stdlib-systems": "1.0.21"
+    "@markdy/stdlib-systems": "1.0.23"
   },
   "scripts": {
     "build": "tsup",