html-overlay-node 0.1.10 → 0.1.11

package/src/interact/Controller.js

@@ -45,6 +45,18 @@ export class Controller {
     this._onDblClickEvt = this._onDblClick.bind(this);
 
     this._bindEvents();
+
+    // Listen for stepping updates from runner
+    this.hooks.on("runner:step-updated", ({ activeNodeId, activeEdgeIds = [] }) => {
+      this.activeNodes = activeNodeId ? new Set([activeNodeId]) : new Set();
+      this.activeEdges = new Set(activeEdgeIds);
+      this.activeEdgeTimes.clear(); // Clear previous times to ensure fresh animation
+      const now = performance.now();
+      for (const edgeId of activeEdgeIds) {
+        this.activeEdgeTimes.set(edgeId, now);
+      }
+      this.render();
+    });
   }
 
   destroy() {
@@ -406,7 +418,11 @@ export class Controller {
       const dy = w.y - this.resizing.startY;
 
       const minW = Controller.MIN_NODE_WIDTH;
-      const minH = Controller.MIN_NODE_HEIGHT;
+      // Minimum height must fit all port rows
+      const maxPorts = Math.max(n.inputs.length, n.outputs.length);
+      const minH = maxPorts > 0
+        ? Math.max(Controller.MIN_NODE_HEIGHT, 42 + maxPorts * 20)
+        : Controller.MIN_NODE_HEIGHT;
       n.size.width = Math.max(minW, this.resizing.startW + dx);
       n.size.height = Math.max(minH, this.resizing.startH + dy);
 
@@ -760,8 +776,10 @@ export class Controller {
     this.render();
   }
 
-  render() {
+  render(time = performance.now()) {
     const tEdge = this.renderTempEdge();
+    const runner = this.graph.runner;
+    const isStepMode = !!runner && runner.executionMode === "step";
 
     // 1. Draw background (grid, canvas-only nodes) on main canvas
     this.renderer.draw(this.graph, {
@@ -769,7 +787,10 @@ export class Controller {
       tempEdge: null, // Don't draw temp edge on background
       boxSelecting: this.boxSelecting,
       activeEdges: this.activeEdges || new Set(),
+      activeEdgeTimes: this.activeEdgeTimes,
       drawEdges: !this.edgeRenderer, // Only draw edges here if no separate edge renderer
+      time,
+      loopActiveEdges: isStepMode,
     });
 
     // 2. HTML Overlay layer (HTML nodes at z-index 10)
@@ -788,8 +809,9 @@ export class Controller {
         activeEdgeTimes: this.activeEdgeTimes,
         activeNodes: this.activeNodes,
         selection: this.selection,
-        time: performance.now(),
+        time,
         tempEdge: tEdge,
+        loopActiveEdges: isStepMode,
       });
 
       this.edgeRenderer._resetTransform();

package/src/nodes/math.js

@@ -32,6 +32,7 @@ export function registerMathNodes(registry) {
             node.state.result = result;
             console.log("[Add] a:", a, "b:", b, "result:", result);
             setOutput("result", result);
+            setOutput("exec", true);
         },
     });
 
@@ -77,6 +78,7 @@ export function registerMathNodes(registry) {
             }
             console.log("[Multiply] a:", a, "b:", b, "result:", result);
             setOutput("result", result);
+            setOutput("exec", true);
         },
     });
 

package/src/nodes/util.js

@@ -1,176 +1,241 @@
-// Duration each exec edge stays active during sequential animation (ms)
-const STEP_DURATION = 620;
-
-export function registerUtilNodes(registry) {
-    registry.register("util/Trigger", {
-        title: "Trigger",
-        color: "#f59e0b", // event (amber)
-        size: { w: 140 },
-        outputs: [{ name: "triggered", portType: "exec" }],
-        html: {
-            init(node, el, { body }) {
-                el.classList.add("node-overlay");
-
-                body.style.display = "flex";
-                body.style.alignItems = "center";
-                body.style.justifyContent = "center";
-
-                const button = document.createElement("button");
-                button.className = "premium-button";
-                button.textContent = "Execute";
-                button.style.width = "100%";
-                button.style.textTransform = "uppercase";
-                button.style.letterSpacing = "1px";
-
-                button.addEventListener("click", (e) => {
-                    e.stopPropagation();
-                    e.preventDefault();
-
-                    if (node.state._firing) return;
-
-                    const editor = window.editor;
-                    if (!editor?.controller || !editor?.runner) return;
-
-                    const controller = editor.controller;
-                    const runner = editor.runner;
-
-                    node.state.triggered = true;
-                    node.state._firing = true;
-
-                    // Active state styling
-                    button.style.borderColor = "#4f62c0";
-                    button.style.color = "#7080d8";
-                    button.style.background = "rgba(79,98,192,0.12)";
-
-                    const { connectedEdges, execEdgeOrder } = runner.runOnce(node.id, 0);
-
-                    controller.activeEdgeTimes = new Map();
-
-                    if (execEdgeOrder.length > 0) {
-                        // Sequential: animate one exec edge at a time
-                        const startTime = performance.now();
-                        const totalDuration = execEdgeOrder.length * STEP_DURATION + 80;
-
-                        const animate = () => {
-                            const now = performance.now();
-                            const elapsed = now - startTime;
-                            const step = Math.floor(elapsed / STEP_DURATION);
-
-                            const activeNow = new Set();
-                            const activeNodeNow = new Set();
-                            if (step < execEdgeOrder.length) {
-                                const edgeId = execEdgeOrder[step];
-                                activeNow.add(edgeId);
-                                if (!controller.activeEdgeTimes.has(edgeId)) {
-                                    controller.activeEdgeTimes.set(edgeId, startTime + step * STEP_DURATION);
-                                }
-                                // Highlight the destination node of this exec edge
-                                const edge = runner.graph.edges.get(edgeId);
-                                if (edge?.toNode) activeNodeNow.add(edge.toNode);
-                            }
-
-                            controller.activeEdges = activeNow;
-                            controller.activeNodes = activeNodeNow;
-                            controller.render();
-
-                            if (elapsed < totalDuration) {
-                                requestAnimationFrame(animate);
-                            } else {
-                                _resetTrigger(controller, node, button);
-                            }
-                        };
-                        requestAnimationFrame(animate);
-                    } else if (connectedEdges.size > 0) {
-                        // Fallback: all data edges at once
-                        const startTime = performance.now();
-                        const totalDuration = STEP_DURATION;
-                        const now = performance.now();
-                        for (const id of connectedEdges) {
-                            controller.activeEdgeTimes.set(id, now);
-                        }
-
-                        const animate = () => {
-                            controller.activeEdges = connectedEdges;
-                            controller.render();
-                            if (performance.now() - startTime < totalDuration) {
-                                requestAnimationFrame(animate);
-                            } else {
-                                _resetTrigger(controller, node, button);
-                            }
-                        };
-                        requestAnimationFrame(animate);
-                    } else {
-                        _resetTrigger(controller, node, button);
-                    }
-                });
-
-                body.appendChild(button);
-                el._btn = button;
-            },
-        },
-        onExecute(node, { setOutput }) {
-            if (node.state.triggered) {
-                setOutput("triggered", true);
-            }
-        },
-    });
-
-    registry.register("util/Watch", {
-        title: "Watch",
-        color: "#10b981", // info (emerald)
-        size: { w: 180 },
-        inputs: [{ name: "value", portType: "data", datatype: "any" }],
-        onExecute(node, { getInput }) {
-            const value = getInput("value");
-            console.log("[Watch] onExecute called, value:", value);
-        },
-    });
-
-    registry.register("util/Print", {
-        title: "Print",
-        color: "#10b981", // info (emerald)
-        size: { w: 140 },
-        inputs: [
-            { name: "", portType: "exec" },
-            { name: "value", portType: "data", datatype: "any" },
-        ],
-        outputs: [{ name: "", portType: "exec" }],
-        onExecute(node, { getInput, setOutput }) {
-            const value = getInput("value");
-            console.log("[Print]", value);
-            setOutput("", true);
-        },
-    });
-
-    registry.register("util/Timer", {
-        title: "Timer",
-        color: "#f59e0b", // event (amber)
-        size: { w: 140 },
-        inputs: [
-            { name: "", portType: "exec" },
-            { name: "delay (ms)", portType: "data", datatype: "number" },
-        ],
-        outputs: [{ name: "", portType: "exec" }],
-        async onExecute(node, { getInput, setOutput }) {
-            const delay = getInput("delay (ms)") || 0;
-            await new Promise((resolve) => {
-                setTimeout(() => {
-                    resolve();
-                }, delay);
-            });
-            setOutput("", true);
-        },
-    });
-}
-
-function _resetTrigger(controller, node, button) {
-    controller.activeEdges = new Set();
-    controller.activeEdgeTimes = new Map();
-    controller.activeNodes = new Set();
-    controller.render();
-    node.state.triggered = false;
-    node.state._firing = false;
-    button.style.borderColor = "#383858";
-    button.style.color = "#8888aa";
-    button.style.background = "transparent";
-}
+// Duration each exec edge stays active during sequential animation (ms)
+const STEP_DURATION = 620;
+
+export function registerUtilNodes(registry) {
+  registry.register("util/Trigger", {
+    title: "Trigger",
+    color: "#f7cb4d", // event (amber)
+    size: { w: 140, h: 100 },
+    outputs: [{ name: "exec", portType: "exec" }],
+    html: {
+      init(node, el, { body }) {
+        el.classList.add("node-overlay");
+
+        body.style.display = "flex";
+        body.style.alignItems = "center";
+        body.style.justifyContent = "center";
+
+        const button = document.createElement("button");
+        button.className = "premium-button";
+        button.textContent = "Execute";
+        button.style.width = "100%";
+        button.style.textTransform = "uppercase";
+        button.style.letterSpacing = "1px";
+        button.style.marginTop = "22px"; // Push below exec port label (port bottom ~y=50)
+
+        button.addEventListener("click", (e) => {
+          e.stopPropagation();
+          e.preventDefault();
+
+          if (node.state._firing) return;
+
+          const editor = window.editor;
+          if (!editor?.controller || !editor?.runner) return;
+
+          const controller = editor.controller;
+          const runner = editor.runner;
+
+          node.state.triggered = true;
+          node.state._firing = true;
+
+          // If in Step Mode, just prepare the plan and wait for manual clicks
+          if (runner.executionMode === "step") {
+            runner.startStepping(node.id);
+            node.state.triggered = false;
+            node.state._firing = false;
+            return;
+          }
+
+          // Active state styling for Run mode
+          button.style.borderColor = "#4f62c0";
+          button.style.color = "#7080d8";
+          button.style.background = "rgba(79,98,192,0.12)";
+
+          const { connectedEdges, execEdgeOrder } = runner.runOnce(node.id, 0);
+
+          controller.activeEdgeTimes = new Map();
+
+          if (execEdgeOrder.length > 0) {
+            // Sequential: animate one exec edge at a time
+            const startTime = performance.now();
+            const totalDuration = execEdgeOrder.length * STEP_DURATION + 80;
+
+            const animate = () => {
+              const now = performance.now();
+              const elapsed = now - startTime;
+              const step = Math.floor(elapsed / STEP_DURATION);
+
+              const activeNow = new Set();
+              const activeNodeNow = new Set();
+              if (step < execEdgeOrder.length) {
+                const edgeId = execEdgeOrder[step];
+                activeNow.add(edgeId);
+                if (!controller.activeEdgeTimes.has(edgeId)) {
+                  controller.activeEdgeTimes.set(edgeId, startTime + step * STEP_DURATION);
+                }
+                // Highlight the destination node of this exec edge
+                const edge = runner.graph.edges.get(edgeId);
+                if (edge?.toNode) activeNodeNow.add(edge.toNode);
+              }
+
+              controller.activeEdges = activeNow;
+              controller.activeNodes = activeNodeNow;
+              controller.render();
+
+              if (elapsed < totalDuration) {
+                requestAnimationFrame(animate);
+              } else {
+                _resetTrigger(controller, node, button);
+              }
+            };
+            requestAnimationFrame(animate);
+          } else if (connectedEdges.size > 0) {
+            // Fallback: all data edges at once
+            const startTime = performance.now();
+            const totalDuration = STEP_DURATION;
+            const now = performance.now();
+            for (const id of connectedEdges) {
+              controller.activeEdgeTimes.set(id, now);
+            }
+
+            const animate = () => {
+              controller.activeEdges = connectedEdges;
+              controller.render();
+              if (performance.now() - startTime < totalDuration) {
+                requestAnimationFrame(animate);
+              } else {
+                _resetTrigger(controller, node, button);
+              }
+            };
+            requestAnimationFrame(animate);
+          } else {
+            _resetTrigger(controller, node, button);
+          }
+        });
+
+        body.appendChild(button);
+        el._btn = button;
+      },
+    },
+    onExecute(node, { setOutput }) {
+      if (node.state.triggered) {
+        setOutput("exec", true);
+      }
+    },
+  });
+
+  registry.register("util/Watch", {
+    title: "Watch",
+    color: "#10b981", // info (emerald)
+    size: { w: 180, h: 130 },
+    inputs: [
+      { name: "exec", portType: "exec" },
+      { name: "value", portType: "data", datatype: "any" },
+    ],
+    outputs: [
+      { name: "exec", portType: "exec" },
+      { name: "value", portType: "data", datatype: "any" },
+    ],
+    onCreate(node) {
+      node.state.displayValue = "---";
+    },
+    html: {
+      init(node, el, { body }) {
+        el.classList.add("node-overlay");
+        body.style.display = "flex";
+        body.style.alignItems = "center";
+        body.style.justifyContent = "center";
+        body.style.paddingTop = "44px"; // Push display below both port rows (y=44, y=64)
+
+        const container = document.createElement("div");
+        container.className = "watch-display";
+        container.style.width = "90%";
+        container.style.padding = "10px";
+        container.style.background = "rgba(0,0,0,0.2)";
+        container.style.borderRadius = "4px";
+        container.style.border = "1px solid rgba(255,255,255,0.05)";
+        container.style.textAlign = "center";
+        container.style.fontFamily = "'JetBrains Mono', 'Fira Code', monospace";
+        container.style.fontSize = "12px";
+        container.style.color = "#10b981";
+        container.style.textShadow = "0 0 10px rgba(16,185,129,0.3)";
+        container.textContent = node.state.displayValue || "---";
+
+        body.appendChild(container);
+        node._display = container;
+      },
+    },
+    onExecute(node, { getInput, setOutput }) {
+      const val = getInput("value");
+      console.log("[Watch] onExecute called, value:", val);
+
+      // Format value for display
+      let display = "---";
+      if (val !== undefined && val !== null) {
+        display = typeof val === "object" ? JSON.stringify(val) : String(val);
+      }
+
+      node.state.displayValue = display;
+      if (node._display) {
+        node._display.textContent = display;
+        // Add a brief glow effect
+        node._display.style.color = "#ffffff";
+        setTimeout(() => {
+          if (node._display) node._display.style.color = "#10b981";
+        }, 100);
+      }
+
+      // Pass through
+      setOutput("exec", true); // exec signal
+      setOutput("value", val); // data value
+    },
+  });
+
+  registry.register("util/Print", {
+    title: "Print",
+    color: "#10b981", // info (emerald)
+    size: { w: 140 },
+    inputs: [
+      { name: "", portType: "exec" },
+      { name: "value", portType: "data", datatype: "any" },
+    ],
+    outputs: [{ name: "", portType: "exec" }],
+    onExecute(node, { getInput, setOutput }) {
+      const value = getInput("value");
+      console.log("[Print]", value);
+      setOutput("", true);
+    },
+  });
+
+  registry.register("util/Timer", {
+    title: "Timer",
+    color: "#7baaf7", // event (amber)
+    size: { w: 140 },
+    inputs: [
+      { name: "", portType: "exec" },
+      { name: "delay (ms)", portType: "data", datatype: "number" },
+    ],
+    outputs: [{ name: "", portType: "exec" }],
+    async onExecute(node, { getInput, setOutput }) {
+      const delay = getInput("delay (ms)") || 0;
+      await new Promise((resolve) => {
+        setTimeout(() => {
+          resolve();
+        }, delay);
+      });
+      setOutput("", true);
+    },
+  });
+}
+
+function _resetTrigger(controller, node, button) {
+  controller.activeEdges = new Set();
+  controller.activeEdgeTimes = new Map();
+  controller.activeNodes = new Set();
+  controller.render();
+  node.state.triggered = false;
+  node.state._firing = false;
+  button.style.borderColor = "#383858";
+  button.style.color = "#8888aa";
+  button.style.background = "transparent";
+}

package/src/nodes/value.js

@@ -8,7 +8,7 @@ export function registerValueNodes(registry) {
   registry.register("value/Number", {
     title: "Number",
     color: "#3b82f6", // data (blue)
-    size: { w: 140 },
+    size: { w: 140, h: 90 },
     outputs: [{ name: "value", portType: "data", datatype: "number" }],
     onCreate(node) {
       node.state.value = 0;
@@ -22,8 +22,9 @@ export function registerValueNodes(registry) {
         el.classList.add("node-overlay");
 
         body.style.display = "flex";
-        body.style.alignItems = "center";
+        body.style.alignItems = "flex-start"; // Don't center vertically — push to top of padded area
         body.style.justifyContent = "center";
+        body.style.paddingTop = "26px"; // Push input below value port (port bottom ~y=50)
 
         const input = document.createElement("input");
         input.className = "premium-input";