@markdy/renderer-dom 0.7.11 → 0.7.13

package/dist/index.js

@@ -645,6 +645,123 @@ function actorCenter(state, actorType) {
     y: state.y + height / 2
   };
 }
+function actorRect(state, actorType) {
+  const { width, height } = actorSizeByType(actorType);
+  return {
+    x1: state.x,
+    y1: state.y,
+    x2: state.x + width,
+    y2: state.y + height
+  };
+}
+function inflateRect(rect, pad) {
+  return {
+    x1: rect.x1 - pad,
+    y1: rect.y1 - pad,
+    x2: rect.x2 + pad,
+    y2: rect.y2 + pad
+  };
+}
+function segmentIntersectsRect(a, b, rect) {
+  const minX = Math.min(a.x, b.x);
+  const maxX = Math.max(a.x, b.x);
+  const minY = Math.min(a.y, b.y);
+  const maxY = Math.max(a.y, b.y);
+  const horizontal = Math.abs(a.y - b.y) < 1e-3;
+  const vertical = Math.abs(a.x - b.x) < 1e-3;
+  if (horizontal) {
+    const yHit = a.y > rect.y1 && a.y < rect.y2;
+    const xOverlap = maxX > rect.x1 && minX < rect.x2;
+    return yHit && xOverlap;
+  }
+  if (vertical) {
+    const xHit = a.x > rect.x1 && a.x < rect.x2;
+    const yOverlap = maxY > rect.y1 && minY < rect.y2;
+    return xHit && yOverlap;
+  }
+  return false;
+}
+function countPathIntersections(points, obstacles) {
+  let hits = 0;
+  for (let i = 0; i < points.length - 1; i++) {
+    for (const obstacle of obstacles) {
+      if (segmentIntersectsRect(points[i], points[i + 1], obstacle)) hits++;
+    }
+  }
+  return hits;
+}
+function toPathD(points) {
+  return points.map((p, i) => `${i === 0 ? "M" : "L"} ${round1(p.x)} ${round1(p.y)}`).join(" ");
+}
+function round1(n) {
+  return Math.round(n * 10) / 10;
+}
+function polylineLength(points) {
+  let total = 0;
+  for (let i = 0; i < points.length - 1; i++) {
+    total += Math.hypot(points[i + 1].x - points[i].x, points[i + 1].y - points[i].y);
+  }
+  return Math.max(1, total);
+}
+function pointAtDistance(points, dist) {
+  let remain = dist;
+  for (let i = 0; i < points.length - 1; i++) {
+    const a = points[i];
+    const b = points[i + 1];
+    const seg = Math.hypot(b.x - a.x, b.y - a.y);
+    if (remain <= seg || i === points.length - 2) {
+      const t = seg <= 0 ? 0 : remain / seg;
+      return { x: a.x + (b.x - a.x) * t, y: a.y + (b.y - a.y) * t };
+    }
+    remain -= seg;
+  }
+  return points[0];
+}
+function routeFlowPath(sourceName, targetName, sourceState, targetState, states, ast, lane) {
+  const sourceRect = actorRect(sourceState, ast.actors[sourceName]?.type ?? "box");
+  const targetRect = actorRect(targetState, ast.actors[targetName]?.type ?? "box");
+  const laneShift = lane * 18;
+  const sourceCenter = actorCenter(sourceState, ast.actors[sourceName]?.type ?? "box");
+  const targetCenter = actorCenter(targetState, ast.actors[targetName]?.type ?? "box");
+  const horizontalPrimary = Math.abs(targetCenter.x - sourceCenter.x) >= Math.abs(targetCenter.y - sourceCenter.y);
+  const source = horizontalPrimary ? { x: targetCenter.x >= sourceCenter.x ? sourceRect.x2 : sourceRect.x1, y: sourceCenter.y } : { x: sourceCenter.x, y: targetCenter.y >= sourceCenter.y ? sourceRect.y2 : sourceRect.y1 };
+  const target = horizontalPrimary ? { x: targetCenter.x >= sourceCenter.x ? targetRect.x1 : targetRect.x2, y: targetCenter.y } : { x: targetCenter.x, y: targetCenter.y >= sourceCenter.y ? targetRect.y1 : targetRect.y2 };
+  const obstacles = [];
+  for (const [name, state] of states.entries()) {
+    if (name === sourceName || name === targetName) continue;
+    const type = ast.actors[name]?.type ?? "box";
+    obstacles.push(inflateRect(actorRect(state, type), 8));
+  }
+  const candidates = [];
+  if (Math.abs(source.y - target.y) < 1e-3 || Math.abs(source.x - target.x) < 1e-3) {
+    candidates.push([source, target]);
+  }
+  const midX = round1((source.x + target.x) / 2 + laneShift);
+  const midY = round1((source.y + target.y) / 2 + laneShift);
+  candidates.push(
+    [source, { x: midX, y: source.y }, { x: midX, y: target.y }, target],
+    [source, { x: source.x, y: midY }, { x: target.x, y: midY }, target]
+  );
+  const minObstacleY = obstacles.length ? Math.min(...obstacles.map((o) => o.y1)) : Math.min(source.y, target.y);
+  const maxObstacleY = obstacles.length ? Math.max(...obstacles.map((o) => o.y2)) : Math.max(source.y, target.y);
+  const topLane = Math.max(16, minObstacleY - 24 - lane * 12);
+  const bottomLane = Math.min(ast.meta.height - 16, maxObstacleY + 24 + lane * 12);
+  candidates.push(
+    [source, { x: source.x, y: topLane }, { x: target.x, y: topLane }, target],
+    [source, { x: source.x, y: bottomLane }, { x: target.x, y: bottomLane }, target]
+  );
+  let best = candidates[0];
+  let bestHits = Number.POSITIVE_INFINITY;
+  for (const candidate of candidates) {
+    const hits = countPathIntersections(candidate, obstacles);
+    if (hits < bestHits) {
+      best = candidate;
+      bestHits = hits;
+      if (hits === 0) break;
+    }
+  }
+  return best;
+}
 function ensureEdgeLayer(scene) {
   const existing = scene.querySelector("svg[data-markdy-edge-layer='1']");
   if (existing) return existing;
@@ -662,18 +779,22 @@ function ensureEdgeLayer(scene) {
   scene.appendChild(svg);
   return svg;
 }
-function renderFlowEdge(ev, sourceState, targetState, sourceType, targetType, scene, baseOpts, anims) {
+function renderFlowEdge(ev, sourceName, targetName, sourceState, targetState, states, ast, lane, scene, baseOpts, anims) {
   const styleToken = String(ev.params.style ?? "");
   const isDashed = styleToken === "dashed" || styleToken === "fire_and_forget" || ev.action === "response";
   const stroke = FLOW_STROKE_BY_ACTION[ev.action] ?? "#38bdf8";
-  const source = actorCenter(sourceState, sourceType);
-  const target = actorCenter(targetState, targetType);
-  const dx = target.x - source.x;
-  const dy = target.y - source.y;
-  const length = Math.max(1, Math.hypot(dx, dy));
-  const mx = source.x + dx / 2;
-  const my = source.y + dy / 2;
-  const pathD = `M ${source.x} ${source.y} L ${target.x} ${target.y}`;
+  const points = routeFlowPath(
+    sourceName,
+    targetName,
+    sourceState,
+    targetState,
+    states,
+    ast,
+    lane
+  );
+  const length = polylineLength(points);
+  const midPoint = pointAtDistance(points, length * 0.5);
+  const pathD = toPathD(points);
   const svg = ensureEdgeLayer(scene);
   const group = document.createElementNS("http://www.w3.org/2000/svg", "g");
   group.setAttribute("data-markdy-flow-edge", "1");
@@ -682,6 +803,7 @@ function renderFlowEdge(ev, sourceState, targetState, sourceType, targetType, sc
   path.setAttribute("fill", "none");
   path.setAttribute("stroke", stroke);
   path.setAttribute("stroke-width", "2.5");
+  path.setAttribute("data-markdy-flow-action", ev.action);
   path.style.strokeDasharray = isDashed ? "8 6" : `${length}`;
   path.style.strokeDashoffset = `${length}`;
   group.appendChild(path);
@@ -696,8 +818,8 @@ function renderFlowEdge(ev, sourceState, targetState, sourceType, targetType, sc
   if (labelRaw) {
     const label = labelRaw.length > 28 ? `${labelRaw.slice(0, 27)}\u2026` : labelRaw;
     const labelEl = document.createElementNS("http://www.w3.org/2000/svg", "text");
-    labelEl.setAttribute("x", `${mx}`);
-    labelEl.setAttribute("y", `${my - 8}`);
+    labelEl.setAttribute("x", `${round1(midPoint.x)}`);
+    labelEl.setAttribute("y", `${round1(midPoint.y - 8)}`);
     labelEl.setAttribute("text-anchor", "middle");
     labelEl.setAttribute("font-size", "12");
     labelEl.setAttribute("fill", "#cbd5e1");
@@ -722,7 +844,7 @@ function renderFlowEdge(ev, sourceState, targetState, sourceType, targetType, sc
     })
   );
 }
-function buildAction(ev, el, s, baseOpts, delayMs, durMs, ast, states, actorEls, scene, assetOverrides, faceSwaps, anims, txFn) {
+function buildAction(ev, el, s, baseOpts, delayMs, durMs, ast, states, _actorEls, scene, assetOverrides, faceSwaps, anims, txFn) {
   switch (ev.action) {
     case "request":
     case "response":
@@ -731,14 +853,16 @@ function buildAction(ev, el, s, baseOpts, delayMs, durMs, ast, states, actorEls,
       if (!targetActorName) break;
       const targetState = states.get(targetActorName);
       if (!targetState) break;
-      const sourceType = ast.actors[ev.actor]?.type ?? "box";
-      const targetType = ast.actors[targetActorName]?.type ?? "box";
+      const lane = ev.line % 5 - 2;
       renderFlowEdge(
         ev,
+        ev.actor,
+        targetActorName,
         s,
         targetState,
-        sourceType,
-        targetType,
+        states,
+        ast,
+        lane,
         scene,
         baseOpts,
         anims

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@markdy/renderer-dom",
-  "version": "0.7.11",
+  "version": "0.7.13",
   "description": "Web Animations API renderer for MarkdyScript scenes.",
   "license": "MIT",
   "type": "module",
@@ -43,7 +43,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@markdy/core": "0.7.11"
+    "@markdy/core": "0.7.13"
   },
   "devDependencies": {
     "jsdom": "^29.1.1",