66 lines
1.9 KiB
TypeScript
66 lines
1.9 KiB
TypeScript
import React, { Component, createRef, Ref, RefObject } from 'react'
|
|
import FluidCanvas from './FluidCanvas'
|
|
import loop from 'mainloop.js'
|
|
import { Gate } from '../../simulation/classes/Gate'
|
|
import { SimulationRenderer } from '../../simulationRenderer/classes/SimulationRenderer'
|
|
import { renderSimulation } from '../../simulationRenderer/helpers/renderSimulation'
|
|
import { updateSimulation } from '../../simulationRenderer/helpers/updateSimulation'
|
|
|
|
class Canvas extends Component {
|
|
private canvasRef: RefObject<HTMLCanvasElement> = createRef()
|
|
private renderingContext: CanvasRenderingContext2D | null
|
|
private renderer = new SimulationRenderer()
|
|
|
|
public constructor(props: {}) {
|
|
super(props)
|
|
|
|
const foo = new Gate({
|
|
material: {
|
|
value: 'blue'
|
|
}
|
|
})
|
|
const bar = new Gate({
|
|
material: {
|
|
value: 'green'
|
|
}
|
|
})
|
|
|
|
foo.transform.position = [100, 100]
|
|
foo.transform.scale = [100, 100]
|
|
|
|
bar.transform.position = [400, 200]
|
|
bar.transform.scale = [100, 100]
|
|
|
|
this.renderer.simulation.push(foo, bar)
|
|
|
|
loop.setDraw(() => {
|
|
if (this.renderingContext) {
|
|
renderSimulation(this.renderingContext, this.renderer)
|
|
}
|
|
}).setUpdate(delta => updateSimulation(this.renderer, delta))
|
|
}
|
|
|
|
public componentDidMount() {
|
|
if (this.canvasRef.current)
|
|
this.renderingContext = this.canvasRef.current.getContext('2d')
|
|
|
|
loop.start()
|
|
}
|
|
|
|
public componentWillUnmount() {
|
|
loop.stop()
|
|
}
|
|
|
|
public render() {
|
|
return (
|
|
<FluidCanvas
|
|
ref={this.canvasRef}
|
|
mouseDownOuput={this.renderer.mouseDownOutput}
|
|
mouseUpOutput={this.renderer.mouseUpOutput}
|
|
mouseMoveOutput={this.renderer.mouseMoveOutput}
|
|
/>
|
|
)
|
|
}
|
|
}
|
|
|
|
export default Canvas
|