From be18bcc6d911033b8b47db212842b26814497195 Mon Sep 17 00:00:00 2001
From: Pouzor <remy.jardinet@gmail.com>
Date: Sun, 8 Mar 2026 12:26:21 +0100
Subject: [PATCH] fix: add source+target handles at top and bottom so all
 snatch points work

connectionMode=loose alone does not reliably make source handles act as
drop targets. Each position now has both a source handle (to initiate
drag) and a target handle (to receive drops). They overlap visually as
one dot but support full bidirectional connections.
---
 frontend/src/components/canvas/nodes/BaseNode.tsx         | 2 ++
 frontend/src/components/canvas/nodes/ProxmoxGroupNode.tsx | 2 ++
 2 files changed, 4 insertions(+)

diff --git a/frontend/src/components/canvas/nodes/BaseNode.tsx b/frontend/src/components/canvas/nodes/BaseNode.tsx
index 81ecfbf..e995536 100644
--- a/frontend/src/components/canvas/nodes/BaseNode.tsx
+++ b/frontend/src/components/canvas/nodes/BaseNode.tsx
@@ -39,6 +39,7 @@ export function BaseNode({ data, selected, icon: typeIcon }: BaseNodeProps) {
       }}
     >
       <Handle type="source" position={Position.Top} className="!bg-[#30363d] !border-[#8b949e]" />
+      <Handle type="target" position={Position.Top} className="!bg-[#30363d] !border-[#8b949e]" />
 
       {/* Icon */}
       <div
@@ -68,6 +69,7 @@ export function BaseNode({ data, selected, icon: typeIcon }: BaseNodeProps) {
       />
 
       <Handle type="source" position={Position.Bottom} className="!bg-[#30363d] !border-[#8b949e]" />
+      <Handle type="target" position={Position.Bottom} className="!bg-[#30363d] !border-[#8b949e]" />
     </div>
   )
 }
diff --git a/frontend/src/components/canvas/nodes/ProxmoxGroupNode.tsx b/frontend/src/components/canvas/nodes/ProxmoxGroupNode.tsx
index 7ef9ec5..47cc4a6 100644
--- a/frontend/src/components/canvas/nodes/ProxmoxGroupNode.tsx
+++ b/frontend/src/components/canvas/nodes/ProxmoxGroupNode.tsx
@@ -81,7 +81,9 @@ export function ProxmoxGroupNode(props: NodeProps<Node<NodeData>>) {
       </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]" />
 
       {/* 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 }} />