@os-design/use-drag 1.0.16 → 1.0.17

package/dist/cjs/index.js

@@ -120,6 +120,5 @@ var useDrag = function useDrag(props) {
     onTouchStart: touchStartHandler
   };
 };
-var _default = useDrag;
-exports["default"] = _default;
+var _default = exports["default"] = useDrag;
 //# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_useEvent","_interopRequireDefault","require","_useLongPress2","_react","obj","__esModule","userSelection","disable","document","body","style","userSelect","enable","useDrag","props","_props$minMouseDistPx","minMouseDistPx","_props$longPressMs","longPressMs","isDraggingRef","useRef","startMousePosRef","minMouseDistPxRef","handlersRef","onDragStart","onDragMove","onDragEnd","useEffect","current","dragStartHandler","useCallback","position","startPosition","dragEndHandler","onMouseDown","e","button","x","clientX","y","clientY","onMouseMove","pos","startPos","diffX","Math","abs","diffY","diff","sqrt","pow","onMouseUp","longPressHandler","touches","length","_useLongPress","useLongPress","onTouchStart","onTouchMove","onTouchEnd","touchStartHandler","touchMoveHandler","touchEndHandler","useEvent","_default","exports"],"sources":["../../src/index.ts"],"sourcesContent":["import useEvent from '@os-design/use-event';\nimport useLongPress from '@os-design/use-long-press';\nimport {\n  MouseEventHandler,\n  TouchEventHandler,\n  useCallback,\n  useEffect,\n  useRef,\n} from 'react';\n\nexport interface Position {\n  x: number;\n  y: number;\n}\n\nexport type OnDragStart = (position: Position, startPosition: Position) => void;\nexport type OnDragMove = (position: Position) => void;\nexport type OnDragEnd = () => void;\n\nexport interface UseDragProps {\n  minMouseDistPx?: number;\n  longPressMs?: number;\n  onDragStart?: OnDragStart;\n  onDragMove?: OnDragMove;\n  onDragEnd?: OnDragEnd;\n}\n\nconst userSelection = {\n  disable: () => {\n    document.body.style.userSelect = 'none';\n  },\n  enable: () => {\n    document.body.style.userSelect = '';\n  },\n};\n\nexport interface DragHandlers {\n  onMouseDown: MouseEventHandler;\n  onTouchStart: TouchEventHandler;\n}\n\nconst useDrag = (props: UseDragProps): DragHandlers => {\n  const { minMouseDistPx = 10, longPressMs = 500 } = props;\n\n  const isDraggingRef = useRef(false);\n  const startMousePosRef = useRef<Position | null>(null);\n  const minMouseDistPxRef = useRef(minMouseDistPx);\n  const handlersRef = useRef({\n    onDragStart: props.onDragStart || (() => {}),\n    onDragMove: props.onDragMove || (() => {}),\n    onDragEnd: props.onDragEnd || (() => {}),\n  });\n\n  useEffect(() => {\n    minMouseDistPxRef.current = minMouseDistPx;\n  }, [minMouseDistPx]);\n\n  useEffect(() => {\n    handlersRef.current = {\n      onDragStart: props.onDragStart || (() => {}),\n      onDragMove: props.onDragMove || (() => {}),\n      onDragEnd: props.onDragEnd || (() => {}),\n    };\n  }, [props.onDragEnd, props.onDragMove, props.onDragStart]);\n\n  const dragStartHandler = useCallback(\n    (position: Position, startPosition: Position) => {\n      const { onDragStart } = handlersRef.current;\n      onDragStart(position, startPosition);\n      isDraggingRef.current = true;\n      startMousePosRef.current = null;\n    },\n    []\n  );\n\n  const dragEndHandler = useCallback(() => {\n    const { onDragEnd } = handlersRef.current;\n    if (isDraggingRef.current) onDragEnd();\n    isDraggingRef.current = false;\n    startMousePosRef.current = null;\n    userSelection.enable();\n  }, []);\n\n  const onMouseDown = useCallback<MouseEventHandler>((e) => {\n    if (e.button !== 0) return; // Allow only the left mouse button\n    startMousePosRef.current = { x: e.clientX, y: e.clientY };\n    userSelection.disable();\n  }, []);\n\n  const onMouseMove = useCallback(\n    (e: MouseEvent) => {\n      const pos = { x: e.clientX, y: e.clientY };\n      if (isDraggingRef.current) {\n        const { onDragMove } = handlersRef.current;\n        onDragMove(pos);\n        return;\n      }\n      const startPos = startMousePosRef.current;\n      if (!startPos) return;\n      const diffX = Math.abs(pos.x - startPos.x);\n      const diffY = Math.abs(pos.y - startPos.y);\n      const diff = Math.sqrt(diffX ** 2 + diffY ** 2);\n      if (diff >= minMouseDistPxRef.current) {\n        dragStartHandler(pos, startPos);\n      }\n    },\n    [dragStartHandler]\n  );\n\n  const onMouseUp = useCallback(() => {\n    dragEndHandler();\n  }, [dragEndHandler]);\n\n  const longPressHandler = useCallback<TouchEventHandler>(\n    (e) => {\n      if (e.touches.length === 0) return;\n      const pos = { x: e.touches[0].clientX, y: e.touches[0].clientY };\n      dragStartHandler(pos, pos);\n    },\n    [dragStartHandler]\n  );\n\n  const { onTouchStart, onTouchMove, onTouchEnd } = useLongPress(\n    longPressHandler,\n    longPressMs\n  );\n\n  const touchStartHandler = useCallback<TouchEventHandler>(\n    (e) => {\n      onTouchStart(e);\n      userSelection.disable();\n    },\n    [onTouchStart]\n  );\n\n  const touchMoveHandler = useCallback(\n    (e: TouchEvent) => {\n      onTouchMove();\n      if (!isDraggingRef.current || e.touches.length === 0) return;\n      const { onDragMove } = handlersRef.current;\n      onDragMove({ x: e.touches[0].clientX, y: e.touches[0].clientY });\n    },\n    [onTouchMove]\n  );\n\n  const touchEndHandler = useCallback(() => {\n    onTouchEnd();\n    dragEndHandler();\n  }, [dragEndHandler, onTouchEnd]);\n\n  useEvent(document, 'mousemove', onMouseMove);\n  useEvent(document, 'mouseup', onMouseUp);\n  useEvent(document, 'touchmove', touchMoveHandler);\n  useEvent(document, 'touchend', touchEndHandler);\n\n  return {\n    onMouseDown,\n    onTouchStart: touchStartHandler,\n  };\n};\n\nexport default useDrag;\n"],"mappings":";;;;;;AAAA,IAAAA,SAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,cAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AAMe,SAAAD,uBAAAI,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,gBAAAA,GAAA;AAmBf,IAAME,aAAa,GAAG;EACpBC,OAAO,EAAE,SAAAA,QAAA,EAAM;IACbC,QAAQ,CAACC,IAAI,CAACC,KAAK,CAACC,UAAU,GAAG,MAAM;EACzC,CAAC;EACDC,MAAM,EAAE,SAAAA,OAAA,EAAM;IACZJ,QAAQ,CAACC,IAAI,CAACC,KAAK,CAACC,UAAU,GAAG,EAAE;EACrC;AACF,CAAC;AAOD,IAAME,OAAO,GAAG,SAAVA,OAAOA,CAAIC,KAAmB,EAAmB;EACrD,IAAAC,qBAAA,GAAmDD,KAAK,CAAhDE,cAAc;IAAdA,cAAc,GAAAD,qBAAA,cAAG,EAAE,GAAAA,qBAAA;IAAAE,kBAAA,GAAwBH,KAAK,CAA3BI,WAAW;IAAXA,WAAW,GAAAD,kBAAA,cAAG,GAAG,GAAAA,kBAAA;EAE9C,IAAME,aAAa,GAAG,IAAAC,aAAM,EAAC,KAAK,CAAC;EACnC,IAAMC,gBAAgB,GAAG,IAAAD,aAAM,EAAkB,IAAI,CAAC;EACtD,IAAME,iBAAiB,GAAG,IAAAF,aAAM,EAACJ,cAAc,CAAC;EAChD,IAAMO,WAAW,GAAG,IAAAH,aAAM,EAAC;IACzBI,WAAW,EAAEV,KAAK,CAACU,WAAW,IAAK,YAAM,CAAC,CAAE;IAC5CC,UAAU,EAAEX,KAAK,CAACW,UAAU,IAAK,YAAM,CAAC,CAAE;IAC1CC,SAAS,EAAEZ,KAAK,CAACY,SAAS,IAAK,YAAM,CAAC;EACxC,CAAC,CAAC;EAEF,IAAAC,gBAAS,EAAC,YAAM;IACdL,iBAAiB,CAACM,OAAO,GAAGZ,cAAc;EAC5C,CAAC,EAAE,CAACA,cAAc,CAAC,CAAC;EAEpB,IAAAW,gBAAS,EAAC,YAAM;IACdJ,WAAW,CAACK,OAAO,GAAG;MACpBJ,WAAW,EAAEV,KAAK,CAACU,WAAW,IAAK,YAAM,CAAC,CAAE;MAC5CC,UAAU,EAAEX,KAAK,CAACW,UAAU,IAAK,YAAM,CAAC,CAAE;MAC1CC,SAAS,EAAEZ,KAAK,CAACY,SAAS,IAAK,YAAM,CAAC;IACxC,CAAC;EACH,CAAC,EAAE,CAACZ,KAAK,CAACY,SAAS,EAAEZ,KAAK,CAACW,UAAU,EAAEX,KAAK,CAACU,WAAW,CAAC,CAAC;EAE1D,IAAMK,gBAAgB,GAAG,IAAAC,kBAAW,EAClC,UAACC,QAAkB,EAAEC,aAAuB,EAAK;IAC/C,IAAQR,WAAW,GAAKD,WAAW,CAACK,OAAO,CAAnCJ,WAAW;IACnBA,WAAW,CAACO,QAAQ,EAAEC,aAAa,CAAC;IACpCb,aAAa,CAACS,OAAO,GAAG,IAAI;IAC5BP,gBAAgB,CAACO,OAAO,GAAG,IAAI;EACjC,CAAC,EACD,EACF,CAAC;EAED,IAAMK,cAAc,GAAG,IAAAH,kBAAW,EAAC,YAAM;IACvC,IAAQJ,SAAS,GAAKH,WAAW,CAACK,OAAO,CAAjCF,SAAS;IACjB,IAAIP,aAAa,CAACS,OAAO,EAAEF,SAAS,CAAC,CAAC;IACtCP,aAAa,CAACS,OAAO,GAAG,KAAK;IAC7BP,gBAAgB,CAACO,OAAO,GAAG,IAAI;IAC/BtB,aAAa,CAACM,MAAM,CAAC,CAAC;EACxB,CAAC,EAAE,EAAE,CAAC;EAEN,IAAMsB,WAAW,GAAG,IAAAJ,kBAAW,EAAoB,UAACK,CAAC,EAAK;IACxD,IAAIA,CAAC,CAACC,MAAM,KAAK,CAAC,EAAE,OAAO,CAAC;IAC5Bf,gBAAgB,CAACO,OAAO,GAAG;MAAES,CAAC,EAAEF,CAAC,CAACG,OAAO;MAAEC,CAAC,EAAEJ,CAAC,CAACK;IAAQ,CAAC;IACzDlC,aAAa,CAACC,OAAO,CAAC,CAAC;EACzB,CAAC,EAAE,EAAE,CAAC;EAEN,IAAMkC,WAAW,GAAG,IAAAX,kBAAW,EAC7B,UAACK,CAAa,EAAK;IACjB,IAAMO,GAAG,GAAG;MAAEL,CAAC,EAAEF,CAAC,CAACG,OAAO;MAAEC,CAAC,EAAEJ,CAAC,CAACK;IAAQ,CAAC;IAC1C,IAAIrB,aAAa,CAACS,OAAO,EAAE;MACzB,IAAQH,UAAU,GAAKF,WAAW,CAACK,OAAO,CAAlCH,UAAU;MAClBA,UAAU,CAACiB,GAAG,CAAC;MACf;IACF;IACA,IAAMC,QAAQ,GAAGtB,gBAAgB,CAACO,OAAO;IACzC,IAAI,CAACe,QAAQ,EAAE;IACf,IAAMC,KAAK,GAAGC,IAAI,CAACC,GAAG,CAACJ,GAAG,CAACL,CAAC,GAAGM,QAAQ,CAACN,CAAC,CAAC;IAC1C,IAAMU,KAAK,GAAGF,IAAI,CAACC,GAAG,CAACJ,GAAG,CAACH,CAAC,GAAGI,QAAQ,CAACJ,CAAC,CAAC;IAC1C,IAAMS,IAAI,GAAGH,IAAI,CAACI,IAAI,CAACJ,IAAA,CAAAK,GAAA,CAAAN,KAAK,EAAI,CAAC,IAAAC,IAAA,CAAAK,GAAA,CAAGH,KAAK,EAAI,CAAC,EAAC;IAC/C,IAAIC,IAAI,IAAI1B,iBAAiB,CAACM,OAAO,EAAE;MACrCC,gBAAgB,CAACa,GAAG,EAAEC,QAAQ,CAAC;IACjC;EACF,CAAC,EACD,CAACd,gBAAgB,CACnB,CAAC;EAED,IAAMsB,SAAS,GAAG,IAAArB,kBAAW,EAAC,YAAM;IAClCG,cAAc,CAAC,CAAC;EAClB,CAAC,EAAE,CAACA,cAAc,CAAC,CAAC;EAEpB,IAAMmB,gBAAgB,GAAG,IAAAtB,kBAAW,EAClC,UAACK,CAAC,EAAK;IACL,IAAIA,CAAC,CAACkB,OAAO,CAACC,MAAM,KAAK,CAAC,EAAE;IAC5B,IAAMZ,GAAG,GAAG;MAAEL,CAAC,EAAEF,CAAC,CAACkB,OAAO,CAAC,CAAC,CAAC,CAACf,OAAO;MAAEC,CAAC,EAAEJ,CAAC,CAACkB,OAAO,CAAC,CAAC,CAAC,CAACb;IAAQ,CAAC;IAChEX,gBAAgB,CAACa,GAAG,EAAEA,GAAG,CAAC;EAC5B,CAAC,EACD,CAACb,gBAAgB,CACnB,CAAC;EAED,IAAA0B,aAAA,GAAkD,IAAAC,yBAAY,EAC5DJ,gBAAgB,EAChBlC,WACF,CAAC;IAHOuC,YAAY,GAAAF,aAAA,CAAZE,YAAY;IAAEC,WAAW,GAAAH,aAAA,CAAXG,WAAW;IAAEC,UAAU,GAAAJ,aAAA,CAAVI,UAAU;EAK7C,IAAMC,iBAAiB,GAAG,IAAA9B,kBAAW,EACnC,UAACK,CAAC,EAAK;IACLsB,YAAY,CAACtB,CAAC,CAAC;IACf7B,aAAa,CAACC,OAAO,CAAC,CAAC;EACzB,CAAC,EACD,CAACkD,YAAY,CACf,CAAC;EAED,IAAMI,gBAAgB,GAAG,IAAA/B,kBAAW,EAClC,UAACK,CAAa,EAAK;IACjBuB,WAAW,CAAC,CAAC;IACb,IAAI,CAACvC,aAAa,CAACS,OAAO,IAAIO,CAAC,CAACkB,OAAO,CAACC,MAAM,KAAK,CAAC,EAAE;IACtD,IAAQ7B,UAAU,GAAKF,WAAW,CAACK,OAAO,CAAlCH,UAAU;IAClBA,UAAU,CAAC;MAAEY,CAAC,EAAEF,CAAC,CAACkB,OAAO,CAAC,CAAC,CAAC,CAACf,OAAO;MAAEC,CAAC,EAAEJ,CAAC,CAACkB,OAAO,CAAC,CAAC,CAAC,CAACb;IAAQ,CAAC,CAAC;EAClE,CAAC,EACD,CAACkB,WAAW,CACd,CAAC;EAED,IAAMI,eAAe,GAAG,IAAAhC,kBAAW,EAAC,YAAM;IACxC6B,UAAU,CAAC,CAAC;IACZ1B,cAAc,CAAC,CAAC;EAClB,CAAC,EAAE,CAACA,cAAc,EAAE0B,UAAU,CAAC,CAAC;EAEhC,IAAAI,oBAAQ,EAACvD,QAAQ,EAAE,WAAW,EAAEiC,WAAW,CAAC;EAC5C,IAAAsB,oBAAQ,EAACvD,QAAQ,EAAE,SAAS,EAAE2C,SAAS,CAAC;EACxC,IAAAY,oBAAQ,EAACvD,QAAQ,EAAE,WAAW,EAAEqD,gBAAgB,CAAC;EACjD,IAAAE,oBAAQ,EAACvD,QAAQ,EAAE,UAAU,EAAEsD,eAAe,CAAC;EAE/C,OAAO;IACL5B,WAAW,EAAXA,WAAW;IACXuB,YAAY,EAAEG;EAChB,CAAC;AACH,CAAC;AAAC,IAAAI,QAAA,GAEanD,OAAO;AAAAoD,OAAA,cAAAD,QAAA"}
+{"version":3,"file":"index.js","names":["_useEvent","_interopRequireDefault","require","_useLongPress2","_react","obj","__esModule","userSelection","disable","document","body","style","userSelect","enable","useDrag","props","_props$minMouseDistPx","minMouseDistPx","_props$longPressMs","longPressMs","isDraggingRef","useRef","startMousePosRef","minMouseDistPxRef","handlersRef","onDragStart","onDragMove","onDragEnd","useEffect","current","dragStartHandler","useCallback","position","startPosition","dragEndHandler","onMouseDown","e","button","x","clientX","y","clientY","onMouseMove","pos","startPos","diffX","Math","abs","diffY","diff","sqrt","pow","onMouseUp","longPressHandler","touches","length","_useLongPress","useLongPress","onTouchStart","onTouchMove","onTouchEnd","touchStartHandler","touchMoveHandler","touchEndHandler","useEvent","_default","exports"],"sources":["../../src/index.ts"],"sourcesContent":["import useEvent from '@os-design/use-event';\nimport useLongPress from '@os-design/use-long-press';\nimport {\n  MouseEventHandler,\n  TouchEventHandler,\n  useCallback,\n  useEffect,\n  useRef,\n} from 'react';\n\nexport interface Position {\n  x: number;\n  y: number;\n}\n\nexport type OnDragStart = (position: Position, startPosition: Position) => void;\nexport type OnDragMove = (position: Position) => void;\nexport type OnDragEnd = () => void;\n\nexport interface UseDragProps {\n  minMouseDistPx?: number;\n  longPressMs?: number;\n  onDragStart?: OnDragStart;\n  onDragMove?: OnDragMove;\n  onDragEnd?: OnDragEnd;\n}\n\nconst userSelection = {\n  disable: () => {\n    document.body.style.userSelect = 'none';\n  },\n  enable: () => {\n    document.body.style.userSelect = '';\n  },\n};\n\nexport interface DragHandlers {\n  onMouseDown: MouseEventHandler;\n  onTouchStart: TouchEventHandler;\n}\n\nconst useDrag = (props: UseDragProps): DragHandlers => {\n  const { minMouseDistPx = 10, longPressMs = 500 } = props;\n\n  const isDraggingRef = useRef(false);\n  const startMousePosRef = useRef<Position | null>(null);\n  const minMouseDistPxRef = useRef(minMouseDistPx);\n  const handlersRef = useRef({\n    onDragStart: props.onDragStart || (() => {}),\n    onDragMove: props.onDragMove || (() => {}),\n    onDragEnd: props.onDragEnd || (() => {}),\n  });\n\n  useEffect(() => {\n    minMouseDistPxRef.current = minMouseDistPx;\n  }, [minMouseDistPx]);\n\n  useEffect(() => {\n    handlersRef.current = {\n      onDragStart: props.onDragStart || (() => {}),\n      onDragMove: props.onDragMove || (() => {}),\n      onDragEnd: props.onDragEnd || (() => {}),\n    };\n  }, [props.onDragEnd, props.onDragMove, props.onDragStart]);\n\n  const dragStartHandler = useCallback(\n    (position: Position, startPosition: Position) => {\n      const { onDragStart } = handlersRef.current;\n      onDragStart(position, startPosition);\n      isDraggingRef.current = true;\n      startMousePosRef.current = null;\n    },\n    []\n  );\n\n  const dragEndHandler = useCallback(() => {\n    const { onDragEnd } = handlersRef.current;\n    if (isDraggingRef.current) onDragEnd();\n    isDraggingRef.current = false;\n    startMousePosRef.current = null;\n    userSelection.enable();\n  }, []);\n\n  const onMouseDown = useCallback<MouseEventHandler>((e) => {\n    if (e.button !== 0) return; // Allow only the left mouse button\n    startMousePosRef.current = { x: e.clientX, y: e.clientY };\n    userSelection.disable();\n  }, []);\n\n  const onMouseMove = useCallback(\n    (e: MouseEvent) => {\n      const pos = { x: e.clientX, y: e.clientY };\n      if (isDraggingRef.current) {\n        const { onDragMove } = handlersRef.current;\n        onDragMove(pos);\n        return;\n      }\n      const startPos = startMousePosRef.current;\n      if (!startPos) return;\n      const diffX = Math.abs(pos.x - startPos.x);\n      const diffY = Math.abs(pos.y - startPos.y);\n      const diff = Math.sqrt(diffX ** 2 + diffY ** 2);\n      if (diff >= minMouseDistPxRef.current) {\n        dragStartHandler(pos, startPos);\n      }\n    },\n    [dragStartHandler]\n  );\n\n  const onMouseUp = useCallback(() => {\n    dragEndHandler();\n  }, [dragEndHandler]);\n\n  const longPressHandler = useCallback<TouchEventHandler>(\n    (e) => {\n      if (e.touches.length === 0) return;\n      const pos = { x: e.touches[0].clientX, y: e.touches[0].clientY };\n      dragStartHandler(pos, pos);\n    },\n    [dragStartHandler]\n  );\n\n  const { onTouchStart, onTouchMove, onTouchEnd } = useLongPress(\n    longPressHandler,\n    longPressMs\n  );\n\n  const touchStartHandler = useCallback<TouchEventHandler>(\n    (e) => {\n      onTouchStart(e);\n      userSelection.disable();\n    },\n    [onTouchStart]\n  );\n\n  const touchMoveHandler = useCallback(\n    (e: TouchEvent) => {\n      onTouchMove();\n      if (!isDraggingRef.current || e.touches.length === 0) return;\n      const { onDragMove } = handlersRef.current;\n      onDragMove({ x: e.touches[0].clientX, y: e.touches[0].clientY });\n    },\n    [onTouchMove]\n  );\n\n  const touchEndHandler = useCallback(() => {\n    onTouchEnd();\n    dragEndHandler();\n  }, [dragEndHandler, onTouchEnd]);\n\n  useEvent(document, 'mousemove', onMouseMove);\n  useEvent(document, 'mouseup', onMouseUp);\n  useEvent(document, 'touchmove', touchMoveHandler);\n  useEvent(document, 'touchend', touchEndHandler);\n\n  return {\n    onMouseDown,\n    onTouchStart: touchStartHandler,\n  };\n};\n\nexport default useDrag;\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["useEvent","useLongPress","useCallback","useEffect","useRef","userSelection","disable","document","body","style","userSelect","enable","useDrag","props","minMouseDistPx","longPressMs","isDraggingRef","startMousePosRef","minMouseDistPxRef","handlersRef","onDragStart","onDragMove","onDragEnd","current","dragStartHandler","position","startPosition","dragEndHandler","onMouseDown","e","button","x","clientX","y","clientY","onMouseMove","pos","startPos","diffX","Math","abs","diffY","diff","sqrt","onMouseUp","longPressHandler","touches","length","onTouchStart","onTouchMove","onTouchEnd","touchStartHandler","touchMoveHandler","touchEndHandler"],"sources":["../../src/index.ts"],"sourcesContent":["import useEvent from '@os-design/use-event';\nimport useLongPress from '@os-design/use-long-press';\nimport {\n  MouseEventHandler,\n  TouchEventHandler,\n  useCallback,\n  useEffect,\n  useRef,\n} from 'react';\n\nexport interface Position {\n  x: number;\n  y: number;\n}\n\nexport type OnDragStart = (position: Position, startPosition: Position) => void;\nexport type OnDragMove = (position: Position) => void;\nexport type OnDragEnd = () => void;\n\nexport interface UseDragProps {\n  minMouseDistPx?: number;\n  longPressMs?: number;\n  onDragStart?: OnDragStart;\n  onDragMove?: OnDragMove;\n  onDragEnd?: OnDragEnd;\n}\n\nconst userSelection = {\n  disable: () => {\n    document.body.style.userSelect = 'none';\n  },\n  enable: () => {\n    document.body.style.userSelect = '';\n  },\n};\n\nexport interface DragHandlers {\n  onMouseDown: MouseEventHandler;\n  onTouchStart: TouchEventHandler;\n}\n\nconst useDrag = (props: UseDragProps): DragHandlers => {\n  const { minMouseDistPx = 10, longPressMs = 500 } = props;\n\n  const isDraggingRef = useRef(false);\n  const startMousePosRef = useRef<Position | null>(null);\n  const minMouseDistPxRef = useRef(minMouseDistPx);\n  const handlersRef = useRef({\n    onDragStart: props.onDragStart || (() => {}),\n    onDragMove: props.onDragMove || (() => {}),\n    onDragEnd: props.onDragEnd || (() => {}),\n  });\n\n  useEffect(() => {\n    minMouseDistPxRef.current = minMouseDistPx;\n  }, [minMouseDistPx]);\n\n  useEffect(() => {\n    handlersRef.current = {\n      onDragStart: props.onDragStart || (() => {}),\n      onDragMove: props.onDragMove || (() => {}),\n      onDragEnd: props.onDragEnd || (() => {}),\n    };\n  }, [props.onDragEnd, props.onDragMove, props.onDragStart]);\n\n  const dragStartHandler = useCallback(\n    (position: Position, startPosition: Position) => {\n      const { onDragStart } = handlersRef.current;\n      onDragStart(position, startPosition);\n      isDraggingRef.current = true;\n      startMousePosRef.current = null;\n    },\n    []\n  );\n\n  const dragEndHandler = useCallback(() => {\n    const { onDragEnd } = handlersRef.current;\n    if (isDraggingRef.current) onDragEnd();\n    isDraggingRef.current = false;\n    startMousePosRef.current = null;\n    userSelection.enable();\n  }, []);\n\n  const onMouseDown = useCallback<MouseEventHandler>((e) => {\n    if (e.button !== 0) return; // Allow only the left mouse button\n    startMousePosRef.current = { x: e.clientX, y: e.clientY };\n    userSelection.disable();\n  }, []);\n\n  const onMouseMove = useCallback(\n    (e: MouseEvent) => {\n      const pos = { x: e.clientX, y: e.clientY };\n      if (isDraggingRef.current) {\n        const { onDragMove } = handlersRef.current;\n        onDragMove(pos);\n        return;\n      }\n      const startPos = startMousePosRef.current;\n      if (!startPos) return;\n      const diffX = Math.abs(pos.x - startPos.x);\n      const diffY = Math.abs(pos.y - startPos.y);\n      const diff = Math.sqrt(diffX ** 2 + diffY ** 2);\n      if (diff >= minMouseDistPxRef.current) {\n        dragStartHandler(pos, startPos);\n      }\n    },\n    [dragStartHandler]\n  );\n\n  const onMouseUp = useCallback(() => {\n    dragEndHandler();\n  }, [dragEndHandler]);\n\n  const longPressHandler = useCallback<TouchEventHandler>(\n    (e) => {\n      if (e.touches.length === 0) return;\n      const pos = { x: e.touches[0].clientX, y: e.touches[0].clientY };\n      dragStartHandler(pos, pos);\n    },\n    [dragStartHandler]\n  );\n\n  const { onTouchStart, onTouchMove, onTouchEnd } = useLongPress(\n    longPressHandler,\n    longPressMs\n  );\n\n  const touchStartHandler = useCallback<TouchEventHandler>(\n    (e) => {\n      onTouchStart(e);\n      userSelection.disable();\n    },\n    [onTouchStart]\n  );\n\n  const touchMoveHandler = useCallback(\n    (e: TouchEvent) => {\n      onTouchMove();\n      if (!isDraggingRef.current || e.touches.length === 0) return;\n      const { onDragMove } = handlersRef.current;\n      onDragMove({ x: e.touches[0].clientX, y: e.touches[0].clientY });\n    },\n    [onTouchMove]\n  );\n\n  const touchEndHandler = useCallback(() => {\n    onTouchEnd();\n    dragEndHandler();\n  }, [dragEndHandler, onTouchEnd]);\n\n  useEvent(document, 'mousemove', onMouseMove);\n  useEvent(document, 'mouseup', onMouseUp);\n  useEvent(document, 'touchmove', touchMoveHandler);\n  useEvent(document, 'touchend', touchEndHandler);\n\n  return {\n    onMouseDown,\n    onTouchStart: touchStartHandler,\n  };\n};\n\nexport default useDrag;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["useEvent","useLongPress","useCallback","useEffect","useRef","userSelection","disable","document","body","style","userSelect","enable","useDrag","props","minMouseDistPx","longPressMs","isDraggingRef","startMousePosRef","minMouseDistPxRef","handlersRef","onDragStart","onDragMove","onDragEnd","current","dragStartHandler","position","startPosition","dragEndHandler","onMouseDown","e","button","x","clientX","y","clientY","onMouseMove","pos","startPos","diffX","Math","abs","diffY","diff","sqrt","onMouseUp","longPressHandler","touches","length","onTouchStart","onTouchMove","onTouchEnd","touchStartHandler","touchMoveHandler","touchEndHandler"],"sources":["../../src/index.ts"],"sourcesContent":["import useEvent from '@os-design/use-event';\nimport useLongPress from '@os-design/use-long-press';\nimport {\n  MouseEventHandler,\n  TouchEventHandler,\n  useCallback,\n  useEffect,\n  useRef,\n} from 'react';\n\nexport interface Position {\n  x: number;\n  y: number;\n}\n\nexport type OnDragStart = (position: Position, startPosition: Position) => void;\nexport type OnDragMove = (position: Position) => void;\nexport type OnDragEnd = () => void;\n\nexport interface UseDragProps {\n  minMouseDistPx?: number;\n  longPressMs?: number;\n  onDragStart?: OnDragStart;\n  onDragMove?: OnDragMove;\n  onDragEnd?: OnDragEnd;\n}\n\nconst userSelection = {\n  disable: () => {\n    document.body.style.userSelect = 'none';\n  },\n  enable: () => {\n    document.body.style.userSelect = '';\n  },\n};\n\nexport interface DragHandlers {\n  onMouseDown: MouseEventHandler;\n  onTouchStart: TouchEventHandler;\n}\n\nconst useDrag = (props: UseDragProps): DragHandlers => {\n  const { minMouseDistPx = 10, longPressMs = 500 } = props;\n\n  const isDraggingRef = useRef(false);\n  const startMousePosRef = useRef<Position | null>(null);\n  const minMouseDistPxRef = useRef(minMouseDistPx);\n  const handlersRef = useRef({\n    onDragStart: props.onDragStart || (() => {}),\n    onDragMove: props.onDragMove || (() => {}),\n    onDragEnd: props.onDragEnd || (() => {}),\n  });\n\n  useEffect(() => {\n    minMouseDistPxRef.current = minMouseDistPx;\n  }, [minMouseDistPx]);\n\n  useEffect(() => {\n    handlersRef.current = {\n      onDragStart: props.onDragStart || (() => {}),\n      onDragMove: props.onDragMove || (() => {}),\n      onDragEnd: props.onDragEnd || (() => {}),\n    };\n  }, [props.onDragEnd, props.onDragMove, props.onDragStart]);\n\n  const dragStartHandler = useCallback(\n    (position: Position, startPosition: Position) => {\n      const { onDragStart } = handlersRef.current;\n      onDragStart(position, startPosition);\n      isDraggingRef.current = true;\n      startMousePosRef.current = null;\n    },\n    []\n  );\n\n  const dragEndHandler = useCallback(() => {\n    const { onDragEnd } = handlersRef.current;\n    if (isDraggingRef.current) onDragEnd();\n    isDraggingRef.current = false;\n    startMousePosRef.current = null;\n    userSelection.enable();\n  }, []);\n\n  const onMouseDown = useCallback<MouseEventHandler>((e) => {\n    if (e.button !== 0) return; // Allow only the left mouse button\n    startMousePosRef.current = { x: e.clientX, y: e.clientY };\n    userSelection.disable();\n  }, []);\n\n  const onMouseMove = useCallback(\n    (e: MouseEvent) => {\n      const pos = { x: e.clientX, y: e.clientY };\n      if (isDraggingRef.current) {\n        const { onDragMove } = handlersRef.current;\n        onDragMove(pos);\n        return;\n      }\n      const startPos = startMousePosRef.current;\n      if (!startPos) return;\n      const diffX = Math.abs(pos.x - startPos.x);\n      const diffY = Math.abs(pos.y - startPos.y);\n      const diff = Math.sqrt(diffX ** 2 + diffY ** 2);\n      if (diff >= minMouseDistPxRef.current) {\n        dragStartHandler(pos, startPos);\n      }\n    },\n    [dragStartHandler]\n  );\n\n  const onMouseUp = useCallback(() => {\n    dragEndHandler();\n  }, [dragEndHandler]);\n\n  const longPressHandler = useCallback<TouchEventHandler>(\n    (e) => {\n      if (e.touches.length === 0) return;\n      const pos = { x: e.touches[0].clientX, y: e.touches[0].clientY };\n      dragStartHandler(pos, pos);\n    },\n    [dragStartHandler]\n  );\n\n  const { onTouchStart, onTouchMove, onTouchEnd } = useLongPress(\n    longPressHandler,\n    longPressMs\n  );\n\n  const touchStartHandler = useCallback<TouchEventHandler>(\n    (e) => {\n      onTouchStart(e);\n      userSelection.disable();\n    },\n    [onTouchStart]\n  );\n\n  const touchMoveHandler = useCallback(\n    (e: TouchEvent) => {\n      onTouchMove();\n      if (!isDraggingRef.current || e.touches.length === 0) return;\n      const { onDragMove } = handlersRef.current;\n      onDragMove({ x: e.touches[0].clientX, y: e.touches[0].clientY });\n    },\n    [onTouchMove]\n  );\n\n  const touchEndHandler = useCallback(() => {\n    onTouchEnd();\n    dragEndHandler();\n  }, [dragEndHandler, onTouchEnd]);\n\n  useEvent(document, 'mousemove', onMouseMove);\n  useEvent(document, 'mouseup', onMouseUp);\n  useEvent(document, 'touchmove', touchMoveHandler);\n  useEvent(document, 'touchend', touchEndHandler);\n\n  return {\n    onMouseDown,\n    onTouchStart: touchStartHandler,\n  };\n};\n\nexport default useDrag;\n"],"mappings":"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","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@os-design/use-drag",
-  "version": "1.0.16",
+  "version": "1.0.17",
   "license": "UNLICENSED",
   "repository": "git@gitlab.com:os-team/libs/os-design.git",
   "main": "dist/cjs/index.js",
@@ -30,11 +30,11 @@
     "access": "public"
   },
   "dependencies": {
-    "@os-design/use-event": "^1.0.19",
-    "@os-design/use-long-press": "^1.0.16"
+    "@os-design/use-event": "^1.0.20",
+    "@os-design/use-long-press": "^1.0.17"
   },
   "peerDependencies": {
     "react": ">=18"
   },
-  "gitHead": "2605fbf8f46c78800cd4ba6dcb0dd895a893bf96"
+  "gitHead": "1f17189e344a56fd6347dd6b896d6e7ef6e7b35d"
 }

package/src/index.mdx

@@ -0,0 +1,72 @@
+import { Meta } from '@storybook/blocks';
+import UseDragExample from './index.example';
+
+<Meta title='Utils/useDrag' />
+
+# useDrag
+
+Handles the drag gesture. On touch devices, the event is triggered by a long press. Otherwise, when you click on the element and start dragging it.
+
+## Example of usage
+
+```tsx
+import React, {
+  CSSProperties,
+  useCallback,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import styled from '@emotion/styled';
+import {
+  useDrag,
+  OnDragEnd,
+  OnDragMove,
+  OnDragStart,
+  CursorPosition,
+} from '@os-design/use-drag';
+
+const RedSquare = styled.div`
+  width: 8em;
+  height: 8em;
+  background-color: hsl(0, 50%, 50%);
+  z-index: 1;
+`;
+
+const UseDragExample: React.FC = () => {
+  const ref = useRef<HTMLDivElement>(null);
+  const [position, setPosition] = useState<CursorPosition | null>(null);
+  const [offset, setOffset] = useState<CursorPosition>({ x: 0, y: 0 });
+
+  const onDragStart = useCallback<OnDragStart>((pos, startPos) => {
+    const rect = ref.current.getBoundingClientRect();
+    setOffset({
+      x: startPos.x - rect.x,
+      y: startPos.y - rect.y,
+    });
+    setPosition(pos);
+  }, []);
+
+  const onDragMove = useCallback<OnDragMove>((pos) => setPosition(pos), []);
+  const onDragEnd = useCallback<OnDragEnd>(() => setPosition(null), []);
+
+  const handlers = useDrag({ onDragStart, onDragMove, onDragEnd });
+
+  const style = useMemo<CSSProperties>(() => {
+    if (!position) return {};
+    return {
+      position: 'fixed',
+      left: position.x - offset.x,
+      top: position.y - offset.y,
+    };
+  }, [offset.x, offset.y, position]);
+
+  return <RedSquare ref={ref} {...handlers} style={style} />;
+};
+
+export default UseDragExample;
+```
+
+<UseDragExample />
+
+Try dragging the red square.