html-overlay-node 0.1.9 → 0.1.11

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",
@@ -111,7 +111,7 @@ export class HtmlOverlay {
       const def = this.registry.types.get(node.type);
 
       // render 함수가 있거나, html 설정 객체가 있으면 처리
-      const hasHtml = !!(def?.html);
+      const hasHtml = !!def?.html;
       if (!hasHtml) continue;
 
       const el = this._ensureNodeElement(node, def, graph);
@@ -130,13 +130,16 @@ export class HtmlOverlay {
         def.html.update(node, el, {
           selected: selection.has(node.id),
           header: parts.header,
-          body: parts.body
+          body: parts.body,
         });
       }
 
       seen.add(node.id);
     }
 
+    // ── Interactive Stepping Play Button ─────────────────────
+    this._drawStepOverlay(graph);
+
     // 없어진 노드 제거
     for (const [id, el] of this.nodes) {
       if (!seen.has(id)) {
@@ -146,6 +149,65 @@ export class HtmlOverlay {
     }
   }
 
+  _drawStepOverlay(graph) {
+    const runner = graph.runner;
+    if (!runner || runner.executionMode !== "step" || !runner.activePlan) {
+      if (this._stepBtn) {
+        this._stepBtn.style.display = "none";
+      }
+      return;
+    }
+
+    const nextStep = runner.activePlan[runner.activeStepIndex];
+    if (!nextStep) {
+      if (this._stepBtn) this._stepBtn.style.display = "none";
+      return;
+    }
+
+    const node = graph.nodes.get(nextStep.nodeId);
+    if (!node) return;
+
+    if (!this._stepBtn) {
+      this._stepBtn = document.createElement("button");
+      this._stepBtn.className = "step-play-button";
+      this._stepBtn.innerHTML = "▶";
+      Object.assign(this._stepBtn.style, {
+        position: "absolute",
+        zIndex: "100",
+        width: "20px",
+        height: "20px",
+        borderRadius: "4px",
+        border: "none",
+        background: "transparent",
+        color: "white",
+        fontSize: "12px",
+        cursor: "pointer",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        // boxShadow: "0 2px 6px rgba(0,0,0,0.3)",
+        pointerEvents: "auto",
+        transition: "transform 0.1s, background 0.2s",
+      });
+      this._stepBtn.addEventListener("mouseover", () => {
+        this._stepBtn.style.transform = "scale(1)";
+      });
+      this._stepBtn.addEventListener("mouseout", () => {
+        this._stepBtn.style.transform = "scale(1)";
+      });
+      this._stepBtn.addEventListener("click", (e) => {
+        e.stopPropagation();
+        runner.executeNextStep();
+      });
+      this.container.appendChild(this._stepBtn);
+    }
+
+    // Position the button in the top-right corner of the node (header area)
+    this._stepBtn.style.display = "flex";
+    this._stepBtn.style.left = `${node.computed.x + node.computed.w - 26}px`;
+    this._stepBtn.style.top = `${node.computed.y + 2}px`;
+  }
+
   /**
    * Sync container transform with renderer state (lightweight update)
    * Called when zoom/pan occurs without needing full redraw

package/src/render/hitTest.js

@@ -28,8 +28,11 @@ export function portRect(node, port, idx, dir) {
   };
 
   // Fixed spacing
-  const headerHeight = 28;
-  const y = ny + headerHeight + 10 + idx * 24;
+  // 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 = "단축키 (?)";
+    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);
 }