react-use-drag 0.1.0 → 0.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +33 -6
- package/dist/index.cjs +1 -1
- package/dist/index.cjs.map +1 -1
- package/dist/index.mjs +1 -1
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# React use drag [](https://www.npmjs.com/package/react-use-drag) 
|
|
2
2
|
|
|
3
|
-
Drag interactions made easier. Try interactive [CodeSandbox demo](https://codesandbox.io/
|
|
3
|
+
Drag interactions made easier. Try interactive [CodeSandbox demo](https://codesandbox.io/p/sandbox/react-use-drag-trjpqp?file=%2Fsrc%2FApp.js).
|
|
4
4
|
|
|
5
5
|
|
|
6
6
|
|
|
@@ -16,10 +16,37 @@ npm install react-use-drag
|
|
|
16
16
|
import { useDrag } from 'react-use-drag'
|
|
17
17
|
|
|
18
18
|
const App = () => {
|
|
19
|
-
const
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
19
|
+
const [position, setPosition] = useState({ x: 0, y: 0 })
|
|
20
|
+
const [positionOffset, setPositionOffset] = useState({ x: 0, y: 0 })
|
|
21
|
+
const onRelativePositionChange = useCallback((x, y) => {
|
|
22
|
+
setPositionOffset({ x, y })
|
|
23
|
+
}, [])
|
|
24
|
+
const onStart = useCallback(() => {
|
|
25
|
+
console.log('Dragging has started')
|
|
26
|
+
}, [])
|
|
27
|
+
const onEnd = useCallback((x, y) => {
|
|
28
|
+
setPosition((position) => ({
|
|
29
|
+
x: position.x + x,
|
|
30
|
+
y: position.y + y,
|
|
31
|
+
}))
|
|
32
|
+
setPositionOffset({ x: 0, y: 0 })
|
|
33
|
+
}, [])
|
|
34
|
+
const { elementProps, isMoving } = useDrag({
|
|
35
|
+
onRelativePositionChange,
|
|
36
|
+
onStart,
|
|
37
|
+
onEnd,
|
|
38
|
+
})
|
|
39
|
+
|
|
40
|
+
return (
|
|
41
|
+
<button
|
|
42
|
+
className="draggable"
|
|
43
|
+
style={{
|
|
44
|
+
translate: `translate(${position.x}px ${position.y}px)`,
|
|
45
|
+
}}
|
|
46
|
+
{...elementProps}
|
|
47
|
+
>
|
|
48
|
+
{isMoving ? '🚶' : '🧍'}
|
|
49
|
+
</button>
|
|
50
|
+
)
|
|
24
51
|
}
|
|
25
52
|
```
|
package/dist/index.cjs
CHANGED
|
@@ -30,7 +30,7 @@ var useDrag = function (options) {
|
|
|
30
30
|
onEnd === null || onEnd === void 0 ? void 0 : onEnd(offsetPosition.x, offsetPosition.y);
|
|
31
31
|
setOffsetPosition({ x: 0, y: 0 });
|
|
32
32
|
};
|
|
33
|
-
}, [isMoving, onEnd]);
|
|
33
|
+
}, [isMoving, onEnd, offsetPosition]);
|
|
34
34
|
var onPointerMove = react.useMemo(function () {
|
|
35
35
|
if (!isMoving) {
|
|
36
36
|
return undefined;
|
package/dist/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../src/useDrag.ts"],"sourcesContent":["import {\n\tPointerEvent,\n\tuseCallback,\n\tuseEffect,\n\tuseMemo,\n\tuseRef,\n\tuseState,\n} from 'react'\n\nexport const useDrag = (options: {\n\tonRelativePositionChange: (x: number, y: number) => void\n\tonStart?: () => void\n\tonEnd?: (x: number, y: number) => void\n}) => {\n\tconst { onRelativePositionChange, onStart, onEnd } = options\n\tconst [isMoving, setIsMoving] = useState(false)\n\tconst startPosition = useRef({ x: 0, y: 0, scrollX: 0, scrollY: 0 })\n\tconst [offsetPosition, setOffsetPosition] = useState({ x: 0, y: 0 })\n\n\tconst onPointerDown = useCallback(\n\t\t(event: PointerEvent<HTMLElement>) => {\n\t\t\tevent.preventDefault()\n\t\t\tstartPosition.current = {\n\t\t\t\tx: event.clientX,\n\t\t\t\ty: event.clientY,\n\t\t\t\tscrollX: window.scrollX, // @TODO: handle any parent scroll\n\t\t\t\tscrollY: window.scrollY, // @TODO: handle any parent scroll\n\t\t\t}\n\t\t\tevent.currentTarget.setPointerCapture(event.pointerId)\n\t\t\tsetIsMoving(true)\n\t\t\tonStart?.()\n\t\t},\n\t\t[onStart],\n\t)\n\n\tconst onPointerUp = useMemo(() => {\n\t\tif (!isMoving) {\n\t\t\treturn undefined\n\t\t}\n\t\treturn (event: PointerEvent<HTMLElement>) => {\n\t\t\tevent.preventDefault()\n\t\t\tsetIsMoving(false)\n\t\t\tevent.currentTarget.releasePointerCapture(event.pointerId)\n\t\t\tonEnd?.(offsetPosition.x, offsetPosition.y)\n\t\t\tsetOffsetPosition({ x: 0, y: 0 })\n\t\t}\n\t}, [isMoving, onEnd])\n\n\tconst onPointerMove = useMemo(() => {\n\t\tif (!isMoving) {\n\t\t\treturn undefined\n\t\t}\n\t\treturn (event: PointerEvent<HTMLElement>) => {\n\t\t\tevent.preventDefault()\n\t\t\tconst newOffsetPosition = {\n\t\t\t\tx:\n\t\t\t\t\tevent.clientX +\n\t\t\t\t\twindow.scrollX -\n\t\t\t\t\t(startPosition.current.x + startPosition.current.scrollX),\n\t\t\t\ty:\n\t\t\t\t\tevent.clientY +\n\t\t\t\t\twindow.scrollY -\n\t\t\t\t\t(startPosition.current.y + startPosition.current.scrollY),\n\t\t\t}\n\t\t\tsetOffsetPosition(newOffsetPosition)\n\t\t}\n\t}, [isMoving])\n\n\tuseEffect(() => {\n\t\tonRelativePositionChange(offsetPosition.x, offsetPosition.y)\n\t}, [offsetPosition.x, offsetPosition.y, onRelativePositionChange])\n\n\tconst elementProps = useMemo(\n\t\t() => ({\n\t\t\tonPointerDown,\n\t\t\tonPointerUp,\n\t\t\tonPointerMove,\n\t\t}),\n\t\t[onPointerDown, onPointerMove, onPointerUp],\n\t)\n\n\treturn useMemo(() => ({ isMoving, elementProps }), [isMoving, elementProps])\n}\n"],"names":["useState","useRef","useCallback","useMemo","useEffect"],"mappings":";;;;AASO,IAAM,OAAO,GAAG,UAAC,OAIvB,EAAA;AACQ,IAAA,IAAA,wBAAwB,GAAqB,OAAO,CAAA,wBAA5B,EAAE,OAAO,GAAY,OAAO,CAAA,OAAnB,EAAE,KAAK,GAAK,OAAO,MAAZ,CAAY;IACtD,IAAA,EAAA,GAA0BA,cAAQ,CAAC,KAAK,CAAC,EAAxC,QAAQ,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,WAAW,GAAA,EAAA,CAAA,CAAA,CAAmB,CAAA;IAC/C,IAAM,aAAa,GAAGC,YAAM,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,CAAA;AAC9D,IAAA,IAAA,KAAsCD,cAAQ,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAA7D,cAAc,QAAA,EAAE,iBAAiB,QAA4B,CAAA;AAEpE,IAAA,IAAM,aAAa,GAAGE,iBAAW,CAChC,UAAC,KAAgC,EAAA;QAChC,KAAK,CAAC,cAAc,EAAE,CAAA;QACtB,aAAa,CAAC,OAAO,GAAG;YACvB,CAAC,EAAE,KAAK,CAAC,OAAO;YAChB,CAAC,EAAE,KAAK,CAAC,OAAO;AAChB,YAAA,OAAO,EAAE,MAAM,CAAC,OAAO;AACvB,YAAA,OAAO,EAAE,MAAM,CAAC,OAAO;SACvB,CAAA;QACD,KAAK,CAAC,aAAa,CAAC,iBAAiB,CAAC,KAAK,CAAC,SAAS,CAAC,CAAA;QACtD,WAAW,CAAC,IAAI,CAAC,CAAA;AACjB,QAAA,OAAO,KAAP,IAAA,IAAA,OAAO,KAAP,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,OAAO,EAAI,CAAA;AACZ,KAAC,EACD,CAAC,OAAO,CAAC,CACT,CAAA;IAED,IAAM,WAAW,GAAGC,aAAO,CAAC,YAAA;QAC3B,IAAI,CAAC,QAAQ,EAAE;AACd,YAAA,OAAO,SAAS,CAAA;SAChB;AACD,QAAA,OAAO,UAAC,KAAgC,EAAA;YACvC,KAAK,CAAC,cAAc,EAAE,CAAA;YACtB,WAAW,CAAC,KAAK,CAAC,CAAA;YAClB,KAAK,CAAC,aAAa,CAAC,qBAAqB,CAAC,KAAK,CAAC,SAAS,CAAC,CAAA;AAC1D,YAAA,KAAK,KAAL,IAAA,IAAA,KAAK,KAAL,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,KAAK,CAAG,cAAc,CAAC,CAAC,EAAE,cAAc,CAAC,CAAC,CAAC,CAAA;YAC3C,iBAAiB,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAA;AAClC,SAAC,CAAA;
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../src/useDrag.ts"],"sourcesContent":["import {\n\tPointerEvent,\n\tuseCallback,\n\tuseEffect,\n\tuseMemo,\n\tuseRef,\n\tuseState,\n} from 'react'\n\nexport const useDrag = (options: {\n\tonRelativePositionChange: (x: number, y: number) => void\n\tonStart?: () => void\n\tonEnd?: (x: number, y: number) => void\n}) => {\n\tconst { onRelativePositionChange, onStart, onEnd } = options\n\tconst [isMoving, setIsMoving] = useState(false)\n\tconst startPosition = useRef({ x: 0, y: 0, scrollX: 0, scrollY: 0 })\n\tconst [offsetPosition, setOffsetPosition] = useState({ x: 0, y: 0 })\n\n\tconst onPointerDown = useCallback(\n\t\t(event: PointerEvent<HTMLElement>) => {\n\t\t\tevent.preventDefault()\n\t\t\tstartPosition.current = {\n\t\t\t\tx: event.clientX,\n\t\t\t\ty: event.clientY,\n\t\t\t\tscrollX: window.scrollX, // @TODO: handle any parent scroll\n\t\t\t\tscrollY: window.scrollY, // @TODO: handle any parent scroll\n\t\t\t}\n\t\t\tevent.currentTarget.setPointerCapture(event.pointerId)\n\t\t\tsetIsMoving(true)\n\t\t\tonStart?.()\n\t\t},\n\t\t[onStart],\n\t)\n\n\tconst onPointerUp = useMemo(() => {\n\t\tif (!isMoving) {\n\t\t\treturn undefined\n\t\t}\n\t\treturn (event: PointerEvent<HTMLElement>) => {\n\t\t\tevent.preventDefault()\n\t\t\tsetIsMoving(false)\n\t\t\tevent.currentTarget.releasePointerCapture(event.pointerId)\n\t\t\tonEnd?.(offsetPosition.x, offsetPosition.y)\n\t\t\tsetOffsetPosition({ x: 0, y: 0 })\n\t\t}\n\t}, [isMoving, onEnd, offsetPosition])\n\n\tconst onPointerMove = useMemo(() => {\n\t\tif (!isMoving) {\n\t\t\treturn undefined\n\t\t}\n\t\treturn (event: PointerEvent<HTMLElement>) => {\n\t\t\tevent.preventDefault()\n\t\t\tconst newOffsetPosition = {\n\t\t\t\tx:\n\t\t\t\t\tevent.clientX +\n\t\t\t\t\twindow.scrollX -\n\t\t\t\t\t(startPosition.current.x + startPosition.current.scrollX),\n\t\t\t\ty:\n\t\t\t\t\tevent.clientY +\n\t\t\t\t\twindow.scrollY -\n\t\t\t\t\t(startPosition.current.y + startPosition.current.scrollY),\n\t\t\t}\n\t\t\tsetOffsetPosition(newOffsetPosition)\n\t\t}\n\t}, [isMoving])\n\n\tuseEffect(() => {\n\t\tonRelativePositionChange(offsetPosition.x, offsetPosition.y)\n\t}, [offsetPosition.x, offsetPosition.y, onRelativePositionChange])\n\n\tconst elementProps = useMemo(\n\t\t() => ({\n\t\t\tonPointerDown,\n\t\t\tonPointerUp,\n\t\t\tonPointerMove,\n\t\t}),\n\t\t[onPointerDown, onPointerMove, onPointerUp],\n\t)\n\n\treturn useMemo(() => ({ isMoving, elementProps }), [isMoving, elementProps])\n}\n"],"names":["useState","useRef","useCallback","useMemo","useEffect"],"mappings":"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"}
|
package/dist/index.mjs
CHANGED
|
@@ -28,7 +28,7 @@ var useDrag = function (options) {
|
|
|
28
28
|
onEnd === null || onEnd === void 0 ? void 0 : onEnd(offsetPosition.x, offsetPosition.y);
|
|
29
29
|
setOffsetPosition({ x: 0, y: 0 });
|
|
30
30
|
};
|
|
31
|
-
}, [isMoving, onEnd]);
|
|
31
|
+
}, [isMoving, onEnd, offsetPosition]);
|
|
32
32
|
var onPointerMove = useMemo(function () {
|
|
33
33
|
if (!isMoving) {
|
|
34
34
|
return undefined;
|
package/dist/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":["../src/useDrag.ts"],"sourcesContent":["import {\n\tPointerEvent,\n\tuseCallback,\n\tuseEffect,\n\tuseMemo,\n\tuseRef,\n\tuseState,\n} from 'react'\n\nexport const useDrag = (options: {\n\tonRelativePositionChange: (x: number, y: number) => void\n\tonStart?: () => void\n\tonEnd?: (x: number, y: number) => void\n}) => {\n\tconst { onRelativePositionChange, onStart, onEnd } = options\n\tconst [isMoving, setIsMoving] = useState(false)\n\tconst startPosition = useRef({ x: 0, y: 0, scrollX: 0, scrollY: 0 })\n\tconst [offsetPosition, setOffsetPosition] = useState({ x: 0, y: 0 })\n\n\tconst onPointerDown = useCallback(\n\t\t(event: PointerEvent<HTMLElement>) => {\n\t\t\tevent.preventDefault()\n\t\t\tstartPosition.current = {\n\t\t\t\tx: event.clientX,\n\t\t\t\ty: event.clientY,\n\t\t\t\tscrollX: window.scrollX, // @TODO: handle any parent scroll\n\t\t\t\tscrollY: window.scrollY, // @TODO: handle any parent scroll\n\t\t\t}\n\t\t\tevent.currentTarget.setPointerCapture(event.pointerId)\n\t\t\tsetIsMoving(true)\n\t\t\tonStart?.()\n\t\t},\n\t\t[onStart],\n\t)\n\n\tconst onPointerUp = useMemo(() => {\n\t\tif (!isMoving) {\n\t\t\treturn undefined\n\t\t}\n\t\treturn (event: PointerEvent<HTMLElement>) => {\n\t\t\tevent.preventDefault()\n\t\t\tsetIsMoving(false)\n\t\t\tevent.currentTarget.releasePointerCapture(event.pointerId)\n\t\t\tonEnd?.(offsetPosition.x, offsetPosition.y)\n\t\t\tsetOffsetPosition({ x: 0, y: 0 })\n\t\t}\n\t}, [isMoving, onEnd])\n\n\tconst onPointerMove = useMemo(() => {\n\t\tif (!isMoving) {\n\t\t\treturn undefined\n\t\t}\n\t\treturn (event: PointerEvent<HTMLElement>) => {\n\t\t\tevent.preventDefault()\n\t\t\tconst newOffsetPosition = {\n\t\t\t\tx:\n\t\t\t\t\tevent.clientX +\n\t\t\t\t\twindow.scrollX -\n\t\t\t\t\t(startPosition.current.x + startPosition.current.scrollX),\n\t\t\t\ty:\n\t\t\t\t\tevent.clientY +\n\t\t\t\t\twindow.scrollY -\n\t\t\t\t\t(startPosition.current.y + startPosition.current.scrollY),\n\t\t\t}\n\t\t\tsetOffsetPosition(newOffsetPosition)\n\t\t}\n\t}, [isMoving])\n\n\tuseEffect(() => {\n\t\tonRelativePositionChange(offsetPosition.x, offsetPosition.y)\n\t}, [offsetPosition.x, offsetPosition.y, onRelativePositionChange])\n\n\tconst elementProps = useMemo(\n\t\t() => ({\n\t\t\tonPointerDown,\n\t\t\tonPointerUp,\n\t\t\tonPointerMove,\n\t\t}),\n\t\t[onPointerDown, onPointerMove, onPointerUp],\n\t)\n\n\treturn useMemo(() => ({ isMoving, elementProps }), [isMoving, elementProps])\n}\n"],"names":[],"mappings":";;AASO,IAAM,OAAO,GAAG,UAAC,OAIvB,EAAA;AACQ,IAAA,IAAA,wBAAwB,GAAqB,OAAO,CAAA,wBAA5B,EAAE,OAAO,GAAY,OAAO,CAAA,OAAnB,EAAE,KAAK,GAAK,OAAO,MAAZ,CAAY;IACtD,IAAA,EAAA,GAA0B,QAAQ,CAAC,KAAK,CAAC,EAAxC,QAAQ,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,WAAW,GAAA,EAAA,CAAA,CAAA,CAAmB,CAAA;IAC/C,IAAM,aAAa,GAAG,MAAM,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,CAAA;AAC9D,IAAA,IAAA,KAAsC,QAAQ,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAA7D,cAAc,QAAA,EAAE,iBAAiB,QAA4B,CAAA;AAEpE,IAAA,IAAM,aAAa,GAAG,WAAW,CAChC,UAAC,KAAgC,EAAA;QAChC,KAAK,CAAC,cAAc,EAAE,CAAA;QACtB,aAAa,CAAC,OAAO,GAAG;YACvB,CAAC,EAAE,KAAK,CAAC,OAAO;YAChB,CAAC,EAAE,KAAK,CAAC,OAAO;AAChB,YAAA,OAAO,EAAE,MAAM,CAAC,OAAO;AACvB,YAAA,OAAO,EAAE,MAAM,CAAC,OAAO;SACvB,CAAA;QACD,KAAK,CAAC,aAAa,CAAC,iBAAiB,CAAC,KAAK,CAAC,SAAS,CAAC,CAAA;QACtD,WAAW,CAAC,IAAI,CAAC,CAAA;AACjB,QAAA,OAAO,KAAP,IAAA,IAAA,OAAO,KAAP,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,OAAO,EAAI,CAAA;AACZ,KAAC,EACD,CAAC,OAAO,CAAC,CACT,CAAA;IAED,IAAM,WAAW,GAAG,OAAO,CAAC,YAAA;QAC3B,IAAI,CAAC,QAAQ,EAAE;AACd,YAAA,OAAO,SAAS,CAAA;SAChB;AACD,QAAA,OAAO,UAAC,KAAgC,EAAA;YACvC,KAAK,CAAC,cAAc,EAAE,CAAA;YACtB,WAAW,CAAC,KAAK,CAAC,CAAA;YAClB,KAAK,CAAC,aAAa,CAAC,qBAAqB,CAAC,KAAK,CAAC,SAAS,CAAC,CAAA;AAC1D,YAAA,KAAK,KAAL,IAAA,IAAA,KAAK,KAAL,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,KAAK,CAAG,cAAc,CAAC,CAAC,EAAE,cAAc,CAAC,CAAC,CAAC,CAAA;YAC3C,iBAAiB,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAA;AAClC,SAAC,CAAA;
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":["../src/useDrag.ts"],"sourcesContent":["import {\n\tPointerEvent,\n\tuseCallback,\n\tuseEffect,\n\tuseMemo,\n\tuseRef,\n\tuseState,\n} from 'react'\n\nexport const useDrag = (options: {\n\tonRelativePositionChange: (x: number, y: number) => void\n\tonStart?: () => void\n\tonEnd?: (x: number, y: number) => void\n}) => {\n\tconst { onRelativePositionChange, onStart, onEnd } = options\n\tconst [isMoving, setIsMoving] = useState(false)\n\tconst startPosition = useRef({ x: 0, y: 0, scrollX: 0, scrollY: 0 })\n\tconst [offsetPosition, setOffsetPosition] = useState({ x: 0, y: 0 })\n\n\tconst onPointerDown = useCallback(\n\t\t(event: PointerEvent<HTMLElement>) => {\n\t\t\tevent.preventDefault()\n\t\t\tstartPosition.current = {\n\t\t\t\tx: event.clientX,\n\t\t\t\ty: event.clientY,\n\t\t\t\tscrollX: window.scrollX, // @TODO: handle any parent scroll\n\t\t\t\tscrollY: window.scrollY, // @TODO: handle any parent scroll\n\t\t\t}\n\t\t\tevent.currentTarget.setPointerCapture(event.pointerId)\n\t\t\tsetIsMoving(true)\n\t\t\tonStart?.()\n\t\t},\n\t\t[onStart],\n\t)\n\n\tconst onPointerUp = useMemo(() => {\n\t\tif (!isMoving) {\n\t\t\treturn undefined\n\t\t}\n\t\treturn (event: PointerEvent<HTMLElement>) => {\n\t\t\tevent.preventDefault()\n\t\t\tsetIsMoving(false)\n\t\t\tevent.currentTarget.releasePointerCapture(event.pointerId)\n\t\t\tonEnd?.(offsetPosition.x, offsetPosition.y)\n\t\t\tsetOffsetPosition({ x: 0, y: 0 })\n\t\t}\n\t}, [isMoving, onEnd, offsetPosition])\n\n\tconst onPointerMove = useMemo(() => {\n\t\tif (!isMoving) {\n\t\t\treturn undefined\n\t\t}\n\t\treturn (event: PointerEvent<HTMLElement>) => {\n\t\t\tevent.preventDefault()\n\t\t\tconst newOffsetPosition = {\n\t\t\t\tx:\n\t\t\t\t\tevent.clientX +\n\t\t\t\t\twindow.scrollX -\n\t\t\t\t\t(startPosition.current.x + startPosition.current.scrollX),\n\t\t\t\ty:\n\t\t\t\t\tevent.clientY +\n\t\t\t\t\twindow.scrollY -\n\t\t\t\t\t(startPosition.current.y + startPosition.current.scrollY),\n\t\t\t}\n\t\t\tsetOffsetPosition(newOffsetPosition)\n\t\t}\n\t}, [isMoving])\n\n\tuseEffect(() => {\n\t\tonRelativePositionChange(offsetPosition.x, offsetPosition.y)\n\t}, [offsetPosition.x, offsetPosition.y, onRelativePositionChange])\n\n\tconst elementProps = useMemo(\n\t\t() => ({\n\t\t\tonPointerDown,\n\t\t\tonPointerUp,\n\t\t\tonPointerMove,\n\t\t}),\n\t\t[onPointerDown, onPointerMove, onPointerUp],\n\t)\n\n\treturn useMemo(() => ({ isMoving, elementProps }), [isMoving, elementProps])\n}\n"],"names":[],"mappings":"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"}
|