diff --git a/entrypoints/sidepanel/layouts/collections/CollectionListView.tsx b/entrypoints/sidepanel/layouts/collections/CollectionListView.tsx index 45ebfb0..7b2f9e1 100644 --- a/entrypoints/sidepanel/layouts/collections/CollectionListView.tsx +++ b/entrypoints/sidepanel/layouts/collections/CollectionListView.tsx @@ -21,6 +21,7 @@ import { collisionDetector } from "../../utils/dnd/collisionDetector"; import { useStyles_CollectionListView } from "./CollectionListView.styles"; import SearchBar from "./SearchBar"; import StorageCapacityIssueMessage from "./messages/StorageCapacityIssueMessage"; +import { snapHandleToCursor } from "../../utils/dnd/snapHandleToCursor"; export default function CollectionListView(): ReactElement { @@ -110,6 +111,7 @@ export default function CollectionListView(): ReactElement collisionDetection={ collisionDetector(!tilesView) } onDragStart={ handleDragStart } onDragEnd={ handleDragEnd } + modifiers={ [snapHandleToCursor] } > index.toString()) } diff --git a/entrypoints/sidepanel/utils/dnd/snapHandleToCursor.ts b/entrypoints/sidepanel/utils/dnd/snapHandleToCursor.ts new file mode 100644 index 0000000..7b3127f --- /dev/null +++ b/entrypoints/sidepanel/utils/dnd/snapHandleToCursor.ts @@ -0,0 +1,34 @@ +import { Modifier } from "@dnd-kit/core"; +import { Coordinates, getEventCoordinates } from "@dnd-kit/utilities"; +import { DndItem } from "../../hooks/useDndItem"; + +export const snapHandleToCursor: Modifier = ({ + activatorEvent, + draggingNodeRect, + transform, + active +}) => +{ + if (draggingNodeRect && activatorEvent) + { + const activeItem: DndItem | undefined = active?.data.current as DndItem; + const activatorCoordinates: Coordinates | null = getEventCoordinates(activatorEvent); + + if (!activatorCoordinates) + return transform; + + const initX: number = activatorCoordinates.x - draggingNodeRect.left; + const initY: number = activatorCoordinates.y - draggingNodeRect.top; + + const offsetX: number = activeItem?.item.type === "group" ? 24 : draggingNodeRect.height / 2; + const offsetY: number = activeItem?.item.type === "group" ? 20 : draggingNodeRect.height / 2; + + return { + ...transform, + x: transform.x + initX - offsetX, + y: transform.y + initY - offsetY + }; + } + + return transform; +};