url/homelable
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: add source+target handles at top and bottom so all snatch points work

Browse Source 
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.
This commit is contained in:
Pouzor
2026-03-08 12:26:21 +01:00
parent 3e1edd9458
commit be18bcc6d9
2 changed files with 4 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/canvas/nodes/BaseNode.tsx
+2
View File
@@ -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="source" position={Position.Top} className="!bg-[#30363d] !border-[#8b949e]" />
<Handle type="target" position={Position.Top} className="!bg-[#30363d] !border-[#8b949e]" />
{/* Icon */} {/* Icon */}
<div <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="source" position={Position.Bottom} className="!bg-[#30363d] !border-[#8b949e]" />
<Handle type="target" position={Position.Bottom} className="!bg-[#30363d] !border-[#8b949e]" />
</div> </div>
) )
} }
frontend/src/components/canvas/nodes/ProxmoxGroupNode.tsx
+2
View File
@@ -81,7 +81,9 @@ export function ProxmoxGroupNode(props: NodeProps<Node<NodeData>>) {
</div> </div>
<Handle type="source" position={Position.Top} className="!bg-[#30363d] !border-[#8b949e]" /> <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="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 */} {/* 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 }} /> <Handle type="source" position={Position.Left} id="cluster-left" title="Same cluster" style={{ background: '#ff6e00', borderColor: '#ff6e0088', width: 6, height: 6 }} />