53 lines
1.4 KiB
TypeScript
53 lines
1.4 KiB
TypeScript
import React, { RefObject, forwardRef, MouseEvent, WheelEvent } from 'react'
|
|
import { useObservable } from 'rxjs-hooks'
|
|
import { Screen } from '../classes/Screen'
|
|
import { Subject } from 'rxjs'
|
|
import { vector2 } from '../../../common/math/types/vector2'
|
|
|
|
const screen = new Screen()
|
|
|
|
export interface MouseEventInfo {
|
|
position: vector2
|
|
button: number
|
|
}
|
|
|
|
export interface FluidCanvasProps {
|
|
mouseDownOuput: Subject<MouseEventInfo>
|
|
mouseUpOutput: Subject<MouseEventInfo>
|
|
mouseMoveOutput: Subject<MouseEventInfo>
|
|
}
|
|
|
|
export const getEventInfo = (
|
|
e: MouseEvent<HTMLCanvasElement>
|
|
): MouseEventInfo => {
|
|
return {
|
|
button: e.button,
|
|
position: [e.clientX, e.clientY]
|
|
}
|
|
}
|
|
|
|
export const mouseEventHandler = (output: Subject<MouseEventInfo>) => (
|
|
e: MouseEvent<HTMLCanvasElement>
|
|
) => {
|
|
output.next(getEventInfo(e))
|
|
}
|
|
|
|
const FluidCanvas = forwardRef(
|
|
(props: FluidCanvasProps, ref: RefObject<HTMLCanvasElement>) => {
|
|
const width = useObservable(() => screen.width, 0)
|
|
const height = useObservable(() => screen.height, 0)
|
|
|
|
return (
|
|
<canvas
|
|
ref={ref}
|
|
width={width}
|
|
height={height}
|
|
onMouseDown={mouseEventHandler(props.mouseDownOuput)}
|
|
onMouseUp={mouseEventHandler(props.mouseUpOutput)}
|
|
onMouseMove={mouseEventHandler(props.mouseMoveOutput)}
|
|
/>
|
|
)
|
|
}
|
|
)
|
|
|
|
export default FluidCanvas
|