Tldraw/hooks/useShapeEvents.ts

87 wiersze
2.2 KiB
TypeScript
Czysty Zwykły widok Historia

2021-06-04 16:08:43 +00:00
import { MutableRefObject, useCallback, useRef } from 'react'
2021-05-28 14:37:23 +00:00
import state from 'state'
import inputs from 'state/inputs'
export default function useShapeEvents(
id: string,
isParent: boolean,
2021-05-28 14:37:23 +00:00
rGroup: MutableRefObject<SVGElement>
) {
const handlePointerDown = useCallback(
(e: React.PointerEvent) => {
if (isParent) return
if (!inputs.canAccept(e.pointerId)) return
2021-06-04 16:08:43 +00:00
e.stopPropagation()
2021-05-28 14:37:23 +00:00
rGroup.current.setPointerCapture(e.pointerId)
const info = inputs.pointerDown(e, id)
2021-06-10 09:49:16 +00:00
if (e.button === 0) {
if (inputs.isDoubleClick() && !(info.altKey || info.metaKey)) {
state.send('DOUBLE_POINTED_SHAPE', info)
2021-06-10 09:49:16 +00:00
}
state.send('POINTED_SHAPE', info)
2021-06-10 09:49:16 +00:00
} else {
state.send('RIGHT_POINTED', info)
2021-06-04 16:08:43 +00:00
}
2021-05-28 14:37:23 +00:00
},
[id]
)
const handlePointerUp = useCallback(
(e: React.PointerEvent) => {
if (!inputs.canAccept(e.pointerId)) return
2021-06-04 16:08:43 +00:00
e.stopPropagation()
2021-05-28 14:37:23 +00:00
rGroup.current.releasePointerCapture(e.pointerId)
state.send('STOPPED_POINTING', inputs.pointerUp(e))
},
[id]
)
const handlePointerEnter = useCallback(
(e: React.PointerEvent) => {
if (!inputs.canAccept(e.pointerId)) return
if (isParent) {
2021-06-04 16:08:43 +00:00
state.send('HOVERED_GROUP', inputs.pointerEnter(e, id))
} else {
state.send('HOVERED_SHAPE', inputs.pointerEnter(e, id))
}
2021-05-28 14:37:23 +00:00
},
[id]
)
const handlePointerMove = useCallback(
(e: React.PointerEvent) => {
if (!inputs.canAccept(e.pointerId)) return
if (isParent) {
2021-06-04 16:08:43 +00:00
state.send('MOVED_OVER_GROUP', inputs.pointerEnter(e, id))
} else {
state.send('MOVED_OVER_SHAPE', inputs.pointerEnter(e, id))
}
2021-05-28 14:37:23 +00:00
},
[id]
)
const handlePointerLeave = useCallback(
(e: React.PointerEvent) => {
if (!inputs.canAccept(e.pointerId)) return
if (isParent) {
2021-06-04 16:08:43 +00:00
state.send('UNHOVERED_GROUP', { target: id })
} else {
state.send('UNHOVERED_SHAPE', { target: id })
}
},
2021-05-28 14:37:23 +00:00
[id]
)
return {
onPointerDown: handlePointerDown,
onPointerUp: handlePointerUp,
onPointerEnter: handlePointerEnter,
onPointerMove: handlePointerMove,
onPointerLeave: handlePointerLeave,
}
}