diff --git a/apps/docs/stories/react/Draggable/DraggableExample.tsx b/apps/docs/stories/react/Draggable/DraggableExample.tsx index b333364c..9792387a 100644 --- a/apps/docs/stories/react/Draggable/DraggableExample.tsx +++ b/apps/docs/stories/react/Draggable/DraggableExample.tsx @@ -14,9 +14,9 @@ export function DraggableExample({container, modifiers}: Props) { const Wrapper = container ? Container : 'div'; return ( - + - + ); @@ -24,13 +24,15 @@ export function DraggableExample({container, modifiers}: Props) { interface DraggableProps { id: UniqueIdentifier; + modifiers?: Modifiers; } -function Draggable({id}: DraggableProps) { +function Draggable({id, modifiers}: DraggableProps) { const [element, setElement] = useState(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 index 81f65829..848f462e 100644 --- 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 index dad10faa..ae915704 100644 --- 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 { 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 index 212cf7ae..daa806ff 100644 --- 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 = Draggable, > extends NodeInput { type?: Type; + modifiers?: Modifiers; } export class Draggable extends Node { constructor( - input: Input, + {modifiers, ...input}: Input, 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 index cec88dab..b4120578 100644 --- 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 = Node> { export class Node { constructor( input: Input, - 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 index 7aac8497..5d7851be 100644 --- 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 index 2913c171..99a23a7c 100644 --- 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 { 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 index ec64ec5d..f44373ca 100644 --- 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 { 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 index 7e05e776..2399c401 100644 --- 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 index f96c3fa6..fe67ba5b 100644 --- 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 index 12baf6d2..7361685a 100644 --- a/packages/dom/src/sortable/sortable.ts +++ b/packages/dom/src/sortable/sortable.ts @@ -71,7 +71,7 @@ export class Sortable { transition = defaultSortableTransition, ...input }: SortableInput, - protected manager: AbstractDragDropManager + public manager: AbstractDragDropManager ) { this.draggable = new SortableDraggable({...input, sensors}, manager); this.droppable = new SortableDroppable(input, manager);