@markdy/renderer-dom 0.7.28 → 0.7.29

package/dist/index.js

@@ -1748,25 +1748,59 @@ 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 };
+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;
+}
+var LABEL_BOX_HEIGHT = 18;
+function placeFlowLabel(points, textWidth, obstacles, ast) {
   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: mid.x, y: 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 ? 15 : half + 12;
+  const step = horizontal ? LABEL_BOX_HEIGHT + 3 : textWidth + 12;
+  const order = horizontal ? [-1, 1] : [1, -1];
+  const offsets = [];
+  for (let k = 0; k < 7; k++) {
+    for (const sign of order) offsets.push(sign * (base + k * step));
   }
-  return { x: mid.x + 10 + offset, y: mid.y };
+  let fallback = null;
+  let fallbackHits = Number.POSITIVE_INFINITY;
+  for (const off of offsets) {
+    let cx = horizontal ? mid.x : mid.x + off;
+    let cy = horizontal ? mid.y + off : mid.y;
+    cx = clamp(cx, pad + half, ast.meta.width - pad - half);
+    cy = clamp(cy, pad + halfH, ast.meta.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 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;
@@ -1863,7 +1897,9 @@ var STROKE_BY_ACTION = {
 };
 var DEFAULT_STROKE = "#38bdf8";
 var LABEL_MAX_CHARS = 28;
-var EDGE_FADE_MS = 140;
+var LABEL_CHAR_PX = 6.8;
+var EDGE_REVEAL_MS = 220;
+var LABEL_RECTS = /* @__PURE__ */ new WeakMap();
 function ensureEdgeLayer(scene) {
   const existing = scene.querySelector(`svg[${EDGE_LAYER_ATTR}='1']`);
   if (existing) return existing;
@@ -1920,6 +1956,12 @@ function isDashed(ctx) {
   const style = String(ctx.ev.params.style ?? "");
   return style === "dashed" || style === "fire_and_forget" || ctx.ev.action === "response";
 }
+function nodeObstacleRect(state, type, sceneWidth) {
+  const rect = actorRect(state, type);
+  if (type !== "caption") return rect;
+  const halfH = (rect.y2 - rect.y1) / 2 + 4;
+  return { x1: 0, y1: state.y - halfH, x2: sceneWidth, y2: state.y + halfH };
+}
 function buildEdge(ctx, targetName) {
   const { ev, state, states, ast, scene, baseOpts, anims } = ctx;
   const targetState = states.get(targetName);
@@ -1931,8 +1973,12 @@ function buildEdge(ctx, targetName) {
   const stroke = STROKE_BY_ACTION[ev.action] ?? DEFAULT_STROKE;
   const svg = ensureEdgeLayer(scene);
   ensureEdgeDefs(svg);
+  const startMs = Number(baseOpts.delay ?? 0);
+  const durationMs = Math.max(1, Number(baseOpts.duration ?? 500));
+  const revealMs = Math.min(EDGE_REVEAL_MS, durationMs);
   const group = document.createElementNS("http://www.w3.org/2000/svg", "g");
   group.setAttribute("data-markdy-flow-edge", "1");
+  group.style.opacity = "0";
   const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
   path.setAttribute("d", pathD);
   path.setAttribute("fill", "none");
@@ -1956,37 +2002,51 @@ function buildEdge(ctx, targetName) {
   group.appendChild(marker);
   const labelText = String(ev.params.label ?? "");
   if (labelText) {
-    const midPoint = labelPointForPath(points, lane);
+    const shown = labelText.length > LABEL_MAX_CHARS ? `${labelText.slice(0, LABEL_MAX_CHARS - 1)}\u2026` : labelText;
+    const textWidth = shown.length * LABEL_CHAR_PX + 12;
+    const placed = LABEL_RECTS.get(svg) ?? (LABEL_RECTS.set(svg, []), LABEL_RECTS.get(svg));
+    const obstacles = [...placed];
+    for (const [name, nodeState] of states.entries()) {
+      const type = ast.actors[name]?.type ?? "box";
+      obstacles.push(inflateRect(nodeObstacleRect(nodeState, type, ast.meta.width), 2));
+    }
+    const spot = placeFlowLabel(points, textWidth, obstacles, ast);
+    placed.push(spot.rect);
     const label = document.createElementNS("http://www.w3.org/2000/svg", "text");
-    label.setAttribute("x", `${round1(midPoint.x)}`);
-    label.setAttribute("y", `${round1(midPoint.y - 8)}`);
+    label.setAttribute("x", `${spot.x}`);
+    label.setAttribute("y", `${spot.y}`);
     label.setAttribute("text-anchor", "middle");
+    label.setAttribute("dominant-baseline", "middle");
     label.setAttribute("font-size", "12");
     label.setAttribute("font-weight", "700");
     label.setAttribute("paint-order", "stroke");
-    label.setAttribute("stroke", "rgba(2, 6, 23, 0.88)");
+    label.setAttribute("stroke", "rgba(2, 6, 23, 0.9)");
     label.setAttribute("stroke-width", "5");
     label.setAttribute("stroke-linejoin", "round");
-    label.setAttribute("fill", "#cbd5e1");
-    label.setAttribute("filter", "url(#markdy-flow-glow)");
+    label.setAttribute("fill", "#dbe4f0");
     label.setAttribute("data-full-label", labelText);
-    label.textContent = labelText.length > LABEL_MAX_CHARS ? `${labelText.slice(0, LABEL_MAX_CHARS - 1)}\u2026` : labelText;
+    label.textContent = shown;
     group.appendChild(label);
   }
   svg.appendChild(group);
   anims.push(
     path.animate([{ strokeDashoffset: length }, { strokeDashoffset: 0 }], baseOpts),
+    // Travel the dot along the edge, then fade it at arrival so the finished
+    // edge is a clean line + arrowhead rather than a dot resting on the tip.
     marker.animate(
       [
-        { offsetDistance: "0%", opacity: 1 },
-        { offsetDistance: "100%", opacity: 1 }
+        { offsetDistance: "0%", opacity: 1, offset: 0 },
+        { offsetDistance: "100%", opacity: 1, offset: 0.82 },
+        { offsetDistance: "100%", opacity: 0, offset: 1 }
       ],
       baseOpts
     ),
-    group.animate([{ opacity: 1 }, { opacity: 0 }], {
-      delay: Number(baseOpts.delay ?? 0) + Number(baseOpts.duration ?? 0),
-      duration: EDGE_FADE_MS,
-      fill: "forwards"
+    // Reveal the edge at its scheduled time and keep it (persist). `fill: both`
+    // holds opacity 0 during the delay, so nothing appears before its turn.
+    group.animate([{ opacity: 0 }, { opacity: 1 }], {
+      delay: startMs,
+      duration: revealMs,
+      fill: "both"
     })
   );
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@markdy/renderer-dom",
-  "version": "0.7.28",
+  "version": "0.7.29",
   "description": "Web Animations API renderer for MarkdyScript scenes.",
   "license": "MIT",
   "type": "module",
@@ -43,14 +43,14 @@
     "access": "public"
   },
   "dependencies": {
-    "@markdy/core": "0.7.28"
+    "@markdy/core": "0.7.29"
   },
   "devDependencies": {
     "jsdom": "^29.1.1",
     "tsup": "^8.5.1",
     "typescript": "^5.9.3",
     "vitest": "^4.1.7",
-    "@markdy/stdlib-systems": "0.7.28"
+    "@markdy/stdlib-systems": "0.7.29"
   },
   "scripts": {
     "build": "tsup",