import { DropTargetMonitor , XYCoord } from 'react-dnd' ; import { DragItemBlock , DropDirection } from '../types' ; /**
 * If dragging a block A over another block B:
 * get the direction of block A relative to block B.
 */ export const getHoverDirection = ( dragItem , monitor , ref , hoverId ) : DropDirection => { if ( ! ref . current ) return null ; const dragId = dragItem . id ; if ( dragId === hoverId ) return null ; const hoverBoundingRect = ref . current ?. getBoundingClientRect ( ) ; const hoverMiddleY = ( hoverBoundingRect . bottom - hoverBoundingRect . top ) / 2 ; const clientOffset = monitor . getClientOffset ( ) ; if ( ! clientOffset ) return null ; const hoverClientY = ( clientOffset as XYCoord ) . y - hoverBoundingRect . top ; if ( hoverClientY < hoverMiddleY ) { return 'top' ; } if ( hoverClientY >= hoverMiddleY ) { return 'bottom' ; } return null ; } ;