@markdy/renderer-dom 0.7.10 → 0.7.11

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,135 @@ 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 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, sourceState, targetState, sourceType, targetType, 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 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.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", `${mx}`);
+    labelEl.setAttribute("y", `${my - 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 sourceType = ast.actors[ev.actor]?.type ?? "box";
+      const targetType = ast.actors[targetActorName]?.type ?? "box";
+      renderFlowEdge(
+        ev,
+        s,
+        targetState,
+        sourceType,
+        targetType,
+        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.11",
   "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.11"
   },
   "devDependencies": {
     "jsdom": "^29.1.1",