Local modifiers for draggable

clauderic · Aug 21, 2023 · f14a5f6 · f14a5f6
1 parent 136129b
commit f14a5f6
Show file tree

Hide file tree

Showing 11 changed files with 31 additions and 16 deletions.
diff --git a/apps/docs/stories/react/Draggable/DraggableExample.tsx b/apps/docs/stories/react/Draggable/DraggableExample.tsx
@@ -14,23 +14,25 @@ export function DraggableExample({container, modifiers}: Props) {
   const Wrapper = container ? Container : 'div';
 
   return (
-    <DragDropProvider modifiers={modifiers}>
+    <DragDropProvider>
       <Wrapper>
-        <Draggable id="draggable" />
+        <Draggable id="draggable" modifiers={modifiers} />
       </Wrapper>
     </DragDropProvider>
   );
 }
 
 interface DraggableProps {
   id: UniqueIdentifier;
+  modifiers?: Modifiers;
 }
 
-function Draggable({id}: DraggableProps) {
+function Draggable({id, modifiers}: DraggableProps) {
   const [element, setElement] = useState<Element | null>(null);
 
   const {isDragSource} = useDraggable({
     id,
+    modifiers,
     element,
   });
 

diff --git a/packages/abstract/src/core/manager/dragOperation.ts b/packages/abstract/src/core/manager/dragOperation.ts
@@ -93,7 +93,7 @@ export function DragOperationManager<
 
   const transform = computed(() => {
     const {x, y} = position.delta;
-    const {modifiers} = manager;
+    const modifiers = source?.value?.modifiers ?? manager.modifiers;
 
     let transform = {x, y};
     const initialShape = shape.initial.peek();

diff --git a/packages/abstract/src/core/modifiers/modifier.ts b/packages/abstract/src/core/modifiers/modifier.ts
@@ -15,7 +15,7 @@ export class Modifier<
   U extends ModifierOptions = ModifierOptions,
 > extends Plugin<T, U> {
   constructor(
-    protected manager: T,
+    public manager: T,
     public options?: U
   ) {
     super(manager, options);

diff --git a/packages/abstract/src/core/nodes/draggable/draggable.ts b/packages/abstract/src/core/nodes/draggable/draggable.ts
@@ -1,25 +1,38 @@
-import {derived, effect, reactive} from '@dnd-kit/state';
+import {derived, 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 {Modifier} from '../../modifiers/index.js';
 import type {Modifiers} from '../../modifiers/index.js';
+import type {DragDropManager} from '../../manager/index.js';
+import type {NodeInput, Data, Type} from '../node/index.js';
+import {descriptor} from '../../plugins/index.js';
 
 export interface Input<
   T extends Data = Data,
   U extends Draggable<T> = Draggable<T>,
 > extends NodeInput<T, U> {
   type?: Type;
+  modifiers?: Modifiers;
 }
 
 export class Draggable<T extends Data = Data> extends Node<T> {
   constructor(
-    input: Input<T>,
+    {modifiers, ...input}: Input<T>,
     public manager: DragDropManager
   ) {
     super(input, manager);
+
+    if (modifiers?.length) {
+      this.modifiers = modifiers.map((modifier) => {
+        const {plugin, options} = descriptor(modifier);
+
+        return new plugin(manager, options);
+      });
+    }
   }
 
+  public modifiers: Modifier[] | undefined;
+
   @reactive
   public type: Type | undefined;
 

diff --git a/packages/abstract/src/core/nodes/node/node.ts b/packages/abstract/src/core/nodes/node/node.ts
@@ -13,7 +13,7 @@ export interface Input<T extends Data = Data, U extends Node<T> = Node<T>> {
 export class Node<T extends Data = Data> {
   constructor(
     input: Input<T>,
-    protected manager: DragDropManager
+    public manager: DragDropManager
   ) {
     const {effects: inputEffects, id, data = null, disabled = false} = input;
 

diff --git a/packages/abstract/src/core/plugins/plugin.ts b/packages/abstract/src/core/plugins/plugin.ts
@@ -13,7 +13,7 @@ export class Plugin<
   U extends PluginOptions = PluginOptions,
 > {
   constructor(
-    protected manager: T,
+    public manager: T,
     public options?: U
   ) {}
 

diff --git a/packages/abstract/src/core/sensors/sensor.ts b/packages/abstract/src/core/sensors/sensor.ts
@@ -16,7 +16,7 @@ export abstract class Sensor<
   U extends SensorOptions = SensorOptions,
 > extends Plugin<T, U> {
   constructor(
-    protected manager: T,
+    public manager: T,
     public options?: U
   ) {
     super(manager, options);

diff --git a/packages/dom/src/core/sensors/drag/DragSensor.ts b/packages/dom/src/core/sensors/drag/DragSensor.ts
@@ -18,7 +18,7 @@ export class DragSensor extends Sensor<DragDropManager, DragSensorOptions> {
   private unbind: CleanupFunction | undefined;
 
   constructor(
-    protected manager: DragDropManager,
+    public manager: DragDropManager,
     public options: DragSensorOptions
   ) {
     super(manager);

diff --git a/packages/dom/src/core/sensors/keyboard/KeyboardSensor.ts b/packages/dom/src/core/sensors/keyboard/KeyboardSensor.ts
@@ -48,7 +48,7 @@ export class KeyboardSensor extends Sensor<
   KeyboardSensorOptions
 > {
   constructor(
-    protected manager: DragDropManager,
+    public manager: DragDropManager,
     public options?: KeyboardSensorOptions
   ) {
     super(manager);

diff --git a/packages/dom/src/core/sensors/pointer/PointerSensor.ts b/packages/dom/src/core/sensors/pointer/PointerSensor.ts
@@ -54,7 +54,7 @@ export class PointerSensor extends Sensor<
   #document: Document | undefined;
 
   constructor(
-    protected manager: DragDropManager,
+    public manager: DragDropManager,
     public options?: PointerSensorOptions
   ) {
     super(manager);

diff --git a/packages/dom/src/sortable/sortable.ts b/packages/dom/src/sortable/sortable.ts
@@ -71,7 +71,7 @@ export class Sortable<T extends Data = Data> {
       transition = defaultSortableTransition,
       ...input
     }: SortableInput<T>,
-    protected manager: AbstractDragDropManager<any, any>
+    public manager: AbstractDragDropManager<any, any>
   ) {
     this.draggable = new SortableDraggable<T>({...input, sensors}, manager);
     this.droppable = new SortableDroppable<T>(input, manager);