1 line
4.3 KiB
Plaintext
1 line
4.3 KiB
Plaintext
{"version":3,"file":"use-drag-controls.mjs","sources":["../../../../src/gestures/drag/use-drag-controls.ts"],"sourcesContent":["import * as React from \"react\"\nimport { useConstant } from \"../../utils/use-constant\"\nimport {\n DragControlOptions,\n VisualElementDragControls,\n} from \"./VisualElementDragControls\"\n\n/**\n * Can manually trigger a drag gesture on one or more `drag`-enabled `motion` components.\n *\n * ```jsx\n * const dragControls = useDragControls()\n *\n * function startDrag(event) {\n * dragControls.start(event, { snapToCursor: true })\n * }\n *\n * return (\n * <>\n * <div onPointerDown={startDrag} />\n * <motion.div drag=\"x\" dragControls={dragControls} />\n * </>\n * )\n * ```\n *\n * @public\n */\nexport class DragControls {\n private componentControls = new Set<VisualElementDragControls>()\n\n /**\n * Subscribe a component's internal `VisualElementDragControls` to the user-facing API.\n *\n * @internal\n */\n subscribe(controls: VisualElementDragControls): () => void {\n this.componentControls.add(controls)\n\n return () => this.componentControls.delete(controls)\n }\n\n /**\n * Start a drag gesture on every `motion` component that has this set of drag controls\n * passed into it via the `dragControls` prop.\n *\n * ```jsx\n * dragControls.start(e, {\n * snapToCursor: true\n * })\n * ```\n *\n * @param event - PointerEvent\n * @param options - Options\n *\n * @public\n */\n start(\n event: React.PointerEvent | PointerEvent,\n options?: DragControlOptions\n ) {\n this.componentControls.forEach((controls) => {\n controls.start(\n (event as React.PointerEvent).nativeEvent || event,\n options\n )\n })\n }\n\n /**\n * Cancels a drag gesture.\n *\n * ```jsx\n * dragControls.cancel()\n * ```\n *\n * @public\n */\n cancel() {\n this.componentControls.forEach((controls) => {\n controls.cancel()\n })\n }\n\n /**\n * Stops a drag gesture.\n *\n * ```jsx\n * dragControls.stop()\n * ```\n *\n * @public\n */\n stop() {\n this.componentControls.forEach((controls) => {\n controls.stop()\n })\n }\n}\n\nconst createDragControls = () => new DragControls()\n\n/**\n * Usually, dragging is initiated by pressing down on a `motion` component with a `drag` prop\n * and moving it. For some use-cases, for instance clicking at an arbitrary point on a video scrubber, we\n * might want to initiate that dragging from a different component than the draggable one.\n *\n * By creating a `dragControls` using the `useDragControls` hook, we can pass this into\n * the draggable component's `dragControls` prop. It exposes a `start` method\n * that can start dragging from pointer events on other components.\n *\n * ```jsx\n * const dragControls = useDragControls()\n *\n * function startDrag(event) {\n * dragControls.start(event, { snapToCursor: true })\n * }\n *\n * return (\n * <>\n * <div onPointerDown={startDrag} />\n * <motion.div drag=\"x\" dragControls={dragControls} />\n * </>\n * )\n * ```\n *\n * @public\n */\nexport function useDragControls() {\n return useConstant(createDragControls)\n}\n"],"names":[],"mappings":";;AAOA;;;;;;;;;;;;;;;;;;;AAmBG;MACU,YAAY,CAAA;AAAzB,IAAA,WAAA,GAAA;AACY,QAAA,IAAA,CAAA,iBAAiB,GAAG,IAAI,GAAG,EAA6B,CAAA;KAqEnE;AAnEG;;;;AAIG;AACH,IAAA,SAAS,CAAC,QAAmC,EAAA;AACzC,QAAA,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAA;QAEpC,OAAO,MAAM,IAAI,CAAC,iBAAiB,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAA;KACvD;AAED;;;;;;;;;;;;;;AAcG;IACH,KAAK,CACD,KAAwC,EACxC,OAA4B,EAAA;QAE5B,IAAI,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC,QAAQ,KAAI;YACxC,QAAQ,CAAC,KAAK,CACT,KAA4B,CAAC,WAAW,IAAI,KAAK,EAClD,OAAO,CACV,CAAA;AACL,SAAC,CAAC,CAAA;KACL;AAED;;;;;;;;AAQG;IACH,MAAM,GAAA;QACF,IAAI,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC,QAAQ,KAAI;YACxC,QAAQ,CAAC,MAAM,EAAE,CAAA;AACrB,SAAC,CAAC,CAAA;KACL;AAED;;;;;;;;AAQG;IACH,IAAI,GAAA;QACA,IAAI,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC,QAAQ,KAAI;YACxC,QAAQ,CAAC,IAAI,EAAE,CAAA;AACnB,SAAC,CAAC,CAAA;KACL;AACJ,CAAA;AAED,MAAM,kBAAkB,GAAG,MAAM,IAAI,YAAY,EAAE,CAAA;AAEnD;;;;;;;;;;;;;;;;;;;;;;;;;AAyBG;SACa,eAAe,GAAA;AAC3B,IAAA,OAAO,WAAW,CAAC,kBAAkB,CAAC,CAAA;AAC1C;;;;"} |