start sim settings menu

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>