Modifier exampels

apps/docs/stories/react/Draggable/DraggableExample.tsx

@@ -1,18 +1,23 @@
-import React, {useState} from 'react';
+import React, {PropsWithChildren, useState} from 'react';
 import type {Modifiers, UniqueIdentifier} from '@dnd-kit/abstract';
 import {DragDropProvider, useDraggable} from '@dnd-kit/react';
 
 import {Button} from '../components';
 import {DraggableIcon} from '../icons';
 
 interface Props {
+  container?: boolean;
   modifiers?: Modifiers;
 }
 
-export function DraggableExample({modifiers}: Props) {
+export function DraggableExample({container, modifiers}: Props) {
+  const Wrapper = container ? Container : 'div';
+
   return (
     <DragDropProvider modifiers={modifiers}>
-      <Draggable id="draggable" />
+      <Wrapper>
+        <Draggable id="draggable" />
+      </Wrapper>
     </DragDropProvider>
   );
 }
@@ -35,3 +40,26 @@ function Draggable({id}: DraggableProps) {
     </Button>
   );
 }
+
+function Container({children}: PropsWithChildren) {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        width: '60%',
+        minWidth: 300,
+        margin: '40px 80px',
+        height: 350,
+        border: '1px solid',
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderColor: 'rgba(0,0,0,0.2)',
+        padding: 30,
+        borderRadius: 8,
+      }}
+      data-container
+    >
+      {children}
+    </div>
+  );
+}

apps/docs/stories/react/Draggable/Modifiers/Modifiers.stories.tsx

@@ -3,7 +3,7 @@ import {
   RestrictToHorizontalAxis,
   RestrictToVerticalAxis,
 } from '@dnd-kit/abstract/modifiers';
-import {RestrictToWindow} from '@dnd-kit/dom/modifiers';
+import {RestrictToElement, RestrictToWindow} from '@dnd-kit/dom/modifiers';
 
 import {DraggableExample} from '../DraggableExample';
 
@@ -35,3 +35,17 @@ export const WindowModifier: Story = {
     modifiers: [RestrictToWindow],
   },
 };
+
+export const ContainerModifier: Story = {
+  name: 'Restrict to container',
+  args: {
+    container: true,
+    modifiers: [
+      RestrictToElement.configure({
+        getElement() {
+          return document.querySelector('[data-container]');
+        },
+      }),
+    ],
+  },
+};

apps/docs/stories/react/Draggable/docs/DraggableDocs.mdx

@@ -6,9 +6,9 @@ import DraggableSource from './examples/Draggable?raw';
 import {Example as MultipleDraggableExample} from './examples/MultipleDraggable';
 import MultipleDraggableExampleSource from './examples/MultipleDraggable?raw';
 
-# Droppable
+# Draggable
 
-Create draggable elements for droppable targets.
+Make elements draggable and drop them over targets.
 
 <Preview of={BasicSetup} hero />
 

apps/docs/stories/react/Sortable/Horizontal/Horizontal.stories.tsx

@@ -54,7 +54,7 @@ export const Clone: Story = {
   },
 };
 
-export const CustomDragLayer: Story = {
+export const HorizontalAxis: Story = {
   name: 'Restrict axis',
   args: {
     ...defaultArgs,

packages/abstract/src/core/collision/observer.ts

@@ -36,7 +36,7 @@ export class CollisionObserver<
     });
   }
 
-  #forceUpdate = signal(0);
+  forceUpdateCount = signal(0);
 
   public forceUpdate(refresh = true) {
     untracked(() => {
@@ -53,7 +53,7 @@ export class CollisionObserver<
           }
         }
 
-        this.#forceUpdate.value++;
+        this.forceUpdateCount.value++;
       });
     });
   }
@@ -72,7 +72,7 @@ export class CollisionObserver<
     const type = source?.type;
     const collisions: Collision[] = [];
 
-    this.#forceUpdate.value;
+    this.forceUpdateCount.value;
 
     for (const entry of entries ?? registry.droppables) {
       if (entry.disabled) {

packages/abstract/src/core/index.ts

@@ -11,12 +11,8 @@ export type {
 export {CollisionPriority, sortCollisions} from './collision/index.js';
 export type {Collision, CollisionDetector} from './collision/index.js';
 
-export {Modifier, createModifier} from './modifiers/index.js';
-export type {
-  ApplyModifier,
-  Modifiers,
-  ModifierConstructor,
-} from './modifiers/index.js';
+export {Modifier} from './modifiers/index.js';
+export type {Modifiers, ModifierConstructor} from './modifiers/index.js';
 
 export {Draggable, Droppable} from './nodes/index.js';
 export type {

packages/abstract/src/core/manager/dragOperation.ts

@@ -94,6 +94,7 @@ export function DragOperationManager<
   const transform = computed(() => {
     const {x, y} = position.delta;
     const {modifiers} = manager;
+
     let transform = {x, y};
     const initialShape = shape.initial.peek();
     const currentShape = shape.current.peek();

packages/abstract/src/core/modifiers/index.ts

@@ -1,7 +1,6 @@
-export {Modifier, createModifier} from './modifier.js';
+export {Modifier} from './modifier.js';
 
 export type {
-  ApplyModifier,
   Modifiers,
   ModifierConstructor,
   ModifierDescriptor,

packages/abstract/src/core/modifiers/modifier.ts

@@ -2,48 +2,38 @@ import type {Coordinates} from '@dnd-kit/geometry';
 
 import {
   Plugin,
-  PluginOptions,
+  type PluginOptions,
   type PluginConstructor,
   type PluginDescriptor,
 } from '../plugins/index.js';
-
-import type {DragDropManager, DragOperation} from '../manager/index.js';
+import type {DragDropManager} from '../manager/index.js';
 
 export type ModifierOptions = PluginOptions;
 
 export class Modifier<
-  T extends DragDropManager<any, any> = DragDropManager<any, any>,
-> extends Plugin<T> {
+  T extends DragDropManager<any, any> = DragDropManager,
+  U extends ModifierOptions = ModifierOptions,
+> extends Plugin<T, U> {
   constructor(
     protected manager: T,
-    public options?: ModifierOptions
+    public options?: U
   ) {
-    super(manager);
+    super(manager, options);
   }
 
-  public apply(operation: DragOperation): Coordinates {
+  public apply(operation: T['dragOperation']): Coordinates {
     return operation.transform;
   }
 }
 
 export type ModifierConstructor<
   T extends DragDropManager<any, any> = DragDropManager<any, any>,
-> = PluginConstructor<T, Modifier<T>>;
+> = PluginConstructor<T, Modifier<T, any>>;
 
 export type ModifierDescriptor<
   T extends DragDropManager<any, any> = DragDropManager<any, any>,
-> = PluginDescriptor<T, Modifier<T>, ModifierConstructor<T>>;
+> = PluginDescriptor<T, Modifier<T, any>, ModifierConstructor<T>>;
 
 export type Modifiers<
   T extends DragDropManager<any, any> = DragDropManager<any, any>,
 > = (ModifierConstructor<T> | ModifierDescriptor<T>)[];
-
-export type ApplyModifier = (operation: DragOperation) => Coordinates;
-
-export function createModifier(apply: ApplyModifier): ModifierConstructor {
-  return class extends Modifier {
-    apply(operation: DragOperation): Coordinates {
-      return apply(operation);
-    }
-  };
-}

packages/abstract/src/core/nodes/draggable/draggable.ts

@@ -1,8 +1,9 @@
-import {derived, reactive} from '@dnd-kit/state';
+import {derived, effect, reactive} from '@dnd-kit/state';
 
 import type {DragDropManager} from '../../manager/index.js';
 import {Node} from '../node/index.js';
 import type {NodeInput, Data, Type} from '../node/index.js';
+import type {Modifiers} from '../../modifiers/index.js';
 
 export interface Input<
   T extends Data = Data,

packages/abstract/src/core/plugins/plugin.ts

@@ -10,7 +10,7 @@ import {configure} from './utilities.js';
  */
 export class Plugin<
   T extends DragDropManager<any, any> = DragDropManager<any, any>,
-  U extends PluginOptions | undefined = PluginOptions,
+  U extends PluginOptions = PluginOptions,
 > {
   constructor(
     protected manager: T,
@@ -79,5 +79,5 @@ export class Plugin<
 
 export class CorePlugin<
   T extends DragDropManager<any, any> = DragDropManager<any, any>,
-  U extends PluginOptions | undefined = PluginOptions,
+  U extends PluginOptions = PluginOptions,
 > extends Plugin<T, U> {}

packages/abstract/src/core/plugins/types.ts

@@ -6,7 +6,7 @@ export type PluginOptions = Record<string, any>;
 export interface PluginConstructor<
   T extends DragDropManager<any, any> = DragDropManager<any, any>,
   U extends Plugin<T> = Plugin<T>,
-  V extends PluginOptions | undefined = InferPluginOptions<U>,
+  V extends PluginOptions = InferPluginOptions<U>,
 > {
   new (manager: T, options?: V): U;
 }

packages/abstract/src/core/sensors/sensor.ts

@@ -13,13 +13,13 @@ export type SensorOptions = PluginOptions;
 
 export abstract class Sensor<
   T extends DragDropManager<any, any> = DragDropManager,
-  U extends SensorOptions | undefined = SensorOptions,
+  U extends SensorOptions = SensorOptions,
 > extends Plugin<T, U> {
   constructor(
     protected manager: T,
     public options?: U
   ) {
-    super(manager);
+    super(manager, options);
   }
 
   /**

packages/abstract/src/modifiers/axis.ts

@@ -1,15 +1,37 @@
-import {createModifier} from '@dnd-kit/abstract';
+import {
+  DragOperation,
+  configurator,
+  Modifier,
+  DragDropManager,
+} from '@dnd-kit/abstract';
 
-export const RestrictToVerticalAxis = createModifier(({transform}) => {
-  return {
-    ...transform,
-    x: 0,
-  };
-});
+interface Options {
+  axis: 'x' | 'y';
+  value: number;
+}
+
+export class AxisModifier extends Modifier<DragDropManager, Options> {
+  apply({transform}: DragOperation) {
+    if (!this.options) {
+      return transform;
+    }
+
+    const {axis, value} = this.options;
 
-export const RestrictToHorizontalAxis = createModifier(({transform}) => {
-  return {
-    ...transform,
-    y: 0,
-  };
+    return {
+      ...transform,
+      [axis]: value,
+    };
+  }
+
+  static configure = configurator(AxisModifier);
+}
+
+export const RestrictToVerticalAxis = AxisModifier.configure({
+  axis: 'x',
+  value: 0,
+});
+export const RestrictToHorizontalAxis = AxisModifier.configure({
+  axis: 'y',
+  value: 0,
 });

packages/abstract/src/modifiers/index.ts

@@ -1,3 +1,7 @@
-export {RestrictToHorizontalAxis, RestrictToVerticalAxis} from './axis.js';
+export {
+  AxisModifier,
+  RestrictToHorizontalAxis,
+  RestrictToVerticalAxis,
+} from './axis.js';
 
 export {restrictShapeToBoundingRectangle} from './boundingRectangle.js';

packages/dom/src/core/manager/manager.ts

@@ -17,6 +17,17 @@ import {KeyboardSensor, PointerSensor} from '../sensors/index.js';
 
 export interface Input extends DragDropManagerInput<any> {}
 
+const test: Sensors = [
+  PointerSensor.configure({
+    activationConstraints: {
+      delay: {
+        value: 200,
+        tolerance: 10,
+      },
+    },
+  }),
+];
+
 export const defaultPreset: {
   plugins: Plugins<DragDropManager>;
   sensors: Sensors<DragDropManager>;

packages/dom/src/core/plugins/feedback/Overlay.ts

@@ -121,7 +121,7 @@ export class Overlay {
       const {dragOperation} = manager;
       const {status, transform: _} = dragOperation;
 
-      if (status.initialized) {
+      if (status.dragging) {
         scheduler.schedule(updatePosition);
       }
     });