diff options
| -rw-r--r-- | src/client/views/nodes/PhysicsSimulationBox.scss | 16 | ||||
| -rw-r--r-- | src/client/views/nodes/PhysicsSimulationBox.tsx | 73 | ||||
| -rw-r--r-- | src/client/views/nodes/PhysicsSimulationWeight.tsx | 1 |
3 files changed, 80 insertions, 10 deletions
diff --git a/src/client/views/nodes/PhysicsSimulationBox.scss b/src/client/views/nodes/PhysicsSimulationBox.scss index cfe2ee6ca..9efe835a3 100644 --- a/src/client/views/nodes/PhysicsSimulationBox.scss +++ b/src/client/views/nodes/PhysicsSimulationBox.scss @@ -49,3 +49,19 @@ button { user-select: none; pointer-events: none; } + +.mechanicsSimulationSettingsMenu { + width: 100%; + height: 100%; + font-size: 12px; + background-color: purple; + border-radius: 2px; + border-color: black; + border-style: solid; + z-index: 20000; +} + +.mechanicsSimulationSettingsMenuRow { + display: flex; + z-index: 20000; +}
\ No newline at end of file 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> diff --git a/src/client/views/nodes/PhysicsSimulationWeight.tsx b/src/client/views/nodes/PhysicsSimulationWeight.tsx index 7c26334bf..b9fa14df0 100644 --- a/src/client/views/nodes/PhysicsSimulationWeight.tsx +++ b/src/client/views/nodes/PhysicsSimulationWeight.tsx @@ -840,7 +840,6 @@ export default class Weight extends React.Component<IWeightProps, IState> { position: "absolute", left: labelLeft + "px", top: labelTop + "px", - // zIndex: -1, lineHeight: 0.5, backgroundColor: this.labelBackgroundColor, }} |