html-overlay-node 0.1.6 → 0.1.10

package/src/index.js

@@ -10,6 +10,8 @@ import { HtmlOverlay } from "./render/HtmlOverlay.js";
 import { RemoveNodeCmd, ChangeGroupColorCmd } from "./core/commands.js";
 import { Minimap } from "./minimap/Minimap.js";
 import { PropertyPanel } from "./ui/PropertyPanel.js";
+import { HelpOverlay } from "./ui/HelpOverlay.js";
+import { setupDefaultContextMenu as defaultContextMenuSetup } from "./defaults/contextMenu.js";
 
 
 
@@ -22,6 +24,11 @@ export function createGraphEditor(
     showMinimap = true,
     enablePropertyPanel = true,
     propertyPanelContainer = null,
+    enableHelp = true,
+    helpShortcuts = null,
+    setupDefaultContextMenu = true,
+    setupContextMenu = null,
+    plugins = [],
   } = {}
 ) {
   let canvas;
@@ -80,6 +87,39 @@ export function createGraphEditor(
   // HTML Overlay
   const htmlOverlay = new HtmlOverlay(canvas.parentElement, renderer, registry);
 
+  // Register callback to sync HTML overlay transform when renderer zoom/pan changes
+  renderer.setTransformChangeCallback(() => {
+    htmlOverlay.syncTransform();
+  });
+
+  // Edge Canvas (above HTML overlay, for edge animations)
+  const edgeCanvas = document.createElement("canvas");
+  edgeCanvas.id = "edge-canvas";
+  Object.assign(edgeCanvas.style, {
+    position: "absolute",
+    top: "0",
+    left: "0",
+    pointerEvents: "none", // Pass through clicks
+    zIndex: "15", // Above HTML overlay (10), below port canvas (20)
+  });
+  canvas.parentElement.appendChild(edgeCanvas);
+
+  // Create edge renderer (shares transform with main renderer)
+  const edgeRenderer = new CanvasRenderer(edgeCanvas, { theme, registry });
+  // Sync transform properties with main renderer
+  Object.defineProperty(edgeRenderer, 'scale', {
+    get() { return renderer.scale; },
+    set(v) { renderer.scale = v; }
+  });
+  Object.defineProperty(edgeRenderer, 'offsetX', {
+    get() { return renderer.offsetX; },
+    set(v) { renderer.offsetX = v; }
+  });
+  Object.defineProperty(edgeRenderer, 'offsetY', {
+    get() { return renderer.offsetY; },
+    set(v) { renderer.offsetY = v; }
+  });
+
   // Port Canvas (above HTML overlay)
   const portCanvas = document.createElement("canvas");
   portCanvas.id = "port-canvas";
@@ -88,7 +128,7 @@ export function createGraphEditor(
     top: "0",
     left: "0",
     pointerEvents: "none", // Pass through clicks
-    zIndex: "20", // Above HTML overlay (z-index 10)
+    zIndex: "20", // Above edge canvas (15)
   });
   canvas.parentElement.appendChild(portCanvas);
 
@@ -99,7 +139,7 @@ export function createGraphEditor(
   portRenderer.offsetX = renderer.offsetX;
   portRenderer.offsetY = renderer.offsetY;
 
-  const controller = new Controller({ graph, renderer, hooks, htmlOverlay, portRenderer });
+  const controller = new Controller({ graph, renderer, hooks, htmlOverlay, edgeRenderer, portRenderer });
 
   // Create context menu after controller (needs commandStack)
   const contextMenu = new ContextMenu({
@@ -134,8 +174,21 @@ export function createGraphEditor(
     });
   }
 
+  // Initialize Help Overlay if enabled
+  let helpOverlay = null;
+  if (enableHelp) {
+    helpOverlay = new HelpOverlay(container, {
+      shortcuts: helpShortcuts,
+    });
+  }
+
   const runner = new Runner({ graph, registry, hooks });
 
+  // Attach runner and controller to graph for node access
+  // This allows any node (like Trigger) to execute flows without tight coupling
+  graph.runner = runner;
+  graph.controller = controller;
+
   hooks.on("runner:tick", ({ time, dt }) => {
     renderer.draw(graph, {
       selection: controller.selection,
@@ -173,815 +226,53 @@ export function createGraphEditor(
     controller.render();
   });
 
-  // default node
-  registry.register("core/Note", {
-    title: "Note",
-    size: { w: 180, h: 80 },
-    inputs: [{ name: "in", datatype: "any" }],
-    outputs: [{ name: "out", datatype: "any" }],
-    onCreate(node) {
-      node.state.text = "hello";
-    },
-    onExecute(node, { dt, getInput, setOutput }) {
-      // Simple passthrough with uppercase and a heartbeat value
-      const incoming = getInput("in");
-      const out = (incoming ?? node.state.text ?? "").toString().toUpperCase();
-      setOutput(
-        "out",
-        out + ` · ${Math.floor((performance.now() / 1000) % 100)}`
-      );
-    },
-    onDraw(node, { ctx, theme }) {
-      const pr = 8;
-      const { x, y } = node.pos;
-      const { width: w } = node.size;
-      const lx = x + pr; // 월드 x
-      const ly = y + 24 + 6; // 타이틀 바(24) 아래 여백 6
-      // renderer._drawScreenText(node.state.text ?? "hello", lx, ly, {
-      //   fontPx: 11,
-      //   color: theme.text,
-      //   baseline: "top",
-      //   align: "left",
-      // });
-    },
+  hooks.on("graph:deserialize", () => {
+    renderer.setTransform({ scale: 1, offsetX: 0, offsetY: 0 });
+    controller.render();
   });
 
-  // HTML Custom Node Example
-  registry.register("core/HtmlNote", {
-    title: "HTML Note",
-    size: { w: 200, h: 150 },
-    inputs: [{ name: "in", datatype: "any" }],
-    outputs: [{ name: "out", datatype: "any" }],
-
-    // HTML Overlay Configuration
-    html: {
-      // 초기화: 헤더/바디 구성
-      init(node, el, { header, body }) {
-        el.style.backgroundColor = "#222";
-        el.style.borderRadius = "8px";
-        el.style.border = "1px solid #444";
-        el.style.boxShadow = "0 4px 12px rgba(0,0,0,0.3)";
+  // Note: Example nodes have been moved to src/nodes/
+  // Users can import and register them selectively:
+  // import { registerAllNodes } from "html-overlay-node/nodes";
+  // registerAllNodes(registry, hooks);
 
-        // Header
-        header.style.backgroundColor = "#333";
-        header.style.borderBottom = "1px solid #444";
-        header.style.color = "#eee";
-        header.style.fontSize = "12px";
-        header.style.fontWeight = "bold";
-        header.textContent = "My HTML Node";
-
-        // Body
-        body.style.padding = "8px";
-        body.style.color = "#ccc";
-        body.style.fontSize = "12px";
-
-        const contentDiv = document.createElement("div");
-        contentDiv.textContent = "Event Name";
-        body.appendChild(contentDiv);
-
-        // Add some interactive content
-        const input = document.createElement("input");
-        Object.assign(input.style, {
-          marginTop: "4px",
-          padding: "4px",
-          background: "#111",
-          border: "1px solid #555",
-          color: "#fff",
-          borderRadius: "4px",
-          pointerEvents: "auto",
-        });
-        input.placeholder = "Type here...";
-        input.addEventListener("input", (e) => {
-          node.state.text = e.target.value;
-        });
-        input.addEventListener("mousedown", (e) => e.stopPropagation()); // 캔버스 드래그 방지
-
-        body.appendChild(input);
-
-        // Store input ref for updates
-        el._input = input;
-      },
+  // Setup context menu
+  if (setupDefaultContextMenu) {
+    // Use default context menu setup
+    defaultContextMenuSetup(contextMenu, { controller, graph, hooks });
+  }
 
-      // 매 프레임(또는 필요시) 업데이트
-      update(node, el, { header, _body, selected }) {
-        el.style.borderColor = selected ? "#6cf" : "#444";
-        header.style.backgroundColor = selected ? "#3a4a5a" : "#333";
+  // Allow custom context menu setup
+  if (setupContextMenu) {
+    setupContextMenu(contextMenu, { controller, graph, hooks });
+  }
 
-        // 상태 동기화 (외부에서 변경되었을 경우)
-        if (el._input.value !== (node.state.text || "")) {
-          el._input.value = node.state.text || "";
+  // Install plugins
+  if (plugins && plugins.length > 0) {
+    for (const plugin of plugins) {
+      if (typeof plugin.install === "function") {
+        try {
+          plugin.install({ graph, registry, hooks, runner, controller, contextMenu }, plugin.options || {});
+        } catch (err) {
+          console.error(`[createGraphEditor] Failed to install plugin "${plugin.name || 'unknown'}":`, err);
+          hooks?.emit?.("error", err);
         }
+      } else {
+        console.warn(`[createGraphEditor] Plugin "${plugin.name || 'unknown'}" does not have an install() method`);
       }
-    },
-
-    onCreate(node) {
-      node.state.text = "";
-    },
-    onExecute(node, { getInput, setOutput }) {
-      const incoming = getInput("in");
-      setOutput("out", incoming);
-    },
-    // onDraw는 생략 가능 (HTML이 덮으니까)
-    // 하지만 포트 등은 그려야 할 수도 있음. 
-    // 현재 구조상 CanvasRenderer가 기본 노드를 그리므로, 
-    // 투명하게 하거나 겹쳐서 그릴 수 있음.
-  });
-
-  // Todo List Node Example (HTML Overlay)
-  registry.register("core/TodoNode", {
-    title: "Todo List",
-    size: { w: 240, h: 300 },
-    inputs: [{ name: "in", datatype: "any" }],
-    outputs: [{ name: "out", datatype: "any" }],
-    html: {
-      init(node, el, { header, body }) {
-        el.style.backgroundColor = "#1e1e24";
-        el.style.borderRadius = "8px";
-        el.style.boxShadow = "0 4px 12px rgba(0,0,0,0.5)";
-        el.style.border = "1px solid #333";
-
-        header.style.backgroundColor = "#2a2a31";
-        header.style.padding = "8px";
-        header.style.fontWeight = "bold";
-        header.style.color = "#e9e9ef";
-        header.textContent = node.title;
-
-        body.style.display = "flex";
-        body.style.flexDirection = "column";
-        body.style.padding = "8px";
-        body.style.color = "#e9e9ef";
-
-        // Input Area
-        const inputRow = document.createElement("div");
-        Object.assign(inputRow.style, { display: "flex", gap: "4px", marginBottom: "8px" });
-
-        const input = document.createElement("input");
-        Object.assign(input.style, {
-          flex: "1", padding: "6px", borderRadius: "4px",
-          border: "1px solid #444", background: "#141417", color: "#fff",
-          pointerEvents: "auto",
-        });
-        input.placeholder = "Add task...";
-
-        const addBtn = document.createElement("button");
-        addBtn.textContent = "+";
-        Object.assign(addBtn.style, {
-          padding: "0 12px", cursor: "pointer", background: "#4f5b66",
-          color: "#fff", border: "none", borderRadius: "4px",
-          pointerEvents: "auto",
-        });
-
-        inputRow.append(input, addBtn);
-
-        // List Area
-        const list = document.createElement("ul");
-        Object.assign(list.style, {
-          listStyle: "none", padding: "0", margin: "0",
-          overflow: "hidden", flex: "1"
-        });
-
-        body.append(inputRow, list);
-
-        // Logic
-        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(); // prevent drag
-
-        el._refs = { list };
-      },
-      update(node, el, { selected }) {
-        el.style.borderColor = selected ? "#6cf" : "#333";
-
-        const { list } = el._refs;
-        const todos = node.state.todos || [];
-
-        // Re-render list (simple approach)
-        list.innerHTML = "";
-        todos.forEach((todo) => {
-          const li = document.createElement("li");
-          Object.assign(li.style, {
-            display: "flex", alignItems: "center", padding: "6px 0",
-            borderBottom: "1px solid #2a2a31"
-          });
-
-          const chk = document.createElement("input");
-          chk.type = "checkbox";
-          chk.checked = todo.done;
-          chk.style.marginRight = "8px";
-          chk.style.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.textDecoration = todo.done ? "line-through" : "none";
-          span.style.color = todo.done ? "#777" : "#eee";
-
-          const del = document.createElement("button");
-          del.textContent = "×";
-          Object.assign(del.style, {
-            background: "none", border: "none", color: "#f44",
-            cursor: "pointer", fontSize: "16px",
-            pointerEvents: "auto",
-          });
-          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 },
-      ];
-    },
-  });
-
-  // ===== MATH NODES =====
-  registry.register("math/Add", {
-    title: "Add",
-    size: { w: 140, h: 100 },
-    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") ?? 0;
-      const b = getInput("b") ?? 0;
-      const result = a + b;
-      console.log("[Add] a:", a, "b:", b, "result:", result);
-      setOutput("result", result);
-    },
-  });
-
-  registry.register("math/Subtract", {
-    title: "Subtract",
-    size: { w: 140, h: 80 },
-    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);
-    },
-  });
-
-  registry.register("math/Multiply", {
-    title: "Multiply",
-    size: { w: 140, h: 100 },
-    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") ?? 0;
-      const b = getInput("b") ?? 0;
-      const result = a * b;
-      console.log("[Multiply] a:", a, "b:", b, "result:", result);
-      setOutput("result", result);
-    },
-  });
-
-  registry.register("math/Divide", {
-    title: "Divide",
-    size: { w: 140, h: 80 },
-    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);
-    },
-  });
-
-  // ===== LOGIC NODES =====
-  registry.register("logic/AND", {
-    title: "AND",
-    size: { w: 120, h: 100 },
-    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);
-    },
-  });
-
-  registry.register("logic/OR", {
-    title: "OR",
-    size: { w: 120, h: 80 },
-    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);
-    },
-  });
-
-  registry.register("logic/NOT", {
-    title: "NOT",
-    size: { w: 120, h: 70 },
-    inputs: [{ name: "in", datatype: "boolean" }],
-    outputs: [{ name: "out", datatype: "boolean" }],
-    onExecute(node, { getInput, setOutput }) {
-      const val = getInput("in") ?? false;
-      setOutput("out", !val);
-    },
-  });
-
-  // ===== VALUE NODES =====
-  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";
-
-        header.style.backgroundColor = "#2a2a31";
-        header.style.borderBottom = "1px solid #444";
-        header.style.color = "#eee";
-        header.style.fontSize = "12px";
-        header.textContent = "Number";
-
-        body.style.padding = "12px";
-        body.style.display = "flex";
-        body.style.alignItems = "center";
-        body.style.justifyContent = "center";
-
-        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("mousedown", (e) => e.stopPropagation());
-        input.addEventListener("keydown", (e) => e.stopPropagation());
-
-        body.appendChild(input);
-      },
-      update(node, el, { header, body, selected }) {
-        el.style.borderColor = selected ? "#6cf" : "#444";
-        header.style.backgroundColor = selected ? "#3a4a5a" : "#2a2a31";
-      },
-    },
-    onDraw(node, { ctx, theme }) {
-      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);
-    },
-  });
-
-  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, theme }) {
-      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);
-    },
-  });
-
-  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, theme }) {
-      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);
-    },
-  });
-
-  // ===== UTILITY NODES =====
-  registry.register("util/Print", {
-    title: "Print",
-    size: { w: 140, h: 80 },
-    inputs: [
-      { name: "exec", portType: "exec" },
-      { name: "value", portType: "data", datatype: "any" },
-    ],
-    onCreate(node) {
-      node.state.lastValue = null;
-    },
-    onExecute(node, { getInput }) {
-      const val = getInput("value");
-      if (val !== node.state.lastValue) {
-        console.log("[Print]", val);
-        node.state.lastValue = val;
-      }
-    },
-  });
-
-  registry.register("util/Watch", {
-    title: "Watch",
-    size: { w: 180, h: 110 },
-    inputs: [
-      { name: "exec", portType: "exec" },
-      { name: "value", portType: "data", datatype: "any" },
-    ],
-    outputs: [
-      { name: "exec", portType: "exec" },
-      { name: "value", portType: "data", datatype: "any" },
-    ],
-    onCreate(node) {
-      node.state.displayValue = "---";
-    },
-    onExecute(node, { getInput, setOutput }) {
-      const val = getInput("value");
-      console.log("[Watch] onExecute called, value:", val);
-      node.state.displayValue = String(val ?? "---");
-      setOutput("value", val);
-    },
-    onDraw(node, { ctx, theme }) {
-      const { x, y } = node.computed;
-      ctx.fillStyle = "#fa3";
-      ctx.font = "11px monospace";
-      ctx.textAlign = "left";
-      const text = String(node.state.displayValue ?? "---");
-      const displayText = text.length > 20 ? text.substring(0, 20) + "..." : text;
-      ctx.fillText(displayText, x + 8, y + 50);
-    },
-  });
-
-  registry.register("util/Timer", {
-    title: "Timer",
-    size: { w: 140, h: 60 },
-    outputs: [{ name: "time", datatype: "number" }],
-    onCreate(node) {
-      node.state.startTime = performance.now();
-    },
-    onExecute(node, { setOutput }) {
-      const elapsed = (performance.now() - (node.state.startTime ?? 0)) / 1000;
-      setOutput("time", elapsed.toFixed(2));
-    },
-  });
-
-  // Trigger Node with Button (HTML Overlay)
-  registry.register("util/Trigger", {
-    title: "Trigger",
-    size: { w: 140, h: 80 },
-    outputs: [{ name: "exec", portType: "exec" }], // Changed to exec port
-
-    html: {
-      init(node, el, { header, body }) {
-        el.style.backgroundColor = "#1e1e24";
-        el.style.border = "1px solid #444";
-        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";
-
-        const button = document.createElement("button");
-        button.textContent = "Fire!";
-        Object.assign(button.style, {
-          padding: "8px 16px",
-          background: "#4a9eff",
-          border: "none",
-          borderRadius: "4px",
-          color: "#fff",
-          fontWeight: "bold",
-          cursor: "pointer",
-          pointerEvents: "auto",
-          transition: "background 0.2s",
-        });
-
-        button.addEventListener("mousedown", (e) => {
-          e.stopPropagation();
-          button.style.background = "#2a7ede";
-        });
-
-        button.addEventListener("mouseup", () => {
-          button.style.background = "#4a9eff";
-        });
-
-        button.addEventListener("click", (e) => {
-          e.stopPropagation();
-          node.state.triggered = true;
-          console.log("[Trigger] Button clicked!");
-
-          // Use runner.runOnce for connected node execution
-          if (node.__runnerRef && node.__controllerRef) {
-            console.log("[Trigger] Runner and controller found");
-            const runner = node.__runnerRef;
-            const controller = node.__controllerRef;
-            const graph = controller.graph;
-            console.log("[Trigger] Calling runner.runOnce with node.id:", node.id);
-
-            // Execute connected nodes using runner
-            const result = runner.runOnce(node.id, 0);
-            const connectedEdges = result.connectedEdges;
-
-
-
-            // Show animation with manual rendering
-            const startTime = performance.now();
-            const animationDuration = 500;
-
-            const animate = () => {
-              const elapsed = performance.now() - startTime;
-              if (elapsed < animationDuration) {
-                controller.renderer.draw(graph, {
-                  selection: controller.selection,
-                  tempEdge: null,
-                  running: true,
-                  time: performance.now(),
-                  dt: 0,
-                  activeEdges: connectedEdges, // Only animate connected edges
-                });
-                controller.htmlOverlay?.draw(graph, controller.selection);
-                requestAnimationFrame(animate);
-              } else {
-                controller.render();
-                node.state.triggered = false;
-              }
-            };
-
-            animate();
-          }
-        });
-
-        body.appendChild(button);
-      },
-
-      update(node, el, { header, body, selected }) {
-        el.style.borderColor = selected ? "#6cf" : "#444";
-        header.style.backgroundColor = selected ? "#3a4a5a" : "#2a2a31";
-      },
-    },
-
-    onCreate(node) {
-      node.state.triggered = false;
-    },
-
-    onExecute(node, { setOutput }) {
-      console.log("[Trigger] Outputting triggered:", node.state.triggered);
-      setOutput("triggered", node.state.triggered);
-    },
-  });
-
-  // Group Node
-  registry.register("core/Group", {
-    title: "Group",
-    size: { w: 240, h: 160 },
-    onDraw(node, { ctx, theme }) {
-      const { x, y, w, h } = node.computed;
-      const headerH = 24;
-      const color = node.state.color || "#39424e";
-      const bgAlpha = 0.5;
-      const textColor = theme.text || "#e9e9ef";
-
-      // Helper for rgba
-      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})`;
-      };
-
-      // Helper for roundRect
-      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();
-      };
-
-      // Body
-      ctx.fillStyle = rgba(color, bgAlpha);
-      roundRect(ctx, x, y, w, h, 10);
-      ctx.fill();
-
-      // Header bar (subtle)
-      ctx.fillStyle = rgba(color, 0.3);
-      ctx.beginPath();
-      ctx.roundRect(x, y, w, headerH, [10, 10, 0, 0]);
-      ctx.fill();
-
-      // Title - top left with better styling
-      ctx.fillStyle = textColor;
-      ctx.font = "600 13px system-ui";
-      ctx.textBaseline = "top";
-      ctx.fillText(node.title, x + 12, y + 6);
-    },
-  });
-
-  /**
-  * Setup default context menu items
-  * This function can be customized or replaced by users
-  */
-  function setupDefaultContextMenu(contextMenu, { controller, graph, hooks }) {
-    // Add Node submenu (canvas background only)
-    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
-        },
-      });
     }
-
-    contextMenu.addItem("add-node", "Add Node", {
-      condition: (target) => !target,
-      submenu: nodeTypes,
-      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,
-    });
   }
 
 
-  // Setup default context menu items
-  // Users can easily override, remove, or add items here
-  setupDefaultContextMenu(contextMenu, { controller, graph, hooks });
-
   // initial render & resize
   renderer.resize(canvas.clientWidth, canvas.clientHeight);
+  edgeRenderer.resize(canvas.clientWidth, canvas.clientHeight);
   portRenderer.resize(canvas.clientWidth, canvas.clientHeight);
   controller.render();
 
   const ro = new ResizeObserver(() => {
     renderer.resize(canvas.clientWidth, canvas.clientHeight);
+    edgeRenderer.resize(canvas.clientWidth, canvas.clientHeight);
     portRenderer.resize(canvas.clientWidth, canvas.clientHeight);
     controller.render();
   });
@@ -1022,6 +313,7 @@ export function createGraphEditor(
       contextMenu.destroy();
       if (propertyPanel) propertyPanel.destroy();
       if (minimap) minimap.destroy();
+      if (helpOverlay) helpOverlay.destroy();
     },
   };