| 52 | } |
| 53 | |
| 54 | function MoveableScript({ |
| 55 | script, |
| 56 | index, |
| 57 | depth, |
| 58 | selected, |
| 59 | moveScript, |
| 60 | selectScript, |
| 61 | deleteScript, |
| 62 | duplicateScript, |
| 63 | takeOwnership, |
| 64 | dispatchCollections, |
| 65 | }: MoveableScriptProps) { |
| 66 | const id = script.id; |
| 67 | const ref = useRef<HTMLDivElement>(null); |
| 68 | const [isTopHovered, setIsTopHovered] = useState(false); |
| 69 | const [isBottomHovered, setIsBottomHovered] = useState(false); |
| 70 | const [{ handlerId }, drop] = useDrop< |
| 71 | ScriptDragItem, |
| 72 | void, |
| 73 | { handlerId: Identifier | null } |
| 74 | >({ |
| 75 | accept: DragTypes.SCRIPT, |
| 76 | hover(item, monitor) { |
| 77 | if (!ref.current || !monitor.isOver()) { |
| 78 | return; |
| 79 | } |
| 80 | |
| 81 | if (!ref.current || !monitor || !item || item.id === id) { |
| 82 | return { |
| 83 | handlerId: null, |
| 84 | hoveredDownwards: false, |
| 85 | hoveredUpwards: false, |
| 86 | }; |
| 87 | } |
| 88 | |
| 89 | const hoverBoundingRect = ref.current.getBoundingClientRect(); |
| 90 | const clientOffset = monitor.getClientOffset(); |
| 91 | if (!clientOffset) { |
| 92 | return; |
| 93 | } |
| 94 | |
| 95 | const hoverClientY = clientOffset.y - hoverBoundingRect.top; |
| 96 | |
| 97 | const hoveredTop = hoverClientY < hoverBoundingRect.height / 2; |
| 98 | const hoveredBottom = hoverClientY > hoverBoundingRect.height / 2; |
| 99 | |
| 100 | if (hoveredTop) { |
| 101 | const newRank = calculateTopHoveredRank( |
| 102 | index, |
| 103 | item.index, |
| 104 | script.collectionId, |
| 105 | item.collectionId, |
| 106 | ); |
| 107 | if (newRank === item.index && item.collectionId === script.collectionId) { |
| 108 | return; |
| 109 | } |
| 110 | } |
| 111 | |