usePointer.tsx

export function usePointer({
  onStart,
  onMove,
  onEnd,
}: {
  onStart: () => void
  onMove: () => void
  onEnd: () => void
}) {
  const pressed = useSignal(false)
  const startX = useSignal(0)
  const startY = useSignal(0)
  const positionX = useSignal(0)
  const positionY = useSignal(0)
  const distanceX = useSignal(0)
  const distanceY = useSignal(0)

  React.useEffect(() => {
    function handlePointerMove(event: PointerEvent) {
      positionX.value = event.clientX
      positionY.value = event.clientY
      distanceX.value = startX.value - event.clientX
      distanceY.value = startY.value - event.clientY
      onMove?.()
    }

    function handlePointerEnd() {
      pressed.value = false
      onEnd?.()

      document.removeEventListener("pointermove", handlePointerMove)
      document.removeEventListener("pointerend", handlePointerEnd)
    }

    function handlePointerStart(event: PointerEvent) {
      pressed.value = true
      startX.value = event.clientX
      startY.value = event.clientY
      onStart?.()

      document.addEventListener("pointermove", handlePointerMove)
      document.addEventListener("pointerend", handlePointerEnd)
    }

    return () => {
      document.removeEventListener("pointerstart", handlePointerStart)
      document.removeEventListener("pointermove", handlePointerMove)
      document.removeEventListener("pointerend", handlePointerEnd)
    }
  }, [])

  return { positionX, positionY, distanceX, distanceY }
}