html-overlay-node 0.1.9 → 0.1.10

package/src/nodes/util.js

@@ -1,134 +1,176 @@
-export function registerUtilNodes(registry) {
-    registry.register("util/Trigger", {
-        title: "Trigger",
-        size: { w: 140, h: 80 },
-        outputs: [{ name: "triggered", portType: "exec" }],
-        html: {
-            init(node, el, { header, body }) {
-                // Styling
-                el.style.minWidth = "140px";
-                el.style.backgroundColor = "#1e1e23";
-                el.style.border = "1px solid #3a3a40";
-                el.style.borderRadius = "8px";
-
-                header.style.backgroundColor = "#2a2a31";
-                header.style.borderBottom = "1px solid #444";
-                header.style.color = "#eee";
-                header.style.fontSize = "12px";
-                header.textContent = "Trigger";
-
-                body.style.padding = "12px";
-                body.style.display = "flex";
-                body.style.alignItems = "center";
-                body.style.justifyContent = "center";
-                body.style.minHeight = "32px"; // Ensure consistent body height
-
-                const button = document.createElement("button");
-                button.textContent = "Fire!";
-                Object.assign(button.style, {
-                    padding: "8px 16px",
-                    background: "#4a9eff",
-                    border: "none",
-                    borderRadius: "4px",
-                    color: "#fff",
-                    fontSize: "14px",
-                    fontWeight: "bold",
-                    cursor: "pointer",
-                    pointerEvents: "auto",
-                });
-
-                button.addEventListener("click", (e) => {
-                    e.stopPropagation();
-                    e.preventDefault();
-
-                    node.state.triggered = true;
-
-                    // Access controller and runner from window.editor
-                    const editor = window.editor;
-                    if (!editor || !editor.controller || !editor.runner) {
-                        console.error("[Trigger] Editor, controller, or runner not found");
-                        return;
-                    }
-
-                    const controller = editor.controller;
-                    const runner = editor.runner;
-
-                    // Execute connected nodes using runner
-                    const result = runner.runOnce(node.id, 0);
-                    const connectedEdges = result.connectedEdges;
-
-                    // Set active edges on controller (will be rendered on port canvas)
-                    controller.activeEdges = connectedEdges;
-
-                    // Show animation
-                    const startTime = performance.now();
-                    const animationDuration = 500;
-
-                    const animate = () => {
-                        const elapsed = performance.now() - startTime;
-                        if (elapsed < animationDuration) {
-                            controller.render();
-                            requestAnimationFrame(animate);
-                        } else {
-                            controller.activeEdges = new Set();
-                            controller.render();
-                            node.state.triggered = false;
-                        }
-                    };
-
-                    animate();
-                });
-
-                body.appendChild(button);
-            },
-        },
-        onExecute(node, { setOutput }) {
-            if (node.state.triggered) {
-                console.log("[Trigger] Outputting triggered: true");
-                setOutput("triggered", true);
-            }
-        },
-    });
-
-    registry.register("util/Watch", {
-        title: "Watch",
-        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",
-        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",
-        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(() => {
-                    console.log("[Timer] Triggered after", delay, "ms");
-                    resolve();
-                }, delay);
-            });
-            setOutput("", true);
-        },
-    });
-}
+// 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";
+}

package/src/nodes/value.js

@@ -4,113 +4,97 @@
  */
 
 export function registerValueNodes(registry) {
-    // Number Node
-    registry.register("value/Number", {
-        title: "Number",
-        size: { w: 140, h: 60 },
-        outputs: [{ name: "value", portType: "data", datatype: "number" }],
-        onCreate(node) {
-            node.state.value = 0;
-        },
-        onExecute(node, { setOutput }) {
-            console.log("[Number] Outputting value:", node.state.value ?? 0);
-            setOutput("value", node.state.value ?? 0);
-        },
-        html: {
-            init(node, el, { header, body }) {
-                el.style.backgroundColor = "#1e1e24";
-                el.style.border = "1px solid #444";
-                el.style.borderRadius = "8px";
+  // Number Node
+  registry.register("value/Number", {
+    title: "Number",
+    color: "#3b82f6", // data (blue)
+    size: { w: 140 },
+    outputs: [{ name: "value", portType: "data", datatype: "number" }],
+    onCreate(node) {
+      node.state.value = 0;
+    },
+    onExecute(node, { setOutput }) {
+      console.log("[Number] Outputting value:", node.state.value ?? 0);
+      setOutput("value", node.state.value ?? 0);
+    },
+    html: {
+      init(node, el, { body }) {
+        el.classList.add("node-overlay");
 
-                header.style.backgroundColor = "#2a2a31";
-                header.style.borderBottom = "1px solid #444";
-                header.style.color = "#eee";
-                header.style.fontSize = "12px";
-                header.textContent = "Number";
+        body.style.display = "flex";
+        body.style.alignItems = "center";
+        body.style.justifyContent = "center";
 
-                body.style.padding = "12px";
-                body.style.display = "flex";
-                body.style.alignItems = "center";
-                body.style.justifyContent = "center";
+        const input = document.createElement("input");
+        input.className = "premium-input";
+        input.type = "number";
+        input.style.textAlign = "center";
+        input.value = node.state.value ?? 0;
 
-                const input = document.createElement("input");
-                input.type = "number";
-                input.value = node.state.value ?? 0;
-                Object.assign(input.style, {
-                    width: "100%",
-                    padding: "6px",
-                    background: "#141417",
-                    border: "1px solid #444",
-                    borderRadius: "4px",
-                    color: "#fff",
-                    fontSize: "14px",
-                    textAlign: "center",
-                    pointerEvents: "auto",
-                });
+        input.addEventListener("change", (e) => {
+          node.state.value = parseFloat(e.target.value) || 0;
+        });
 
-                input.addEventListener("change", (e) => {
-                    node.state.value = parseFloat(e.target.value) || 0;
-                });
+        input.addEventListener("mousedown", (e) => e.stopPropagation());
+        input.addEventListener("keydown", (e) => e.stopPropagation());
 
-                input.addEventListener("mousedown", (e) => e.stopPropagation());
-                input.addEventListener("keydown", (e) => e.stopPropagation());
+        body.appendChild(input);
+      },
+      update(_node, _el, _opts) {
+        // Selection is handled by the canvas renderer
+      },
+    },
+    onDraw(node, { ctx }) {
+      // const { x, y } = node.computed;
+      // ctx.fillStyle = "#8f8";
+      // ctx.font = "14px sans-serif";
+      // ctx.textAlign = "center";
+      // ctx.fillText(String(node.state.value ?? 0), x + 70, y + 42);
+    },
+  });
 
-                body.appendChild(input);
-            },
-            update(node, el, { header, selected }) {
-                el.style.borderColor = selected ? "#6cf" : "#444";
-                header.style.backgroundColor = selected ? "#3a4a5a" : "#2a2a31";
-            },
-        },
-        onDraw(node, { ctx }) {
-            const { x, y } = node.computed;
-            ctx.fillStyle = "#8f8";
-            ctx.font = "14px sans-serif";
-            ctx.textAlign = "center";
-            ctx.fillText(String(node.state.value ?? 0), x + 70, y + 42);
-        },
-    });
+  // String Node
+  registry.register("value/String", {
+    title: "String",
+    color: "#3b82f6", // data (blue)
+    size: { w: 160 },
+    outputs: [{ name: "value", datatype: "string" }],
+    onCreate(node) {
+      node.state.value = "Hello";
+    },
+    onExecute(node, { setOutput }) {
+      setOutput("value", node.state.value ?? "");
+    },
+    onDraw(node, { ctx }) {
+      const { x, y } = node.computed;
+      ctx.fillStyle = "#8f8";
+      ctx.font = "12px sans-serif";
+      ctx.textAlign = "center";
+      const text = String(node.state.value ?? "");
+      const displayText = text.length > 15 ? text.substring(0, 15) + "..." : text;
+      ctx.fillText(displayText, x + 80, y + 42);
+    },
+  });
 
-    // String Node
-    registry.register("value/String", {
-        title: "String",
-        size: { w: 160, h: 60 },
-        outputs: [{ name: "value", datatype: "string" }],
-        onCreate(node) {
-            node.state.value = "Hello";
-        },
-        onExecute(node, { setOutput }) {
-            setOutput("value", node.state.value ?? "");
-        },
-        onDraw(node, { ctx }) {
-            const { x, y } = node.computed;
-            ctx.fillStyle = "#8f8";
-            ctx.font = "12px sans-serif";
-            ctx.textAlign = "center";
-            const text = String(node.state.value ?? "");
-            const displayText = text.length > 15 ? text.substring(0, 15) + "..." : text;
-            ctx.fillText(displayText, x + 80, y + 42);
-        },
-    });
-
-    // Boolean Node
-    registry.register("value/Boolean", {
-        title: "Boolean",
-        size: { w: 140, h: 60 },
-        outputs: [{ name: "value", portType: "data", datatype: "boolean" }],
-        onCreate(node) {
-            node.state.value = true;
-        },
-        onExecute(node, { setOutput }) {
-            console.log("[Boolean] Outputting value:", node.state.value ?? false);
-            setOutput("value", node.state.value ?? false);
-        },
-        onDraw(node, { ctx }) {
-            const { x, y } = node.computed;
-            ctx.fillStyle = node.state.value ? "#8f8" : "#f88";
-            ctx.font = "14px sans-serif";
-            ctx.textAlign = "center";
-            ctx.fillText(String(node.state.value), x + 70, y + 42);
-        },
-    });
+  // Boolean Node
+  registry.register("value/Boolean", {
+    title: "Boolean",
+    color: "#3b82f6", // data (blue)
+    size: { w: 140 },
+    outputs: [{ name: "value", portType: "data", datatype: "boolean" }],
+    onCreate(node) {
+      node.state.value = true;
+    },
+    onExecute(node, { setOutput }) {
+      console.log("[Boolean] Outputting value:", node.state.value ?? false);
+      setOutput("value", node.state.value ?? false);
+    },
+    onDraw(node, { ctx }) {
+      const { x, y } = node.computed;
+      ctx.fillStyle = node.state.value ? "#8f8" : "#f88";
+      ctx.font = "600 14px var(--font-main)";
+      ctx.textAlign = "center";
+      ctx.fillText(String(node.state.value), x + 70, y + 42);
+    },
+  });
 }