From d829a4821ea1246ed84dff24780b4d906d9a5c0d Mon Sep 17 00:00:00 2001
From: Pouzor <remy.jardinet@gmail.com>
Date: Sun, 8 Mar 2026 13:10:25 +0100
Subject: [PATCH] fix: use explicit source+hidden-target handles for reliable
 bidirectional snapping
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

source handles: visible, can initiate drag from top or bottom
target handles: invisible (opacity:0, 12x12px), overlap the source at same
position — React Flow detects them for snapping and shows visual feedback
without the user seeing a second dot. Ensures bottom→top connections work.
---
 frontend/src/components/canvas/nodes/BaseNode.tsx         | 8 ++++----
 frontend/src/components/canvas/nodes/ProxmoxGroupNode.tsx | 8 ++++----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/canvas/nodes/BaseNode.tsx b/frontend/src/components/canvas/nodes/BaseNode.tsx
index e995536..eaf619e 100644
--- a/frontend/src/components/canvas/nodes/BaseNode.tsx
+++ b/frontend/src/components/canvas/nodes/BaseNode.tsx
@@ -38,8 +38,8 @@ export function BaseNode({ data, selected, icon: typeIcon }: BaseNodeProps) {
         minWidth: 140,
       }}
     >
-      <Handle type="source" position={Position.Top} className="!bg-[#30363d] !border-[#8b949e]" />
-      <Handle type="target" position={Position.Top} className="!bg-[#30363d] !border-[#8b949e]" />
+      <Handle type="source" position={Position.Top} id="top" className="!bg-[#30363d] !border-[#8b949e]" />
+      <Handle type="target" position={Position.Top} id="top-t" style={{ opacity: 0, width: 12, height: 12 }} />
 
       {/* Icon */}
       <div
@@ -68,8 +68,8 @@ export function BaseNode({ data, selected, icon: typeIcon }: BaseNodeProps) {
         title={data.status}
       />
 
-      <Handle type="source" position={Position.Bottom} className="!bg-[#30363d] !border-[#8b949e]" />
-      <Handle type="target" position={Position.Bottom} className="!bg-[#30363d] !border-[#8b949e]" />
+      <Handle type="source" position={Position.Bottom} id="bottom" className="!bg-[#30363d] !border-[#8b949e]" />
+      <Handle type="target" position={Position.Bottom} id="bottom-t" style={{ opacity: 0, width: 12, height: 12 }} />
     </div>
   )
 }
diff --git a/frontend/src/components/canvas/nodes/ProxmoxGroupNode.tsx b/frontend/src/components/canvas/nodes/ProxmoxGroupNode.tsx
index 47cc4a6..c2e9de0 100644
--- a/frontend/src/components/canvas/nodes/ProxmoxGroupNode.tsx
+++ b/frontend/src/components/canvas/nodes/ProxmoxGroupNode.tsx
@@ -80,10 +80,10 @@ export function ProxmoxGroupNode(props: NodeProps<Node<NodeData>>) {
         <div className="flex-1 relative" />
       </div>
 
-      <Handle type="source" position={Position.Top} className="!bg-[#30363d] !border-[#8b949e]" />
-      <Handle type="target" position={Position.Top} className="!bg-[#30363d] !border-[#8b949e]" />
-      <Handle type="source" position={Position.Bottom} className="!bg-[#30363d] !border-[#8b949e]" />
-      <Handle type="target" position={Position.Bottom} className="!bg-[#30363d] !border-[#8b949e]" />
+      <Handle type="source" position={Position.Top} id="top" className="!bg-[#30363d] !border-[#8b949e]" />
+      <Handle type="target" position={Position.Top} id="top-t" style={{ opacity: 0, width: 12, height: 12 }} />
+      <Handle type="source" position={Position.Bottom} id="bottom" className="!bg-[#30363d] !border-[#8b949e]" />
+      <Handle type="target" position={Position.Bottom} id="bottom-t" style={{ opacity: 0, width: 12, height: 12 }} />
 
       {/* Cluster handles — left/right for same-cluster links */}
       <Handle type="source" position={Position.Left} id="cluster-left" title="Same cluster" style={{ background: '#ff6e00', borderColor: '#ff6e0088', width: 6, height: 6 }} />