You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

useShapeEvents.ts 2.0KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  1. import { MutableRefObject, useCallback, useRef } from 'react'
  2. import state from 'state'
  3. import inputs from 'state/inputs'
  4. export default function useShapeEvents(
  5. id: string,
  6. isGroup: boolean,
  7. rGroup: MutableRefObject<SVGElement>
  8. ) {
  9. const handlePointerDown = useCallback(
  10. (e: React.PointerEvent) => {
  11. if (isGroup) return
  12. if (!inputs.canAccept(e.pointerId)) return
  13. e.stopPropagation()
  14. rGroup.current.setPointerCapture(e.pointerId)
  15. if (inputs.isDoubleClick()) {
  16. state.send('DOUBLE_POINTED_SHAPE', inputs.pointerDown(e, id))
  17. }
  18. state.send('POINTED_SHAPE', inputs.pointerDown(e, id))
  19. },
  20. [id]
  21. )
  22. const handlePointerUp = useCallback(
  23. (e: React.PointerEvent) => {
  24. if (!inputs.canAccept(e.pointerId)) return
  25. e.stopPropagation()
  26. rGroup.current.releasePointerCapture(e.pointerId)
  27. state.send('STOPPED_POINTING', inputs.pointerUp(e))
  28. },
  29. [id]
  30. )
  31. const handlePointerEnter = useCallback(
  32. (e: React.PointerEvent) => {
  33. if (!inputs.canAccept(e.pointerId)) return
  34. if (isGroup) {
  35. state.send('HOVERED_GROUP', inputs.pointerEnter(e, id))
  36. } else {
  37. state.send('HOVERED_SHAPE', inputs.pointerEnter(e, id))
  38. }
  39. },
  40. [id]
  41. )
  42. const handlePointerMove = useCallback(
  43. (e: React.PointerEvent) => {
  44. if (!inputs.canAccept(e.pointerId)) return
  45. if (isGroup) {
  46. state.send('MOVED_OVER_GROUP', inputs.pointerEnter(e, id))
  47. } else {
  48. state.send('MOVED_OVER_SHAPE', inputs.pointerEnter(e, id))
  49. }
  50. },
  51. [id]
  52. )
  53. const handlePointerLeave = useCallback(
  54. (e: React.PointerEvent) => {
  55. if (!inputs.canAccept(e.pointerId)) return
  56. if (isGroup) {
  57. state.send('UNHOVERED_GROUP', { target: id })
  58. } else {
  59. state.send('UNHOVERED_SHAPE', { target: id })
  60. }
  61. },
  62. [id]
  63. )
  64. return {
  65. onPointerDown: handlePointerDown,
  66. onPointerUp: handlePointerUp,
  67. onPointerEnter: handlePointerEnter,
  68. onPointerMove: handlePointerMove,
  69. onPointerLeave: handlePointerLeave,
  70. }
  71. }