kopia lustrzana https://github.com/Tldraw/Tldraw
54 wiersze
1.3 KiB
TypeScript
54 wiersze
1.3 KiB
TypeScript
|
import { MutableRefObject, useCallback } from 'react'
|
||
|
import state from 'state'
|
||
|
import inputs from 'state/inputs'
|
||
|
|
||
|
export default function useShapeEvents(
|
||
|
id: string,
|
||
|
rGroup: MutableRefObject<SVGElement>
|
||
|
) {
|
||
|
const handlePointerDown = useCallback(
|
||
|
(e: React.PointerEvent) => {
|
||
|
e.stopPropagation()
|
||
|
rGroup.current.setPointerCapture(e.pointerId)
|
||
|
state.send('POINTED_SHAPE', inputs.pointerDown(e, id))
|
||
|
},
|
||
|
[id]
|
||
|
)
|
||
|
|
||
|
const handlePointerUp = useCallback(
|
||
|
(e: React.PointerEvent) => {
|
||
|
e.stopPropagation()
|
||
|
rGroup.current.releasePointerCapture(e.pointerId)
|
||
|
state.send('STOPPED_POINTING', inputs.pointerUp(e))
|
||
|
},
|
||
|
[id]
|
||
|
)
|
||
|
|
||
|
const handlePointerEnter = useCallback(
|
||
|
(e: React.PointerEvent) => {
|
||
|
state.send('HOVERED_SHAPE', inputs.pointerEnter(e, id))
|
||
|
},
|
||
|
[id]
|
||
|
)
|
||
|
|
||
|
const handlePointerMove = useCallback(
|
||
|
(e: React.PointerEvent) => {
|
||
|
state.send('MOVED_OVER_SHAPE', inputs.pointerEnter(e, id))
|
||
|
},
|
||
|
[id]
|
||
|
)
|
||
|
|
||
|
const handlePointerLeave = useCallback(
|
||
|
() => state.send('UNHOVERED_SHAPE', { target: id }),
|
||
|
[id]
|
||
|
)
|
||
|
|
||
|
return {
|
||
|
onPointerDown: handlePointerDown,
|
||
|
onPointerUp: handlePointerUp,
|
||
|
onPointerEnter: handlePointerEnter,
|
||
|
onPointerMove: handlePointerMove,
|
||
|
onPointerLeave: handlePointerLeave,
|
||
|
}
|
||
|
}
|