diff --git a/.changeset/notifier-observer.md b/.changeset/notifier-observer.md new file mode 100644 index 00000000..9514bfd4 --- /dev/null +++ b/.changeset/notifier-observer.md @@ -0,0 +1,5 @@ +--- +'@dnd-kit/abstract': patch +--- + +Move responsibility from `CollisionObserver` to `CollisionNotifier` to check if the previous collisions are equal to the next collisions. diff --git a/packages/abstract/src/core/collision/notifier.ts b/packages/abstract/src/core/collision/notifier.ts index 94d791b6..11e59975 100644 --- a/packages/abstract/src/core/collision/notifier.ts +++ b/packages/abstract/src/core/collision/notifier.ts @@ -4,10 +4,17 @@ import {DragDropManager} from '../manager/index.ts'; import {CorePlugin} from '../plugins/index.ts'; import {defaultPreventable} from '../manager/events.ts'; +import type {Collision} from './types.ts'; + export class CollisionNotifier extends CorePlugin { constructor(manager: DragDropManager) { super(manager); + const isEqual = (a: Collision[], b: Collision[]) => + a.map(({id}) => id).join('') === b.map(({id}) => id).join(''); + + let previousCollisions: Collision[] = []; + this.destroy = effect(() => { const {collisionObserver, monitor} = manager; const {collisions} = collisionObserver; @@ -26,6 +33,12 @@ export class CollisionNotifier extends CorePlugin { return; } + if (isEqual(collisions, previousCollisions)) { + return; + } else { + previousCollisions = collisions; + } + const [firstCollision] = collisions; untracked(() => { diff --git a/packages/abstract/src/core/collision/observer.ts b/packages/abstract/src/core/collision/observer.ts index d0f08af6..8a651ec4 100644 --- a/packages/abstract/src/core/collision/observer.ts +++ b/packages/abstract/src/core/collision/observer.ts @@ -20,19 +20,11 @@ export class CollisionObserver< this.computeCollisions = this.computeCollisions.bind(this); this.#collisions = signal(DEFAULT_VALUE); - const isEqual = (a: Collision[], b: Collision[]) => - a.map(({id}) => id).join('') === b.map(({id}) => id).join(''); - let previousCoordinates: Coordinates = {x: 0, y: 0}; this.destroy = effects( () => { const collisions = this.computeCollisions(); - const previousCollisions = this.#collisions.peek(); - - if (isEqual(collisions, previousCollisions)) { - return; - } const coordinates = untracked( () => this.manager.dragOperation.position.current