html-overlay-node 0.1.6 → 0.1.10

package/src/core/Runner.js

@@ -1,211 +1,201 @@
-export class Runner {
-  constructor({ graph, registry, hooks, cyclesPerFrame = 1 }) {
-    this.graph = graph;
-    this.registry = registry;
-    this.hooks = hooks;
-    this.running = false;
-    this._raf = null;
-    this._last = 0;
-    this.cyclesPerFrame = Math.max(1, cyclesPerFrame | 0);
-  }
-
-  // 외부에서 실행 중인지 확인
-  isRunning() {
-    return this.running;
-  }
-
-  // 실행 도중에도 CPS 변경 가능
-  setCyclesPerFrame(n) {
-    this.cyclesPerFrame = Math.max(1, n | 0);
-  }
-
-  step(cycles = 1, dt = 0) {
-    const nCycles = Math.max(1, cycles | 0);
-    for (let c = 0; c < nCycles; c++) {
-      for (const node of this.graph.nodes.values()) {
-        const def = this.registry.types.get(node.type);
-        if (def?.onExecute) {
-          try {
-            def.onExecute(node, {
-              dt,
-              graph: this.graph,
-              getInput: (portName) => {
-                const p =
-                  node.inputs.find((i) => i.name === portName) ||
-                  node.inputs[0];
-                return p ? this.graph.getInput(node.id, p.id) : undefined;
-              },
-              setOutput: (portName, value) => {
-                const p =
-                  node.outputs.find((o) => o.name === portName) ||
-                  node.outputs[0];
-                if (p) this.graph.setOutput(node.id, p.id, value);
-              },
-            });
-          } catch (err) {
-            this.hooks?.emit?.("error", err);
-          }
-        }
-      }
-      // commit writes for this cycle
-      this.graph.swapBuffers();
-    }
-  }
-
-  /**
-   * Execute connected nodes once from a starting node
-   * @param {string} startNodeId - ID of the node to start from
-   * @param {number} dt - Delta time
-   */
-  runOnce(startNodeId, dt = 0) {
-    console.log("[Runner.runOnce] Starting exec flow from node:", startNodeId);
-
-    const executedNodes = [];
-    const allConnectedNodes = new Set();
-    let currentNodeId = startNodeId;
-
-    // Follow exec flow
-    while (currentNodeId) {
-      const node = this.graph.nodes.get(currentNodeId);
-      if (!node) {
-        console.warn(`[Runner.runOnce] Node not found: ${currentNodeId}`);
-        break;
-      }
-
-      executedNodes.push(currentNodeId);
-      allConnectedNodes.add(currentNodeId);
-      console.log(`[Runner.runOnce] Executing: ${node.title} (${node.type})`);
-
-      // Find and add data dependency nodes (nodes providing input data)
-      for (const input of node.inputs) {
-        if (input.portType === "data") {
-          // Find edge feeding this data input
-          for (const edge of this.graph.edges.values()) {
-            if (edge.toNode === currentNodeId && edge.toPort === input.id) {
-              const sourceNode = this.graph.nodes.get(edge.fromNode);
-              if (sourceNode && !allConnectedNodes.has(edge.fromNode)) {
-                allConnectedNodes.add(edge.fromNode);
-                // Execute data source node before current node
-                this.executeNode(edge.fromNode, dt);
-              }
-            }
-          }
-        }
-      }
-
-      // Execute current node
-      this.executeNode(currentNodeId, dt);
-
-      // Find next node via exec output
-      currentNodeId = this.findNextExecNode(currentNodeId);
-    }
-
-    console.log("[Runner.runOnce] Executed nodes:", executedNodes.length);
-
-    // Find all edges involved (both exec and data)
-    const connectedEdges = new Set();
-    for (const edge of this.graph.edges.values()) {
-      if (allConnectedNodes.has(edge.fromNode) && allConnectedNodes.has(edge.toNode)) {
-        connectedEdges.add(edge.id);
-      }
-    }
-
-    console.log("[Runner.runOnce] Connected edges count:", connectedEdges.size);
-    return { connectedNodes: allConnectedNodes, connectedEdges };
-  }
-
-  /**
-   * Find the next node to execute by following exec output
-   * @param {string} nodeId - Current node ID
-   * @returns {string|null} Next node ID or null
-   */
-  findNextExecNode(nodeId) {
-    const node = this.graph.nodes.get(nodeId);
-    if (!node) return null;
-
-    // Find exec output port
-    const execOutput = node.outputs.find(p => p.portType === "exec");
-    if (!execOutput) return null;
-
-    // Find edge from exec output
-    for (const edge of this.graph.edges.values()) {
-      if (edge.fromNode === nodeId && edge.fromPort === execOutput.id) {
-        return edge.toNode;
-      }
-    }
-
-    return null;
-  }
-
-  /**
-   * Execute a single node
-   * @param {string} nodeId - Node ID to execute
-   * @param {number} dt - Delta time
-   */
-  executeNode(nodeId, dt) {
-    const node = this.graph.nodes.get(nodeId);
-    if (!node) return;
-
-    const def = this.registry.types.get(node.type);
-    if (!def?.onExecute) return;
-
-    try {
-      def.onExecute(node, {
-        dt,
-        graph: this.graph,
-        getInput: (portName) => {
-          const p = node.inputs.find((i) => i.name === portName) || node.inputs[0];
-          return p ? this.graph.getInput(node.id, p.id) : undefined;
-        },
-        setOutput: (portName, value) => {
-          const p = node.outputs.find((o) => o.name === portName) || node.outputs[0];
-          if (p) {
-            // Write directly to current buffer so other nodes can read it immediately
-            const key = `${node.id}:${p.id}`;
-            this.graph._curBuf().set(key, value);
-          }
-        },
-      });
-    } catch (err) {
-      this.hooks?.emit?.("error", err);
-    }
-  }
-
-  start() {
-    if (this.running) return;
-    this.running = true;
-    this._last = 0;
-    this.hooks?.emit?.("runner:start");
-
-    const loop = (t) => {
-      if (!this.running) return;
-      const dtMs = this._last ? t - this._last : 0;
-      this._last = t;
-      const dt = dtMs / 1000; // seconds
-
-      // 1) 스텝 실행
-      this.step(this.cyclesPerFrame, dt);
-
-      // 2) 프레임 훅 (렌더러/컨트롤러는 여기서 running, time, dt를 받아 표현 업데이트)
-      this.hooks?.emit?.("runner:tick", {
-        time: t,
-        dt,
-        running: true,
-        cps: this.cyclesPerFrame,
-      });
-
-      this._raf = requestAnimationFrame(loop);
-    };
-
-    this._raf = requestAnimationFrame(loop);
-  }
-
-  stop() {
-    if (!this.running) return;
-    this.running = false;
-    if (this._raf) cancelAnimationFrame(this._raf);
-    this._raf = null;
-    this._last = 0;
-    this.hooks?.emit?.("runner:stop");
-  }
-}
+export class Runner {
+  constructor({ graph, registry, hooks, cyclesPerFrame = 1 }) {
+    this.graph = graph;
+    this.registry = registry;
+    this.hooks = hooks;
+    this.running = false;
+    this._raf = null;
+    this._last = 0;
+    this.cyclesPerFrame = Math.max(1, cyclesPerFrame | 0);
+  }
+
+  isRunning() {
+    return this.running;
+  }
+
+  setCyclesPerFrame(n) {
+    this.cyclesPerFrame = Math.max(1, n | 0);
+  }
+
+  step(cycles = 1, dt = 0) {
+    const nCycles = Math.max(1, cycles | 0);
+    for (let c = 0; c < nCycles; c++) {
+      for (const node of this.graph.nodes.values()) {
+        const def = this.registry.types.get(node.type);
+        if (def?.onExecute) {
+          try {
+            def.onExecute(node, {
+              dt,
+              graph: this.graph,
+              getInput: (portName) => {
+                const p =
+                  node.inputs.find((i) => i.name === portName) ||
+                  node.inputs[0];
+                return p ? this.graph.getInput(node.id, p.id) : undefined;
+              },
+              setOutput: (portName, value) => {
+                const p =
+                  node.outputs.find((o) => o.name === portName) ||
+                  node.outputs[0];
+                if (p) this.graph.setOutput(node.id, p.id, value);
+              },
+            });
+          } catch (err) {
+            this.hooks?.emit?.("error", err);
+          }
+        }
+      }
+      this.graph.swapBuffers();
+    }
+  }
+
+  /**
+   * Execute connected nodes once from a starting node.
+   * Returns execEdgeOrder: exec edges in the order they were traversed.
+   */
+  runOnce(startNodeId, dt = 0) {
+    const executedNodes = [];
+    const allConnectedNodes = new Set();
+    const execEdgeOrder = []; // exec edge IDs in traversal order
+
+    // Queue items: { nodeId, fromEdgeId }
+    const queue = [{ nodeId: startNodeId, fromEdgeId: null }];
+    const visited = new Set();
+
+    while (queue.length > 0) {
+      const { nodeId: currentNodeId, fromEdgeId } = queue.shift();
+
+      if (visited.has(currentNodeId)) continue;
+      visited.add(currentNodeId);
+
+      // Record the exec edge that led to this node
+      if (fromEdgeId) execEdgeOrder.push(fromEdgeId);
+
+      const node = this.graph.nodes.get(currentNodeId);
+      if (!node) continue;
+
+      executedNodes.push(currentNodeId);
+      allConnectedNodes.add(currentNodeId);
+
+      // Execute data dependency nodes first
+      for (const input of node.inputs) {
+        if (input.portType === "data") {
+          for (const edge of this.graph.edges.values()) {
+            if (edge.toNode === currentNodeId && edge.toPort === input.id) {
+              const sourceNode = this.graph.nodes.get(edge.fromNode);
+              if (sourceNode && !allConnectedNodes.has(edge.fromNode)) {
+                allConnectedNodes.add(edge.fromNode);
+                this.executeNode(edge.fromNode, dt);
+              }
+            }
+          }
+        }
+      }
+
+      // Execute this node
+      this.executeNode(currentNodeId, dt);
+
+      // Find exec output edges and enqueue next nodes
+      const execOutputs = node.outputs.filter((p) => p.portType === "exec");
+      for (const execOutput of execOutputs) {
+        for (const edge of this.graph.edges.values()) {
+          if (edge.fromNode === currentNodeId && edge.fromPort === execOutput.id) {
+            queue.push({ nodeId: edge.toNode, fromEdgeId: edge.id });
+          }
+        }
+      }
+    }
+
+    // Collect all edges involved (both exec and data)
+    const connectedEdges = new Set();
+    for (const edge of this.graph.edges.values()) {
+      if (allConnectedNodes.has(edge.fromNode) && allConnectedNodes.has(edge.toNode)) {
+        connectedEdges.add(edge.id);
+      }
+    }
+
+    return { connectedNodes: allConnectedNodes, connectedEdges, execEdgeOrder };
+  }
+
+  findAllNextExecNodes(nodeId) {
+    const node = this.graph.nodes.get(nodeId);
+    if (!node) return [];
+
+    const execOutputs = node.outputs.filter((p) => p.portType === "exec");
+    if (execOutputs.length === 0) return [];
+
+    const nextNodes = [];
+    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 nextNodes;
+  }
+
+  executeNode(nodeId, dt) {
+    const node = this.graph.nodes.get(nodeId);
+    if (!node) return;
+
+    const def = this.registry.types.get(node.type);
+    if (!def?.onExecute) return;
+
+    try {
+      def.onExecute(node, {
+        dt,
+        graph: this.graph,
+        getInput: (portName) => {
+          const p = node.inputs.find((i) => i.name === portName) || node.inputs[0];
+          return p ? this.graph.getInput(node.id, p.id) : undefined;
+        },
+        setOutput: (portName, value) => {
+          const p = node.outputs.find((o) => o.name === portName) || node.outputs[0];
+          if (p) {
+            const key = `${node.id}:${p.id}`;
+            this.graph._curBuf().set(key, value);
+          }
+        },
+      });
+    } catch (err) {
+      this.hooks?.emit?.("error", err);
+    }
+  }
+
+  start() {
+    if (this.running) return;
+    this.running = true;
+    this._last = 0;
+    this.hooks?.emit?.("runner:start");
+
+    const loop = (t) => {
+      if (!this.running) return;
+      const dtMs = this._last ? t - this._last : 0;
+      this._last = t;
+      const dt = dtMs / 1000;
+
+      this.step(this.cyclesPerFrame, dt);
+
+      this.hooks?.emit?.("runner:tick", {
+        time: t,
+        dt,
+        running: true,
+        cps: this.cyclesPerFrame,
+      });
+
+      this._raf = requestAnimationFrame(loop);
+    };
+
+    this._raf = requestAnimationFrame(loop);
+  }
+
+  stop() {
+    if (!this.running) return;
+    this.running = false;
+    if (this._raf) cancelAnimationFrame(this._raf);
+    this._raf = null;
+    this._last = 0;
+    this.hooks?.emit?.("runner:stop");
+  }
+}

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";