html-overlay-node 0.1.9 → 0.1.11

package/src/render/CanvasRenderer.js

@@ -1,14 +1,13 @@
 import { portRect } from "./hitTest.js";
 
 export class CanvasRenderer {
-  static FONT_SIZE = 12;
+  static FONT_SIZE = 11;
   static SELECTED_NODE_COLOR = "#6cf";
   constructor(canvas, { theme = {}, registry, edgeStyle = "orthogonal" } = {}) {
     this.canvas = canvas;
     this.ctx = canvas.getContext("2d");
-    this.registry = registry; // to call per-node onDraw
+    this.registry = registry;
 
-    // viewport transform
     this.scale = 1;
     this.minScale = 0.25;
     this.maxScale = 3;
@@ -20,23 +19,25 @@ export class CanvasRenderer {
 
     this.theme = Object.assign(
       {
-        bg: "#0d0d0f", // Darker background
-        grid: "#1a1a1d", // Subtle grid
-        node: "#16161a", // Darker nodes
-        nodeBorder: "#2a2a2f", // Subtle border
-        title: "#1f1f24", // Darker header
-        text: "#e4e4e7", // Softer white
-        textMuted: "#a1a1aa", // Muted text
-        port: "#6366f1", // Indigo for data ports
-        portExec: "#10b981", // Emerald for exec ports
-        edge: "#52525b", // Neutral edge color
-        edgeActive: "#8b5cf6", // Purple for active
-        accent: "#6366f1", // Indigo accent
-        accentBright: "#818cf8", // Brighter accent
+        bg: "#0e0e16",
+        grid: "#1c1c2c",
+        node: "rgba(22, 22, 34, 0.9)",
+        nodeBorder: "rgba(255, 255, 255, 0.08)",
+        title: "rgba(28, 28, 42, 0.95)",
+        text: "#f5f5f7",
+        textMuted: "#8e8eaf",
+        port: "#4f46e5",
+        portExec: "#10b981",
+        edge: "rgba(255, 255, 255, 0.12)",
+        edgeActive: "#34c38f", // green for active edge animation
+        accent: "#6366f1",
+        accentBright: "#818cf8",
+        accentGlow: "rgba(99, 102, 241, 0.25)",
       },
       theme
     );
   }
+
   setEdgeStyle(style) {
     this.edgeStyle = style === "line" || style === "orthogonal" ? style : "bezier";
   }
@@ -51,35 +52,25 @@ export class CanvasRenderer {
     this.scale = Math.min(this.maxScale, Math.max(this.minScale, scale));
     this.offsetX = offsetX;
     this.offsetY = offsetY;
-    // Trigger callback to sync HTML overlay transform
     this._onTransformChange?.();
   }
-
-  /**
-   * Set callback to be called when transform changes (zoom/pan)
-   * @param {Function} callback - Function to call on transform change
-   */
   setTransformChangeCallback(callback) {
     this._onTransformChange = callback;
   }
   panBy(dx, dy) {
     this.offsetX += dx;
     this.offsetY += dy;
-    // Trigger callback to sync HTML overlay transform
     this._onTransformChange?.();
   }
   zoomAt(factor, cx, cy) {
-    // factor > 1 zoom in, < 1 zoom out, centered at screen point (cx, cy)
     const prev = this.scale;
     const next = Math.min(this.maxScale, Math.max(this.minScale, prev * factor));
     if (next === prev) return;
-    // keep the world point under cursor fixed: adjust offset
     const wx = (cx - this.offsetX) / prev;
     const wy = (cy - this.offsetY) / prev;
     this.offsetX = cx - wx * next;
     this.offsetY = cy - wy * next;
     this.scale = next;
-    // Trigger callback to sync HTML overlay transform
     this._onTransformChange?.();
   }
 
@@ -97,8 +88,7 @@ export class CanvasRenderer {
   }
   _applyTransform() {
     const { ctx } = this;
-    // CRITICAL: Must match HTMLOverlay transformation order (translate then scale)
-    ctx.setTransform(1, 0, 0, 1, 0, 0); // Reset first
+    ctx.setTransform(1, 0, 0, 1, 0, 0);
     ctx.translate(this.offsetX, this.offsetY);
     ctx.scale(this.scale, this.scale);
   }
@@ -107,9 +97,9 @@ export class CanvasRenderer {
   }
 
   // ── Drawing ────────────────────────────────────────────────────────────────
-  _drawArrowhead(x1, y1, x2, y2, size = 10) {
+  _drawArrowhead(x1, y1, x2, y2, size = 8) {
     const { ctx } = this;
-    const s = size / this.scale; // 줌에 따라 크기 보정
+    const s = size / this.scale;
     const ang = Math.atan2(y2 - y1, x2 - x1);
 
     ctx.beginPath();
@@ -117,33 +107,25 @@ export class CanvasRenderer {
     ctx.lineTo(x2 - s * Math.cos(ang - Math.PI / 6), y2 - s * Math.sin(ang - Math.PI / 6));
     ctx.lineTo(x2 - s * Math.cos(ang + Math.PI / 6), y2 - s * Math.sin(ang + Math.PI / 6));
     ctx.closePath();
-    ctx.fill(); // 선 색상과 동일한 fill이 자연스러움
+    ctx.fill();
   }
 
   _drawScreenText(
     text,
     lx,
     ly,
-    {
-      fontPx = 12,
-      color = this.theme.text,
-      align = "left",
-      baseline = "alphabetic",
-      dpr = 1, // 추후 devicePixelRatio 도입
-    } = {}
+    { fontPx = 11, color = this.theme.text, align = "left", baseline = "alphabetic" } = {}
   ) {
     const { ctx } = this;
     const { x: sx, y: sy } = this.worldToScreen(lx, ly);
 
     ctx.save();
-    // 화면 좌표계(스케일=1)로 리셋
     this._resetTransform();
 
-    // 픽셀 스냅(번짐 방지)
     const px = Math.round(sx) + 0.5;
     const py = Math.round(sy) + 0.5;
 
-    ctx.font = `${fontPx * this.scale}px system-ui`;
+    ctx.font = `${fontPx * this.scale}px "Inter", system-ui, sans-serif`;
     ctx.fillStyle = color;
     ctx.textAlign = align;
     ctx.textBaseline = baseline;
@@ -153,40 +135,50 @@ export class CanvasRenderer {
 
   drawGrid() {
     const { ctx, canvas, theme, scale, offsetX, offsetY } = this;
-    // clear screen in screen space
 
     this._resetTransform();
     ctx.fillStyle = theme.bg;
     ctx.fillRect(0, 0, canvas.width, canvas.height);
 
-    // draw grid in world space so it pans/zooms
     this._applyTransform();
-    // Make grid subtle but visible
-    ctx.strokeStyle = this._rgba(theme.grid, 0.35); // Subtle but visible
-    ctx.lineWidth = 1 / scale; // keep 1px apparent
-
-    const base = 20; // world units
-    const step = base;
 
-    // visible world bounds
     const x0 = -offsetX / scale;
     const y0 = -offsetY / scale;
     const x1 = (canvas.width - offsetX) / scale;
     const y1 = (canvas.height - offsetY) / scale;
 
-    const startX = Math.floor(x0 / step) * step;
-    const startY = Math.floor(y0 / step) * step;
-
-    ctx.beginPath();
-    for (let x = startX; x <= x1; x += step) {
-      ctx.moveTo(x, y0);
-      ctx.lineTo(x, y1);
+    // Minor dots (24px grid)
+    const minorStep = 24;
+    const majorStep = 120;
+    const minorR = 1 / scale;
+    const majorR = 1.5 / scale;
+
+    const startX = Math.floor(x0 / minorStep) * minorStep;
+    const startY = Math.floor(y0 / minorStep) * minorStep;
+
+    ctx.fillStyle = this._rgba(theme.grid, 0.7);
+    for (let gx = startX; gx <= x1; gx += minorStep) {
+      for (let gy = startY; gy <= y1; gy += minorStep) {
+        const isMajorX = Math.round(gx / majorStep) * majorStep === Math.round(gx);
+        const isMajorY = Math.round(gy / majorStep) * majorStep === Math.round(gy);
+        if (isMajorX && isMajorY) continue;
+        ctx.beginPath();
+        ctx.arc(gx, gy, minorR, 0, Math.PI * 2);
+        ctx.fill();
+      }
     }
-    for (let y = startY; y <= y1; y += step) {
-      ctx.moveTo(x0, y);
-      ctx.lineTo(x1, y);
+
+    // Major intersection dots
+    const majorStartX = Math.floor(x0 / majorStep) * majorStep;
+    const majorStartY = Math.floor(y0 / majorStep) * majorStep;
+    ctx.fillStyle = this._rgba(theme.grid, 1.0);
+    for (let gx = majorStartX; gx <= x1; gx += majorStep) {
+      for (let gy = majorStartY; gy <= y1; gy += majorStep) {
+        ctx.beginPath();
+        ctx.arc(gx, gy, majorR, 0, Math.PI * 2);
+        ctx.fill();
+      }
     }
-    ctx.stroke();
 
     this._resetTransform();
   }
@@ -196,15 +188,14 @@ export class CanvasRenderer {
     {
       selection = new Set(),
       tempEdge = null,
-      running = false,
       time = performance.now(),
-      dt = 0,
-      groups = null,
+      activeNodes = new Set(), // Now explicitly passing active nodes
       activeEdges = new Set(),
+      activeEdgeTimes = new Map(),
       drawEdges = true,
+      loopActiveEdges = false,
     } = {}
   ) {
-    // Update transforms first
     graph.updateWorldTransforms();
 
     this.drawGrid();
@@ -213,7 +204,7 @@ export class CanvasRenderer {
 
     ctx.save();
 
-    // 1. Draw Groups (Backgrounds)
+    // 1. Draw Groups
     for (const n of graph.nodes.values()) {
       if (n.type === "core/Group") {
         const sel = selection.has(n.id);
@@ -223,40 +214,48 @@ export class CanvasRenderer {
       }
     }
 
-    // 2. Draw Edges (conditionally - can be skipped for port canvas rendering)
+    // 2. Draw Edges
     if (drawEdges) {
-      ctx.lineWidth = 1.5 / this.scale;
-
-      // Calculate animation values if running
-      let dashArray = null;
-      let dashOffset = 0;
-      if (running) {
-        const speed = 120;
-        const phase = (((time / 1000) * speed) / this.scale) % CanvasRenderer.FONT_SIZE;
-        dashArray = [6 / this.scale, 6 / this.scale];
-        dashOffset = -phase;
-      }
+      ctx.lineWidth = 2.5 / this.scale;
 
       for (const e of graph.edges.values()) {
-        const shouldAnimate = activeEdges && activeEdges.size > 0 && activeEdges.has(e.id);
-
-        if (running && shouldAnimate && dashArray) {
-          ctx.setLineDash(dashArray);
-          ctx.lineDashOffset = dashOffset;
-        } else {
-          ctx.setLineDash([]);
-          ctx.lineDashOffset = 0;
-        }
-
         const isActive = activeEdges && activeEdges.has(e.id);
+
         if (isActive) {
-          ctx.strokeStyle = "#00ffff";
+          // Glow pass
+          ctx.save();
+          ctx.shadowColor = this.theme.edgeActive;
+          ctx.shadowBlur = 8 / this.scale;
+          ctx.strokeStyle = this.theme.edgeActive;
           ctx.lineWidth = 3 / this.scale;
+          ctx.setLineDash([]);
+          this._drawEdge(graph, e);
+          ctx.restore();
+
+          // Animated flowing dot
+          const activationTime = activeEdgeTimes?.get(e.id) ?? time;
+          const flowSpeed = this.theme.flowSpeed || 150;
+          const duration = (edgeLen / flowSpeed) * 1000;
+          const rawT = (time - activationTime) / duration;
+          const dotT = loopActiveEdges ? ((time / 1000) * (flowSpeed / edgeLen)) % 1 : ((time / 1000) * 1.2) % 1;
+
+          const dotPos = this._getEdgeDotPosition(graph, e, dotT);
+          if (dotPos) {
+            ctx.save();
+            ctx.fillStyle = "#ffffff";
+            ctx.shadowColor = this.theme.edgeActive;
+            ctx.shadowBlur = 10 / this.scale;
+            ctx.beginPath();
+            ctx.arc(dotPos.x, dotPos.y, 3 / this.scale, 0, Math.PI * 2);
+            ctx.fill();
+            ctx.restore();
+          }
         } else {
+          ctx.setLineDash([]);
           ctx.strokeStyle = theme.edge;
-          ctx.lineWidth = 1.5 / this.scale;
+          ctx.lineWidth = 2.5 / this.scale;
+          this._drawEdge(graph, e);
         }
-        this._drawEdge(graph, e);
       }
     }
 
@@ -266,7 +265,9 @@ export class CanvasRenderer {
       const b = this.screenToWorld(tempEdge.x2, tempEdge.y2);
 
       const prevDash = this.ctx.getLineDash();
-      this.ctx.setLineDash([6 / this.scale, 6 / this.scale]);
+      this.ctx.setLineDash([5 / this.scale, 5 / this.scale]);
+      this.ctx.strokeStyle = this._rgba(this.theme.accentBright, 0.7);
+      this.ctx.lineWidth = 2.5 / this.scale;
 
       let ptsForArrow = null;
       if (this.edgeStyle === "line") {
@@ -290,33 +291,23 @@ export class CanvasRenderer {
       if (ptsForArrow && ptsForArrow.length >= 2) {
         const p1 = ptsForArrow[ptsForArrow.length - 2];
         const p2 = ptsForArrow[ptsForArrow.length - 1];
-        this.ctx.fillStyle = this.theme.edge;
-        this.ctx.strokeStyle = this.theme.edge; // Ensure color is set
-        this._drawArrowhead(p1.x, p1.y, p2.x, p2.y, 12);
+        this.ctx.fillStyle = this.theme.accentBright;
+        this._drawArrowhead(p1.x, p1.y, p2.x, p2.y, 10);
       }
     }
 
-    // 3. Draw Other Nodes (AFTER edges)
-    // For nodes with HTML overlays, SKIP canvas rendering entirely
+    // 3. Draw Non-Group Nodes
     for (const n of graph.nodes.values()) {
       if (n.type !== "core/Group") {
         const sel = selection.has(n.id);
         const def = this.registry?.types?.get(n.type);
         const hasHtmlOverlay = !!def?.html;
 
-        // Only draw node body on canvas if it DOESN'T have HTML overlay
-        if (!hasHtmlOverlay) {
-          this._drawNode(n, sel, true); // Draw WITHOUT ports (drawn on port canvas)
-          if (def?.onDraw) def.onDraw(n, { ctx, theme, renderer: this });
-        }
-      }
-    }
+        this._drawNode(n, sel, !hasHtmlOverlay ? true : false);
 
-    // 4. Draw ports for HTML overlay nodes LAST (so they appear above HTML)
-    for (const n of graph.nodes.values()) {
-      if (n.type !== "core/Group") {
-        const def = this.registry?.types?.get(n.type);
-        const hasHtmlOverlay = !!def?.html;
+        if (def?.onDraw) {
+          def.onDraw(n, { ctx, theme, renderer: this });
+        }
 
         if (hasHtmlOverlay) {
           this._drawPorts(n);
@@ -324,6 +315,14 @@ export class CanvasRenderer {
       }
     }
 
+    // 4. Highlight Active Nodes (Marching Ants)
+    if (activeNodes.size > 0) {
+      for (const nodeId of activeNodes) {
+        const node = graph.nodes.get(nodeId);
+        if (node) this._drawActiveNodeBorder(node, time);
+      }
+    }
+
     this._resetTransform();
   }
 
@@ -346,177 +345,275 @@ export class CanvasRenderer {
 
   _drawNode(node, selected, skipPorts = false) {
     const { ctx, theme } = this;
-    const r = 8;
+    const r = 2; // Sharp 2px rounding
     const { x, y, w, h } = node.computed;
+    const headerH = 26; // Slightly taller header for premium feel
 
-    // Draw subtle shadow
-    if (!selected) {
+    // Get color from node or registry
+    const typeDef = this.registry?.types?.get(node.type);
+    const categoryColor = node.color || typeDef?.color || theme.accent;
+
+    // Selection glow — white, slightly offset outside node
+    if (selected) {
       ctx.save();
-      ctx.shadowColor = "rgba(0, 0, 0, 0.3)";
+      ctx.shadowColor = "rgba(255,255,255,0.3)";
       ctx.shadowBlur = 8 / this.scale;
-      ctx.shadowOffsetY = 2 / this.scale;
-      ctx.fillStyle = "rgba(0, 0, 0, 0.2)";
-      roundRect(ctx, x, y, w, h, r);
-      ctx.fill();
+      ctx.strokeStyle = "#ffffff";
+      ctx.lineWidth = 1.5 / this.scale;
+      const pad = 8 / this.scale;
+      roundRect(ctx, x - pad, y - pad, w + pad * 2, h + pad * 2, r + pad);
+      ctx.stroke();
       ctx.restore();
     }
 
-    // Draw main body
+    // Drop shadow
+    ctx.save();
+    ctx.shadowColor = "rgba(0,0,0,0.7)";
+    ctx.shadowBlur = 20 / this.scale;
+    ctx.shadowOffsetY = 6 / this.scale;
+    ctx.fillStyle = theme.node;
+    roundRect(ctx, x, y, w, h, r);
+    ctx.fill();
+    ctx.restore();
+
+    // Node body
     ctx.fillStyle = theme.node;
-    ctx.strokeStyle = selected ? theme.accentBright : theme.nodeBorder;
-    ctx.lineWidth = (selected ? 1.5 : 1) / this.scale;
+    ctx.strokeStyle = selected ? "rgba(255,255,255,0.4)" : theme.nodeBorder;
+    ctx.lineWidth = 1 / this.scale;
     roundRect(ctx, x, y, w, h, r);
     ctx.fill();
     ctx.stroke();
 
-    // Draw header
+    // Header
     ctx.fillStyle = theme.title;
-    roundRect(ctx, x, y, w, 24, { tl: r, tr: r, br: 0, bl: 0 });
+    roundRect(ctx, x, y, w, headerH, { tl: r, tr: r, br: 0, bl: 0 });
     ctx.fill();
 
-    // Header border (only top and sides)
-    ctx.strokeStyle = selected ? theme.accentBright : theme.nodeBorder;
-    ctx.lineWidth = (selected ? 1.5 : 1) / this.scale;
+    // Subtle category-based header background
+    ctx.save();
+    ctx.globalCompositeOperation = "source-atop";
+    ctx.fillStyle = categoryColor;
+    ctx.globalAlpha = 0.25; // Increased from 0.12 for better visibility
+    ctx.fillRect(x, y, w, headerH);
+    ctx.restore();
+
+    // Header bottom separator
+    ctx.strokeStyle = selected ? "rgba(255,255,255,0.2)" : this._rgba(theme.nodeBorder, 0.6);
+    ctx.lineWidth = 1 / this.scale;
     ctx.beginPath();
-    // Top-left corner to top-right corner
-    ctx.moveTo(x + r, y);
-    ctx.lineTo(x + w - r, y);
-    ctx.quadraticCurveTo(x + w, y, x + w, y + r);
-    // Right side down to header bottom
-    ctx.lineTo(x + w, y + 24);
-    // Move to left side header bottom
-    ctx.moveTo(x, y + 24);
-    // Left side up to top-left corner
-    ctx.lineTo(x, y + r);
-    ctx.quadraticCurveTo(x, y, x + r, y);
+    ctx.moveTo(x, y + headerH);
+    ctx.lineTo(x + w, y + headerH);
     ctx.stroke();
 
-    this._drawScreenText(node.title, x + 8, y + CanvasRenderer.FONT_SIZE, {
+    // Accent strip at top
+    ctx.fillStyle = categoryColor;
+    ctx.beginPath();
+    ctx.roundRect(x, y, w, 2.5 / this.scale, { tl: r, tr: r, br: 0, bl: 0 });
+    ctx.fill();
+
+    // Title
+    this._drawScreenText(node.title, x + 10, y + headerH / 2, {
       fontPx: CanvasRenderer.FONT_SIZE,
       color: theme.text,
       baseline: "middle",
       align: "left",
     });
 
-    // Skip port drawing if requested (for HTML overlay nodes)
     if (skipPorts) return;
 
-    // Draw input ports
+    // Input ports + labels
     node.inputs.forEach((p, i) => {
       const rct = portRect(node, p, i, "in");
       const cx = rct.x + rct.w / 2;
       const cy = rct.y + rct.h / 2;
-
-      if (p.portType === "exec") {
-        // Draw exec port - rounded square
-        const portSize = 8;
-        ctx.fillStyle = theme.portExec;
-        ctx.strokeStyle = "rgba(16, 185, 129, 0.3)";
-        ctx.lineWidth = 2 / this.scale;
-        ctx.beginPath();
-        ctx.roundRect(cx - portSize / 2, cy - portSize / 2, portSize, portSize, 2);
-        ctx.fill();
-        ctx.stroke();
-      } else {
-        // Draw data port - circle with outline
-        ctx.fillStyle = theme.port;
-        ctx.strokeStyle = "rgba(99, 102, 241, 0.3)";
-        ctx.lineWidth = 2 / this.scale;
-        ctx.beginPath();
-        ctx.arc(cx, cy, 5, 0, Math.PI * 2);
-        ctx.fill();
-        ctx.stroke();
+      this._drawPortShape(cx, cy, p.portType);
+      if (p.name) {
+        this._drawScreenText(p.name, cx + 10, cy, {
+          fontPx: 10,
+          color: theme.textMuted,
+          baseline: "middle",
+          align: "left",
+        });
       }
     });
 
-    // Draw output ports
+    // Output ports + labels
     node.outputs.forEach((p, i) => {
       const rct = portRect(node, p, i, "out");
       const cx = rct.x + rct.w / 2;
       const cy = rct.y + rct.h / 2;
-
-      if (p.portType === "exec") {
-        // Draw exec port - rounded square
-        const portSize = 8;
-        ctx.fillStyle = theme.portExec;
-        ctx.strokeStyle = "rgba(16, 185, 129, 0.3)";
-        ctx.lineWidth = 2 / this.scale;
-        ctx.beginPath();
-        ctx.roundRect(cx - portSize / 2, cy - portSize / 2, portSize, portSize, 2);
-        ctx.fill();
-        ctx.stroke();
-      } else {
-        // Draw data port - circle with outline
-        ctx.fillStyle = theme.port;
-        ctx.strokeStyle = "rgba(99, 102, 241, 0.3)";
-        ctx.lineWidth = 2 / this.scale;
-        ctx.beginPath();
-        ctx.arc(cx, cy, 5, 0, Math.PI * 2);
-        ctx.fill();
-        ctx.stroke();
+      this._drawPortShape(cx, cy, p.portType);
+      if (p.name) {
+        this._drawScreenText(p.name, cx - 10, cy, {
+          fontPx: 10,
+          color: theme.textMuted,
+          baseline: "middle",
+          align: "right",
+        });
       }
     });
   }
 
-  _drawPorts(node) {
+  _drawActiveNodeBorder(node, time) {
     const { ctx, theme } = this;
+    const { x, y, w, h } = node.computed;
+    const r = node.radius || 12;
+    const speed = 30; // pixels per second
+    const dashLen = 6;
+    const gapLen = 6;
 
-    // Draw input ports
+    ctx.save();
+    // 1. Exterior Glow
+    ctx.shadowColor = theme.accentBright || "#7080d8";
+    ctx.shadowBlur = (12 + Math.sin(time / 200) * 4) / this.scale; // Subtle pulse
+
+    // 2. Marching Ants Border
+    ctx.strokeStyle = theme.accentBright || "#7080d8";
+    ctx.lineWidth = 3 / this.scale;
+    // Set a dashed line that moves
+    ctx.setLineDash([dashLen / this.scale, gapLen / this.scale]);
+    // Offset increases over time to move clockwise
+    ctx.lineDashOffset = -(time / 1000) * speed / this.scale;
+
+    // Use a custom roundRect for the border
+    ctx.beginPath();
+    const pad = 2 / this.scale;
+    this._roundRect(ctx, x - pad, y - pad, w + pad * 2, h + pad * 2, r + pad);
+    ctx.stroke();
+    ctx.restore();
+  }
+
+  // Internal helper for rounded rectangles if not using the browser's native one
+  _roundRect(ctx, x, y, w, h, r) {
+    if (typeof r === "number") {
+      r = { tl: r, tr: r, br: r, bl: r };
+    }
+    ctx.beginPath();
+    ctx.moveTo(x + r.tl, y);
+    ctx.lineTo(x + w - r.tr, y);
+    ctx.quadraticCurveTo(x + w, y, x + w, y + r.tr);
+    ctx.lineTo(x + w, y + h - r.br);
+    ctx.quadraticCurveTo(x + w, y + h, x + w - r.br, y + h);
+    ctx.lineTo(x + r.bl, y + h);
+    ctx.quadraticCurveTo(x, y + h, x, y + h - r.bl);
+    ctx.lineTo(x, y + r.tl);
+    ctx.quadraticCurveTo(x, y, x + r.tl, y);
+    ctx.closePath();
+  }
+
+  _drawPortShape(cx, cy, portType) {
+    const { ctx, theme } = this;
+
+    if (portType === "exec") {
+      // Diamond shape for exec ports
+      const s = 5 / this.scale;
+      ctx.save();
+      ctx.fillStyle = theme.portExec;
+      ctx.strokeStyle = this._rgba(theme.portExec, 0.4);
+      ctx.lineWidth = 2 / this.scale;
+      ctx.beginPath();
+      ctx.moveTo(cx, cy - s);
+      ctx.lineTo(cx + s, cy);
+      ctx.lineTo(cx, cy + s);
+      ctx.lineTo(cx - s, cy);
+      ctx.closePath();
+      ctx.fill();
+      ctx.stroke();
+      ctx.restore();
+    } else {
+      // Circle for data ports
+      ctx.save();
+      // Outer ring
+      ctx.strokeStyle = this._rgba(theme.port, 0.35);
+      ctx.lineWidth = 3 / this.scale;
+      ctx.beginPath();
+      ctx.arc(cx, cy, 5 / this.scale, 0, Math.PI * 2);
+      ctx.stroke();
+      // Inner fill
+      ctx.fillStyle = theme.port;
+      ctx.beginPath();
+      ctx.arc(cx, cy, 3.5 / this.scale, 0, Math.PI * 2);
+      ctx.fill();
+      ctx.restore();
+    }
+  }
+
+  _drawPorts(node) {
     node.inputs.forEach((p, i) => {
       const rct = portRect(node, p, i, "in");
       const cx = rct.x + rct.w / 2;
       const cy = rct.y + rct.h / 2;
-
-      if (p.portType === "exec") {
-        // Draw exec port - rounded square with subtle glow
-        const portSize = 8;
-        ctx.fillStyle = theme.portExec;
-        ctx.strokeStyle = "rgba(16, 185, 129, 0.3)";
-        ctx.lineWidth = 2 / this.scale;
-        ctx.beginPath();
-        ctx.roundRect(cx - portSize / 2, cy - portSize / 2, portSize, portSize, 2);
-        ctx.fill();
-        ctx.stroke();
-      } else {
-        // Draw data port - circle with subtle outline
-        ctx.fillStyle = theme.port;
-        ctx.strokeStyle = "rgba(99, 102, 241, 0.3)";
-        ctx.lineWidth = 2 / this.scale;
-        ctx.beginPath();
-        ctx.arc(cx, cy, 5, 0, Math.PI * 2);
-        ctx.fill();
-      }
+      this._drawPortShape(cx, cy, p.portType);
     });
 
-    // Draw output ports
     node.outputs.forEach((p, i) => {
       const rct = portRect(node, p, i, "out");
       const cx = rct.x + rct.w / 2;
       const cy = rct.y + rct.h / 2;
-
-      if (p.portType === "exec") {
-        // Draw exec port - rounded square
-        const portSize = 8;
-        ctx.fillStyle = theme.portExec;
-        ctx.strokeStyle = "rgba(16, 185, 129, 0.3)";
-        ctx.lineWidth = 2 / this.scale;
-        ctx.beginPath();
-        ctx.roundRect(cx - portSize / 2, cy - portSize / 2, portSize, portSize, 2);
-        ctx.fill();
-        ctx.stroke();
-      } else {
-        // Draw data port - circle with outline
-        ctx.fillStyle = theme.port;
-        ctx.strokeStyle = "rgba(99, 102, 241, 0.3)";
-        ctx.lineWidth = 2 / this.scale;
-        ctx.beginPath();
-        ctx.arc(cx, cy, 5, 0, Math.PI * 2);
-        ctx.fill();
-        ctx.stroke();
-      }
+      this._drawPortShape(cx, cy, p.portType);
     });
   }
 
+  /** Selection border for HTML overlay nodes, drawn on the edge canvas */
+  _drawHtmlSelectionBorder(node) {
+    const { ctx } = this;
+    const { x, y, w, h } = node.computed;
+    const r = 2;
+    const pad = 2.5 / this.scale;
+
+    ctx.save();
+    ctx.shadowColor = "rgba(255,255,255,0.3)";
+    ctx.shadowBlur = 8 / this.scale;
+    ctx.strokeStyle = "#ffffff";
+    ctx.lineWidth = 1.5 / this.scale;
+    roundRect(ctx, x - pad, y - pad, w + pad * 2, h + pad * 2, r);
+    ctx.stroke();
+    ctx.restore();
+  }
+
+  /** Rotating dashed border drawn on the edge canvas for executing nodes */
+  _drawActiveNodeBorder(node, time) {
+    const { ctx } = this;
+    const { x, y, w, h } = node.computed;
+    const r = 2;
+    const pad = 8 / this.scale; // Same gap as selection border
+
+    const dashLen = 8 / this.scale;
+    const gapLen = 6 / this.scale;
+    const offset = -(time / 1000) * (50 / this.scale);
+
+    ctx.save();
+    ctx.setLineDash([dashLen, gapLen]);
+    ctx.lineDashOffset = offset;
+    ctx.strokeStyle = "rgba(74,176,217,0.9)"; // Dark sky blue
+    ctx.lineWidth = 2.0 / this.scale;
+    ctx.shadowColor = "#4ab0d9";
+    ctx.shadowBlur = 6 / this.scale;
+    roundRect(ctx, x - pad, y - pad, w + pad * 2, h + pad * 2, r + pad);
+    ctx.stroke();
+    ctx.restore();
+  }
+
+  /** Approximate arc length of an edge in world coordinates */
+  _getEdgeLength(graph, e) {
+    const from = graph.nodes.get(e.fromNode);
+    const to = graph.nodes.get(e.toNode);
+    if (!from || !to) return 200;
+    const iOut = from.outputs.findIndex((p) => p.id === e.fromPort);
+    const iIn = to.inputs.findIndex((p) => p.id === e.toPort);
+    const pr1 = portRect(from, null, iOut, "out");
+    const pr2 = portRect(to, null, iIn, "in");
+    const x1 = pr1.x + pr1.w / 2,
+      y1 = pr1.y + pr1.h / 2;
+    const x2 = pr2.x + pr2.w / 2,
+      y2 = pr2.y + pr2.h / 2;
+    if (this.edgeStyle === "orthogonal") {
+      return Math.abs(x2 - x1) + Math.abs(y2 - y1);
+    }
+    const chord = Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2);
+    return this.edgeStyle === "bezier" ? chord * 1.4 : chord;
+  }
+
   _drawEdge(graph, e) {
     const from = graph.nodes.get(e.fromNode);
     const to = graph.nodes.get(e.toNode);
@@ -526,15 +623,47 @@ export class CanvasRenderer {
     const pr1 = portRect(from, null, iOut, "out");
     const pr2 = portRect(to, null, iIn, "in");
     const x1 = pr1.x + pr1.w / 2,
-      y1 = pr1.y + pr1.h / 2, // Center of port
-      x2 = pr2.x + pr2.w / 2,
-      y2 = pr2.y + pr2.h / 2; // Center of port
+      y1 = pr1.y + pr1.h / 2;
+    const x2 = pr2.x + pr2.w / 2,
+      y2 = pr2.y + pr2.h / 2;
+
     if (this.edgeStyle === "line") {
       this._drawLine(x1, y1, x2, y2);
     } else if (this.edgeStyle === "orthogonal") {
       this._drawOrthogonal(x1, y1, x2, y2);
     } else {
-      this._drawCurve(x1, y1, x2, y2); // bezier (기존)
+      this._drawCurve(x1, y1, x2, y2);
+    }
+  }
+
+  _getEdgeDotPosition(graph, e, t) {
+    const from = graph.nodes.get(e.fromNode);
+    const to = graph.nodes.get(e.toNode);
+    if (!from || !to) return null;
+
+    const iOut = from.outputs.findIndex((p) => p.id === e.fromPort);
+    const iIn = to.inputs.findIndex((p) => p.id === e.toPort);
+    const pr1 = portRect(from, null, iOut, "out");
+    const pr2 = portRect(to, null, iIn, "in");
+    const x1 = pr1.x + pr1.w / 2,
+      y1 = pr1.y + pr1.h / 2;
+    const x2 = pr2.x + pr2.w / 2,
+      y2 = pr2.y + pr2.h / 2;
+
+    if (this.edgeStyle === "bezier") {
+      const dx = Math.max(40, Math.abs(x2 - x1) * 0.4);
+      return cubicBezierPoint(x1, y1, x1 + dx, y1, x2 - dx, y2, x2, y2, t);
+    } else if (this.edgeStyle === "orthogonal") {
+      const midX = (x1 + x2) / 2;
+      const pts = [
+        { x: x1, y: y1 },
+        { x: midX, y: y1 },
+        { x: midX, y: y2 },
+        { x: x2, y: y2 },
+      ];
+      return polylinePoint(pts, t);
+    } else {
+      return { x: x1 + (x2 - x1) * t, y: y1 + (y2 - y1) * t };
     }
   }
 
@@ -555,32 +684,14 @@ export class CanvasRenderer {
   }
 
   _drawOrthogonal(x1, y1, x2, y2) {
-    // 중간 축을 결정 (더 짧은 축을 가운데에 두면 보기 좋음)
-    const useHVH = true; // 가로-세로-가로(HVH) vs 세로-가로-세로(VHV)
     const midX = (x1 + x2) / 2;
-    const midY = (y1 + y2) / 2;
+    const pts = [
+      { x: x1, y: y1 },
+      { x: midX, y: y1 },
+      { x: midX, y: y2 },
+      { x: x2, y: y2 },
+    ];
 
-    let pts;
-    if (useHVH) {
-      // x1,y1 → midX,y1 → midX,y2 → x2,y2
-      pts = [
-        { x: x1, y: y1 },
-        { x: midX, y: y1 },
-        { x: midX, y: y2 },
-        { x: x2, y: y2 },
-      ];
-    }
-    // else {
-    //   // x1,y1 → x1,midY → x2,midY → x2,y2
-    //   pts = [
-    //     { x: x1, y: y1 },
-    //     { x: x1, y: midY },
-    //     { x: x2, y: midY },
-    //     { x: x2, y: y2 },
-    //   ];
-    // }
-
-    // 라운드 코너
     const { ctx } = this;
     const prevJoin = ctx.lineJoin,
       prevCap = ctx.lineCap;
@@ -590,8 +701,9 @@ export class CanvasRenderer {
     ctx.lineJoin = prevJoin;
     ctx.lineCap = prevCap;
 
-    return pts; // 화살표 각도 계산에 사용
+    return pts;
   }
+
   _drawCurve(x1, y1, x2, y2) {
     const { ctx } = this;
     const dx = Math.max(40, Math.abs(x2 - x1) * 0.4);
@@ -601,16 +713,18 @@ export class CanvasRenderer {
     ctx.stroke();
   }
 
-  /**
-   * Draw only edges on a separate canvas (for layering above HTML overlay)
-   * @param {Graph} graph - The graph
-   * @param {Object} options - Rendering options
-   */
   drawEdgesOnly(
     graph,
-    { activeEdges = new Set(), running = false, time = performance.now(), tempEdge = null } = {}
+    {
+      activeEdges = new Set(),
+      activeEdgeTimes = new Map(),
+      activeNodes = new Set(),
+      selection = new Set(),
+      time = performance.now(),
+      tempEdge = null,
+      loopActiveEdges = false,
+    } = {}
   ) {
-    // Clear canvas
     this._resetTransform();
     this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
 
@@ -618,35 +732,64 @@ export class CanvasRenderer {
 
     const { ctx, theme } = this;
 
-    // Calculate animation values
-    let dashArray = null;
-    let dashOffset = 0;
-    if (running || activeEdges.size > 0) {
-      const speed = 120;
-      const phase = (((time / 1000) * speed) / this.scale) % 12;
-      dashArray = [6 / this.scale, 6 / this.scale];
-      dashOffset = -phase;
-    }
-
     // Draw all edges
-    ctx.lineWidth = 1.5 / this.scale;
-    // Set default edge style
-    ctx.strokeStyle = theme.edge;
     for (const e of graph.edges.values()) {
-      const isActive = activeEdges && activeEdges.has(e.id);
-
-      if (isActive && dashArray) {
-        ctx.setLineDash(dashArray);
-        ctx.lineDashOffset = dashOffset;
-        ctx.strokeStyle = "#00ffff";
+      const isActive = activeEdges.has(e.id);
+
+      if (isActive) {
+        // Glow pass
+        ctx.save();
+        ctx.shadowColor = theme.edgeActive;
+        ctx.shadowBlur = 6 / this.scale;
+        ctx.strokeStyle = theme.edgeActive;
         ctx.lineWidth = 3 / this.scale;
+        ctx.setLineDash([]);
+        this._drawEdge(graph, e);
+        ctx.restore();
+
+        // Dot position: use configurable flow speed (default 150 px/sec)
+        const flowSpeed = this.theme.flowSpeed || 150;
+        const activationTime = activeEdgeTimes.get(e.id) ?? time;
+        const edgeLen = Math.max(50, this._getEdgeLength(graph, e));
+        const duration = (edgeLen / flowSpeed) * 1000; // ms for this edge
+
+        // Loop animation if requested (e.g. in Step Mode)
+        const rawT = (time - activationTime) / duration;
+        const dotT = loopActiveEdges ? ((time / 1000) * (flowSpeed / edgeLen)) % 1 : Math.min(1, rawT);
+
+        const dotPos = this._getEdgeDotPosition(graph, e, dotT);
+        if (dotPos) {
+          ctx.save();
+          ctx.fillStyle = this._rgba(theme.edgeActive, 0.9);
+          ctx.shadowColor = theme.edgeActive;
+          ctx.shadowBlur = 8 / this.scale;
+          ctx.beginPath();
+          ctx.arc(dotPos.x, dotPos.y, 2.5 / this.scale, 0, Math.PI * 2);
+          ctx.fill();
+          ctx.restore();
+        }
       } else {
         ctx.setLineDash([]);
         ctx.strokeStyle = theme.edge;
-        ctx.lineWidth = 1.5 / this.scale;
+        ctx.lineWidth = 2.5 / this.scale;
+        this._drawEdge(graph, e);
       }
+    }
 
-      this._drawEdge(graph, e);
+    // Selection borders for HTML overlay nodes (drawn above the HTML layer)
+    for (const nodeId of selection) {
+      const node = graph.nodes.get(nodeId);
+      if (!node) continue;
+      const def = this.registry?.types?.get(node.type);
+      if (def?.html) this._drawHtmlSelectionBorder(node);
+    }
+
+    // Rotating dashed border for executing nodes
+    if (activeNodes.size > 0) {
+      for (const nodeId of activeNodes) {
+        const node = graph.nodes.get(nodeId);
+        if (node) this._drawActiveNodeBorder(node, time);
+      }
     }
 
     // temp edge preview
@@ -655,7 +798,9 @@ export class CanvasRenderer {
       const b = this.screenToWorld(tempEdge.x2, tempEdge.y2);
 
       const prevDash = this.ctx.getLineDash();
-      this.ctx.setLineDash([6 / this.scale, 6 / this.scale]);
+      this.ctx.setLineDash([5 / this.scale, 5 / this.scale]);
+      this.ctx.strokeStyle = this._rgba(this.theme.accentBright, 0.7);
+      this.ctx.lineWidth = 2.5 / this.scale;
 
       let ptsForArrow = null;
       if (this.edgeStyle === "line") {
@@ -679,15 +824,15 @@ export class CanvasRenderer {
       if (ptsForArrow && ptsForArrow.length >= 2) {
         const p1 = ptsForArrow[ptsForArrow.length - 2];
         const p2 = ptsForArrow[ptsForArrow.length - 1];
-        this.ctx.fillStyle = this.theme.edge;
-        this.ctx.strokeStyle = this.theme.edge; // Ensure color is set
-        this._drawArrowhead(p1.x, p1.y, p2.x, p2.y, 12);
+        this.ctx.fillStyle = this.theme.accentBright;
+        this._drawArrowhead(p1.x, p1.y, p2.x, p2.y, 10);
       }
     }
 
     this._resetTransform();
   }
 }
+
 function roundRect(ctx, x, y, w, h, r = 6) {
   if (typeof r === "number") r = { tl: r, tr: r, br: r, bl: r };
   ctx.beginPath();
@@ -702,3 +847,38 @@ function roundRect(ctx, x, y, w, h, r = 6) {
   ctx.quadraticCurveTo(x, y, x + r.tl, y);
   ctx.closePath();
 }
+
+function cubicBezierPoint(x0, y0, x1, y1, x2, y2, x3, y3, t) {
+  const mt = 1 - t;
+  return {
+    x: mt * mt * mt * x0 + 3 * mt * mt * t * x1 + 3 * mt * t * t * x2 + t * t * t * x3,
+    y: mt * mt * mt * y0 + 3 * mt * mt * t * y1 + 3 * mt * t * t * y2 + t * t * t * y3,
+  };
+}
+
+function polylinePoint(pts, t) {
+  let totalLen = 0;
+  const lens = [];
+  for (let i = 0; i < pts.length - 1; i++) {
+    const dx = pts[i + 1].x - pts[i].x;
+    const dy = pts[i + 1].y - pts[i].y;
+    const len = Math.sqrt(dx * dx + dy * dy);
+    lens.push(len);
+    totalLen += len;
+  }
+  if (totalLen === 0) return pts[0];
+
+  let target = t * totalLen;
+  let accum = 0;
+  for (let i = 0; i < lens.length; i++) {
+    if (accum + lens[i] >= target) {
+      const segT = lens[i] > 0 ? (target - accum) / lens[i] : 0;
+      return {
+        x: pts[i].x + (pts[i + 1].x - pts[i].x) * segT,
+        y: pts[i].y + (pts[i + 1].y - pts[i].y) * segT,
+      };
+    }
+    accum += lens[i];
+  }
+  return pts[pts.length - 1];
+}