html-overlay-node 0.1.6 → 0.1.10

package/src/nodes/math.js

@@ -0,0 +1,99 @@
+/**
+ * Math Nodes Package
+ * Provides basic mathematical operation nodes
+ */
+
+export function registerMathNodes(registry) {
+    // Add Node
+    registry.register("math/Add", {
+        title: "Add",
+        color: "#f43f5e", // math (rose)
+        size: { w: 140 },
+        inputs: [
+            { name: "exec", portType: "exec" },
+            { name: "a", portType: "data", datatype: "number" },
+            { name: "b", portType: "data", datatype: "number" },
+        ],
+        outputs: [
+            { name: "exec", portType: "exec" },
+            { name: "result", portType: "data", datatype: "number" },
+        ],
+        onCreate(node) {
+            node.state.a = 0;
+            node.state.b = 0;
+        },
+        onExecute(node, { getInput, setOutput }) {
+            const a = getInput("a") ?? node.state.a ?? 0;
+            const b = getInput("b") ?? node.state.b ?? 0;
+            const result = a + b;
+            // Sync state so PropertyPanel shows actual values
+            node.state.a = a;
+            node.state.b = b;
+            node.state.result = result;
+            console.log("[Add] a:", a, "b:", b, "result:", result);
+            setOutput("result", result);
+        },
+    });
+
+    // Subtract Node
+    registry.register("math/Subtract", {
+        title: "Subtract",
+        color: "#f43f5e", // math (rose)
+        size: { w: 140 },
+        inputs: [
+            { name: "a", datatype: "number" },
+            { name: "b", datatype: "number" },
+        ],
+        outputs: [{ name: "result", datatype: "number" }],
+        onExecute(node, { getInput, setOutput }) {
+            const a = getInput("a") ?? 0;
+            const b = getInput("b") ?? 0;
+            setOutput("result", a - b);
+        },
+    });
+
+    // Multiply Node
+    registry.register("math/Multiply", {
+        title: "Multiply",
+        color: "#f43f5e", // math (rose)
+        size: { w: 140 },
+        inputs: [
+            { name: "exec", portType: "exec" },
+            { name: "a", portType: "data", datatype: "number" },
+            { name: "b", portType: "data", datatype: "number" },
+        ],
+        outputs: [
+            { name: "exec", portType: "exec" },
+            { name: "result", portType: "data", datatype: "number" },
+        ],
+        onExecute(node, { getInput, setOutput }) {
+            const a = getInput("a") ?? node.state?.a ?? 0;
+            const b = getInput("b") ?? node.state?.b ?? 0;
+            const result = a * b;
+            if (node.state) {
+                node.state.a = a;
+                node.state.b = b;
+                node.state.result = result;
+            }
+            console.log("[Multiply] a:", a, "b:", b, "result:", result);
+            setOutput("result", result);
+        },
+    });
+
+    // Divide Node
+    registry.register("math/Divide", {
+        title: "Divide",
+        color: "#f43f5e", // math (rose)
+        size: { w: 140 },
+        inputs: [
+            { name: "a", datatype: "number" },
+            { name: "b", datatype: "number" },
+        ],
+        outputs: [{ name: "result", datatype: "number" }],
+        onExecute(node, { getInput, setOutput }) {
+            const a = getInput("a") ?? 0;
+            const b = getInput("b") ?? 1;
+            setOutput("result", b !== 0 ? a / b : 0);
+        },
+    });
+}

package/src/nodes/util.js

@@ -0,0 +1,176 @@
+// 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

@@ -0,0 +1,100 @@
+/**
+ * Value Nodes Package
+ * Provides constant value nodes (Number, String, Boolean)
+ */
+
+export function registerValueNodes(registry) {
+  // 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");
+
+        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;
+
+        input.addEventListener("change", (e) => {
+          node.state.value = parseFloat(e.target.value) || 0;
+        });
+
+        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);
+    },
+  });
+
+  // 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);
+    },
+  });
+
+  // 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);
+    },
+  });
+}