Fix issues with collision priority

clauderic · Jul 14, 2024 · a8542de · a8542de
1 parent 5488c2d
commit a8542de
Show file tree

Hide file tree

Showing 11 changed files with 48 additions and 54 deletions.
diff --git a/.changeset/fix-collision-priority.md b/.changeset/fix-collision-priority.md
@@ -0,0 +1,6 @@
+---
+'@dnd-kit/abstract': patch
+'@dnd-kit/collision': patch
+---
+
+Fix issues with `collisionPriority` not being respected.
diff --git a/packages/abstract/src/core/collision/types.ts b/packages/abstract/src/core/collision/types.ts
@@ -13,9 +13,16 @@ export enum CollisionPriority {
   Highest,
 }
 
+export enum CollisionType {
+  Collision,
+  ShapeIntersection,
+  PointerIntersection,
+}
+
 export interface Collision {
   id: UniqueIdentifier;
   priority: CollisionPriority | number;
+  type: CollisionType;
   value: number;
 }
 

diff --git a/packages/abstract/src/core/collision/utilities.ts b/packages/abstract/src/core/collision/utilities.ts
@@ -6,7 +6,11 @@ import {Collision} from './types.ts';
  */
 export function sortCollisions(a: Collision, b: Collision) {
   if (a.priority === b.priority) {
-    return b.value - a.value;
+    if (a.type === b.type) {
+      return b.value - a.value;
+    }
+
+    return b.type - a.type;
   }
 
   return b.priority - a.priority;

diff --git a/packages/abstract/src/core/entities/droppable/droppable.ts b/packages/abstract/src/core/entities/droppable/droppable.ts
@@ -22,13 +22,7 @@ export class Droppable<
   U extends DragDropManager<any, any> = DragDropManager<any, any>,
 > extends Entity<T> {
   constructor(
-    {
-      accept,
-      collisionDetector,
-      collisionPriority = CollisionPriority.Normal,
-      type,
-      ...input
-    }: Input<T>,
+    {accept, collisionDetector, collisionPriority, type, ...input}: Input<T>,
     manager: U | undefined
   ) {
     super(input, manager);
@@ -87,7 +81,7 @@ export class Droppable<
   public accessor collisionDetector: CollisionDetector;
 
   @reactive
-  public accessor collisionPriority: number;
+  public accessor collisionPriority: CollisionPriority | number | undefined;
 
   @reactive
   public accessor shape: Shape | undefined;

diff --git a/packages/abstract/src/core/index.ts b/packages/abstract/src/core/index.ts
@@ -7,7 +7,11 @@ export type {
   Renderer,
 } from './manager/index.ts';
 
-export {CollisionPriority, sortCollisions} from './collision/index.ts';
+export {
+  CollisionPriority,
+  CollisionType,
+  sortCollisions,
+} from './collision/index.ts';
 export type {Collision, CollisionDetector} from './collision/index.ts';
 
 export {Modifier} from './modifiers/index.ts';

diff --git a/packages/collision/src/algorithms/closestCenter.ts b/packages/collision/src/algorithms/closestCenter.ts
@@ -1,4 +1,4 @@
-import {CollisionPriority} from '@dnd-kit/abstract';
+import {CollisionPriority, CollisionType} from '@dnd-kit/abstract';
 import type {CollisionDetector} from '@dnd-kit/abstract';
 import {Point} from '@dnd-kit/geometry';
 
@@ -15,11 +15,11 @@ export const closestCenter: CollisionDetector = (input) => {
     return null;
   }
 
-  // const collision = defaultCollisionDetection(input);
+  const collision = defaultCollisionDetection(input);
 
-  // if (collision) {
-  //   return collision;
-  // }
+  if (collision) {
+    return collision;
+  }
 
   const distance = Point.distance(
     droppable.shape.center,
@@ -31,6 +31,7 @@ export const closestCenter: CollisionDetector = (input) => {
   return {
     id: droppable.id,
     value,
-    priority: CollisionPriority.Low,
+    type: CollisionType.Collision,
+    priority: CollisionPriority.Normal,
   };
 };
diff --git a/packages/collision/src/algorithms/directionBiased.ts b/packages/collision/src/algorithms/directionBiased.ts
@@ -1,4 +1,4 @@
-import {CollisionPriority} from '@dnd-kit/abstract';
+import {CollisionPriority, CollisionType} from '@dnd-kit/abstract';
 import type {CollisionDetector} from '@dnd-kit/abstract';
 import {Point} from '@dnd-kit/geometry';
 
@@ -37,6 +37,7 @@ export const directionBiased: CollisionDetector = ({
     return {
       id: droppable.id,
       value: 1 / Point.distance(droppable.shape.center, center),
+      type: CollisionType.Collision,
       priority: CollisionPriority.Normal,
     };
   }

diff --git a/packages/collision/src/algorithms/pointerDistance.ts b/packages/collision/src/algorithms/pointerDistance.ts
@@ -1,4 +1,4 @@
-import {CollisionPriority} from '@dnd-kit/abstract';
+import {CollisionPriority, CollisionType} from '@dnd-kit/abstract';
 import type {CollisionDetector} from '@dnd-kit/abstract';
 import {Point} from '@dnd-kit/geometry';
 
@@ -19,6 +19,7 @@ export const pointerDistance: CollisionDetector = (input) => {
   return {
     id: droppable.id,
     value,
-    priority: CollisionPriority.Low,
+    type: CollisionType.Collision,
+    priority: CollisionPriority.Normal,
   };
 };
diff --git a/packages/collision/src/algorithms/pointerIntersection.ts b/packages/collision/src/algorithms/pointerIntersection.ts
@@ -1,6 +1,6 @@
-import {CollisionPriority} from '@dnd-kit/abstract';
+import {CollisionPriority, CollisionType} from '@dnd-kit/abstract';
 import type {CollisionDetector} from '@dnd-kit/abstract';
-import {Point, Rectangle} from '@dnd-kit/geometry';
+import {Point} from '@dnd-kit/geometry';
 
 /**
  * A high precision collision detection algorithm that detects
@@ -11,9 +11,10 @@ import {Point, Rectangle} from '@dnd-kit/geometry';
  *
  * Returns null if the pointer is outside of the droppable element.
  */
-export const pointerIntersection: CollisionDetector = (
-  {dragOperation, droppable}
-) => {
+export const pointerIntersection: CollisionDetector = ({
+  dragOperation,
+  droppable,
+}) => {
   const pointerCoordinates = dragOperation.position.current;
 
   if (!pointerCoordinates) {
@@ -37,36 +38,10 @@ export const pointerIntersection: CollisionDetector = (
     return {
       id,
       value: 1 / distance,
+      type: CollisionType.PointerIntersection,
       priority: CollisionPriority.High,
     };
   }
 
-  // const {shape} = dragOperation;
-  // const {x, y} = pointerCoordinates;
-  // const size = shape
-  //   ? {
-  //       width: Math.min(
-  //         Math.abs(shape.current.boundingRectangle.right - x),
-  //         30
-  //       ),
-  //       height: Math.min(
-  //         Math.abs(shape.current.boundingRectangle.bottom - y),
-  //         30
-  //       ),
-  //     }
-  //   : {width: 30, height: 30};
-  // const pointerShape = new Rectangle(x, y, size.width, size.height);
-  // const intersectionArea = droppable.shape.intersectionArea(pointerShape);
-
-  // if (intersectionArea) {
-  //   const distance = Point.distance(droppable.shape.center, pointerCoordinates);
-
-  //   return {
-  //     id,
-  //     value: 1 / distance,
-  //     priority: CollisionPriority.Medium,
-  //   };
-  // }
-
   return null;
 };
diff --git a/packages/collision/src/algorithms/shapeIntersection.ts b/packages/collision/src/algorithms/shapeIntersection.ts
@@ -1,4 +1,4 @@
-import {CollisionPriority} from '@dnd-kit/abstract';
+import {CollisionPriority, CollisionType} from '@dnd-kit/abstract';
 import type {CollisionDetector} from '@dnd-kit/abstract';
 import {Point} from '@dnd-kit/geometry';
 
@@ -32,6 +32,7 @@ export const shapeIntersection: CollisionDetector = ({
     return {
       id: droppable.id,
       value,
+      type: CollisionType.ShapeIntersection,
       priority: CollisionPriority.Normal,
     };
   }

diff --git a/packages/dom/src/sortable/sortable.ts b/packages/dom/src/sortable/sortable.ts
@@ -1,5 +1,5 @@
 import {batch, reactive, untracked} from '@dnd-kit/state';
-import {CollisionPriority, Entity} from '@dnd-kit/abstract';
+import type {CollisionPriority} from '@dnd-kit/abstract';
 import type {
   Data,
   PluginConstructor,
@@ -304,7 +304,7 @@ export class Sortable<T extends Data = Data> {
   }
 
   public set collisionPriority(value: CollisionPriority | number | undefined) {
-    this.droppable.collisionPriority = value ?? CollisionPriority.Normal;
+    this.droppable.collisionPriority = value;
   }
 
   public set collisionDetector(value: CollisionDetector | undefined) {