Function handleConnectionDragStart

app/nodegrid/page.tsx:1663–1705

(e: React.MouseEvent)

  // Handle connection drag start (mouse)
  const handleConnectionDragStart = (e: React.MouseEvent) => {
    e.stopPropagation();
    e.preventDefault();

    const panel = panelRef.current;
    if (!panel) return;

    const rect = panel.getBoundingClientRect();
    // Connection starts from the right side of the panel (where the triangle icon is)
    const startX = rect.right - 10;
    const startY = rect.top + 10;

    onConnectionDragStart?.(id, startX, startY);

    const handleMouseMove = (moveEvent: MouseEvent) => {
      onConnectionDragMove?.(moveEvent.clientX, moveEvent.clientY);
    };

    const handleMouseUp = (upEvent: MouseEvent) => {
      document.removeEventListener('mousemove', handleMouseMove);
      document.removeEventListener('mouseup', handleMouseUp);

      // Check if we're over another panel
      const elementsAtPoint = document.elementsFromPoint(upEvent.clientX, upEvent.clientY);
      let targetPanelId: string | null = null;

      for (const el of elementsAtPoint) {
        const panelEl = el.closest('[data-panel-id]');
        if (panelEl) {
          const panelId = panelEl.getAttribute('data-panel-id');
          if (panelId && panelId !== id) {
            targetPanelId = panelId;
            break;
          }
        }
      }

      onConnectionDragEnd?.(id, targetPanelId, upEvent.clientX, upEvent.clientY);
    };

    document.addEventListener('mousemove', handleMouseMove);
    document.addEventListener('mouseup', handleMouseUp);
  };

  // Handle connection drag start (touch)
  const handleConnectionTouchStart = (e: React.TouchEvent) => {