Provide mouse position to collision detection algorithm

First off just wanted to say thanks for building this! Loving it so far and I’ve barely got it working.

My goal is to implement a version of useSortable that also allows dropping something inside another target.

I’m still working on this, but I believe in order to do so, I need to use a collision detection algorithm that takes into account the position of the cursor inside the dragging item since it’s frequently the case that the draggable is over a droppable, but the cursor is not.

Any advice on how to achieve this with the existing architecture? Is the mouse position already being tracked somewhere that could be passed?

[clauderic]

@sean-esper you can test your use-case against this WIP PR https://github.com/clauderic/dnd-kit/pull/558. In my example, I wrote some very scrappy code to determine if there was a matching “combining” element:

const {
  active,
  collisions,
  items,
  newIndex,
} = useSortable({
  id,
});

const newId = items[newIndex];

const [secondCollidingId, collisionRatio] =
  collisions && collisions.length > 1 ? collisions[1] : [];

const shouldCombine =
  secondCollidingId === newId &&
  collisionRatio != null &&
  id !== active?.id &&
  collisionRatio > X &&
  collisionRatio < Y;

[jamesopti]

UPDATE: I realized this is as simple as keeping track of mousemove and using that to determine if the current mouse position is over a given rect.

import { CollisionDetection } from "@dnd-kit/core";

let currentMouse;
document.addEventListener("mousemove", (e) => {
  currentMouse = e;
});

const getIntersectionRatio = (entry) => {
  const { clientX, clientY } = currentMouse;
  const isWithinX =
    clientX > entry.offsetLeft && clientX < entry.offsetLeft + entry.width;
  const isWithinY =
    clientY > entry.offsetTop && clientY < entry.offsetTop + entry.height;

  if (isWithinX && isWithinY) {
    // Should compute a score to gauge how close to the center instead of a boolean
    return true;
  }
  return false;
};
/**
 * Returns the rectangle that is centermost with a given
 * rectangle in an array of rectangles.
 */
export const mouseOverIntersection: CollisionDetection = (entries, target) => {
  const intersections = entries.map(([_, entry]) =>
    getIntersectionRatio(entry)
  );

  // Once intersections returns a score, use that to determine the best match
  const firstIndex = intersections.findIndex(Boolean);
  if (firstIndex !== -1) {
    return entries[firstIndex][0];
  }
  return null;
};