html-overlay-node 0.1.6 → 0.1.9

package/package.json

@@ -1,15 +1,16 @@
 {
   "name": "html-overlay-node",
-  "version": "0.1.6",
-  "description": "A customizable, LiteGraph-style node editor library with canvas rendering, HTML overlays, and flexible execution control",
-  "main": "dist/html-overlay-node.umd.js",
-  "module": "dist/html-overlay-node.es.js",
+  "version": "0.1.9",
+  "description": "LiteGraph-style node editor with HTML overlay support",
+  "main": "./src/index.js",
+  "module": "./src/index.js",
   "type": "module",
   "exports": {
-    ".": {
-      "import": "./dist/html-overlay-node.es.js",
-      "require": "./dist/html-overlay-node.umd.js"
-    }
+    ".": "./src/index.js",
+    "./nodes": "./src/nodes/index.js",
+    "./defaults": "./src/defaults/index.js",
+    "./index.css": "./index.css",
+    "./src/ui/PropertyPanel.css": "./src/ui/PropertyPanel.css"
   },
   "files": [
     "dist",

package/src/core/Edge.js

@@ -16,8 +16,10 @@ export class Edge {
    * @param {string} options.toPort - Target port ID
    */
   constructor({ id, fromNode, fromPort, toNode, toPort }) {
-    if (!fromNode || !fromPort || !toNode || !toPort) {
-      throw new Error("Edge requires fromNode, fromPort, toNode, and toPort");
+    // Allow empty strings for port names (exec ports use empty names)
+    // Only check for null/undefined
+    if (fromNode == null || fromPort == null || toNode == null || toPort == null) {
+      throw new Error("Edge requires fromNode, fromPort, toNode, and toPort (null/undefined not allowed)");
     }
     this.id = id ?? randomUUID();
     this.fromNode = fromNode;

package/src/core/Node.js

@@ -43,28 +43,44 @@ export class Node {
    * @param {string} [portType="data"] - Port type: "exec" or "data"
    * @returns {Object} The created port
    */
+  /**
+   * Recalculate minimum size based on ports
+   */
+  _updateMinSize() {
+    const HEADER_HEIGHT = 28;
+    const PORT_SPACING = 24;
+    const BOTTOM_PADDING = 10;
+
+    // Calculate required height for inputs and outputs
+    const inHeight = HEADER_HEIGHT + 10 + this.inputs.length * PORT_SPACING + BOTTOM_PADDING;
+    const outHeight = HEADER_HEIGHT + 10 + this.outputs.length * PORT_SPACING + BOTTOM_PADDING;
+
+    const minHeight = Math.max(inHeight, outHeight, 60); // Minimum 60px base
+
+    if (this.size.height < minHeight) {
+      this.size.height = minHeight;
+    }
+  }
+
   addInput(name, datatype = "any", portType = "data") {
-    if (!name || typeof name !== "string") {
-      throw new Error("Input port name must be a non-empty string");
+    // ... existing validation ...
+    if (typeof name !== "string" || (portType === "data" && !name)) {
+      throw new Error("Input port name must be a string (non-empty for data ports)");
     }
     const port = { id: randomUUID(), name, datatype, portType, dir: "in" };
     this.inputs.push(port);
+    this._updateMinSize();
     return port;
   }
 
-  /**
-   * Add an output port to this node
-   * @param {string} name - Port name
-   * @param {string} [datatype="any"] - Data type for the port
-   * @param {string} [portType="data"] - Port type: "exec" or "data"
-   * @returns {Object} The created port
-   */
   addOutput(name, datatype = "any", portType = "data") {
-    if (!name || typeof name !== "string") {
-      throw new Error("Output port name must be a non-empty string");
+    // ... existing validation ...
+    if (typeof name !== "string" || (portType === "data" && !name)) {
+      throw new Error("Output port name must be a string (non-empty for data ports)");
     }
     const port = { id: randomUUID(), name, datatype, portType, dir: "out" };
     this.outputs.push(port);
+    this._updateMinSize();
     return port;
   }
 }

package/src/core/Runner.js

@@ -54,6 +54,7 @@ export class Runner {
 
   /**
    * Execute connected nodes once from a starting node
+   * Uses queue-based traversal to support branching exec flows
    * @param {string} startNodeId - ID of the node to start from
    * @param {number} dt - Delta time
    */
@@ -62,14 +63,21 @@ export class Runner {
 
     const executedNodes = [];
     const allConnectedNodes = new Set();
-    let currentNodeId = startNodeId;
+    const queue = [startNodeId];
+    const visited = new Set(); // Prevent infinite loops
+
+    // Queue-based traversal for branching execution
+    while (queue.length > 0) {
+      const currentNodeId = queue.shift();
+
+      // Skip if already executed (prevents cycles)
+      if (visited.has(currentNodeId)) continue;
+      visited.add(currentNodeId);
 
-    // Follow exec flow
-    while (currentNodeId) {
       const node = this.graph.nodes.get(currentNodeId);
       if (!node) {
         console.warn(`[Runner.runOnce] Node not found: ${currentNodeId}`);
-        break;
+        continue;
       }
 
       executedNodes.push(currentNodeId);
@@ -96,8 +104,9 @@ export class Runner {
       // Execute current node
       this.executeNode(currentNodeId, dt);
 
-      // Find next node via exec output
-      currentNodeId = this.findNextExecNode(currentNodeId);
+      // Find all next nodes via exec outputs and add to queue
+      const nextNodes = this.findAllNextExecNodes(currentNodeId);
+      queue.push(...nextNodes);
     }
 
     console.log("[Runner.runOnce] Executed nodes:", executedNodes.length);
@@ -115,26 +124,31 @@ export class Runner {
   }
 
   /**
-   * Find the next node to execute by following exec output
+   * Find all nodes connected via exec outputs
+   * Supports multiple connections from a single exec output
    * @param {string} nodeId - Current node ID
-   * @returns {string|null} Next node ID or null
+   * @returns {string[]} Array of next node IDs
    */
-  findNextExecNode(nodeId) {
+  findAllNextExecNodes(nodeId) {
     const node = this.graph.nodes.get(nodeId);
-    if (!node) return null;
+    if (!node) return [];
 
-    // Find exec output port
-    const execOutput = node.outputs.find(p => p.portType === "exec");
-    if (!execOutput) return null;
+    // Find all exec output ports
+    const execOutputs = node.outputs.filter(p => p.portType === "exec");
+    if (execOutputs.length === 0) return [];
 
-    // Find edge from exec output
-    for (const edge of this.graph.edges.values()) {
-      if (edge.fromNode === nodeId && edge.fromPort === execOutput.id) {
-        return edge.toNode;
+    const nextNodes = [];
+
+    // Find all edges from exec outputs
+    for (const execOutput of execOutputs) {
+      for (const edge of this.graph.edges.values()) {
+        if (edge.fromNode === nodeId && edge.fromPort === execOutput.id) {
+          nextNodes.push(edge.toNode);
+        }
       }
     }
 
-    return null;
+    return nextNodes;
   }
 
   /**

package/src/defaults/contextMenu.js

@@ -0,0 +1,102 @@
+/**
+ * Default Context Menu Setup
+ * 
+ * This module provides the default context menu configuration.
+ * Users can import and use this directly, modify it, or create their own.
+ * 
+ * @example
+ * import { setupDefaultContextMenu } from "html-overlay-node/defaults";
+ * setupDefaultContextMenu(editor.contextMenu, { controller, graph, hooks });
+ */
+
+import { RemoveNodeCmd, ChangeGroupColorCmd } from "../core/commands.js";
+
+/**
+ * Setup default context menu items
+ * @param {ContextMenu} contextMenu - Context menu instance
+ * @param {Object} options - Configuration options
+ * @param {Controller} options.controller - Controller instance
+ * @param {Graph} options.graph - Graph instance
+ * @param {Hooks} options.hooks - Hooks instance
+ */
+export function setupDefaultContextMenu(contextMenu, { controller, graph, hooks }) {
+    // Add Node submenu (canvas background only)
+    // Use a function to dynamically generate node types when menu is shown
+    const getNodeTypes = () => {
+        const nodeTypes = [];
+        for (const [key, typeDef] of graph.registry.types.entries()) {
+            nodeTypes.push({
+                id: `add-${key}`,
+                label: typeDef.title || key,
+                action: () => {
+                    // Get world position from context menu
+                    const worldPos = contextMenu.worldPosition || { x: 100, y: 100 };
+
+                    // Add node at click position
+                    const node = graph.addNode(key, {
+                        x: worldPos.x,
+                        y: worldPos.y,
+                    });
+
+                    hooks?.emit("node:updated", node);
+                    controller.render(); // Update minimap and canvas
+                },
+            });
+        }
+        return nodeTypes;
+    };
+
+    contextMenu.addItem("add-node", "Add Node", {
+        condition: (target) => !target,
+        submenu: getNodeTypes, // Pass function instead of array
+        order: 5,
+    });
+
+    // Delete Node (for all nodes except groups)
+    contextMenu.addItem("delete-node", "Delete Node", {
+        condition: (target) => target && target.type !== "core/Group",
+        action: (target) => {
+            const cmd = RemoveNodeCmd(graph, target);
+            controller.stack.exec(cmd);
+            hooks?.emit("node:updated", target);
+        },
+        order: 10,
+    });
+
+    // Change Group Color (for groups only) - with submenu
+    const colors = [
+        { name: "Default", color: "#39424e" },
+        { name: "Slate", color: "#4a5568" },
+        { name: "Gray", color: "#2d3748" },
+        { name: "Blue", color: "#1a365d" },
+        { name: "Green", color: "#22543d" },
+        { name: "Red", color: "#742a2a" },
+        { name: "Purple", color: "#44337a" },
+    ];
+
+    contextMenu.addItem("change-group-color", "Change Color", {
+        condition: (target) => target && target.type === "core/Group",
+        submenu: colors.map((colorInfo) => ({
+            id: `color-${colorInfo.color}`,
+            label: colorInfo.name,
+            color: colorInfo.color,
+            action: (target) => {
+                const currentColor = target.state.color || "#39424e";
+                const cmd = ChangeGroupColorCmd(target, currentColor, colorInfo.color);
+                controller.stack.exec(cmd);
+                hooks?.emit("node:updated", target);
+            },
+        })),
+        order: 20,
+    });
+
+    contextMenu.addItem("delete-group", "Delete Group", {
+        condition: (target) => target && target.type === "core/Group",
+        action: (target) => {
+            const cmd = RemoveNodeCmd(graph, target);
+            controller.stack.exec(cmd);
+            hooks?.emit("node:updated", target);
+        },
+        order: 20,
+    });
+}

package/src/defaults/index.js

@@ -0,0 +1,6 @@
+/**
+ * Default Configurations
+ * Export all default setup functions
+ */
+
+export { setupDefaultContextMenu } from "./contextMenu.js";