html-overlay-node 0.1.0

package/src/render/HtmlOverlay.js

@@ -0,0 +1,161 @@
+// 캔버스 위에 붙는 DOM 오버레이. 캔버스의 scale/offset에 맞춰 CSS transform을 적용.
+// 동기화 하기 까다로워서 아직 적용하지 않음
+export class HtmlOverlay {
+  /**
+   * @param {HTMLElement} host  캔버스를 감싸는 래퍼( position: relative )
+   * @param {CanvasRenderer} renderer
+   * @param {Registry} registry
+   */
+  constructor(host, renderer, registry) {
+    this.host = host;
+    this.renderer = renderer;
+    this.registry = registry;
+    this.container = document.createElement("div");
+    Object.assign(this.container.style, {
+      position: "absolute",
+      inset: "0",
+      pointerEvents: "none", // 기본은 통과
+      zIndex: "10",
+    });
+    host.appendChild(this.container);
+
+    /** @type {Map<string, HTMLElement>} */
+    this.nodes = new Map();
+  }
+
+  /** 기본 노드 레이아웃 생성 (헤더 + 바디) */
+  _createDefaultNodeLayout(node) {
+    const container = document.createElement("div");
+    container.className = "node-overlay";
+    Object.assign(container.style, {
+      position: "absolute",
+      display: "flex",
+      flexDirection: "column",
+      boxSizing: "border-box",
+      pointerEvents: "none", // 기본은 통과 (캔버스 인터랙션 위해)
+      overflow: "hidden", // 둥근 모서리 등
+    });
+
+    const header = document.createElement("div");
+    header.className = "node-header";
+    Object.assign(header.style, {
+      height: "24px",
+      flexShrink: "0",
+      display: "flex",
+      alignItems: "center",
+      padding: "0 8px",
+      cursor: "grab",
+      userSelect: "none",
+      pointerEvents: "none", // 헤더 클릭시 드래그는 캔버스가 처리
+    });
+
+    const body = document.createElement("div");
+    body.className = "node-body";
+    Object.assign(body.style, {
+      flex: "1",
+      position: "relative",
+      overflow: "hidden",
+      pointerEvents: "auto", // 바디 내부는 인터랙션 가능하게? 아니면 이것도 none하고 자식만 auto?
+      // 일단 바디는 auto로 두면 바디 영역 클릭시 드래그가 안됨.
+      // 그래서 바디도 none으로 하고, 내부 컨텐츠(input 등)만 auto로 하는게 맞음.
+      pointerEvents: "none",
+    });
+
+    container.appendChild(header);
+    container.appendChild(body);
+
+    // 나중에 접근하기 쉽게 프로퍼티로 저장
+    container._domParts = { header, body };
+    return container;
+  }
+
+  /** 노드용 엘리먼트 생성(한 번만) */
+  _ensureNodeElement(node, def) {
+    let el = this.nodes.get(node.id);
+    if (!el) {
+      // 1) 사용자 정의 render 함수가 있으면 우선 사용
+      if (def.html?.render) {
+        el = def.html.render(node);
+      }
+      // 2) 아니면 기본 레이아웃 사용 (html 설정이 있는 경우)
+      else if (def.html) {
+        el = this._createDefaultNodeLayout(node);
+        // 초기화 훅
+        if (def.html.init) {
+          def.html.init(node, el, el._domParts);
+        }
+      } else {
+        return null; // HTML 없음
+      }
+
+      if (!el) return null;
+
+      el.style.position = "absolute";
+      el.style.pointerEvents = "none"; // 기본적으로 캔버스 통과
+      this.container.appendChild(el);
+      this.nodes.set(node.id, el);
+    }
+    return el;
+  }
+
+  /** 그래프와 변환 동기화하여 렌더링 */
+  draw(graph, selection = new Set()) {
+    // 컨테이너 전체에 월드 변환 적용 (CSS 픽셀 기준)
+    const { scale, offsetX, offsetY } = this.renderer;
+    this.container.style.transform = `translate(${offsetX}px, ${offsetY}px) scale(${scale})`;
+    this.container.style.transformOrigin = "0 0";
+
+    const seen = new Set();
+
+    for (const node of graph.nodes.values()) {
+      const def = this.registry.types.get(node.type);
+
+      // render 함수가 있거나, html 설정 객체가 있으면 처리
+      const hasHtml = !!(def?.html);
+      if (!hasHtml) continue;
+
+      const el = this._ensureNodeElement(node, def);
+      if (!el) continue;
+
+      // 노드 위치/크기 동기화 (월드 좌표 → 컨테이너 내부는 이미 scale/translate 적용)
+      el.style.left = `${node.computed.x}px`;
+      el.style.top = `${node.computed.y}px`;
+      el.style.width = `${node.computed.w}px`;
+      el.style.height = `${node.computed.h}px`;
+
+      // 선택 상태 등 업데이트 훅
+      if (def.html.update) {
+        // 기본 레이아웃이면 header/body도 함께 전달
+        const parts = el._domParts || {};
+        def.html.update(node, el, {
+          selected: selection.has(node.id),
+          header: parts.header,
+          body: parts.body
+        });
+      }
+
+      seen.add(node.id);
+    }
+
+    // 없어진 노드 제거
+    for (const [id, el] of this.nodes) {
+      if (!seen.has(id)) {
+        el.remove();
+        this.nodes.delete(id);
+      }
+    }
+  }
+
+  clear() {
+    // Remove all node elements
+    for (const [, el] of this.nodes) {
+      el.remove();
+    }
+    this.nodes.clear();
+  }
+
+  destroy() {
+    this.clear();
+    this.container.remove();
+  }
+}

package/src/render/hitTest.js

@@ -0,0 +1,38 @@
+// src/render/hitTest.js
+export function hitTestNode(node, x, y) {
+  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,
+  };
+  return x >= nx && x <= nx + width && y >= ny && y <= ny + height;
+}
+
+export function portRect(node, port, idx, dir) {
+  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);
+
+  // Ports centered on node edges (half inside, half outside)
+  const portWidth = 12;
+  const portHeight = 12;
+
+  if (dir === "in") {
+    return { x: nx - portWidth / 2, y: y - portHeight / 2, w: portWidth, h: portHeight };
+  }
+  if (dir === "out") {
+    return { x: nx + width - portWidth / 2, y: y - portHeight / 2, w: portWidth, h: portHeight };
+  }
+}

package/src/ui/PropertyPanel.css

@@ -0,0 +1,277 @@
+/* Property Panel Styles */
+.property-panel {
+  position: absolute;
+  top: 0;
+  right: 0;
+  height: 100%;
+  width: 380px;
+  z-index: 9999;
+
+  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);
+
+  opacity: 0;
+  transform: translateX(20px);
+  transition: all 0.25s ease-out;
+  pointer-events: none;
+}
+
+.property-panel.panel-visible {
+  opacity: 1;
+  transform: translateX(0);
+  pointer-events: all;
+}
+
+.panel-inner {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  padding: 20px;
+  overflow: hidden;
+}
+
+.panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 16px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+  margin-bottom: 20px;
+  flex-shrink: 0;
+}
+
+.panel-title {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.title-text {
+  font-size: 18px;
+  font-weight: 600;
+  color: #f5f5f5;
+  letter-spacing: 0.01em;
+}
+
+.panel-close {
+  width: 32px;
+  height: 32px;
+  border: none;
+  border-radius: 50%;
+  background: transparent;
+  color: #bdbdbd;
+  font-size: 24px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s ease;
+}
+
+.panel-close:hover {
+  background: rgba(255, 255, 255, 0.08);
+  color: #fff;
+  transform: translateY(-1px);
+}
+
+.panel-content {
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding-right: 6px;
+  min-height: 0;
+}
+
+/* Scrollbar */
+.panel-content::-webkit-scrollbar {
+  width: 6px;
+}
+
+.panel-content::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.panel-content::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 3px;
+}
+
+.panel-content::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.15);
+}
+
+/* Section */
+.section {
+  margin-bottom: 20px;
+  padding: 14px;
+  border-radius: 10px;
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
+  border: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.section-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: #d0d0d0;
+  margin-bottom: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+.section-body {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+/* Fields */
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.field label {
+  font-size: 12px;
+  color: #9e9e9e;
+  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;
+  font-size: 13px;
+  outline: none;
+  transition: all 0.2s ease;
+  font-family:
+    system-ui,
+    -apple-system,
+    sans-serif;
+  box-sizing: border-box;
+  line-height: 1.4;
+}
+
+.field input:focus {
+  border-color: #6366f1;
+  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
+  background: rgba(0, 0, 0, 0.35);
+}
+
+.field input[readonly] {
+  background: rgba(0, 0, 0, 0.4);
+  color: #888;
+  cursor: not-allowed;
+  opacity: 0.7;
+}
+
+.field-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px;
+}
+
+/* Port Items */
+.port-group {
+  margin-top: 8px;
+}
+
+.port-group-title {
+  font-size: 11px;
+  font-weight: 600;
+  color: #a0a0a0;
+  margin-bottom: 6px;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.port-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 8px;
+  border-radius: 4px;
+  background: rgba(0, 0, 0, 0.2);
+  margin-bottom: 4px;
+}
+
+.port-icon {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.port-icon.exec {
+  background: #10b981;
+  border-radius: 2px;
+}
+
+.port-icon.data {
+  background: #6366f1;
+}
+
+.port-name {
+  flex: 1;
+  font-size: 12px;
+  color: #e0e0e0;
+  font-weight: 500;
+}
+
+.port-type {
+  font-size: 10px;
+  color: #888;
+  padding: 2px 6px;
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 3px;
+}
+
+/* Actions */
+.panel-actions {
+  display: flex;
+  gap: 10px;
+  padding-top: 16px;
+  border-top: 1px solid rgba(255, 255, 255, 0.08);
+  margin-top: 16px;
+}
+
+.panel-actions button {
+  flex: 1;
+  padding: 10px 16px;
+  border: none;
+  border-radius: 6px;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  font-family:
+    system-ui,
+    -apple-system,
+    sans-serif;
+}
+
+.btn-primary {
+  background: #6366f1;
+  color: #fff;
+}
+
+.btn-primary:hover {
+  background: #818cf8;
+  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;
+}
+
+.btn-secondary:hover {
+  background: rgba(255, 255, 255, 0.12);
+  color: #fff;
+}