html-overlay-node 0.1.6 → 0.1.10

package/src/interact/ContextMenu.js

@@ -232,7 +232,11 @@ export class ContextMenu {
 
         // Show submenu if exists
         if (item.submenu) {
-          this._showSubmenu(item.submenu, itemEl);
+          // Support function-based submenus for dynamic content
+          const submenuItems = typeof item.submenu === 'function'
+            ? item.submenu()
+            : item.submenu;
+          this._showSubmenu(submenuItems, itemEl);
         }
       });
 

package/src/interact/Controller.js

@@ -1,23 +1,18 @@
 import { portRect } from "../render/hitTest.js";
-import {
-  AddEdgeCmd,
-  RemoveEdgeCmd,
-  RemoveNodeCmd,
-  ResizeNodeCmd,
-} from "../core/commands.js";
+import { AddEdgeCmd, RemoveEdgeCmd, RemoveNodeCmd, ResizeNodeCmd } from "../core/commands.js";
 import { CommandStack } from "../core/CommandStack.js";
 
 export class Controller {
-
   static MIN_NODE_WIDTH = 80;
   static MIN_NODE_HEIGHT = 60;
 
-  constructor({ graph, renderer, hooks, htmlOverlay, contextMenu, portRenderer }) {
+  constructor({ graph, renderer, hooks, htmlOverlay, contextMenu, edgeRenderer, portRenderer }) {
     this.graph = graph;
     this.renderer = renderer;
     this.hooks = hooks;
     this.htmlOverlay = htmlOverlay;
     this.contextMenu = contextMenu;
+    this.edgeRenderer = edgeRenderer; // Separate renderer for edges/animations above HTML
     this.portRenderer = portRenderer; // Separate renderer for ports above HTML
 
     this.stack = new CommandStack();
@@ -30,6 +25,11 @@ export class Controller {
     this.gResizing = null;
     this.boxSelecting = null; // { startX, startY, currentX, currentY } - world coords
 
+    // Edge / node animation state
+    this.activeEdges = new Set();
+    this.activeEdgeTimes = new Map(); // edge.id → activation timestamp
+    this.activeNodes = new Set();     // node IDs currently executing
+
     // Feature flags
     this.snapToGrid = true; // Snap nodes to grid (toggle with G key)
     this.gridSize = 20; // Grid size for snapping
@@ -207,13 +207,11 @@ export class Controller {
     for (const n of this.graph.nodes.values()) {
       for (let i = 0; i < n.inputs.length; i++) {
         const r = portRect(n, n.inputs[i], i, "in");
-        if (rectHas(r, x, y))
-          return { node: n, port: n.inputs[i], dir: "in", idx: i };
+        if (rectHas(r, x, y)) return { node: n, port: n.inputs[i], dir: "in", idx: i };
       }
       for (let i = 0; i < n.outputs.length; i++) {
         const r = portRect(n, n.outputs[i], i, "out");
-        if (rectHas(r, x, y))
-          return { node: n, port: n.outputs[i], dir: "out", idx: i };
+        if (rectHas(r, x, y)) return { node: n, port: n.outputs[i], dir: "out", idx: i };
       }
     }
     return null;
@@ -441,8 +439,10 @@ export class Controller {
       }
 
       // Calculate delta from original position
-      const deltaX = targetWx - this.dragging.selectedNodes.find(sn => sn.node.id === n.id).startWorldX;
-      const deltaY = targetWy - this.dragging.selectedNodes.find(sn => sn.node.id === n.id).startWorldY;
+      const deltaX =
+        targetWx - this.dragging.selectedNodes.find((sn) => sn.node.id === n.id).startWorldX;
+      const deltaY =
+        targetWy - this.dragging.selectedNodes.find((sn) => sn.node.id === n.id).startWorldY;
 
       // Update world transforms
       this.graph.updateWorldTransforms();
@@ -532,13 +532,7 @@ export class Controller {
       const portIn = this._findPortAtWorld(w.x, w.y);
       if (portIn && portIn.dir === "in") {
         this.stack.exec(
-          AddEdgeCmd(
-            this.graph,
-            from.fromNode,
-            from.fromPort,
-            portIn.node.id,
-            portIn.port.id
-          )
+          AddEdgeCmd(this.graph, from.fromNode, from.fromPort, portIn.node.id, portIn.port.id)
         );
       }
       this.connecting = null;
@@ -694,10 +688,13 @@ export class Controller {
     }
 
     // Get selected nodes
-    const selectedNodes = Array.from(this.selection).map(id => this.graph.getNodeById(id));
+    const selectedNodes = Array.from(this.selection).map((id) => this.graph.getNodeById(id));
 
     // Calculate bounding box
-    let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+    let minX = Infinity,
+      minY = Infinity,
+      maxX = -Infinity,
+      maxY = -Infinity;
     for (const node of selectedNodes) {
       const { x, y, w, h } = node.computed;
       minX = Math.min(minX, x);
@@ -733,7 +730,7 @@ export class Controller {
   _alignNodesHorizontal() {
     if (this.selection.size < 2) return;
 
-    const nodes = Array.from(this.selection).map(id => this.graph.getNodeById(id));
+    const nodes = Array.from(this.selection).map((id) => this.graph.getNodeById(id));
     const avgY = nodes.reduce((sum, n) => sum + n.computed.y, 0) / nodes.length;
 
     for (const node of nodes) {
@@ -751,7 +748,7 @@ export class Controller {
   _alignNodesVertical() {
     if (this.selection.size < 2) return;
 
-    const nodes = Array.from(this.selection).map(id => this.graph.getNodeById(id));
+    const nodes = Array.from(this.selection).map((id) => this.graph.getNodeById(id));
     const avgX = nodes.reduce((sum, n) => sum + n.computed.x, 0) / nodes.length;
 
     for (const node of nodes) {
@@ -766,16 +763,39 @@ export class Controller {
   render() {
     const tEdge = this.renderTempEdge();
 
+    // 1. Draw background (grid, canvas-only nodes) on main canvas
     this.renderer.draw(this.graph, {
       selection: this.selection,
-      tempEdge: tEdge,
+      tempEdge: null, // Don't draw temp edge on background
       boxSelecting: this.boxSelecting,
-      activeEdges: this.activeEdges || new Set(), // For animation
+      activeEdges: this.activeEdges || new Set(),
+      drawEdges: !this.edgeRenderer, // Only draw edges here if no separate edge renderer
     });
 
+    // 2. HTML Overlay layer (HTML nodes at z-index 10)
     this.htmlOverlay?.draw(this.graph, this.selection);
 
-    // Draw box selection rectangle on top of everything
+    // 3. Draw edges and animations on edge canvas (above HTML overlay at z-index 15)
+    if (this.edgeRenderer) {
+      const edgeCtx = this.edgeRenderer.ctx;
+      edgeCtx.clearRect(0, 0, this.edgeRenderer.canvas.width, this.edgeRenderer.canvas.height);
+
+      // Edges use shared transform (via property getters)
+      this.edgeRenderer._applyTransform();
+
+      this.edgeRenderer.drawEdgesOnly(this.graph, {
+        activeEdges: this.activeEdges,
+        activeEdgeTimes: this.activeEdgeTimes,
+        activeNodes: this.activeNodes,
+        selection: this.selection,
+        time: performance.now(),
+        tempEdge: tEdge,
+      });
+
+      this.edgeRenderer._resetTransform();
+    }
+
+    // 4. Draw box selection rectangle on top of edges
     if (this.boxSelecting) {
       const { startX, startY, currentX, currentY } = this.boxSelecting;
       const minX = Math.min(startX, currentX);
@@ -786,23 +806,36 @@ export class Controller {
       const screenStart = this.renderer.worldToScreen(minX, minY);
       const screenEnd = this.renderer.worldToScreen(minX + width, minY + height);
 
-      const ctx = this.renderer.ctx;
+      const ctx = this.edgeRenderer ? this.edgeRenderer.ctx : this.renderer.ctx;
       ctx.save();
-      this.renderer._resetTransform();
+      if (this.edgeRenderer) {
+        this.edgeRenderer._resetTransform();
+      } else {
+        this.renderer._resetTransform();
+      }
 
       // Draw selection box
       ctx.strokeStyle = "#6cf";
       ctx.fillStyle = "rgba(102, 204, 255, 0.1)";
       ctx.lineWidth = 2;
-      ctx.strokeRect(screenStart.x, screenStart.y, screenEnd.x - screenStart.x, screenEnd.y - screenStart.y);
-      ctx.fillRect(screenStart.x, screenStart.y, screenEnd.x - screenStart.x, screenEnd.y - screenStart.y);
+      ctx.strokeRect(
+        screenStart.x,
+        screenStart.y,
+        screenEnd.x - screenStart.x,
+        screenEnd.y - screenStart.y
+      );
+      ctx.fillRect(
+        screenStart.x,
+        screenStart.y,
+        screenEnd.x - screenStart.x,
+        screenEnd.y - screenStart.y
+      );
 
       ctx.restore();
     }
 
-    // Draw ports for HTML overlay nodes on separate canvas (above HTML)
+    // 5. Draw ports on port canvas (above edges at z-index 20)
     if (this.portRenderer) {
-      // Clear port canvas
       const portCtx = this.portRenderer.ctx;
       portCtx.clearRect(0, 0, this.portRenderer.canvas.width, this.portRenderer.canvas.height);
 
@@ -811,16 +844,13 @@ export class Controller {
       this.portRenderer.offsetX = this.renderer.offsetX;
       this.portRenderer.offsetY = this.renderer.offsetY;
 
-      // Draw ports for HTML overlay nodes
       this.portRenderer._applyTransform();
+
+      // Draw ports for HTML overlay nodes only
+      // Draw ports for ALL nodes to ensure they are above edges
       for (const n of this.graph.nodes.values()) {
         if (n.type !== "core/Group") {
-          const def = this.portRenderer.registry?.types?.get(n.type);
-          const hasHtmlOverlay = !!(def?.html);
-
-          if (hasHtmlOverlay) {
-            this.portRenderer._drawPorts(n);
-          }
+          this.portRenderer._drawPorts(n);
         }
       }
       this.portRenderer._resetTransform();
@@ -829,10 +859,7 @@ export class Controller {
 
   renderTempEdge() {
     if (!this.connecting) return null;
-    const a = this._portAnchorScreen(
-      this.connecting.fromNode,
-      this.connecting.fromPort
-    ); // {x,y}
+    const a = this._portAnchorScreen(this.connecting.fromNode, this.connecting.fromPort); // {x,y}
     return {
       x1: a.x,
       y1: a.y,
@@ -845,7 +872,7 @@ export class Controller {
     const n = this.graph.nodes.get(nodeId);
     const iOut = n.outputs.findIndex((p) => p.id === portId);
     const r = portRect(n, null, iOut, "out"); // world rect
-    return this.renderer.worldToScreen(r.x, r.y + 7); // -> screen point
+    return this.renderer.worldToScreen(r.x + r.w / 2, r.y + r.h / 2); // -> screen point (CENTER)
   }
 }
 

package/src/nodes/core.js

@@ -0,0 +1,266 @@
+/**
+ * Core Nodes Package
+ * Provides core example nodes: Note, HtmlNote, TodoNode, and Group
+ */
+
+export function registerCoreNodes(registry, hooks) {
+    // Note Node
+    registry.register("core/Note", {
+        title: "Note",
+        color: "#10b981", // info (emerald)
+        size: { w: 180 },
+        inputs: [{ name: "in", datatype: "any" }],
+        outputs: [{ name: "out", datatype: "any" }],
+        onCreate(node) {
+            node.state.text = "hello";
+        },
+        onExecute(node, { getInput, setOutput }) {
+            const incoming = getInput("in");
+            const out = (incoming ?? node.state.text ?? "").toString().toUpperCase();
+            setOutput(
+                "out",
+                out + ` · ${Math.floor((performance.now() / 1000) % 100)}`
+            );
+        },
+    });
+
+    // HTML Note Node
+    registry.register("core/HtmlNote", {
+        title: "HTML Note",
+        color: "#3b82f6", // data (blue)
+        size: { w: 220 },
+        inputs: [{ name: "in", datatype: "any" }],
+        outputs: [{ name: "out", datatype: "any" }],
+
+        html: {
+            init(node, el, { body }) {
+                el.classList.add("node-overlay");
+
+                body.style.display = "flex";
+                body.style.flexDirection = "column";
+                body.style.gap = "8px";
+
+                const label = document.createElement("label");
+                label.className = "premium-label";
+                label.textContent = "Data Input";
+                body.appendChild(label);
+
+                const input = document.createElement("input");
+                input.className = "premium-input";
+                input.placeholder = "Type message...";
+                input.addEventListener("input", (e) => {
+                    node.state.text = e.target.value;
+                });
+                input.addEventListener("mousedown", (e) => e.stopPropagation());
+
+                body.appendChild(input);
+                el._input = input;
+            },
+
+            update(node, el, _opts) {
+                // Selection is handled by the canvas renderer
+                if (el._input.value !== (node.state.text || "")) {
+                    el._input.value = node.state.text || "";
+                }
+            }
+        },
+
+        onCreate(node) {
+            node.state.text = "";
+        },
+        onExecute(node, { getInput, setOutput }) {
+            const incoming = getInput("in");
+            setOutput("out", incoming);
+        },
+    });
+
+    // Todo List Node (HTML Overlay)
+    registry.register("core/TodoNode", {
+        title: "Task list",
+        color: "#10b981", // info (emerald)
+        size: { w: 240, h: 300 },
+        inputs: [{ name: "in", datatype: "any" }],
+        outputs: [{ name: "out", datatype: "any" }],
+        html: {
+            init(node, el, { body }) {
+                el.classList.add("node-overlay");
+
+                body.style.display = "flex";
+                body.style.flexDirection = "column";
+
+                const label = document.createElement("label");
+                label.className = "premium-label";
+                label.textContent = "New Task";
+                body.appendChild(label);
+
+                const inputRow = document.createElement("div");
+                Object.assign(inputRow.style, { display: "flex", gap: "6px", marginBottom: "12px" });
+
+                const input = document.createElement("input");
+                input.className = "premium-input";
+                input.placeholder = "What needs to be done?";
+
+                const addBtn = document.createElement("button");
+                addBtn.className = "premium-button";
+                addBtn.textContent = "Add";
+
+                inputRow.append(input, addBtn);
+
+                const list = document.createElement("ul");
+                Object.assign(list.style, {
+                    listStyle: "none", padding: "0", margin: "0",
+                    overflow: "hidden", flex: "1"
+                });
+
+                body.append(inputRow, list);
+
+                const addTodo = () => {
+                    const text = input.value.trim();
+                    if (!text) return;
+                    const todos = node.state.todos || [];
+                    node.state.todos = [...todos, { id: Date.now(), text, done: false }];
+                    input.value = "";
+                    hooks.emit("node:updated", node);
+                };
+
+                addBtn.onclick = addTodo;
+                input.onkeydown = (e) => {
+                    if (e.key === "Enter") addTodo();
+                    e.stopPropagation();
+                };
+                input.onmousedown = (e) => e.stopPropagation();
+
+                el._refs = { list };
+            },
+            update(node, el, _opts) {
+                // Selection is handled by the canvas renderer
+                const { list } = el._refs;
+                const todos = node.state.todos || [];
+
+                list.innerHTML = "";
+                todos.forEach((todo) => {
+                    const li = document.createElement("li");
+                    Object.assign(li.style, {
+                        display: "flex", alignItems: "center", padding: "6px 0",
+                        borderBottom: "1px solid rgba(255,255,255,0.03)"
+                    });
+
+                    const chk = document.createElement("input");
+                    chk.type = "checkbox";
+                    chk.checked = todo.done;
+                    Object.assign(chk.style, {
+                        marginRight: "8px",
+                        accentColor: "#5568d0",
+                        pointerEvents: "auto",
+                    });
+                    chk.onchange = () => {
+                        todo.done = chk.checked;
+                        hooks.emit("node:updated", node);
+                    };
+                    chk.onmousedown = (e) => e.stopPropagation();
+
+                    const span = document.createElement("span");
+                    span.textContent = todo.text;
+                    span.style.flex = "1";
+                    span.style.fontSize = "11px";
+                    span.style.textDecoration = todo.done ? "line-through" : "none";
+                    span.style.color = todo.done ? "#404060" : "#8888a8";
+
+                    const del = document.createElement("button");
+                    del.textContent = "×";
+                    Object.assign(del.style, {
+                        background: "none", border: "none", color: "#4a3a4a",
+                        cursor: "pointer", fontSize: "14px",
+                        pointerEvents: "auto",
+                        transition: "color 0.12s ease",
+                    });
+                    del.addEventListener("mouseover", () => { del.style.color = "#ff4d4d"; });
+                    del.addEventListener("mouseout", () => { del.style.color = "#4a3a4a"; });
+                    del.onclick = () => {
+                        node.state.todos = node.state.todos.filter((t) => t.id !== todo.id);
+                        hooks.emit("node:updated", node);
+                    };
+                    del.onmousedown = (e) => e.stopPropagation();
+
+                    li.append(chk, span, del);
+                    list.appendChild(li);
+                });
+            }
+        },
+        onCreate(node) {
+            node.state.todos = [
+                { id: 1, text: "Welcome to Free Node", done: false },
+                { id: 2, text: "Try adding a task", done: true },
+            ];
+        },
+    });
+
+    // Group Node
+    registry.register("core/Group", {
+        title: "Group",
+        color: "#475569", // group (slate)
+        size: { w: 240, h: 160 },
+        onDraw(node, { ctx, theme, renderer }) {
+            const { x, y, w, h } = node.computed;
+            const headerH = 24;
+            const color = node.state.color || node.color || "#39424e";
+            const bgAlpha = 0.4;
+            const textColor = theme.text || "#e9e9ef";
+            const r = 4; // Groups can be slightly softer but still sharp
+
+            const rgba = (hex, a) => {
+                const c = hex.replace("#", "");
+                const n = parseInt(
+                    c.length === 3
+                        ? c
+                            .split("")
+                            .map((x) => x + x)
+                            .join("")
+                        : c,
+                    16
+                );
+                const r = (n >> 16) & 255,
+                    g = (n >> 8) & 255,
+                    b = n & 255;
+                return `rgba(${r},${g},${b},${a})`;
+            };
+
+            const roundRect = (ctx, x, y, w, h, r) => {
+                if (w < 2 * r) r = w / 2;
+                if (h < 2 * r) r = h / 2;
+                ctx.beginPath();
+                ctx.moveTo(x + r, y);
+                ctx.arcTo(x + w, y, x + w, y + h, r);
+                ctx.arcTo(x + w, y + h, x, y + h, r);
+                ctx.arcTo(x, y + h, x, y, r);
+                ctx.arcTo(x, y, x + w, y, r);
+                ctx.closePath();
+            };
+
+            ctx.fillStyle = rgba(color, bgAlpha);
+            roundRect(ctx, x, y, w, h, r);
+            ctx.fill();
+
+            ctx.fillStyle = rgba(color, 0.2);
+            ctx.beginPath();
+            ctx.roundRect(x, y, w, headerH, [r, r, 0, 0]);
+            ctx.fill();
+
+            // Use screen-coordinate text rendering for consistent scale
+            if (renderer && renderer._drawScreenText) {
+                renderer._drawScreenText(node.title, x + 12, y + 13, {
+                    fontPx: 13,
+                    color: textColor,
+                    baseline: "middle",
+                    align: "left"
+                });
+            } else {
+                // Fallback to world coordinates if renderer not available
+                ctx.fillStyle = textColor;
+                ctx.font = "600 13px system-ui";
+                ctx.textBaseline = "top";
+                ctx.fillText(node.title, x + 12, y + 6);
+            }
+        },
+    });
+}

package/src/nodes/index.js

@@ -0,0 +1,42 @@
+/**
+ * Node Packages - Main Export
+ * 
+ * This module exports all node registration functions.
+ * Users can import individual packages or registerAllNodes for convenience.
+ * 
+ * @example
+ * // Import specific packages
+ * import { registerMathNodes, registerLogicNodes } from "html-overlay-node/nodes";
+ * registerMathNodes(editor.registry);
+ * registerLogicNodes(editor.registry);
+ * 
+ * @example
+ * // Import all nodes at once
+ * import { registerAllNodes } from "html-overlay-node/nodes";
+ * registerAllNodes(editor.registry, editor.hooks);
+ */
+
+import { registerMathNodes } from "./math.js";
+import { registerLogicNodes } from "./logic.js";
+import { registerValueNodes } from "./value.js";
+import { registerUtilNodes } from "./util.js";
+import { registerCoreNodes } from "./core.js";
+
+export { registerMathNodes } from "./math.js";
+export { registerLogicNodes } from "./logic.js";
+export { registerValueNodes } from "./value.js";
+export { registerUtilNodes } from "./util.js";
+export { registerCoreNodes } from "./core.js";
+
+/**
+ * Register all example nodes at once
+ * @param {Registry} registry - Node registry instance
+ * @param {Hooks} hooks - Hooks instance (required for TodoNode)
+ */
+export function registerAllNodes(registry, hooks) {
+    registerMathNodes(registry);
+    registerLogicNodes(registry);
+    registerValueNodes(registry);
+    registerUtilNodes(registry);
+    registerCoreNodes(registry, hooks);
+}

package/src/nodes/logic.js

@@ -0,0 +1,60 @@
+/**
+ * Logic Nodes Package
+ * Provides boolean logic operation nodes
+ */
+
+export function registerLogicNodes(registry) {
+  // AND Node
+  registry.register("logic/AND", {
+    title: "AND",
+    color: "#a855f7", // logic (purple)
+    size: { w: 120 },
+    inputs: [
+      { name: "exec", portType: "exec" },
+      { name: "a", portType: "data", datatype: "boolean" },
+      { name: "b", portType: "data", datatype: "boolean" },
+    ],
+    outputs: [
+      { name: "exec", portType: "exec" },
+      { name: "result", portType: "data", datatype: "boolean" },
+    ],
+    onExecute(node, { getInput, setOutput }) {
+      const a = getInput("a") ?? false;
+      const b = getInput("b") ?? false;
+      console.log("[AND] Inputs - a:", a, "b:", b);
+      const result = a && b;
+      console.log("[AND] Result:", result);
+      setOutput("result", result);
+    },
+  });
+
+  // OR Node
+  registry.register("logic/OR", {
+    title: "OR",
+    color: "#a855f7", // logic (purple)
+    size: { w: 120 },
+    inputs: [
+      { name: "a", datatype: "boolean" },
+      { name: "b", datatype: "boolean" },
+    ],
+    outputs: [{ name: "result", datatype: "boolean" }],
+    onExecute(node, { getInput, setOutput }) {
+      const a = getInput("a") ?? false;
+      const b = getInput("b") ?? false;
+      setOutput("result", a || b);
+    },
+  });
+
+  // NOT Node
+  registry.register("logic/NOT", {
+    title: "NOT",
+    color: "#a855f7", // logic (purple)
+    size: { w: 120 },
+    inputs: [{ name: "in", datatype: "boolean" }],
+    outputs: [{ name: "out", datatype: "boolean" }],
+    onExecute(node, { getInput, setOutput }) {
+      const val = getInput("in") ?? false;
+      setOutput("out", !val);
+    },
+  });
+}