fix(canvas): suppress dashed border when dragging over overlay panels
Some checks failed
Stuffle/agos-client/pipeline/head There was a failure building this commit

The onDragOver handler on the ReactFlow root fires even when the pointer
is over child overlay panels (NodePalette, Inspector) because they are
DOM descendants. The previous document-level listener approach was
insufficient.

Now checks target.closest('.react-flow__panel') directly inside
handleDragOver — if the pointer is over a panel, clears isDragOver /
dragFlowPos and returns early instead of showing drop feedback. Also
removes the now-redundant document-level dragover listener.

Generated with [Devin](https://devin.ai)

Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
This commit is contained in:
2026-08-21 20:14:46 +05:30
parent cee213e042
commit a1873a801c

View File

@@ -190,6 +190,14 @@ export function WorkflowCanvas({
// Drag-to-add from palette
const handleDragOver = useCallback((event: React.DragEvent) => {
if (!event.dataTransfer.types.includes(PALETTE_DRAG_FORMAT)) return
// If the pointer is over an overlay panel (NodePalette, Inspector, etc.),
// suppress the drop cues — drops on panels are blocked and shouldn't show feedback.
const target = event.target as HTMLElement | null
if (target?.closest('.react-flow__panel')) {
setIsDragOver(false)
setDragFlowPos(null)
return
}
event.preventDefault()
event.dataTransfer.dropEffect = 'move'
setIsDragOver(true)
@@ -208,21 +216,7 @@ export function WorkflowCanvas({
}
}, [])
// Document-level dragover: clear cues whenever cursor moves over a panel overlay.
// Panels use stopPropagation so canvas onDragOver never fires over them —
// without this, isDragOver stays true when hovering panels mid-drag.
useEffect(() => {
const handleDocDragOver = (e: DragEvent) => {
if (!(e.dataTransfer?.types ?? []).includes(PALETTE_DRAG_FORMAT)) return
const target = e.target as HTMLElement | null
if (target?.closest('.react-flow__panel')) {
setIsDragOver(false)
setDragFlowPos(null)
}
}
document.addEventListener('dragover', handleDocDragOver)
return () => document.removeEventListener('dragover', handleDocDragOver)
}, [])
const handleDrop = useCallback((event: React.DragEvent) => {
setIsDragOver(false)