Skip to content

feat(utilities): add closestLine and containingRectOrClosestLine algorithms #1639

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

asterix696
Copy link

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.

Copy link

changeset-bot bot commented Mar 25, 2025

⚠️ No Changeset found

Latest commit: 08879a0

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

@clauderic
Copy link
Owner

Can you elaborate on the benefits of this approach?

@asterix696
Copy link
Author

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants