@markdy/renderer-dom 0.8.0 → 0.8.1

package/dist/index.js

@@ -62,25 +62,57 @@ function polylineLength(points) {
 function segmentLength(a, b) {
   return Math.hypot(b.x - a.x, b.y - a.y);
 }
-function labelPointForPath(points, lane) {
-  if (points.length < 2) return points[0] ?? { x: 0, y: 0 };
+var LABEL_BOX_HEIGHT = 16;
+function rectsOverlap(a, b) {
+  return a.x1 < b.x2 && a.x2 > b.x1 && a.y1 < b.y2 && a.y2 > b.y1;
+}
+function overlapCount(rect, obstacles) {
+  let hits = 0;
+  for (const o of obstacles) if (rectsOverlap(rect, o)) hits++;
+  return hits;
+}
+function placeFlowLabel(points, textWidth, obstacles, bounds) {
   let bestIndex = 0;
   let bestLength = -1;
   for (let i = 0; i < points.length - 1; i++) {
     const len = segmentLength(points[i], points[i + 1]);
     if (len > bestLength) {
-      bestIndex = i;
       bestLength = len;
+      bestIndex = i;
     }
   }
-  const a = points[bestIndex];
-  const b = points[bestIndex + 1];
+  const a = points[bestIndex] ?? { x: 0, y: 0 };
+  const b = points[bestIndex + 1] ?? a;
   const mid = { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 };
-  const offset = lane * 8;
-  if (Math.abs(a.x - b.x) >= Math.abs(a.y - b.y)) {
-    return { x: round1(mid.x), y: round1(mid.y - 10 - offset) };
+  const horizontal = Math.abs(a.x - b.x) >= Math.abs(a.y - b.y);
+  const half = textWidth / 2;
+  const halfH = LABEL_BOX_HEIGHT / 2;
+  const pad = 8;
+  const base = horizontal ? 14 : half + 12;
+  const step = horizontal ? LABEL_BOX_HEIGHT + 4 : textWidth + 12;
+  const order = horizontal ? [-1, 1] : [1, -1];
+  const offsets = [];
+  for (let k = 0; k < 8; k++) {
+    for (const sign of order) offsets.push(sign * (base + k * step));
+  }
+  let fallback = null;
+  let fallbackHits = Number.POSITIVE_INFINITY;
+  for (const off of offsets) {
+    const cx = clamp(horizontal ? mid.x : mid.x + off, pad + half, bounds.width - pad - half);
+    const cy = clamp(horizontal ? mid.y + off : mid.y, pad + halfH, bounds.height - pad - halfH);
+    const rect = { x1: cx - half, y1: cy - halfH, x2: cx + half, y2: cy + halfH };
+    const hits = overlapCount(rect, obstacles);
+    if (hits === 0) return { x: round1(cx), y: round1(cy), rect };
+    if (hits < fallbackHits) {
+      fallbackHits = hits;
+      fallback = { x: round1(cx), y: round1(cy), rect };
+    }
   }
-  return { x: round1(mid.x + 10 + offset), y: round1(mid.y) };
+  return fallback ?? {
+    x: round1(mid.x),
+    y: round1(mid.y),
+    rect: { x1: mid.x - half, y1: mid.y - halfH, x2: mid.x + half, y2: mid.y + halfH }
+  };
 }
 function clamp(n, min, max) {
   if (max < min) return n;
@@ -214,11 +246,11 @@ function ensureDefs(svg, theme, id) {
   }
   svg.prepend(defs);
 }
-function createEdgeRuntime(svg, from, to, kind, label, theme, sceneId, obstacles, bounds) {
+function createEdgeRuntime(svg, from, to, kind, label, theme, sceneId, routeObstacles, labelObstacles, bounds, lane) {
   ensureDefs(svg, theme, sceneId);
   const color = theme.edges[kind];
   const style = EDGE_STYLES[kind];
-  const points = dedupePoints(routeOrthogonal(boxRect(from), boxRect(to), obstacles, bounds));
+  const points = dedupePoints(routeOrthogonal(boxRect(from), boxRect(to), routeObstacles, bounds, lane));
   const d = toPathD(points);
   const len = polylineLength(points);
   const group = document.createElementNS("http://www.w3.org/2000/svg", "g");
@@ -243,21 +275,29 @@ function createEdgeRuntime(svg, from, to, kind, label, theme, sceneId, obstacles
   dot.style.filter = `drop-shadow(0 0 6px ${color})`;
   group.append(path, dot);
   let labelEl;
+  let labelRect;
   if (label) {
-    const mid = labelPointForPath(points, 0);
+    const textWidth = label.length * 6.6 + 10;
+    const placement = placeFlowLabel(points, textWidth, labelObstacles, bounds);
+    labelRect = placement.rect;
     labelEl = document.createElementNS("http://www.w3.org/2000/svg", "text");
-    labelEl.setAttribute("x", String(mid.x));
-    labelEl.setAttribute("y", String(mid.y));
+    labelEl.setAttribute("x", String(placement.x));
+    labelEl.setAttribute("y", String(placement.y));
     labelEl.setAttribute("text-anchor", "middle");
+    labelEl.setAttribute("dominant-baseline", "middle");
     labelEl.setAttribute("font-size", "11");
     labelEl.setAttribute("font-family", "ui-monospace, SFMono-Regular, Menlo, monospace");
     labelEl.setAttribute("fill", theme.textMuted);
+    labelEl.setAttribute("stroke", theme.canvas);
+    labelEl.setAttribute("stroke-width", "3");
+    labelEl.setAttribute("paint-order", "stroke");
+    labelEl.setAttribute("stroke-linejoin", "round");
     labelEl.textContent = label;
     labelEl.style.opacity = "0";
     group.appendChild(labelEl);
   }
   svg.appendChild(group);
-  return { group, path, label: labelEl, dot, pathLen: len, points };
+  return { group, path, label: labelEl, dot, pathLen: len, points, labelRect };
 }
 function dotTravelKeyframes(points) {
   const total = polylineLength(points);
@@ -309,6 +349,9 @@ function buildCueAnimations(cues, nodeEls, nodes, theme, scene, titleEl, bounds)
   const anims = [];
   const nodeById = new Map(nodes.map((n) => [n.id, n]));
   const rectById = new Map(nodes.map((n) => [n.id, boxRect(n)]));
+  const allNodeRects = [...rectById.values()];
+  const placedLabels = [];
+  const laneByPair = /* @__PURE__ */ new Map();
   const svg = ensureEdgeLayer(scene);
   const sceneId = `md-${Math.random().toString(36).slice(2, 8)}`;
   anims.push(
@@ -376,11 +419,16 @@ function buildCueAnimations(cues, nodeEls, nodes, theme, scene, titleEl, bounds)
       const from = nodeById.get(seg.from);
       const to = nodeById.get(seg.to);
       if (!from || !to) continue;
-      const obstacles = [];
+      const routeObstacles = [];
       for (const [id, rect] of rectById) {
-        if (id !== seg.from && id !== seg.to) obstacles.push(rect);
+        if (id !== seg.from && id !== seg.to) routeObstacles.push(rect);
       }
-      const runtime = createEdgeRuntime(svg, from, to, seg.op, seg.label, theme, sceneId, obstacles, bounds);
+      const pairKey = [seg.from, seg.to].sort().join("|");
+      const lane = laneByPair.get(pairKey) ?? 0;
+      laneByPair.set(pairKey, lane + 1);
+      const labelObstacles = [...allNodeRects, ...placedLabels];
+      const runtime = createEdgeRuntime(svg, from, to, seg.op, seg.label, theme, sceneId, routeObstacles, labelObstacles, bounds, lane);
+      if (runtime.labelRect) placedLabels.push(runtime.labelRect);
       anims.push(...animateEdgeReveal(runtime, startMs, durMs));
     }
   }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@markdy/renderer-dom",
-  "version": "0.8.0",
-  "description": "Web Animations API renderer for MarkdyScript scenes.",
+  "version": "0.8.1",
+  "description": "Browser renderer for animated MarkdyScript architecture diagrams, built on the Web Animations API.",
   "license": "MIT",
   "type": "module",
   "sideEffects": false,
@@ -20,14 +20,14 @@
   },
   "keywords": [
     "markdy",
-    "animation",
+    "animated-diagram",
+    "architecture-diagram",
+    "diagram-as-code",
     "web-animations-api",
     "renderer",
-    "dom",
-    "declarative-animation",
-    "motion",
-    "framer-motion-alternative",
-    "gsap-alternative"
+    "mermaid-alternative",
+    "svg",
+    "motion"
   ],
   "author": "Hoang Yell <hoangyell@gmail.com> (https://hoangyell.com)",
   "homepage": "https://markdy.com",
@@ -43,14 +43,14 @@
     "access": "public"
   },
   "dependencies": {
-    "@markdy/core": "0.8.0"
+    "@markdy/core": "0.8.1"
   },
   "devDependencies": {
     "jsdom": "^29.1.1",
     "tsup": "^8.5.1",
     "typescript": "^5.9.3",
     "vitest": "^4.1.7",
-    "@markdy/stdlib-systems": "0.8.0"
+    "@markdy/stdlib-systems": "0.8.1"
   },
   "scripts": {
     "build": "tsup",