40 lines
1.4 KiB
TypeScript
40 lines
1.4 KiB
TypeScript
import type { DragMoveEvent } from "@dnd-kit/core";
|
|
|
|
export function computeSideForDragMove(
|
|
id: string,
|
|
e: DragMoveEvent,
|
|
orientation: "vertical" | "horizontal" = "vertical",
|
|
): "before" | "after" | null {
|
|
if (e.over == null || e.over.id !== id) {
|
|
return null;
|
|
}
|
|
if (e.active.rect.current.initial == null) return null;
|
|
|
|
const overRect = e.over.rect;
|
|
|
|
if (orientation === "horizontal") {
|
|
// For horizontal layouts (tabs side-by-side), use left/right logic
|
|
const activeLeft =
|
|
e.active.rect.current.translated?.left ?? e.active.rect.current.initial.left + e.delta.x;
|
|
const pointerX = activeLeft + e.active.rect.current.initial.width / 2;
|
|
|
|
const hoverLeft = overRect.left;
|
|
const hoverRight = overRect.right;
|
|
const hoverMiddleX = hoverLeft + (hoverRight - hoverLeft) / 2;
|
|
|
|
return pointerX < hoverMiddleX ? "before" : "after"; // 'before' = left, 'after' = right
|
|
} else {
|
|
// For vertical layouts, use top/bottom logic
|
|
const activeTop =
|
|
e.active.rect.current.translated?.top ?? e.active.rect.current.initial.top + e.delta.y;
|
|
const pointerY = activeTop + e.active.rect.current.initial.height / 2;
|
|
|
|
const hoverTop = overRect.top;
|
|
const hoverBottom = overRect.bottom;
|
|
const hoverMiddleY = (hoverBottom - hoverTop) / 2;
|
|
const hoverClientY = pointerY - hoverTop;
|
|
|
|
return hoverClientY < hoverMiddleY ? "before" : "after";
|
|
}
|
|
}
|