Tldraw/packages/core/src/hooks/useBoundsEvents.tsx

88 wiersze
2.2 KiB
TypeScript

import * as React from 'react'
import { useTLContext } from './useTLContext'
export function useBoundsEvents() {
const { callbacks, inputs } = useTLContext()
const onPointerDown = React.useCallback(
(e: React.PointerEvent) => {
if (!inputs.pointerIsValid(e)) return
if (e.button === 2) {
callbacks.onRightPointBounds?.(inputs.pointerDown(e, 'bounds'), e)
return
}
if (e.button !== 0) return
e.currentTarget?.setPointerCapture(e.pointerId)
const info = inputs.pointerDown(e, 'bounds')
callbacks.onPointBounds?.(info, e)
callbacks.onPointerDown?.(info, e)
},
[callbacks, inputs]
)
const onPointerUp = React.useCallback(
(e: React.PointerEvent) => {
if (e.button !== 0) return
inputs.activePointer = undefined
if (!inputs.pointerIsValid(e)) return
const isDoubleClick = inputs.isDoubleClick()
const info = inputs.pointerUp(e, 'bounds')
if (e.currentTarget.hasPointerCapture(e.pointerId)) {
e.currentTarget?.releasePointerCapture(e.pointerId)
}
if (isDoubleClick && !(info.altKey || info.metaKey)) {
callbacks.onDoubleClickBounds?.(info, e)
}
callbacks.onReleaseBounds?.(info, e)
callbacks.onPointerUp?.(info, e)
},
[callbacks, inputs]
)
const onPointerMove = React.useCallback(
(e: React.PointerEvent) => {
if (!inputs.pointerIsValid(e)) return
if (e.currentTarget.hasPointerCapture(e.pointerId)) {
callbacks.onDragBounds?.(inputs.pointerMove(e, 'bounds'), e)
}
const info = inputs.pointerMove(e, 'bounds')
callbacks.onPointerMove?.(info, e)
},
[callbacks, inputs]
)
const onPointerEnter = React.useCallback(
(e: React.PointerEvent) => {
if (!inputs.pointerIsValid(e)) return
callbacks.onHoverBounds?.(inputs.pointerEnter(e, 'bounds'), e)
},
[callbacks, inputs]
)
const onPointerLeave = React.useCallback(
(e: React.PointerEvent) => {
if (!inputs.pointerIsValid(e)) return
callbacks.onUnhoverBounds?.(inputs.pointerEnter(e, 'bounds'), e)
},
[callbacks, inputs]
)
return {
onPointerDown,
onPointerUp,
onPointerEnter,
onPointerMove,
onPointerLeave,
}
}