Improve shape intersection

clauderic · Jul 16, 2024 · a6366f9 · a6366f9
1 parent 64c2930
commit a6366f9
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 4 deletions.
diff --git a/.changeset/improve-shape-intersection.md b/.changeset/improve-shape-intersection.md
@@ -0,0 +1,5 @@
+---
+'@dnd-kit/collision': patch
+---
+
+Improve accuracy of `shapeIntersection` when there are multiple intersecting shapes.
diff --git a/packages/collision/src/algorithms/shapeIntersection.ts b/packages/collision/src/algorithms/shapeIntersection.ts
@@ -10,12 +10,13 @@ export const shapeIntersection: CollisionDetector = ({
   dragOperation,
   droppable,
 }) => {
-  if (!droppable.shape) {
+  const {shape} = dragOperation;
+
+  if (!droppable.shape || !shape?.current) {
     return null;
   }
 
-  const {shape} = dragOperation;
-  const intersectionArea = shape?.current.intersectionArea(droppable.shape);
+  const intersectionArea = shape.current.intersectionArea(droppable.shape);
 
   // Check if the droppable is intersecting with the drag operation shape.
   if (intersectionArea) {
@@ -26,8 +27,11 @@ export const shapeIntersection: CollisionDetector = ({
      * collisions.
      */
     const distance = Point.distance(droppable.shape.center, position.current);
+    const intersectionRatio =
+      intersectionArea /
+      (shape.current.area + droppable.shape.area - intersectionArea);
 
-    const value = 1 / distance;
+    const value = intersectionRatio / distance;
 
     return {
       id: droppable.id,