@ -209,7 +209,7 @@ export function FloatingNodeHeader({
const { setNodes , getNodes , getViewport } = useReactFlow ( ) ;
const isDraggingRef = useRef ( false ) ;
const handleHeaderMouse Down = useCallback ( ( e : React.Mouse Event ) = > {
const handleHeaderPointer Down = useCallback ( ( e : React.Pointer Event ) = > {
// Don't drag from interactive elements
if ( ( e . target as HTMLElement ) . closest ( '.nodrag, button, input, textarea, a' ) ) return ;
if ( e . button !== 0 ) return ;
@ -241,7 +241,7 @@ export function FloatingNodeHeader({
isDraggingRef . current = false ;
const handleMouse Move = ( e : Mouse Event) = > {
const handlePointer Move = ( e : Pointer Event) = > {
const { zoom } = getViewport ( ) ;
const dx = ( e . clientX - startX ) / zoom ;
const dy = ( e . clientY - startY ) / zoom ;
@ -262,30 +262,32 @@ export function FloatingNodeHeader({
}
} ;
const handleMouse Up = ( ) = > {
document . removeEventListener ( 'mousemove' , handleMouse Move ) ;
document . removeEventListener ( 'mouseup' , handleMouse Up ) ;
const handlePointer Up = ( ) = > {
document . removeEventListener ( 'pointermove' , handlePointer Move ) ;
document . removeEventListener ( 'pointerup' , handlePointer Up ) ;
isDraggingRef . current = false ;
} ;
document . addEventListener ( 'mousemove' , handleMouse Move ) ;
document . addEventListener ( 'mouseup' , handleMouse Up ) ;
document . addEventListener ( 'pointermove' , handlePointer Move ) ;
document . addEventListener ( 'pointerup' , handlePointer Up ) ;
} , [ id , getNodes , getViewport , setNodes ] ) ;
return (
< div
className = "absolute pointer-events-auto transition-opacity duration-200 cursor-grab "
className = "absolute pointer-events-none transition-opacity duration-200 "
style = { {
left : ` ${ position . x } px ` ,
top : ` ${ position . y - 26 } px ` ,
width : ` ${ width } px ` ,
zIndex : selected ? 10000 : 9000 ,
} }
onMouseEnter = { ( ) = > setIsHeaderHovered ( true ) }
onMouseLeave = { ( ) = > setIsHeaderHovered ( false ) }
onMouseDown = { handleHeaderMouseDown }
>
< div className = "px-1 py-1 flex items-center justify-between w-full" >
< div
className = "px-1 py-1 flex items-center justify-between w-full pointer-events-auto cursor-grab"
onMouseEnter = { ( ) = > setIsHeaderHovered ( true ) }
onMouseLeave = { ( ) = > setIsHeaderHovered ( false ) }
onPointerDown = { handleHeaderPointerDown }
>
{ /* Title Section */ }
< div className = "flex-1 min-w-0 flex items-center gap-1.5 pl-2" >
{ titlePrefix }