@markdy/renderer-dom 0.7.10 → 0.7.12

package/dist/index.js

@@ -367,6 +367,66 @@ function createActorEl(name, def, assetDefs, assetOverrides) {
       el = createFigureEl(def);
       break;
     }
+    case "service":
+    case "client":
+    case "db":
+    case "queue": {
+      const card = document.createElement("div");
+      const label = document.createElement("div");
+      label.textContent = def.args[0] ?? "";
+      Object.assign(label.style, {
+        fontFamily: "system-ui, -apple-system, sans-serif",
+        fontSize: `${def.size ?? 16}px`,
+        fontWeight: "600",
+        color: "#e2e8f0",
+        textAlign: "center",
+        lineHeight: "1.2",
+        pointerEvents: "none",
+        whiteSpace: "nowrap",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        maxWidth: "100%"
+      });
+      Object.assign(card.style, {
+        width: "180px",
+        height: "84px",
+        boxSizing: "border-box",
+        border: "1px solid #475569",
+        background: "#0f172a",
+        display: "grid",
+        placeItems: "center",
+        padding: "10px 12px"
+      });
+      if (def.type === "service") {
+        card.style.borderRadius = "12px";
+        card.style.background = "linear-gradient(180deg, #1e293b 0%, #0f172a 100%)";
+      } else if (def.type === "client") {
+        const bar = document.createElement("div");
+        Object.assign(bar.style, {
+          position: "absolute",
+          top: "8px",
+          left: "8px",
+          right: "8px",
+          height: "8px",
+          borderRadius: "6px",
+          background: "#334155"
+        });
+        card.style.position = "relative";
+        card.style.borderRadius = "10px";
+        card.style.paddingTop = "20px";
+        card.appendChild(bar);
+      } else if (def.type === "db") {
+        card.style.borderRadius = "50% / 14%";
+        card.style.background = "linear-gradient(180deg, #334155 0%, #0f172a 70%)";
+        card.style.boxShadow = "inset 0 10px 0 rgba(226, 232, 240, 0.12)";
+      } else if (def.type === "queue") {
+        card.style.borderRadius = "8px";
+        card.style.boxShadow = "-6px -6px 0 rgba(30, 41, 59, 0.9), -12px -12px 0 rgba(15, 23, 42, 0.9)";
+      }
+      card.appendChild(label);
+      el = card;
+      break;
+    }
     default: {
       const div = document.createElement("div");
       div.style.width = "100px";
@@ -437,7 +497,22 @@ function buildAnimations(ast, actorEls, scene, assetOverrides, faceSwaps) {
     const el = actorEls.get(ev.actor);
     const s = states.get(ev.actor);
     if (!el || !s) continue;
-    buildAction(ev, el, s, baseOpts, delayMs, durMs, ast, states, scene, assetOverrides, faceSwaps, anims, txFor(ev.actor));
+    buildAction(
+      ev,
+      el,
+      s,
+      baseOpts,
+      delayMs,
+      durMs,
+      ast,
+      states,
+      actorEls,
+      scene,
+      assetOverrides,
+      faceSwaps,
+      anims,
+      txFor(ev.actor)
+    );
   }
   return anims;
 }
@@ -541,8 +616,259 @@ function buildCameraAction(ev, scene, ast, baseOpts, anims, cameraState) {
       break;
   }
 }
-function buildAction(ev, el, s, baseOpts, delayMs, durMs, ast, states, scene, assetOverrides, faceSwaps, anims, txFn) {
+var FLOW_STROKE_BY_ACTION = {
+  request: "#38bdf8",
+  response: "#a78bfa",
+  emit: "#f59e0b"
+};
+function actorSizeByType(type) {
+  switch (type) {
+    case "service":
+    case "client":
+    case "db":
+    case "queue":
+      return { width: 180, height: 84 };
+    case "box":
+      return { width: 100, height: 100 };
+    case "caption":
+      return { width: 260, height: 56 };
+    case "figure":
+      return { width: 120, height: 170 };
+    default:
+      return { width: 140, height: 42 };
+  }
+}
+function actorCenter(state, actorType) {
+  const { width, height } = actorSizeByType(actorType);
+  return {
+    x: state.x + width / 2,
+    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;
+  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  svg.setAttribute("data-markdy-edge-layer", "1");
+  Object.assign(svg.style, {
+    position: "absolute",
+    inset: "0",
+    width: "100%",
+    height: "100%",
+    overflow: "visible",
+    pointerEvents: "none",
+    zIndex: "95"
+  });
+  scene.appendChild(svg);
+  return svg;
+}
+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 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");
+  const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+  path.setAttribute("d", pathD);
+  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);
+  const marker = document.createElementNS("http://www.w3.org/2000/svg", "circle");
+  marker.setAttribute("r", "3");
+  marker.setAttribute("fill", stroke);
+  marker.style.offsetPath = `path('${pathD}')`;
+  marker.style.offsetDistance = "0%";
+  marker.style.opacity = "0";
+  group.appendChild(marker);
+  const labelRaw = String(ev.params.label ?? "");
+  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", `${round1(midPoint.x)}`);
+    labelEl.setAttribute("y", `${round1(midPoint.y - 8)}`);
+    labelEl.setAttribute("text-anchor", "middle");
+    labelEl.setAttribute("font-size", "12");
+    labelEl.setAttribute("fill", "#cbd5e1");
+    labelEl.textContent = label;
+    labelEl.setAttribute("data-full-label", labelRaw);
+    group.appendChild(labelEl);
+  }
+  svg.appendChild(group);
+  anims.push(path.animate([{ strokeDashoffset: length }, { strokeDashoffset: 0 }], baseOpts));
+  anims.push(
+    marker.animate(
+      [{ offsetDistance: "0%", opacity: 1 }, { offsetDistance: "100%", opacity: 1 }],
+      baseOpts
+    )
+  );
+  const fadeOutDelay = Number(baseOpts.delay ?? 0) + Number(baseOpts.duration ?? 0);
+  anims.push(
+    group.animate([{ opacity: 1 }, { opacity: 0 }], {
+      delay: fadeOutDelay,
+      duration: 140,
+      fill: "forwards"
+    })
+  );
+}
+function buildAction(ev, el, s, baseOpts, delayMs, durMs, ast, states, _actorEls, scene, assetOverrides, faceSwaps, anims, txFn) {
   switch (ev.action) {
+    case "request":
+    case "response":
+    case "emit": {
+      const targetActorName = String(ev.params.to ?? "");
+      if (!targetActorName) break;
+      const targetState = states.get(targetActorName);
+      if (!targetState) break;
+      const lane = ev.line % 5 - 2;
+      renderFlowEdge(
+        ev,
+        ev.actor,
+        targetActorName,
+        s,
+        targetState,
+        states,
+        ast,
+        lane,
+        scene,
+        baseOpts,
+        anims
+      );
+      break;
+    }
     // ── move ────────────────────────────────────────────────────────────────
     case "move": {
       const toArr = ev.params.to;

package/package.json

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