html-overlay-node 0.1.6 → 0.1.10

package/src/render/HtmlOverlay.js

@@ -39,7 +39,7 @@ export class HtmlOverlay {
     const header = document.createElement("div");
     header.className = "node-header";
     Object.assign(header.style, {
-      height: "24px",
+      height: "26px",
       flexShrink: "0",
       display: "flex",
       alignItems: "center",
@@ -70,7 +70,7 @@ export class HtmlOverlay {
   }
 
   /** 노드용 엘리먼트 생성(한 번만) */
-  _ensureNodeElement(node, def) {
+  _ensureNodeElement(node, def, graph) {
     let el = this.nodes.get(node.id);
     if (!el) {
       // 1) 사용자 정의 render 함수가 있으면 우선 사용
@@ -80,9 +80,9 @@ export class HtmlOverlay {
       // 2) 아니면 기본 레이아웃 사용 (html 설정이 있는 경우)
       else if (def.html) {
         el = this._createDefaultNodeLayout(node);
-        // 초기화 훅
+        // 초기화 훅 - graph reference 전달
         if (def.html.init) {
-          def.html.init(node, el, el._domParts);
+          def.html.init(node, el, { ...el._domParts, graph });
         }
       } else {
         return null; // HTML 없음
@@ -114,7 +114,7 @@ export class HtmlOverlay {
       const hasHtml = !!(def?.html);
       if (!hasHtml) continue;
 
-      const el = this._ensureNodeElement(node, def);
+      const el = this._ensureNodeElement(node, def, graph);
       if (!el) continue;
 
       // 노드 위치/크기 동기화 (월드 좌표 → 컨테이너 내부는 이미 scale/translate 적용)
@@ -146,6 +146,16 @@ export class HtmlOverlay {
     }
   }
 
+  /**
+   * Sync container transform with renderer state (lightweight update)
+   * Called when zoom/pan occurs without needing full redraw
+   */
+  syncTransform() {
+    const { scale, offsetX, offsetY } = this.renderer;
+    this.container.style.transform = `translate(${offsetX}px, ${offsetY}px) scale(${scale})`;
+    this.container.style.transformOrigin = "0 0";
+  }
+
   clear() {
     // Remove all node elements
     for (const [, el] of this.nodes) {

package/src/render/hitTest.js

@@ -1,6 +1,11 @@
 // src/render/hitTest.js
 export function hitTestNode(node, x, y) {
-  const { x: nx, y: ny, w: width, h: height } = node.computed || {
+  const {
+    x: nx,
+    y: ny,
+    w: width,
+    h: height,
+  } = node.computed || {
     x: node.pos.x,
     y: node.pos.y,
     w: node.size.width,
@@ -10,20 +15,24 @@ export function hitTestNode(node, x, y) {
 }
 
 export function portRect(node, port, idx, dir) {
-  const { x: nx, y: ny, w: width, h: height } = node.computed || {
+  const {
+    x: nx,
+    y: ny,
+    w: width,
+    h: height,
+  } = node.computed || {
     x: node.pos.x,
     y: node.pos.y,
     w: node.size.width,
     h: node.size.height,
   };
 
-  // Calculate port count for better spacing
-  const portCount = dir === "in" ? node.inputs.length : node.outputs.length;
-  const headerHeight = 28;
-  const availableHeight = (height || node.size.height) - headerHeight - 16;
-  const spacing = availableHeight / (portCount + 1);
-
-  const y = ny + headerHeight + spacing * (idx + 1);
+  // Fixed spacing
+  // Sync with CanvasRenderer (headerH = 26)
+  const headerHeight = 26;
+  const padding = 8;
+  const portSpacing = 20;
+  const y = ny + headerHeight + padding + (idx * portSpacing) + portSpacing / 2;
 
   // Ports centered on node edges (half inside, half outside)
   const portWidth = 12;

package/src/ui/HelpOverlay.js

@@ -0,0 +1,158 @@
+/**
+ * HelpOverlay - Modular help keyboard shortcuts overlay
+ */
+export class HelpOverlay {
+  constructor(container, options = {}) {
+    this.container = container;
+    this.options = {
+      shortcuts: options.shortcuts || this._getDefaultShortcuts(),
+      onToggle: options.onToggle || null,
+    };
+
+    this.isVisible = false;
+    this.overlay = null;
+    this.toggleBtn = null;
+
+    this._createElements();
+    this._bindEvents();
+  }
+
+  _getDefaultShortcuts() {
+    return [
+      {
+        group: "Selection",
+        items: [
+          { label: "Select node", key: "Click" },
+          { label: "Multi-select", key: "Shift+Click" },
+          { label: "Box select", key: "Ctrl+Drag" },
+        ],
+      },
+      {
+        group: "Edit",
+        items: [
+          { label: "Delete", key: "Del" },
+          { label: "Undo", key: "Ctrl+Z" },
+          { label: "Redo", key: "Ctrl+Y" },
+        ],
+      },
+      {
+        group: "Group & Align",
+        items: [
+          { label: "Create group", key: "Ctrl+G" },
+          { label: "Align horizontal", key: "A" },
+          { label: "Align vertical", key: "Shift+A" },
+        ],
+      },
+      {
+        group: "View",
+        items: [
+          { label: "Toggle snap", key: "G" },
+          { label: "Pan", key: "Mid+Drag" },
+          { label: "Zoom", key: "Scroll" },
+          { label: "Context menu", key: "RClick" },
+        ],
+      },
+    ];
+  }
+
+  _createElements() {
+    // Create Toggle Button
+    this.toggleBtn = document.createElement("div");
+    this.toggleBtn.id = "helpToggle";
+    this.toggleBtn.title = "Keyboard shortcuts (?)";
+    this.toggleBtn.textContent = "?";
+    this.container.appendChild(this.toggleBtn);
+
+    // Create Overlay
+    this.overlay = document.createElement("div");
+    this.overlay.id = "helpOverlay";
+
+    const sectionsHtml = this.options.shortcuts
+      .map(
+        (group) => `
+      <h4>${group.group}</h4>
+      ${group.items
+        .map(
+          (item) => `
+        <div class="shortcut-item">
+          <span>${item.label}</span>
+          <span class="shortcut-key">${item.key}</span>
+        </div>
+      `
+        )
+        .join("")}
+    `
+      )
+      .join("");
+
+    this.overlay.innerHTML = `
+      <h3>
+        <span>Keyboard Shortcuts</span>
+        <button class="close-btn" id="helpClose" title="Close">×</button>
+      </h3>
+      ${sectionsHtml}
+    `;
+
+    this.container.appendChild(this.overlay);
+  }
+
+  _bindEvents() {
+    this.toggleBtn.addEventListener("click", () => this.toggle());
+
+    const closeBtn = this.overlay.querySelector("#helpClose");
+    if (closeBtn) {
+      closeBtn.addEventListener("click", (e) => {
+        e.stopPropagation();
+        this.close();
+      });
+    }
+
+    // Close when clicking outside
+    document.addEventListener("mousedown", (e) => {
+      if (this.isVisible) {
+        if (!this.overlay.contains(e.target) && !this.toggleBtn.contains(e.target)) {
+          this.close();
+        }
+      }
+    });
+
+    // Keyboard shortcuts
+    window.addEventListener("keydown", (e) => {
+      if (e.key === "?" || (e.shiftKey && e.key === "/")) {
+        // Only toggle if not typing in an input
+        if (!["INPUT", "TEXTAREA", "SELECT"].includes(document.activeElement.tagName)) {
+          e.preventDefault();
+          this.toggle();
+        }
+      }
+
+      if (e.key === "Escape" && this.isVisible) {
+        this.close();
+      }
+    });
+  }
+
+  toggle() {
+    if (this.isVisible) this.close();
+    else this.open();
+  }
+
+  open() {
+    this.isVisible = true;
+    this.overlay.classList.add("visible");
+    this.toggleBtn.classList.add("active");
+    if (this.options.onToggle) this.options.onToggle(true);
+  }
+
+  close() {
+    this.isVisible = false;
+    this.overlay.classList.remove("visible");
+    this.toggleBtn.classList.remove("active");
+    if (this.options.onToggle) this.options.onToggle(false);
+  }
+
+  destroy() {
+    this.toggleBtn?.remove();
+    this.overlay?.remove();
+  }
+}

package/src/ui/PropertyPanel.css

@@ -10,7 +10,7 @@
   background: radial-gradient(circle at top right, #3c3c3c 0, #1f1f1f 55%);
   background-color: #262626;
   box-shadow: -4px 0 24px rgba(0, 0, 0, 0.5);
-  border-left: 1px solid rgba(255, 255, 255, 0.06);
+  border-left: 1px solid var(--color-border);
 
   opacity: 0;
   transform: translateX(20px);
@@ -37,7 +37,7 @@
   align-items: center;
   justify-content: space-between;
   padding-bottom: 16px;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+  border-bottom: 1px solid var(--color-border);
   margin-bottom: 20px;
   flex-shrink: 0;
 }
@@ -51,7 +51,7 @@
 .title-text {
   font-size: 18px;
   font-weight: 600;
-  color: #f5f5f5;
+  color: var(--color-text-main);
   letter-spacing: 0.01em;
 }
 
@@ -71,8 +71,8 @@
 }
 
 .panel-close:hover {
-  background: rgba(255, 255, 255, 0.08);
-  color: #fff;
+  background: var(--color-bg-surface);
+  color: var(--color-text-main);
   transform: translateY(-1px);
 }
 
@@ -114,7 +114,7 @@
 .section-title {
   font-size: 13px;
   font-weight: 600;
-  color: #d0d0d0;
+  color: var(--color-text-dim);
   margin-bottom: 12px;
   text-transform: uppercase;
   letter-spacing: 0.08em;
@@ -135,39 +135,70 @@
 
 .field label {
   font-size: 12px;
-  color: #9e9e9e;
+  color: var(--color-text-muted);
   font-weight: 500;
 }
 
 .field input {
   width: 100%;
   padding: 8px 10px;
-  border-radius: 6px;
-  border: 1px solid rgba(255, 255, 255, 0.12);
-  background: rgba(0, 0, 0, 0.25);
-  color: #f5f5f5;
+  border-radius: var(--radius-md);
+  border: 1px solid var(--color-border);
+  background: rgba(0, 0, 0, 0.3);
+  color: var(--color-text-main);
   font-size: 13px;
   outline: none;
   transition: all 0.2s ease;
-  font-family:
-    system-ui,
-    -apple-system,
-    sans-serif;
+  font-family: inherit;
   box-sizing: border-box;
   line-height: 1.4;
 }
 
+.field input:hover {
+  border-color: var(--color-border-focus);
+  background: rgba(0, 0, 0, 0.35);
+}
+
 .field input:focus {
-  border-color: #6366f1;
+  border-color: var(--color-primary);
   box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
-  background: rgba(0, 0, 0, 0.35);
+  background: rgba(0, 0, 0, 0.45);
 }
 
 .field input[readonly] {
-  background: rgba(0, 0, 0, 0.4);
-  color: #888;
+  background: rgba(0, 0, 0, 0.15);
+  color: #707080;
+  border-color: rgba(255, 255, 255, 0.04);
   cursor: not-allowed;
-  opacity: 0.7;
+  opacity: 0.8;
+}
+
+.field select {
+  width: 100%;
+  padding: 8px 10px;
+  border-radius: var(--radius-md);
+  border: 1px solid var(--color-border);
+  background: rgba(0, 0, 0, 0.3);
+  color: var(--color-text-main);
+  font-size: 13px;
+  outline: none;
+  transition: all 0.2s ease;
+  font-family: inherit;
+  cursor: pointer;
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238888a8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 10px center;
+}
+
+.field select:hover {
+  border-color: var(--color-border-focus);
+  background: rgba(0, 0, 0, 0.35);
+}
+
+.field select:focus {
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
 }
 
 .field-row {
@@ -256,22 +287,22 @@
 }
 
 .btn-primary {
-  background: #6366f1;
-  color: #fff;
+  background: var(--color-primary);
+  color: var(--color-text-main);
 }
 
 .btn-primary:hover {
-  background: #818cf8;
+  background: var(--color-primary-hover);
   transform: translateY(-1px);
   box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
 }
 
 .btn-secondary {
-  background: rgba(255, 255, 255, 0.08);
-  color: #d0d0d0;
+  background: var(--color-bg-surface);
+  color: var(--color-text-dim);
 }
 
 .btn-secondary:hover {
-  background: rgba(255, 255, 255, 0.12);
-  color: #fff;
+  background: var(--color-bg-surface);
+  color: var(--color-text-main);
 }