53 lines
1.3 KiB
TypeScript
53 lines
1.3 KiB
TypeScript
import React from "react"
|
|
|
|
import CanvasContext from "./CanvasContext"
|
|
|
|
export const FrameContext = React.createContext(0)
|
|
|
|
export interface SystemCanvasProps {
|
|
height: number,
|
|
width: number,
|
|
children?: JSX.Element[] | JSX.Element
|
|
}
|
|
|
|
function SystemCanvas({ height, width, children }: SystemCanvasProps) {
|
|
const canvasRef = React.useRef<HTMLCanvasElement>(null)
|
|
const [context, setContext] = React.useState<CanvasRenderingContext2D>(null)
|
|
const [frameCount, setFrameCount] = React.useState(0)
|
|
|
|
React.useEffect(() => {
|
|
if (canvasRef.current != null) {
|
|
const context = canvasRef.current.getContext("2d")
|
|
setContext(context)
|
|
}
|
|
}, [canvasRef.current])
|
|
|
|
React.useEffect(() => {
|
|
const frameId = requestAnimationFrame(() => {
|
|
setFrameCount(frameCount + 1)
|
|
})
|
|
return () => {
|
|
cancelAnimationFrame(frameId)
|
|
}
|
|
}, [frameCount])
|
|
|
|
if (context != null) {
|
|
context.save()
|
|
context.fillStyle = "black"
|
|
context.fillRect(0, 0, width, height)
|
|
context.restore()
|
|
}
|
|
|
|
return (<div>
|
|
<CanvasContext.Provider value={ context }>
|
|
<FrameContext.Provider value={ frameCount }>
|
|
<canvas width={width} height={height} ref={canvasRef} style={{ width, height }} />
|
|
{children}
|
|
</FrameContext.Provider>
|
|
</CanvasContext.Provider>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default SystemCanvas
|