html-overlay-node 0.1.4 → 0.1.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "html-overlay-node",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "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",

package/src/core/Graph.test.js

@@ -221,7 +221,7 @@ describe("Graph", () => {
 
   describe("serialization", () => {
     it("should serialize graph to JSON", () => {
-      const node = graph.addNode("test/node", { x: 100, y: 200 });
+      const _node = graph.addNode("test/node", { x: 100, y: 200 });
       const json = graph.toJSON();
 
       expect(json.nodes).toBeInstanceOf(Array);
@@ -235,7 +235,7 @@ describe("Graph", () => {
     it("should deserialize graph from JSON", () => {
       const node1 = graph.addNode("test/node", { x: 100, y: 200 });
       const node2 = graph.addNode("test/node", { x: 300, y: 400 });
-      const edge = graph.addEdge(
+      const _edge = graph.addEdge(
         node1.id,
         node1.outputs[0].id,
         node2.id,

package/src/core/Hooks.js

@@ -2,11 +2,18 @@ export function createHooks(names) {
   const map = Object.fromEntries(names.map((n) => [n, new Set()]));
   return {
     on(name, fn) {
+      if (!map[name]) map[name] = new Set();
       map[name].add(fn);
       return () => map[name].delete(fn);
     },
-    async emit(name, ...args) {
-      for (const fn of map[name]) await fn(...args);
+    off(name, fn) {
+      if (map[name]) {
+        map[name].delete(fn);
+      }
+    },
+    emit(name, ...args) {
+      if (!map[name]) return;
+      for (const fn of map[name]) fn(...args);
     },
   };
 }

package/src/groups/GroupManager.js

@@ -53,7 +53,7 @@ export class GroupManager {
     return groupNode;
   }
 
-  addGroupFromSelection({ title = "Group", margin = { x: 12, y: 12 } } = {}) {
+  addGroupFromSelection({ _title = "Group", _margin = { x: 12, y: 12 } } = {}) {
     // Controller에서 selection을 받아와야 함
     // 여기서는 간단히 graph.nodes를 순회하며 selected 상태를 확인한다고 가정하거나
     // 외부에서 members를 넘겨받는 것이 좋음

package/src/index.js

@@ -263,7 +263,7 @@ export function createGraphEditor(
       },
 
       // 매 프레임(또는 필요시) 업데이트
-      update(node, el, { header, body, selected }) {
+      update(node, el, { header, _body, selected }) {
         el.style.borderColor = selected ? "#6cf" : "#444";
         header.style.backgroundColor = selected ? "#3a4a5a" : "#333";
 

package/src/interact/Controller.js

@@ -1,9 +1,7 @@
-import { hitTestNode, portRect } from "../render/hitTest.js";
+import { portRect } from "../render/hitTest.js";
 import {
-  MoveNodeCmd,
   AddEdgeCmd,
   RemoveEdgeCmd,
-  CompoundCmd,
   RemoveNodeCmd,
   ResizeNodeCmd,
 } from "../core/commands.js";
@@ -456,8 +454,8 @@ export class Controller {
           continue;
         }
 
-        let newWorldX = startWorldX + deltaX;
-        let newWorldY = startWorldY + deltaY;
+        const newWorldX = startWorldX + deltaX;
+        const newWorldY = startWorldY + deltaY;
 
         // Convert to local position
         let parentWx = 0;

package/src/render/CanvasRenderer.js

@@ -1,4 +1,4 @@
-import { hitTestNode, portRect } from "./hitTest.js";
+import { portRect } from "./hitTest.js";
 
 export class CanvasRenderer {
   static FONT_SIZE = 12;
@@ -542,8 +542,6 @@ export class CanvasRenderer {
   }
 
   _drawOrthogonal(x1, y1, x2, y2) {
-    const dx = Math.abs(x2 - x1);
-    const dy = Math.abs(y2 - y1);
     // 중간 축을 결정 (더 짧은 축을 가운데에 두면 보기 좋음)
     const useHVH = true; // 가로-세로-가로(HVH) vs 세로-가로-세로(VHV)
     const midX = (x1 + x2) / 2;

package/src/render/HtmlOverlay.js

@@ -24,7 +24,7 @@ export class HtmlOverlay {
   }
 
   /** 기본 노드 레이아웃 생성 (헤더 + 바디) */
-  _createDefaultNodeLayout(node) {
+  _createDefaultNodeLayout(_node) {
     const container = document.createElement("div");
     container.className = "node-overlay";
     Object.assign(container.style, {
@@ -55,7 +55,7 @@ export class HtmlOverlay {
       flex: "1",
       position: "relative",
       overflow: "hidden",
-      pointerEvents: "auto", // 바디 내부는 인터랙션 가능하게? 아니면 이것도 none하고 자식만 auto?
+      // 바디 내부는 인터랙션 가능하게? 아니면 이것도 none하고 자식만 auto?
       // 일단 바디는 auto로 두면 바디 영역 클릭시 드래그가 안됨.
       // 그래서 바디도 none으로 하고, 내부 컨텐츠(input 등)만 auto로 하는게 맞음.
       pointerEvents: "none",

package/src/ui/PropertyPanel.js

@@ -81,7 +81,6 @@ export class PropertyPanel {
     if (!node) return;
 
     const content = this.panel.querySelector('.panel-content');
-    const def = this.registry?.types?.get(node.type);
 
     content.innerHTML = `
       <div class="section">