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
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:
@@ -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)
|
||||
|
||||
Reference in New Issue
Block a user