RectIntersection is not working with draggable items inside a scrollable container

The draggable items that are scrolled are not calculating the intersectionRatio correctly.

Please, see this code sandbox for an example: https://codesandbox.io/s/react-dnd-grid-0ylzl?file=/src/App.js

NOTE: Try dragging the last draggable item into one droppable area.

[clauderic]

Hey @jeserodz, seems like a legit bug, thanks for the report!

[robstarbuck]

Hi I wonder if there’s an update on this ticket? The branch at #54 seems to have gone stale. I have a workaround with a different collision detector which uses the current active item rather than the collisionRect which seems to work for the meantime. Obviously not something we want to keep in our codebase however. Thanks.

import {
  Active,
  CollisionDetection,
  LayoutRect,
  UniqueIdentifier,
} from "@dnd-kit/core";

/**
 * Returns the intersecting rectangle area between two rectangles
 */
function getIntersectionRatio(entry: LayoutRect, active: Active): number {
  const {
    top: currentTop = 0,
    left: currentLeft = 0,
    width: currentWidth = 0,
    height: currentHeight = 0,
  } = active.rect.current.translated ?? {};

  const top = Math.max(currentTop, entry.offsetTop);
  const left = Math.max(currentLeft, entry.offsetLeft);
  const right = Math.min(
    currentLeft + currentWidth,
    entry.offsetLeft + entry.width
  );
  const bottom = Math.min(
    currentTop + currentHeight,
    entry.offsetTop + entry.height
  );
  const width = right - left;
  const height = bottom - top;

  if (left < right && top < bottom) {
    const targetArea = currentWidth * currentHeight;
    const entryArea = entry.width * entry.height;
    const intersectionArea = width * height;
    const intersectionRatio =
      intersectionArea / (targetArea + entryArea - intersectionArea);

    return Number(intersectionRatio.toFixed(4));
  }

  // Rectangles do not overlap, or overlap has an area of zero (edge/corner overlap)
  return 0;
}

/**
 * Returns the rectangle that has the greatest intersection area with a given
 * rectangle in an array of rectangles.
 */
export const activeRectIntersection: CollisionDetection = ({
  active,
  droppableContainers,
}) => {
  let maxIntersectionRatio = 0;
  let maxIntersectingDroppableContainer: UniqueIdentifier | null = null;

  for (const droppableContainer of droppableContainers) {
    const {
      rect: { current: rect },
    } = droppableContainer;

    if (rect) {
      const intersectionRatio = getIntersectionRatio(rect, active);

      if (intersectionRatio > maxIntersectionRatio) {
        maxIntersectionRatio = intersectionRatio;
        maxIntersectingDroppableContainer = droppableContainer.id;
      }
    }
  }

  return maxIntersectingDroppableContainer;
};