feat: pass activatorEvent to modifiers and add snapCenterToCursor mod…

…ifier (#334)

* feat: pass activatorEvent to modifiers
* feat: snapCenterToCursor modifier
* Move `getEventCoordinates`, `isMouseEvent` and `isTouchEvent` to @dnd-kit/utilities

Co-authored-by: Claudéric Demers <clauderic.d@gmail.com>

.changeset/activator-event-modifiers.md

@@ -0,0 +1,5 @@
+---
+"@dnd-kit/core": minor
+---
+
+Now passing `activatorEvent` as an argument to `modifiers`

.changeset/move-shared-utilities.md

@@ -0,0 +1,5 @@
+---
+"@dnd-kit/utilities": minor
+---
+
+Move `Coordinates` interface along with `getEventCoordinates`, `isMouseEvent` and `isTouchEvent` helpers to @dnd-kit/utilities

.changeset/snap-center-modifier.md

@@ -0,0 +1,5 @@
+---
+"@dnd-kit/modifiers": minor
+---
+
+Add `snapCenterToCursor` modifier

packages/core/src/components/DndContext/DndContext.tsx

@@ -11,6 +11,7 @@ import React, {
 import {unstable_batchedUpdates} from 'react-dom';
 import {
   add,
+  getEventCoordinates,
   Transform,
   useIsomorphicLayoutEffect,
   useNodeRef,
@@ -57,7 +58,6 @@ import {
   defaultCoordinates,
   getAdjustedRect,
   getRectDelta,
-  getEventCoordinates,
   rectIntersection,
 } from '../../utilities';
 import {getMeasurableNode} from '../../utilities/nodes';
@@ -231,11 +231,12 @@ export const DndContext = memo(function DndContext({
       scaleX: 1,
       scaleY: 1,
     },
+    activatorEvent,
     active,
-    over: sensorContext.current.over,
     activeNodeRect: activeNodeClientRect,
-    draggingNodeRect,
     containerNodeRect,
+    draggingNodeRect,
+    over: sensorContext.current.over,
     overlayNodeRect,
     scrollableAncestors,
     scrollableAncestorRects,

packages/core/src/components/DragOverlay/DragOverlay.tsx

@@ -62,10 +62,11 @@ export const DragOverlay = React.memo(
     } = useDndContext();
     const transform = useContext(ActiveDraggableContext);
     const modifiedTransform = applyModifiers(modifiers, {
+      activatorEvent,
       active,
       activeNodeRect: activeNodeClientRect,
-      draggingNodeRect: overlayNode.rect,
       containerNodeRect,
+      draggingNodeRect: overlayNode.rect,
       over,
       overlayNodeRect: overlayNode.rect,
       scrollableAncestors,

packages/core/src/modifiers/types.ts

@@ -3,6 +3,7 @@ import type {Active, Over} from '../store';
 import type {ClientRect, ViewRect} from '../types';
 
 export type Modifier = (args: {
+  activatorEvent: Event | null;
   active: Active | null;
   activeNodeRect: ViewRect | null;
   draggingNodeRect: ViewRect | null;

packages/core/src/sensors/pointer/AbstractPointerSensor.ts

@@ -1,12 +1,15 @@
-import {subtract as getCoordinatesDelta} from '@dnd-kit/utilities';
+import {
+  subtract as getCoordinatesDelta,
+  getEventCoordinates,
+} from '@dnd-kit/utilities';
 
 import {
   getEventListenerTarget,
   hasExceededDistance,
   Listeners,
 } from '../utilities';
 
-import {getEventCoordinates, getOwnerDocument} from '../../utilities';
+import {getOwnerDocument} from '../../utilities';
 import {KeyboardCode} from '../keyboard';
 import type {SensorInstance, SensorProps, SensorOptions} from '../types';
 import type {Coordinates, DistanceMeasurement} from '../../types';

packages/core/src/types/coordinates.ts

@@ -1,9 +1,8 @@
+import type {Coordinates} from '@dnd-kit/utilities';
+
 import type {UniqueIdentifier} from './other';
 
-export type Coordinates = {
-  x: number;
-  y: number;
-};
+export type {Coordinates};
 
 export type DistanceMeasurement =
   | number

packages/core/src/utilities/coordinates/getRelativeTransformOrigin.ts

@@ -1,4 +1,4 @@
-import {getEventCoordinates} from './getEventCoordinates';
+import {getEventCoordinates} from '@dnd-kit/utilities';
 
 export function getRelativeTransformOrigin(
   event: MouseEvent | TouchEvent | KeyboardEvent,

packages/core/src/utilities/coordinates/index.ts

@@ -1,5 +1,3 @@
 export {defaultCoordinates} from './constants';
 export {distanceBetween} from './distanceBetweenPoints';
-export {getEventCoordinates} from './getEventCoordinates';
-
 export {getRelativeTransformOrigin} from './getRelativeTransformOrigin';

packages/core/src/utilities/index.ts

@@ -4,7 +4,6 @@ export type {CollisionDetection} from './algorithms';
 export {
   defaultCoordinates,
   distanceBetween,
-  getEventCoordinates,
   getRelativeTransformOrigin,
 } from './coordinates';
 
@@ -20,8 +19,6 @@ export {
 
 export {getOwnerDocument, getWindow} from './document';
 
-export {isMouseEvent, isTouchEvent} from './event';
-
 export {getMinValueIndex, getMaxValueIndex, omit, noop} from './other';
 
 export {

packages/modifiers/README.md

@@ -79,6 +79,12 @@ const gridSize = 20; // pixels
 const snapToGridModifier = createSnapModifier(gridSize);
 ```
 
+### Snap to cursor
+
+#### `snapCenterToCursor`
+
+Snaps the center of the draggable item to the cursor when it is picked up. Has no effect when using the Keyboard sensor.
+
 ## Building custom modifiers
 
 To build your own custom modifiers, refer to the implementation of the built-in modifiers of this package.

packages/modifiers/src/index.ts

@@ -4,3 +4,4 @@ export {restrictToParentElement} from './restrictToParentElement';
 export {restrictToFirstScrollableAncestor} from './restrictToFirstScrollableAncestor';
 export {restrictToVerticalAxis} from './restrictToVerticalAxis';
 export {restrictToWindowEdges} from './restrictToWindowEdges';
+export {snapCenterToCursor} from './snapCenterToCursor';

packages/modifiers/src/snapCenterToCursor.ts

@@ -0,0 +1,30 @@
+import type {Modifier} from '@dnd-kit/core';
+import {
+  getEventCoordinates,
+  isTouchEvent,
+  isMouseEvent,
+} from '@dnd-kit/utilities';
+
+export const snapCenterToCursor: Modifier = ({
+  activatorEvent,
+  activeNodeRect,
+  transform,
+}) => {
+  if (
+    activeNodeRect &&
+    activatorEvent &&
+    (isTouchEvent(activatorEvent) || isMouseEvent(activatorEvent))
+  ) {
+    const activatorCoordinates = getEventCoordinates(activatorEvent);
+    const offsetX = activatorCoordinates.x - activeNodeRect.left;
+    const offsetY = activatorCoordinates.y - activeNodeRect.top;
+
+    return {
+      ...transform,
+      x: transform.x + offsetX - activeNodeRect.width / 2,
+      y: transform.y + offsetY - activeNodeRect.height / 2,
+    };
+  }
+
+  return transform;
+};

packages/modifiers/test/modifiers.test.tsx

@@ -21,6 +21,7 @@ describe('@dnd-kit/modifiers', () => {
     scaleY: 1,
   };
   const defaultArguments: FirstArgument<Modifier> = {
+    activatorEvent: null,
     active: null,
     over: null,
     transform: defaultTransform,

packages/core/src/utilities/coordinates/getEventCoordinates.ts → packages/utilities/src/coordinates/getEventCoordinates.ts

@@ -1,4 +1,4 @@
-import type {Coordinates} from '../../types';
+import type {Coordinates} from './types';
 import {isMouseEvent, isTouchEvent} from '../event';
 
 /**

packages/utilities/src/coordinates/index.ts

@@ -0,0 +1,2 @@
+export type {Coordinates} from './types';
+export {getEventCoordinates} from './getEventCoordinates';

packages/utilities/src/coordinates/types.ts

@@ -0,0 +1,4 @@
+export type Coordinates = {
+  x: number;
+  y: number;
+};

packages/core/src/utilities/event/index.ts → packages/utilities/src/event/index.ts

@@ -1,3 +1,2 @@
-export {isTouchEvent} from './isTouchEvent';
-
 export {isMouseEvent} from './isMouseEvent';
+export {isTouchEvent} from './isTouchEvent';

packages/utilities/src/index.ts

@@ -8,7 +8,10 @@ export {
 } from './hooks';
 
 export {add, subtract} from './adjustment';
+export type {Coordinates} from './coordinates';
+export {getEventCoordinates} from './coordinates';
 export {CSS} from './css';
 export type {Transform, Transition} from './css';
+export {isMouseEvent, isTouchEvent} from './event';
 export {canUseDOM} from './execution-context';
 export type {Arguments, FirstArgument, Without} from './types';

stories/1 - Core/Draggable/1-Draggable.story.tsx

@@ -16,6 +16,7 @@ import {
   restrictToHorizontalAxis,
   restrictToVerticalAxis,
   restrictToWindowEdges,
+  snapCenterToCursor,
 } from '@dnd-kit/modifiers';
 
 import {
@@ -256,3 +257,10 @@ export const SnapToGrid = () => {
     </>
   );
 };
+
+export const SnapCenterToCursor = () => (
+  <DraggableStory
+    label="When you grab me, my center will move to where the cursor is."
+    modifiers={[snapCenterToCursor]}
+  ></DraggableStory>
+);