dnd-kit icon indicating copy to clipboard operation
dnd-kit copied to clipboard

feat(utilities): add closestLine and containingRectOrClosestLine algorithms

Open asterix696 opened this issue 9 months ago • 3 comments

Two new collision detection strategies are introduced:

  • closestLine: Calculates the closest droppable container based on the distance between the pointer and the diagonal line of each container. This can provide more accurate results in scenarios where traditional bounding-box-based detection may fail.

  • containingRectOrClosestLine: Returns the container if the pointer is inside its bounding rectangle. If not, it falls back to the closestLine strategy to find the closest container based on diagonal distance.

asterix696 avatar Mar 25 '25 21:03 asterix696

⚠️ No Changeset found

Latest commit: 08879a0e1e3016e41125734d2231fd977d470a5c

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

changeset-bot[bot] avatar Mar 25 '25 21:03 changeset-bot[bot]

Can you elaborate on the benefits of this approach?

clauderic avatar Apr 17 '25 15:04 clauderic

Certainly! These two strategies aim to address limitations in center or corner based collision detection, especially in complex or non-standard UI layouts enhancing UX in drag-and-drop where containers overlap or are tight.

They bring more value in these cases:

  • closestLine: it works better in some layouts, especially with thin or custom-shaped droppable areas, where using center or corners can lead to unexpected or inaccurate detection.

  • containingRectOrClosestLine: given this strategy first checks if the pointer is inside a container, it prevents the misses when the pointer is technically inside a container but might be misclassified by proximity-based strategies. If the cursor is not in any container it has all the benefits of the closestLine algorithm.

asterix696 avatar Apr 24 '25 15:04 asterix696