invyone/frontend/components/control/PortHandle.tsx

'use client';

/**
 * I/O 포트 핸들 — 노드 양쪽 원형 (드래그 연결 시작/끝점)
 * mockup initPortEvents 포팅
 */

interface PortHandleProps {
  nodeId: string;
  port: string;
  type: 'in' | 'out';
  cls?: string;
  label?: string;
  isTable?: boolean;
  onDragStart?: (nodeId: string, port: string, e: React.MouseEvent) => void;
  onDragEnd?: (nodeId: string, port: string) => void;
}

export function PortHandle({ nodeId, port, type, cls, label, isTable, onDragStart, onDragEnd }: PortHandleProps) {
  // 단일 동그라미가 mousedown(연결 시작) + mouseup(연결 종료) 둘 다 받음
  // (테이블 컬럼 port 처럼 시각적으로 하나만 보이는 경우)
  const handleMouseDown = (e: React.MouseEvent) => {
    if (!onDragStart) return;
    e.preventDefault();
    e.stopPropagation();
    onDragStart(nodeId, port, e);
  };

  const handleMouseUp = (e: React.MouseEvent) => {
    if (!onDragEnd) return;
    e.stopPropagation();
    onDragEnd(nodeId, port);
  };

  const className = [
    'ctrl-io-port',
    `port-${type}`,
    cls ?? '',
    isTable ? 'tbl-io' : '',
  ].filter(Boolean).join(' ');

  return (
    <div
      className={className}
      data-node={nodeId}
      data-port={port}
      onMouseDown={handleMouseDown}
      onMouseUp={handleMouseUp}
    >
      {label && <span className="port-label">{label}</span>}
    </div>
  );
}