diff --git a/.changeset/fix-collision-priority.md b/.changeset/fix-collision-priority.md new file mode 100644 index 00000000..2ae0a2ac --- /dev/null +++ b/.changeset/fix-collision-priority.md @@ -0,0 +1,6 @@ +--- +'@dnd-kit/abstract': patch +'@dnd-kit/collisions': 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 index 349f306e..964bc042 100644 --- 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 index 0f202ff8..8414d69a 100644 --- 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 index 027992ff..f7d7a225 100644 --- 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 = DragDropManager, > extends Entity { constructor( - { - accept, - collisionDetector, - collisionPriority = CollisionPriority.Normal, - type, - ...input - }: Input, + {accept, collisionDetector, collisionPriority, type, ...input}: Input, 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 index 068088e6..e133a35b 100644 --- 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 index 18b7c141..0c089911 100644 --- 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 index 17a36e30..900b8fd7 100644 --- 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 index 60eaa452..e497de69 100644 --- 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 index d72a35a1..dd8cb23c 100644 --- 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 index e0043e3d..ed0b375b 100644 --- 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 index a1beb595..c12a2a29 100644 --- 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 { } public set collisionPriority(value: CollisionPriority | number | undefined) { - this.droppable.collisionPriority = value ?? CollisionPriority.Normal; + this.droppable.collisionPriority = value; } public set collisionDetector(value: CollisionDetector | undefined) {