feat(utilities): add closestLine and containingRectOrClosestLine algorithms
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.
⚠️ 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
Can you elaborate on the benefits of this approach?
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.