diff options
Diffstat (limited to 'src/client/views/nodes/PhysicsSimulationBox.tsx')
| -rw-r--r-- | src/client/views/nodes/PhysicsSimulationBox.tsx | 73 |
1 files changed, 64 insertions, 9 deletions
diff --git a/src/client/views/nodes/PhysicsSimulationBox.tsx b/src/client/views/nodes/PhysicsSimulationBox.tsx index 0f2bc43a0..b7f4ed0fb 100644 --- a/src/client/views/nodes/PhysicsSimulationBox.tsx +++ b/src/client/views/nodes/PhysicsSimulationBox.tsx @@ -7,8 +7,8 @@ import "./PhysicsSimulationBox.scss"; import Weight from "./PhysicsSimulationWeight"; import Wall from "./PhysicsSimulationWall" import Wedge from "./PhysicsSimulationWedge" -import { isUndefined } from "lodash"; - +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { CheckBox } from "../search/CheckBox"; export interface IForce { description: string; magnitude: number; @@ -53,6 +53,7 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi color = `rgba(0,0,0,0.5)`; radius = 0.1*this.yMax update = true + menuIsOpen = false constructor(props: any) { super(props); @@ -243,7 +244,7 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi componentDidMount() { this.xMax = this.layoutDoc._width; this.yMax = this.layoutDoc._height; - this.radius = 0.1*this.yMax + this.radius = 0.1*this.layoutDoc._height; // Add weight if (this.dataDoc.simulationType == "Inclined Plane") { @@ -303,7 +304,7 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi componentDidUpdate() { this.xMax = this.layoutDoc._width; this.yMax = this.layoutDoc._height; - this.radius = 0.1*this.yMax + this.radius = 0.1*this.layoutDoc._height; } render () { @@ -341,9 +342,8 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi /> )} </div> - <div> - {/* {this.dataDoc.wallPositions && ( - {this.dataDoc.wallPositions.map((element: { length: number; xPos: number; yPos: number; angleInDegrees: number; }, index: React.Key | null | undefined) => { + {/* <div> + {this.dataDoc.wallPositions.map((element: { length: number; xPos: number; yPos: number; angleInDegrees: number; }, index: React.Key | null | undefined) => { return ( <div key={index}> <Wall @@ -355,10 +355,64 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi </div> ); })} - )} */} - </div> + </div> */} </div> </div> + <div style = {{width: this.layoutDoc._width+'px', height: this.layoutDoc._height+'px'}}> + {this.menuIsOpen && ( + <div className="mechanicsSimulationSettingsMenu"> + <div className="close-button" onClick={() => {this.menuIsOpen = false}}> + <FontAwesomeIcon icon={'times'} color="black" size={'lg'} /> + </div> + <h4>Simulation Settings</h4> + {this.dataDoc.simulationType == "Free Weight" && + <div className="mechanicsSimulationSettingsMenuRow"> + <p>Elastic collisions </p> + <CheckBox default={false} title={""} parent={this} numCount={1} updateStatus={(val: boolean) => {this.dataDoc.elasticCollisions = val}} originalStatus={this.dataDoc.elasticCollisions} /> + </div> + } + {/* {this.dataDoc.simulationType == "Inclined Plane" && + <div className="mechanicsSimulationSettingsMenuRow"> + <p>Inclined plane angle </p> + <p>input field!</p> + </div> + } + {this.dataDoc.simulationType == "Pendulum" && + <div className="mechanicsSimulationSettingsMenuRow"> + <p>Pendulum angle </p> + <p>input field!</p> + </div> + } + <div className="mechanicsSimulationSettingsMenuRow"> + <p>Show forces </p> + <Checkbox + value={this.dataDoc.showForces} + onChange={() => + this.dataDoc.showForces = !this.dataDoc.showForces + } + /> + </div> + <div className="mechanicsSimulationSettingsMenuRow"> + <p>Show acceleration </p> + <Checkbox + value={this.dataDoc.showAcceleration} + onChange={() => + this.dataDoc.showAcceleration = !this.dataDoc.showAcceleration + } + /> + </div> + <div className="mechanicsSimulationSettingsMenuRow"> + <p>Show velocity </p> + <Checkbox + value={this.dataDoc.showVelocity} + onChange={() => + this.dataDoc.showVelocity = !this.dataDoc.showVelocity + } + /> + </div> */} + </div> + )} + </div> <div className="mechanicsSimulationEquationContainer"> <div className="mechanicsSimulationControls"> <div> @@ -395,6 +449,7 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi } this.dataDoc.simulationReset = !this.dataDoc.simulationReset }} >TYPE</button>)} + <button onClick={() => {this.menuIsOpen=true; this.dataDoc.simulationReset = !this.dataDoc.simulationReset;}}>MENU</button> </div> </div> </div> |