diff options
Diffstat (limited to 'src/client/views/nodes/PhysicsSimulationBox.tsx')
| -rw-r--r-- | src/client/views/nodes/PhysicsSimulationBox.tsx | 190 |
1 files changed, 100 insertions, 90 deletions
diff --git a/src/client/views/nodes/PhysicsSimulationBox.tsx b/src/client/views/nodes/PhysicsSimulationBox.tsx index a78d899e0..e7d5e48f0 100644 --- a/src/client/views/nodes/PhysicsSimulationBox.tsx +++ b/src/client/views/nodes/PhysicsSimulationBox.tsx @@ -51,6 +51,7 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi yMax = 300; color = `rgba(0,0,0,0.5)`; radius = 0.1*this.yMax + update = true constructor(props: any) { super(props); @@ -88,7 +89,6 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi this.dataDoc.wedge = false; this.dataDoc.pendulum = false; this.addWalls(); - this.dataDoc.simulationReset = !this.dataDoc.simulationReset; }; // Set weight defaults @@ -218,11 +218,14 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi this.dataDoc.startPosX = xPos; this.dataDoc.startPosY = this.getDisplayYPos(yPos); + console.log('update start pos x') + console.log('update start pos y') this.updateForcesWithFriction( Number(this.dataDoc.coefficientOfStaticFriction), width, height ); + this.dataDoc['updateDisplay'] = !this.dataDoc['updateDisplay'] }; // Helper function to go between display and real values @@ -270,14 +273,11 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi // Add weight if (this.dataDoc.simulationType == "Inclined Plane") { - console.log('add wedge on mount') this.addWedge() } else if (this.dataDoc.simulationType == "Pendulum") { - console.log('add pendulum on mount') this.addPendulum() } else { this.dataDoc.simulationType = "Free Weight" - console.log('add weight on mount') this.addWeight() } @@ -298,97 +298,107 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi this.dataDoc.accelerationXDisplay = 0; this.dataDoc.accelerationYDisplay = 0; this.dataDoc.adjustPendulumAngle = true; - this.dataDoc.timer = 0; } - render () { - return ( - <div> - <div className="mechanicsSimulationContainer"> - <div className="mechanicsSimulationContentContainer"> - <div className="mechanicsSimulationButtonsAndElements"> - <div className="mechanicsSimulationElements"> - {this.dataDoc.weight && ( - <Weight - color={"red"} - dataDoc={this.dataDoc} - mass={1} - radius={this.radius} - timestepSize={0.002} - xMax={this.xMax} - yMax={this.yMax} - xMin={this.xMin} - yMin={this.yMin} - /> - )} - {this.dataDoc.wedge && ( - <Wedge - startWidth={this.dataDoc.wedgeWidth} - startHeight={this.dataDoc.wedgeHeight} - startLeft={this.xMax * 0.2} - xMax={this.xMax} - yMax={this.yMax} - /> - )} + componentDidUpdate() { + this.xMax = this.layoutDoc._width; + this.yMax = this.layoutDoc._height; + this.radius = 0.1*this.yMax + } + + render () { + return ( + <div> + <div className="mechanicsSimulationContainer"> + <div className="mechanicsSimulationContentContainer"> + <div className="mechanicsSimulationButtonsAndElements"> + <div className="mechanicsSimulationElements"> + {this.dataDoc.weight && ( + <Weight + adjustPendulumAnge={this.dataDoc.adjustPendulumAnge} + color={"red"} + dataDoc={this.dataDoc} + mass={1} + radius={this.radius} + simulationReset={this.dataDoc.simulationReset} + startPosX={this.dataDoc.startPosX} + startPosY={this.dataDoc.startPosY} + timestepSize={0.002} + updateDisplay={this.dataDoc.updateDisplay} + xMax={this.xMax} + xMin={this.xMin} + yMax={this.yMax} + yMin={this.yMin} + /> + )} + {this.dataDoc.wedge && ( + <Wedge + startWidth={this.dataDoc.wedgeWidth} + startHeight={this.dataDoc.wedgeHeight} + startLeft={this.xMax * 0.2} + xMax={this.xMax} + yMax={this.yMax} + /> + )} + </div> + <div> + {/* {this.dataDoc.wallPositions && ( + {this.dataDoc.wallPositions.map((element: { length: number; xPos: number; yPos: number; angleInDegrees: number; }, index: React.Key | null | undefined) => { + return ( + <div key={index}> + <Wall + length={element.length} + xPos={element.xPos} + yPos={element.yPos} + angleInDegrees={element.angleInDegrees} + /> + </div> + ); + })} + )} */} + </div> </div> + </div> + <div className="mechanicsSimulationEquationContainer"> + <div className="mechanicsSimulationControls"> <div> - {/* {this.dataDoc.wallPositions && ( - {this.dataDoc.wallPositions.map((element: { length: number; xPos: number; yPos: number; angleInDegrees: number; }, index: React.Key | null | undefined) => { - return ( - <div key={index}> - <Wall - length={element.length} - xPos={element.xPos} - yPos={element.yPos} - angleInDegrees={element.angleInDegrees} - /> - </div> - ); - })} - )} */} + {this.dataDoc.simulationPaused && ( + <button onClick={() => { + this.dataDoc.simulationPaused = false} + } >START</button> + )} + {!this.dataDoc.simulationPaused && ( + <button onClick={() => { + this.dataDoc.simulationPaused = true} + } >PAUSE</button> + )} + {this.dataDoc.simulationPaused && ( + <button onClick={() => { + this.dataDoc.simulationReset = !this.dataDoc.simulationReset} + } >RESET</button> + )} + {this.dataDoc.simulationPaused && ( <button onClick={() => { + if (!this.dataDoc.pendulum && !this.dataDoc.wedge) { + this.addWedge() + this.setToWedgeDefault() + this.dataDoc.simulationType = "Inclined Plane" + } + else if (!this.dataDoc.pendulum && this.dataDoc.wedge) { + this.setToPendulumDefault() + this.addPendulum() + this.dataDoc.simulationType = "Pendulum" + } + else { + this.setToWeightDefault() + this.addWeight() + this.dataDoc.simulationType = "Free Weight" + } + }} >TYPE</button>)} + </div> </div> </div> </div> - <div className="mechanicsSimulationEquationContainer"> - <div className="mechanicsSimulationControls"> - <div> - {this.dataDoc.simulationPaused && ( - <button onClick={() => { - this.dataDoc.simulationPaused = false} - } >START</button> - )} - {!this.dataDoc.simulationPaused && ( - <button onClick={() => { - this.dataDoc.simulationPaused = true} - } >PAUSE</button> - )} - {this.dataDoc.simulationPaused && ( - <button onClick={() => { - this.dataDoc.simulationReset = !this.dataDoc.simulationReset} - } >RESET</button> - )} - {this.dataDoc.simulationPaused && ( <button onClick={() => { - if (!this.dataDoc.pendulum && !this.dataDoc.wedge) { - this.addWedge() - this.setToWedgeDefault() - this.dataDoc.simulationType = "Inclined Plane" - } - else if (!this.dataDoc.pendulum && this.dataDoc.wedge) { - this.setToPendulumDefault() - this.addPendulum() - this.dataDoc.simulationType = "Pendulum" - } - else { - this.addWeight() - this.setToWeightDefault() - this.dataDoc.simulationType = "Free Weight" - } - }} >TYPE</button>)} - </div> - </div> - </div> </div> - </div> - ); - } -}
\ No newline at end of file + ); + } + }
\ No newline at end of file |