start converting weight file to class

1 files changed, 229 insertions, 232 deletions

diff --git a/src/client/views/nodes/PhysicsSimulationApp.tsx b/src/client/views/nodes/PhysicsSimulationApp.tsx
index 414d61809..2277c7875 100644
--- a/src/client/views/nodes/PhysicsSimulationApp.tsx
+++ b/src/client/views/nodes/PhysicsSimulationApp.tsx
@@ -1,8 +1,8 @@
 import React = require('react');
 import "./PhysicsSimulationBox.scss";
-import { IForce, Weight } from "./PhysicsSimulationWeight";
-import {Wall, IWallProps } from "./PhysicsSimulationWall"
-import {Wedge} from "./PhysicsSimulationWedge"
+import Weight  from "./PhysicsSimulationWeight";
+import Wall  from "./PhysicsSimulationWall"
+import Wedge from "./PhysicsSimulationWedge"
 import { props, any } from 'bluebird';
 import { render } from 'react-dom';
 
@@ -329,235 +329,232 @@ export default class App extends React.Component<{}, IState> {
 
   render () { 
     return (
-      <p>Hello world!</p>
-    // <div>
-    //   <div className="mechanicsSimulationContainer">
-    //     <div
-    //       className="mechanicsSimulationContentContainer"
-    //       onPointerMove={(e) => {
-    //         // if (sketching) {
-    //         //   x1 = positionXDisplay + 50;
-    //         //   y1 = yMax - positionYDisplay - 2 * 50 + 5 + 50;
-    //         //   x2 = e.clientX;
-    //         //   y2 = e.clientY;
-    //         //   height = Math.abs(y1 - y2) + 120;
-    //         //   width = Math.abs(x1 - x2) + 120;
-    //         //   top = Math.min(y1, y2) - 60;
-    //         //   left = Math.min(x1, x2) - 60;
-    //         //   x1Updated = x1 - left;
-    //         //   x2Updated = x2 - left;
-    //         //   y1Updated = y1 - top;
-    //         //   y2Updated = y2 - top;
-    //         //   setCurrentForceSketch({
-    //         //     top: top,
-    //         //     left: left,
-    //         //     width: width,
-    //         //     height: height,
-    //         //     x1: x1Updated,
-    //         //     y1: y1Updated,
-    //         //     x2: x2Updated,
-    //         //     y2: y2Updated,
-    //         //     weightX: positionXDisplay,
-    //         //     weightY: positionYDisplay,
-    //         //   });
-    //         // }
-    //       }}
-    //       onPointerDown={(e) => {
-    //         // if (sketching && currentForceSketch) {
-    //         //   setSketching(false);
-    //         //   sketches = forceSketches;
-    //         //   sketches.push(currentForceSketch);
-    //         //   setForceSketches(sketches);
-    //         //   setCurrentForceSketch(null);
-    //         // }
-    //       }}
-    //     >
-    //       <div className="mechanicsSimulationButtonsAndElements">
-    //         <div className="mechanicsSimulationElements">
-    //           {/* {showForces && currentForceSketch && simulationPaused && (
-    //             <div
-    //               style={{
-    //                 position: "fixed",
-    //                 top: currentForceSketch.top,
-    //                 left: currentForceSketch.left,
-    //               }}
-    //             >
-    //               <svg
-    //                 width={currentForceSketch.width + "px"}
-    //                 height={currentForceSketch.height + "px"}
-    //               >
-    //                 <defs>
-    //                   <marker
-    //                     id="sketchArrow"
-    //                     markerWidth="10"
-    //                     markerHeight="10"
-    //                     refX="0"
-    //                     refY="2"
-    //                     orient="auto"
-    //                     markerUnits="strokeWidth"
-    //                   >
-    //                     <path d="M0,0 L0,4 L6,2 z" fill={color} />
-    //                   </marker>
-    //                 </defs>
-    //                 <line
-    //                   x1={currentForceSketch.x1}
-    //                   y1={currentForceSketch.y1}
-    //                   x2={currentForceSketch.x2}
-    //                   y2={currentForceSketch.y2}
-    //                   stroke={color}
-    //                   strokeWidth="10"
-    //                   markerEnd="url(#sketchArrow)"
-    //                 />
-    //               </svg>
-    //             </div>
-    //           )} */}
-    //           {/* {showForces &&
-    //             forceSketches.length > 0 &&
-    //             simulationPaused &&
-    //             forceSketches.map((element: PhysicsVectorTemplate, index) => {
-    //               return (
-    //                 <div
-    //                   key={index}
-    //                   style={{
-    //                     position: "fixed",
-    //                     top: element.top + (positionYDisplay - element.weightY),
-    //                     left:
-    //                       element.left + (positionXDisplay - element.weightX),
-    //                   }}
-    //                 >
-    //                   <svg
-    //                     width={element.width + "px"}
-    //                     height={element.height + "px"}
-    //                   >
-    //                     <defs>
-    //                       <marker
-    //                         id="sketchArrow"
-    //                         markerWidth="10"
-    //                         markerHeight="10"
-    //                         refX="0"
-    //                         refY="2"
-    //                         orient="auto"
-    //                         markerUnits="strokeWidth"
-    //                       >
-    //                         <path d="M0,0 L0,4 L6,2 z" fill={color} />
-    //                       </marker>
-    //                     </defs>
-    //                     <line
-    //                       x1={element.x1}
-    //                       y1={element.y1}
-    //                       x2={element.x2}
-    //                       y2={element.y2}
-    //                       stroke={color}
-    //                       strokeWidth="10"
-    //                       markerEnd="url(#sketchArrow)"
-    //                       onClick={() => {
-    //                         if (deleteMode) {
-    //                           deleteForce(element);
-    //                         } else {
-    //                           editForce(element);
-    //                         }
-    //                       }}
-    //                     />
-    //                   </svg>
-    //                 </div>
-    //               );
-    //             })} */}
-    //           {weight && (
-    //             <Weight
-    //               adjustPendulumAngle={adjustPendulumAngle}
-    //               color={"red"}
-    //               displayXPosition={positionXDisplay}
-    //               displayXVelocity={velocityXDisplay}
-    //               displayYPosition={positionYDisplay}
-    //               displayYVelocity={velocityYDisplay}
-    //               elasticCollisions={elasticCollisions}
-    //               incrementTime={timer}
-    //               mass={1}
-    //               mode={mode}
-    //               noMovement={noMovement}
-    //               paused={simulationPaused}
-    //               pendulum={pendulum}
-    //               pendulumAngle={pendulumAngle}
-    //               pendulumLength={pendulumLength}
-    //               radius={50}
-    //               reset={simulationReset}
-    //               showForceMagnitudes={showForceMagnitudes}
-    //               setSketching={setSketching}
-    //               setDisplayXAcceleration={setAccelerationXDisplay}
-    //               setDisplayXPosition={setPositionXDisplay}
-    //               setDisplayXVelocity={setVelocityXDisplay}
-    //               setDisplayYAcceleration={setAccelerationYDisplay}
-    //               setDisplayYPosition={setPositionYDisplay}
-    //               setDisplayYVelocity={setVelocityYDisplay}
-    //               setPaused={setSimulationPaused}
-    //               setPendulumAngle={setPendulumAngle}
-    //               setPendulumLength={setPendulumLength}
-    //               setStartPendulumAngle={setStartPendulumAngle}
-    //               setUpdatedForces={setUpdatedForces}
-    //               showAcceleration={showAcceleration}
-    //               showForces={showForces}
-    //               showVelocity={showVelocity}
-    //               startForces={startForces}
-    //               startPosX={startPosX}
-    //               startPosY={startPosY}
-    //               timestepSize={0.002}
-    //               updateDisplay={displayChange}
-    //               updatedForces={updatedForces}
-    //               walls={wallPositions}
-    //               wedge={wedge}
-    //               wedgeHeight={wedgeHeight}
-    //               wedgeWidth={wedgeWidth}
-    //               coefficientOfKineticFriction={Number(
-    //                 coefficientOfKineticFriction
-    //               )}
-    //             />
-    //           )}
-    //           {wedge && (
-    //             <Wedge
-    //               startWidth={wedgeWidth}
-    //               startHeight={wedgeHeight}
-    //               startLeft={xMax * 0.5 - 200}
-    //             />
-    //           )}
-    //         </div>
-    //         <div>
-    //           {wallPositions.map((element, index) => {
-    //             return (
-    //               <Wall
-    //                 key={index}
-    //                 length={element.length}
-    //                 xPos={element.xPos}
-    //                 yPos={element.yPos}
-    //                 angleInDegrees={element.angleInDegrees}
-    //               />
-    //             );
-    //           })}
-    //         </div>
-    //       </div>
-    //     </div>
-    //     <div className="mechanicsSimulationEquationContainer">
-    //       <div className="mechanicsSimulationControls">
-    //        <div>
-    //           {simulationPaused && (
-    //            <button onClick={() => {
-    //             setSimulationPaused(false);
-    //           }} >START</button>
-    //           )}
-    //           {!simulationPaused && (
-    //            <button onClick={() => {
-    //             setSimulationPaused(true);
-    //           }} >PAUSE</button>
-    //           )}
-    //           {simulationPaused && (
-    //            <button onClick={() => {
-    //             setSimulationReset(!simulationReset);
-    //           }} >RESET</button>
-    //           )}
-    //           </div>
-    //       </div>
-    //     </div>
-    //   </div>
-    // </div>
+    <div>
+      <div className="mechanicsSimulationContainer">
+        <div
+          className="mechanicsSimulationContentContainer"
+          onPointerMove={(e) => {
+            // if (sketching) {
+            //   x1 = positionXDisplay + 50;
+            //   y1 = yMax - positionYDisplay - 2 * 50 + 5 + 50;
+            //   x2 = e.clientX;
+            //   y2 = e.clientY;
+            //   height = Math.abs(y1 - y2) + 120;
+            //   width = Math.abs(x1 - x2) + 120;
+            //   top = Math.min(y1, y2) - 60;
+            //   left = Math.min(x1, x2) - 60;
+            //   x1Updated = x1 - left;
+            //   x2Updated = x2 - left;
+            //   y1Updated = y1 - top;
+            //   y2Updated = y2 - top;
+            //   setCurrentForceSketch({
+            //     top: top,
+            //     left: left,
+            //     width: width,
+            //     height: height,
+            //     x1: x1Updated,
+            //     y1: y1Updated,
+            //     x2: x2Updated,
+            //     y2: y2Updated,
+            //     weightX: positionXDisplay,
+            //     weightY: positionYDisplay,
+            //   });
+            // }
+          }}
+          onPointerDown={(e) => {
+            // if (sketching && currentForceSketch) {
+            //   setSketching(false);
+            //   sketches = forceSketches;
+            //   sketches.push(currentForceSketch);
+            //   setForceSketches(sketches);
+            //   setCurrentForceSketch(null);
+            // }
+          }}
+        >
+          <div className="mechanicsSimulationButtonsAndElements">
+            <div className="mechanicsSimulationElements">
+              {/* {showForces && currentForceSketch && simulationPaused && (
+                <div
+                  style={{
+                    position: "fixed",
+                    top: currentForceSketch.top,
+                    left: currentForceSketch.left,
+                  }}
+                >
+                  <svg
+                    width={currentForceSketch.width + "px"}
+                    height={currentForceSketch.height + "px"}
+                  >
+                    <defs>
+                      <marker
+                        id="sketchArrow"
+                        markerWidth="10"
+                        markerHeight="10"
+                        refX="0"
+                        refY="2"
+                        orient="auto"
+                        markerUnits="strokeWidth"
+                      >
+                        <path d="M0,0 L0,4 L6,2 z" fill={color} />
+                      </marker>
+                    </defs>
+                    <line
+                      x1={currentForceSketch.x1}
+                      y1={currentForceSketch.y1}
+                      x2={currentForceSketch.x2}
+                      y2={currentForceSketch.y2}
+                      stroke={color}
+                      strokeWidth="10"
+                      markerEnd="url(#sketchArrow)"
+                    />
+                  </svg>
+                </div>
+              )} */}
+              {/* {showForces &&
+                forceSketches.length > 0 &&
+                simulationPaused &&
+                forceSketches.map((element: PhysicsVectorTemplate, index) => {
+                  return (
+                    <div
+                      key={index}
+                      style={{
+                        position: "fixed",
+                        top: element.top + (positionYDisplay - element.weightY),
+                        left:
+                          element.left + (positionXDisplay - element.weightX),
+                      }}
+                    >
+                      <svg
+                        width={element.width + "px"}
+                        height={element.height + "px"}
+                      >
+                        <defs>
+                          <marker
+                            id="sketchArrow"
+                            markerWidth="10"
+                            markerHeight="10"
+                            refX="0"
+                            refY="2"
+                            orient="auto"
+                            markerUnits="strokeWidth"
+                          >
+                            <path d="M0,0 L0,4 L6,2 z" fill={color} />
+                          </marker>
+                        </defs>
+                        <line
+                          x1={element.x1}
+                          y1={element.y1}
+                          x2={element.x2}
+                          y2={element.y2}
+                          stroke={color}
+                          strokeWidth="10"
+                          markerEnd="url(#sketchArrow)"
+                          onClick={() => {
+                            if (deleteMode) {
+                              deleteForce(element);
+                            } else {
+                              editForce(element);
+                            }
+                          }}
+                        />
+                      </svg>
+                    </div>
+                  );
+                })} */}
+              {/* {weight && (
+                <Weight
+                  adjustPendulumAngle={adjustPendulumAngle}
+                  color={"red"}
+                  displayXPosition={positionXDisplay}
+                  displayXVelocity={velocityXDisplay}
+                  displayYPosition={positionYDisplay}
+                  displayYVelocity={velocityYDisplay}
+                  elasticCollisions={elasticCollisions}
+                  incrementTime={timer}
+                  mass={1}
+                  paused={simulationPaused}
+                  pendulum={pendulum}
+                  pendulumAngle={pendulumAngle}
+                  pendulumLength={pendulumLength}
+                  radius={50}
+                  reset={simulationReset}
+                  showForceMagnitudes={showForceMagnitudes}
+                  setSketching={setSketching}
+                  setDisplayXAcceleration={setAccelerationXDisplay}
+                  setDisplayXPosition={setPositionXDisplay}
+                  setDisplayXVelocity={setVelocityXDisplay}
+                  setDisplayYAcceleration={setAccelerationYDisplay}
+                  setDisplayYPosition={setPositionYDisplay}
+                  setDisplayYVelocity={setVelocityYDisplay}
+                  setPaused={setSimulationPaused}
+                  setPendulumAngle={setPendulumAngle}
+                  setPendulumLength={setPendulumLength}
+                  setStartPendulumAngle={setStartPendulumAngle}
+                  setUpdatedForces={setUpdatedForces}
+                  showAcceleration={showAcceleration}
+                  showForces={showForces}
+                  showVelocity={showVelocity}
+                  startForces={startForces}
+                  startPosX={startPosX}
+                  startPosY={startPosY}
+                  timestepSize={0.002}
+                  updateDisplay={displayChange}
+                  updatedForces={updatedForces}
+                  walls={wallPositions}
+                  wedge={wedge}
+                  wedgeHeight={wedgeHeight}
+                  wedgeWidth={wedgeWidth}
+                  coefficientOfKineticFriction={Number(
+                    coefficientOfKineticFriction
+                  )}
+                />
+              )} */}
+              {this.state.wedge && (
+                <Wedge
+                  startWidth={this.state.wedgeWidth}
+                  startHeight={this.state.wedgeHeight}
+                  startLeft={this.xMax * 0.5 - 200}
+                />
+              )}
+            </div>
+            <div>
+              {this.state.wallPositions.map((element, index) => {
+                return (
+                  <Wall
+                    key={index}
+                    length={element.length}
+                    xPos={element.xPos}
+                    yPos={element.yPos}
+                    angleInDegrees={element.angleInDegrees}
+                  />
+                );
+              })}
+            </div>
+          </div>
+        </div>
+        <div className="mechanicsSimulationEquationContainer">
+          <div className="mechanicsSimulationControls">
+           <div>
+              {this.state.simulationPaused && (
+               <button onClick={() => {
+                this.setState({simulationPaused: false});
+              }} >START</button>
+              )}
+              {!this.state.simulationPaused && (
+               <button onClick={() => {
+                this.setState({simulationPaused: true});
+              }} >PAUSE</button>
+              )}
+              {this.state.simulationPaused && (
+               <button onClick={() => {
+                this.setState({simulationReset: !this.state.simulationReset});
+              }} >RESET</button>
+              )}
+              </div>
+          </div>
+        </div>
+      </div>
+    </div>
     );
   }
 }