html-overlay-node 0.1.10 → 0.1.11

package/dist/img/favicon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#1f1f1f"><path d="M600-160v-80H440v-200h-80v80H80v-240h280v80h80v-200h160v-80h280v240H600v-80h-80v320h80v-80h280v240H600Zm80-80h120v-80H680v80ZM160-440h120v-80H160v80Zm520-200h120v-80H680v80Zm0 400v-80 80ZM280-440v-80 80Zm400-200v-80 80Z"/></svg>

package/index.css

@@ -175,6 +175,51 @@ body {
   background: rgba(85, 104, 208, 0.06);
 }
 
+/* ── Mode Toggle ────────────────────────────────────────────── */
+.mode-toggle {
+  display: flex;
+  background: rgba(0, 0, 0, 0.2);
+  padding: 2px;
+  border-radius: var(--radius-sm);
+  gap: 2px;
+}
+
+.mode-toggle button {
+  padding: 3px 12px !important;
+  font-size: 10px !important;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  border: 1px solid transparent !important;
+  opacity: 0.4;
+}
+
+.mode-toggle button:hover {
+  opacity: 1;
+  background: rgba(255, 255, 255, 0.05) !important;
+}
+
+.mode-toggle button.active {
+  opacity: 1;
+  font-weight: 700;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+}
+
+/* Run Mode Active State (Emerald) */
+.mode-toggle button[data-mode="run"].active {
+  color: #10b981 !important;
+  background: rgba(16, 185, 129, 0.1) !important;
+  border-color: rgba(16, 185, 129, 0.3) !important;
+  box-shadow: 0 0 12px rgba(16, 185, 129, 0.15);
+}
+
+/* Step Mode Active State (Violet) */
+.mode-toggle button[data-mode="step"].active {
+  color: #a78bfa !important;
+  background: rgba(139, 92, 246, 0.1) !important;
+  border-color: rgba(139, 92, 246, 0.3) !important;
+  box-shadow: 0 0 12px rgba(139, 92, 246, 0.15);
+}
+
 /* ── Help Overlay ─────────────────────────────────────────────── */
 #helpOverlay {
   position: absolute;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "html-overlay-node",
-  "version": "0.1.10",
+  "version": "0.1.11",
   "description": "LiteGraph-style node editor with HTML overlay support",
   "main": "./src/index.js",
   "module": "./src/index.js",

package/readme.md

@@ -1,134 +1,143 @@
-# HTML-overlay-Node
-
-[![npm version](https://img.shields.io/npm/v/html-overlay-node.svg)](https://www.npmjs.com/package/html-overlay-node)
-[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
-
-**HTML-overlay-Node**는 Canvas의 정밀함과 HTML의 유연함을 결합한 전문가용 노드 에디터 라이브러리입니다. 장난감 같은 디자인에서 벗어나 실제 프로덕션 환경에 적합한 날카롭고 세련된 UI/UX를 지향합니다.
-
----
-
-## ⚡ 주요 특징
-
-- **전문가급 디자인**: 2px의 날카로운 라운딩 처리와 깊이감 있는 다크 테마로 도구의 전문성을 극대화했습니다.
-- **카테고리별 컬러 시스템**: Math, Logic, Data 등 노드 성격에 따른 정교한 컬러 코딩으로 복잡한 그래프의 가독성을 높였습니다.
-- **강력한 듀얼 포트**: 실행 제어(Flow)를 위한 Exec 포트와 데이터 전송(Data) 포트를 분리하여 복잡한 로직 설계가 가능합니다.
-- **인터랙티브 HTML 오버레이**: 노드 내부의 복잡한 UI는 HTML로, 전체 연결은 Canvas로 처리하여 성능과 확장성을 모두 잡았습니다.
-- **파워 유저 생산성**: 정렬(Align), 그룹화(Group), Undo/Redo 등 실제 작업 시간을 단축해주는 풍부한 단축키를 지원합니다.
-- **정밀한 시각 릴레이**: 노드 실행 상태를 보여주는 완벽하게 밀착된 테두리 애니메이션을 통해 실시간 피드백을 제공합니다.
-
----
-
-## 🚀 시작하기
-
-Vite나 Webpack 환경에서 바로 시작할 수 있습니다.
-
-```javascript
-import { createGraphEditor } from "html-overlay-node";
-import "html-overlay-node/index.css";
-
-// 단 한 줄로 에디터 초기화
-const editor = createGraphEditor("#editor-container", {
-  autorun: true,
-  enablePropertyPanel: true
-});
-
-const { graph, registry, start } = editor;
-
-// 노드 등록 예시 (컬러 코드 포함)
-registry.register("math/Add", {
-  title: "Add",
-  color: "#f43f5e", // 연산 노드는 로즈 핑크
-  size: { w: 180, 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);
-  },
-});
-
-start();
-```
-
----
-
-## 🎨 디자인 커스터마이징
-
-다크 모드를 기본으로 하지만, 프로젝트 테마에 맞춰 모든 색상을 조정할 수 있습니다.
-
-```javascript
-const editor = createGraphEditor("#container", {
-  theme: {
-    bg: "#0d0d0f",
-    accent: "#6366f1", // 메인 포인트 컬러
-    node: "#16161a",  // 노드 배경
-    title: "#1f1f24"  // 노드 헤더
-  }
-});
-```
-
----
-
-## ⌨️ 생산성을 높여주는 단축키
-
-| 기능 | 단축키 |
-| :--- | :--- |
-| **노드 삭제** | `Delete` |
-| **수평 정렬** | `A` |
-| **수직 정렬** | `Shift + A` |
-| **그룹 생성** | `Ctrl + G` |
-| **그리드 스냅**| `G` |
-| **되돌리기** | `Ctrl + Z` / `Ctrl + Y` |
-| **영역 선택** | `Ctrl + Drag` |
-
----
-
-## 💾 데이터 다루기
-
-그래프 통째로 JSON으로 뽑거나, 저장된 데이터를 불러오는 것도 간단합니다.
-
-```javascript
-// 현재 그래프 저장
-const data = graph.toJSON();
-
-// 데이터 불러오기
-graph.fromJSON(data);
-```
-
----
-
-## 🔗 관련 링크
-- [GitHub Repository](https://github.com/cheonghakim/html-overlay-node)
-- [Issue Tracker](https://github.com/cheonghakim/html-overlay-node/issues)
-
----
-
-## 📄 라이선스
-[MIT](LICENSE) © cheonghakim
-G.md).
-
-```bash
-npm install   # Install dependencies
-npm run dev   # Start dev server
-npm test      # Run tests
-npm run lint  # Check code quality
-npm run build # Build library
-```
-
----
-
-## 📄 License
-
-[MIT](LICENSE) © cheonghakim
-
----
-
-## 🔗 Links
-
-- [GitHub Repository](https://github.com/cheonghakim/html-overlay-node)
-- [Issue Tracker](https://github.com/cheonghakim/html-overlay-node/issues)
-- [Changelog](CHANGELOG.md)
+# HTML-overlay-Node
+
+[![npm version](https://img.shields.io/npm/v/html-overlay-node.svg)](https://www.npmjs.com/package/html-overlay-node)
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
+
+**HTML-overlay-Node**는 Canvas의 고성능 렌더링과 HTML의 유연한 UI 인터페이스를 결합한 전문가용 노드 에디터 엔진입니다. 단순한 시각화를 넘어, 복잡한 로직 설계와 실시간 실행 환경에 최적화된 날카롭고 세련된 엔지니어링 경험을 제공합니다.
+
+---
+
+## ✨ 핵심 기능 (Key Features)
+
+- **하이브리드 렌더링**: 노드 본체와 복잡한 위젯은 HTML로, 연결선(Edge)과 고주파 애니메이션은 Canvas로 처리하여 성능과 커스터마이징의 균형을 잡았습니다.
+- **실시간 실행 흐름 시각화**: 노드 실행 상태와 데이터 흐름을 'Marching Ants' 테두리 및 흐르는 점 애니메이션으로 가시화하여 로직의 흐름을 직관적으로 파악할 수 있습니다.
+- **전문가급 디자인 시스템**: 2px의 정밀한 라운딩, 깊이감 있는 다크 테마, 카테고리별 컬러 코딩으로 대규모 그래프에서도 높은 가독성을 유지합니다.
+- **강력한 듀얼 포트 시스템**: 실행 제어(Execution Flow)와 데이터 전용(Data Flow) 포트를 분리 지원하여 함수형/이벤트 기반 로직 설계를 완벽히 지원합니다.
+- **생산성 도구**: Undo/Redo, 그룹화(Group), 자동 정렬(Aligning), 그리드 스냅, 다중 선택 등 실제 작업 효율을 극대화하는 파워 유저 기능을 내장하고 있습니다.
+
+---
+
+## 🚀 빠른 시작 (Quick Start)
+
+Vite나 Webpack 환경에서 다음과 같이 손쉽게 에디터를 구축할 수 있습니다.
+
+```javascript
+import { createGraphEditor } from "html-overlay-node";
+import "html-overlay-node/index.css";
+
+const editor = createGraphEditor("#editor-container", {
+  theme: {
+    accent: "#6366f1", // 주요 강조 색상 (Indigo)
+    flowSpeed: 150     // 애니메이션 흐름 속도 (px/sec)
+  }
+});
+
+const { graph, registry, start } = editor;
+
+// 노드 등록 및 시작
+registry.register("math/Add", { ... });
+start();
+```
+
+---
+
+## 🧩 플러그인 시스템 (Plugins & Node Registration)
+
+`registry`를 통해 새로운 기능을 동적으로 확장할 수 있습니다.
+
+```javascript
+registry.register("math/Multiply", {
+  title: "Multiply",
+  color: "#f43f5e", // 카테고리 컬러
+  inputs: [
+    { name: "a", portType: "data" },
+    { name: "b", portType: "data" }
+  ],
+  outputs: [{ name: "result", portType: "data" }],
+  // 실행 로직 정의
+  onExecute(node, { getInput, setOutput }) {
+    const a = getInput("a") ?? 1;
+    const b = getInput("b") ?? 1;
+    setOutput("result", a * b);
+  }
+});
+```
+
+---
+
+## 🖼️ UI & 위젯 (HTML Overlays & Widgets)
+
+HTML의 강점을 살려 노드 내부에 복잡한 UI를 직접 구현할 수 있습니다. `renderHtml` 함수를 통해 DOM 요소를 직접 제어하거나 내장 위젯을 사용할 수 있습니다.
+
+```javascript
+registry.register("ui/Slider", {
+  html: true, // HTML 오버레이 활성화
+  renderHtml(node, container) {
+    container.innerHTML = `<input type="range" class="hon-slider" />`;
+    const input = container.querySelector("input");
+    input.oninput = (e) => {
+      node.state.value = e.target.value;
+      // 상태 변경 시 그래프 갱신 알림
+    };
+  }
+});
+```
+
+---
+
+## 🎨 CSS 디자인 토큰 (Design Tokens)
+
+`index.css`에 정의된 CSS 변수를 덮어쓰는 것만으로도 전체 에디터의 룩앤필을 브랜드에 맞게 조정할 수 있습니다.
+
+| 변수명 | 설명 | 기본값 |
+| :--- | :--- | :--- |
+| `--hon-bg` | 캔버스 배경색 | `#0d0d0f` |
+| `--hon-node-bg` | 노드 내부 배경색 | `#16161a` |
+| `--hon-node-border` | 노드 테두리 색상 | `rgba(255,255,255,0.08)` |
+| `--hon-accent` | 강조 포인트 컬러 | `#4f46e5` |
+| `--hon-text` | 기본 텍스트 색상 | `#e2e8f0` |
+| `--hon-grid` | 그리드 점 색상 | `rgba(255,255,255,0.03)` |
+
+---
+
+## ⌨️ 생산성 단축키
+
+| 기능 | 단축키 |
+| :--- | :--- |
+| **노드 삭제** | `Delete` |
+| **수평/수직 정렬** | `A` / `Shift + A` |
+| **그룹 생성** | `Ctrl + G` |
+| **그리드 스냅 토글**| `G` |
+| **실행 취소/재실행** | `Ctrl + Z` / `Ctrl + Y` |
+| **미니맵 토글** | `M` |
+
+---
+
+## 💾 데이터 직렬화 (Serialization)
+
+그래프의 모든 상태는 JSON 형식으로 저장하고 불러올 수 있습니다.
+
+```javascript
+// 현재 캔버스 상태 저장
+const snapshot = graph.toJSON();
+
+// 데이터 복원 (트랜지션 애니메이션 포함)
+graph.fromJSON(snapshot);
+```
+
+---
+
+## 🛠️ 개발 가이드 (Development)
+
+```bash
+npm install   # 의존성 설치
+npm run dev   # 개발 서버 시작
+npm test      # 테스트 실행
+npm run build # 프로덕션 빌드
+```
+
+---
+
+## 📄 라이선스
+
+[MIT](LICENSE) © cheonghakim

package/src/core/Graph.js

@@ -278,14 +278,19 @@ export class Graph {
     const outCount = def.outputs?.length || 0;
     const maxPorts = Math.max(inCount, outCount);
     const headerHeight = 26;
-    const padding = 8; // tighter buffer
-    const portSpacing = 20; // compact spacing
-    
+    const portSpacing = 20;
+
+    if (def.html) {
+      // For HTML overlay nodes: reserve space for content BELOW all port rows.
+      // Port idx N bottom: headerHeight + 8 + N*portSpacing + portSpacing/2 + 6
+      //                  = 50 + N*portSpacing (for N=0: 50, N=1: 70, ...)
+      // Add ~50px for HTML content + bottom padding.
+      const lastPortBottom = maxPorts > 0 ? 50 + (maxPorts - 1) * portSpacing : 26;
+      return Math.max(lastPortBottom + 50, 90);
+    }
+
+    const padding = 8;
     let h = headerHeight + padding + (maxPorts * portSpacing) + padding;
-    
-    // Add extra space if it has HTML overlay to prevent overlap with ports
-    if (def.html) h += 16;
-    
-    return Math.max(h, 40); // Minimum height 40
+    return Math.max(h, 40);
   }
 }