89 lines
2.3 KiB
JavaScript
89 lines
2.3 KiB
JavaScript
|
import { useConstant } from '../../utils/use-constant.mjs';
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Can manually trigger a drag gesture on one or more `drag`-enabled `motion` components.
|
||
|
|
*
|
||
|
|
* ```jsx
|
||
|
|
* const dragControls = useDragControls()
|
||
|
|
*
|
||
|
|
* function startDrag(event) {
|
||
|
|
* dragControls.start(event, { snapToCursor: true })
|
||
|
|
* }
|
||
|
|
*
|
||
|
|
* return (
|
||
|
|
* <>
|
||
|
|
* <div onPointerDown={startDrag} />
|
||
|
|
* <motion.div drag="x" dragControls={dragControls} />
|
||
|
|
* </>
|
||
|
|
* )
|
||
|
|
* ```
|
||
|
|
*
|
||
|
|
* @public
|
||
|
|
*/
|
||
|
|
class DragControls {
|
||
|
|
constructor() {
|
||
|
|
this.componentControls = new Set();
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Subscribe a component's internal `VisualElementDragControls` to the user-facing API.
|
||
|
|
*
|
||
|
|
* @internal
|
||
|
|
*/
|
||
|
|
subscribe(controls) {
|
||
|
|
this.componentControls.add(controls);
|
||
|
|
return () => this.componentControls.delete(controls);
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Start a drag gesture on every `motion` component that has this set of drag controls
|
||
|
|
* passed into it via the `dragControls` prop.
|
||
|
|
*
|
||
|
|
* ```jsx
|
||
|
|
* dragControls.start(e, {
|
||
|
|
* snapToCursor: true
|
||
|
|
* })
|
||
|
|
* ```
|
||
|
|
*
|
||
|
|
* @param event - PointerEvent
|
||
|
|
* @param options - Options
|
||
|
|
*
|
||
|
|
* @public
|
||
|
|
*/
|
||
|
|
start(event, options) {
|
||
|
|
this.componentControls.forEach((controls) => {
|
||
|
|
controls.start(event.nativeEvent || event, options);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
const createDragControls = () => new DragControls();
|
||
|
|
/**
|
||
|
|
* Usually, dragging is initiated by pressing down on a `motion` component with a `drag` prop
|
||
|
|
* and moving it. For some use-cases, for instance clicking at an arbitrary point on a video scrubber, we
|
||
|
|
* might want to initiate that dragging from a different component than the draggable one.
|
||
|
|
*
|
||
|
|
* By creating a `dragControls` using the `useDragControls` hook, we can pass this into
|
||
|
|
* the draggable component's `dragControls` prop. It exposes a `start` method
|
||
|
|
* that can start dragging from pointer events on other components.
|
||
|
|
*
|
||
|
|
* ```jsx
|
||
|
|
* const dragControls = useDragControls()
|
||
|
|
*
|
||
|
|
* function startDrag(event) {
|
||
|
|
* dragControls.start(event, { snapToCursor: true })
|
||
|
|
* }
|
||
|
|
*
|
||
|
|
* return (
|
||
|
|
* <>
|
||
|
|
* <div onPointerDown={startDrag} />
|
||
|
|
* <motion.div drag="x" dragControls={dragControls} />
|
||
|
|
* </>
|
||
|
|
* )
|
||
|
|
* ```
|
||
|
|
*
|
||
|
|
* @public
|
||
|
|
*/
|
||
|
|
function useDragControls() {
|
||
|
|
return useConstant(createDragControls);
|
||
|
|
}
|
||
|
|
|
||
|
|
export { DragControls, useDragControls };
|