refactor weight

1 files changed, 129 insertions, 132 deletions

diff --git a/src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx b/src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx
index 4b3daa0d8..2ae34374d 100644
--- a/src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx
+++ b/src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx
@@ -1,7 +1,7 @@
-import { Doc } from '../../../fields/Doc';
+import { Doc } from '../../../../fields/Doc';
 import React = require('react');
 import { useEffect, useState } from "react";
-import { IWallProps } from "./Wall";
+import { IWallProps } from "./PhysicsSimulationWall";
 import "./Weight.scss";
 
 export interface IForce {
@@ -890,100 +890,97 @@ export default class Weight extends React.Component<IWeightProps, IState> {
   };
 
   // Render weight, spring, rod(s), vectors
-  return (
+  render () { 
     <div style={{ zIndex: -1000 }}>
       <div
         className="weightContainer"
         onPointerDown={(e) => {
-          if (draggable) {
+          if (this.draggable) {
             e.preventDefault();
-            setPaused(true);
-            setDragging(true);
-            setClickPositionX(e.clientX);
-            setClickPositionY(e.clientY);
-          } else if (this.props.dataDoc['mode'] == "Review") {
-            setSketching(true);
-          }
+            this.props.dataDoc['paused'] = true;
+            this.setState({dragging: true});
+            this.setState({clickPositionX: e.clientX});
+            this.setState({clickPositionY: e.clientY});
+          } 
         }}
         onPointerMove={(e) => {
           e.preventDefault();
-          if (dragging) {
-            let newY = yPosition + e.clientY - clickPositionY;
-            if (newY > yMax - 2 * radius - 10) {
-              newY = yMax - 2 * radius - 10;
+          if (this.state.dragging) {
+            let newY = this.state.yPosition + e.clientY - this.state.clickPositionY;
+            if (newY > this.props.yMax - 2 * this.props.radius - 10) {
+              newY = this.props.yMax - 2 * this.props.radius - 10;
             } else if (newY < 10) {
               newY = 10;
             }
 
-            let newX = xPosition + e.clientX - clickPositionX;
-            if (newX > xMax - 2 * radius - 10) {
-              newX = xMax - 2 * radius - 10;
+            let newX = this.state.xPosition + e.clientX - this.state.clickPositionX;
+            if (newX > this.props.xMax - 2 * this.props.radius - 10) {
+              newX = this.props.xMax - 2 * this.props.radius - 10;
             } else if (newX < 10) {
               newX = 10;
             }
             if (this.props.dataDoc['simulationType'] == "Suspension") {
-              if (newX < (xMax + xMin) / 4 - radius - 15) {
-                newX = (xMax + xMin) / 4 - radius - 15;
-              } else if (newX > (3 * (xMax + xMin)) / 4 - radius / 2 - 15) {
-                newX = (3 * (xMax + xMin)) / 4 - radius / 2 - 15;
+              if (newX < (this.props.xMax + this.props.xMin) / 4 - this.props.radius - 15) {
+                newX = (this.props.xMax + this.props.xMin) / 4 - this.props.radius - 15;
+              } else if (newX > (3 * (this.props.xMax + this.props.xMin)) / 4 - this.props.radius / 2 - 15) {
+                newX = (3 * (this.props.xMax + this.props.xMin)) / 4 - this.props.radius / 2 - 15;
               }
             }
 
-            setYPosition(newY);
-            setDisplayYPosition(
-              Math.round((yMax - 2 * radius - newY + 5) * 100) / 100
-            );
+            this.setState({yPosition: newY});
+            this.props.dataDoc['positionYDisplay'] = 
+              Math.round((this.props.yMax - 2 * this.props.radius - newY + 5) * 100) / 100
             if (this.props.dataDoc['simulationType'] != "Pulley") {
-              setXPosition(newX);
-              setDisplayXPosition(newX);
+              this.setState({xPosition: newX});
+              this.props.dataDoc['positionXDisplay'] = newX
             }
             if (this.props.dataDoc['simulationType'] != "Suspension") {
               if (this.props.dataDoc['simulationType'] != "Pulley") {
-                setUpdatedStartPosX(newX);
+                this.setState({updatedStartPosX: newX});
               }
-              setUpdatedStartPosY(newY);
+              this.setState({updatedStartPosY: newY});
             }
-            setClickPositionX(e.clientX);
-            setClickPositionY(e.clientY);
-            setDisplayValues();
+            this.setState({clickPositionX: e.clientX});
+            this.setState({clickPositionY: e.clientY});
+            this.setDisplayValues();
           }
         }}
         onPointerUp={(e) => {
-          if (dragging) {
+          if (this.state.dragging) {
             e.preventDefault();
             if (
               this.props.dataDoc['simulationType'] != "Pendulum" &&
               this.props.dataDoc['simulationType'] != "Suspension"
             ) {
-              resetEverything();
+              this.resetEverything();
             }
-            setDragging(false);
-            let newY = yPosition + e.clientY - clickPositionY;
-            if (newY > yMax - 2 * radius - 10) {
-              newY = yMax - 2 * radius - 10;
+            this.setState({dragging: false});
+            let newY = this.state.yPosition + e.clientY - this.state.clickPositionY;
+            if (newY > this.props.yMax - 2 * this.props.radius - 10) {
+              newY = this.props.yMax - 2 * this.props.radius - 10;
             } else if (newY < 10) {
               newY = 10;
             }
 
-            let newX = xPosition + e.clientX - clickPositionX;
-            if (newX > xMax - 2 * radius - 10) {
-              newX = xMax - 2 * radius - 10;
+            let newX = this.state.xPosition + e.clientX - this.state.clickPositionX;
+            if (newX > this.props.xMax - 2 * this.props.radius - 10) {
+              newX = this.props.xMax - 2 * this.props.radius - 10;
             } else if (newX < 10) {
               newX = 10;
             }
             if (this.props.dataDoc['simulationType'] == "Spring") {
-              setSpringStartLength(newY);
+              this.props.dataDoc.springStartLength = newY
             }
             if (this.props.dataDoc['simulationType'] == "Suspension") {
-              let x1rod = (xMax + xMin) / 2 - radius - yMin - 200;
-              let x2rod = (xMax + xMin) / 2 + yMin + 200 + radius;
-              let deltaX1 = xPosition + radius - x1rod;
-              let deltaX2 = x2rod - (xPosition + radius);
-              let deltaY = yPosition + radius;
+              let x1rod = (this.props.xMax + this.props.xMin) / 2 - this.props.radius - this.props.yMin - 200;
+              let x2rod = (this.props.xMax + this.props.xMin) / 2 + this.props.yMin + 200 + this.props.radius;
+              let deltaX1 = this.state.xPosition + this.props.radius - x1rod;
+              let deltaX2 = x2rod - (this.state.xPosition + this.props.radius);
+              let deltaY = this.state.yPosition + this.props.radius;
               let dir1T = Math.PI - Math.atan(deltaY / deltaX1);
               let dir2T = Math.atan(deltaY / deltaX2);
               let tensionMag2 =
-                (mass * Math.abs(gravity)) /
+                (this.props.mass * Math.abs(this.props.gravity)) /
                 ((-Math.cos(dir2T) / Math.cos(dir1T)) * Math.sin(dir1T) +
                   Math.sin(dir2T));
               let tensionMag1 =
@@ -1004,7 +1001,7 @@ export default class Weight extends React.Component<IWeightProps, IState> {
               };
               const grav: IForce = {
                 description: "Gravity",
-                magnitude: mass * Math.abs(gravity),
+                magnitude: this.props.mass * Math.abs(this.props.gravity),
                 directionInDegrees: 270,
                 component: false,
               };
@@ -1013,8 +1010,8 @@ export default class Weight extends React.Component<IWeightProps, IState> {
           }
         }}
       >
-        <div className="weight" style={weightStyle}>
-          <p className="weightLabel">{mass} kg</p>
+        <div className="weight" style={this.weightStyle}>
+          <p className="weightLabel">{this.props.mass} kg</p>
         </div>
       </div>
       {this.props.dataDoc['simulationType'] == "Spring" && (
@@ -1028,7 +1025,7 @@ export default class Weight extends React.Component<IWeightProps, IState> {
             zIndex: -2,
           }}
         >
-          <svg width={xMax + "px"} height={window.innerHeight + "px"}>
+          <svg width={this.props.xMax + "px"} height={window.innerHeight + "px"}>
             {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((val) => {
               const count = 10;
               let xPos1;
@@ -1036,14 +1033,14 @@ export default class Weight extends React.Component<IWeightProps, IState> {
               let xPos2;
               let yPos2;
               if (val % 2 == 0) {
-                xPos1 = xPosition + radius - 20;
-                xPos2 = xPosition + radius + 20;
+                xPos1 = this.state.xPosition + this.props.radius - 20;
+                xPos2 = this.state.xPosition + this.props.radius + 20;
               } else {
-                xPos1 = xPosition + radius + 20;
-                xPos2 = xPosition + radius - 20;
+                xPos1 = this.state.xPosition + this.props.radius + 20;
+                xPos2 = this.state.xPosition + this.props.radius - 20;
               }
-              yPos1 = (val * yPosition) / count;
-              yPos2 = ((val + 1) * yPosition) / count;
+              yPos1 = (val * this.state.yPosition) / count;
+              yPos2 = ((val + 1) * this.state.yPosition) / count;
               return (
                 <line
                   key={val}
@@ -1070,11 +1067,11 @@ export default class Weight extends React.Component<IWeightProps, IState> {
             zIndex: -1,
           }}
         >
-          <svg width={xMax + "px"} height={window.innerHeight + "px"}>
+          <svg width={this.props.xMax + "px"} height={window.innerHeight + "px"}>
             <circle
-              cx={(xMax + xMin) / 2}
-              cy={radius}
-              r={radius * 1.5}
+              cx={(this.props.xMax + this.props.xMin) / 2}
+              cy={this.props.radius}
+              r={this.props.radius * 1.5}
               fill={"#808080"}
             />
           </svg>
@@ -1091,12 +1088,12 @@ export default class Weight extends React.Component<IWeightProps, IState> {
             zIndex: -2,
           }}
         >
-          <svg width={xMax + "px"} height={window.innerHeight + "px"}>
+          <svg width={this.props.xMax + "px"} height={window.innerHeight + "px"}>
             <line
-              x1={xPosition + radius}
-              y1={yPosition + radius}
-              x2={xPosition + radius}
-              y2={yMin}
+              x1={this.state.xPosition + this.props.radius}
+              y1={this.state.yPosition + this.props.radius}
+              x2={this.state.xPosition + this.props.radius}
+              y2={this.props.yMin}
               stroke={"#deb887"}
               strokeWidth="10"
             />
@@ -1114,12 +1111,12 @@ export default class Weight extends React.Component<IWeightProps, IState> {
             zIndex: -2,
           }}
         >
-          <svg width={xMax + "px"} height={window.innerHeight + "px"}>
+          <svg width={this.props.xMax + "px"} height={window.innerHeight + "px"}>
             <line
-              x1={xPosition + radius}
-              y1={yPosition + radius}
-              x2={(xMax + xMin) / 2 - radius - yMin - 200}
-              y2={yMin}
+              x1={this.state.xPosition + this.props.radius}
+              y1={this.state.yPosition + this.props.radius}
+              x2={(this.props.xMax + this.props.xMin) / 2 - this.props.radius - this.props.yMin - 200}
+              y2={this.props.yMin}
               stroke={"#deb887"}
               strokeWidth="10"
             />
@@ -1128,17 +1125,17 @@ export default class Weight extends React.Component<IWeightProps, IState> {
             style={{
               position: "absolute",
               zIndex: 10,
-              left: (xMax + xMin) / 2 - radius - yMin - 200 + 80 + "px",
+              left: (this.props.xMax + this.props.xMin) / 2 - this.props.radius - this.props.yMin - 200 + 80 + "px",
               top: 10 + "px",
-              backgroundColor: labelBackgroundColor,
+              backgroundColor: this.labelBackgroundColor,
             }}
           >
             {Math.round(
               ((Math.atan(
-                (yPosition + radius) /
-                  (xPosition +
-                    radius -
-                    ((xMax + xMin) / 2 - radius - yMin - 200))
+                (this.state.yPosition + this.props.radius) /
+                  (this.state.xPosition +
+                    this.props.radius -
+                    ((this.props.xMax + this.props.xMin) / 2 - this.props.radius - this.props.yMin - 200))
               ) *
                 180) /
                 Math.PI) *
@@ -1159,12 +1156,12 @@ export default class Weight extends React.Component<IWeightProps, IState> {
             zIndex: -2,
           }}
         >
-          <svg width={xMax + "px"} height={window.innerHeight + "px"}>
+          <svg width={this.props.xMax + "px"} height={window.innerHeight + "px"}>
             <line
-              x1={xPosition + radius}
-              y1={yPosition + radius}
-              x2={(xMax + xMin) / 2 + yMin + 200 + radius}
-              y2={yMin}
+              x1={this.state.xPosition + this.props.radius}
+              y1={this.state.yPosition + this.props.radius}
+              x2={(this.props.xMax + this.props.xMin) / 2 + this.props.yMin + 200 + this.props.radius}
+              y2={this.props.yMin}
               stroke={"#deb887"}
               strokeWidth="10"
             />
@@ -1174,19 +1171,19 @@ export default class Weight extends React.Component<IWeightProps, IState> {
             style={{
               position: "absolute",
               zIndex: 10,
-              left: (xMax + xMin) / 2 + yMin + 200 + radius - 80 + "px",
+              left: (this.props.xMax + this.props.xMin) / 2 + this.props.yMin + 200 + this.props.radius - 80 + "px",
               top: 10 + "px",
-              backgroundColor: labelBackgroundColor,
+              backgroundColor: this.labelBackgroundColor,
             }}
           >
             {Math.round(
               ((Math.atan(
-                (yPosition + radius) /
-                  ((xMax + xMin) / 2 +
-                    yMin +
+                (this.state.yPosition + this.props.radius) /
+                  ((this.props.xMax + this.props.xMin) / 2 +
+                  this.props.yMin +
                     200 +
-                    radius -
-                    (xPosition + radius))
+                    this.props.radius -
+                    (this.state.xPosition + this.props.radius))
               ) *
                 180) /
                 Math.PI) *
@@ -1207,12 +1204,12 @@ export default class Weight extends React.Component<IWeightProps, IState> {
             zIndex: -2,
           }}
         >
-          <svg width={xMax + "px"} height={window.innerHeight + "px"}>
+          <svg width={this.props.xMax + "px"} height={window.innerHeight + "px"}>
             <line
-              x1={xPosition + radius}
-              y1={yPosition + radius}
-              x2={(xMin + xMax) / 2}
-              y2={(yMin + yMax) / 2}
+              x1={this.state.xPosition + this.props.radius}
+              y1={this.state.yPosition + this.props.radius}
+              x2={(this.props.xMin + this.props.xMax) / 2}
+              y2={(this.props.yMin + this.props.yMax) / 2}
               stroke={"#deb887"}
               strokeWidth="10"
             />
@@ -1230,39 +1227,39 @@ export default class Weight extends React.Component<IWeightProps, IState> {
             zIndex: -2,
           }}
         >
-          <svg width={xMax + "px"} height={window.innerHeight + "px"}>
+          <svg width={this.props.xMax + "px"} height={window.innerHeight + "px"}>
             <line
-              x1={xPosition + radius}
-              y1={yPosition + radius}
-              x2={xMax / 2}
+              x1={this.state.xPosition + this.props.radius}
+              y1={this.state.yPosition + this.props.radius}
+              x2={this.props.xMax / 2}
               y2={-5}
               stroke={"#deb887"}
               strokeWidth="10"
             />
           </svg>
-          {!dragging && (
+          {!this.state.dragging && (
             <div>
               <p
                 style={{
                   position: "absolute",
                   zIndex: 5,
-                  left: xPosition + "px",
-                  top: yPosition - 70 + "px",
-                  backgroundColor: labelBackgroundColor,
+                  left: this.state.xPosition + "px",
+                  top: this.state.yPosition - 70 + "px",
+                  backgroundColor: this.labelBackgroundColor,
                 }}
               >
-                {Math.round(pendulumLength)} m
+                {Math.round(this.props.pendulumLength)} m
               </p>
               <p
                 style={{
                   position: "absolute",
                   zIndex: -1,
-                  left: xMax / 2 + "px",
+                  left: this.props.xMax / 2 + "px",
                   top: 30 + "px",
-                  backgroundColor: labelBackgroundColor,
+                  backgroundColor: this.labelBackgroundColor,
                 }}
               >
-                {Math.round(pendulumAngle * 100) / 100}°
+                {Math.round(this.props.pendulumAngle * 100) / 100}°
               </p>
             </div>
           )}
@@ -1273,8 +1270,8 @@ export default class Weight extends React.Component<IWeightProps, IState> {
           <div
             style={{ position: "absolute", left: "0", top: "0", zIndex: -5 }}
           >
-            <svg width={xMax + "px"} height={yMax + "px"}>
-              <polygon points={coordinates} style={{ fill: "burlywood" }} />
+            <svg width={this.props.xMax + "px"} height={this.props.yMax + "px"}>
+              <polygon points={this.state.coordinates} style={{ fill: "burlywood" }} />
             </svg>
           </div>
 
@@ -1282,18 +1279,18 @@ export default class Weight extends React.Component<IWeightProps, IState> {
             style={{
               position: "absolute",
               zIndex: 500,
-              left: Math.round(xMax * 0.5 - 200 + wedgeWidth - 80) + "px",
+              left: Math.round(this.props.xMax * 0.5 - 200 + this.props.wedgeWidth - 80) + "px",
               top: Math.round(window.innerHeight * 0.8 - 40) + "px",
             }}
           >
             {Math.round(
-              ((Math.atan(wedgeHeight / wedgeWidth) * 180) / Math.PI) * 100
+              ((Math.atan(this.props.wedgeHeight / this.props.wedgeWidth) * 180) / Math.PI) * 100
             ) / 100}
             °
           </p>
         </div>
       )}
-      {!dragging && showAcceleration && (
+      {!this.state.dragging && this.props.showAcceleration && (
         <div>
           <div
             style={{
@@ -1304,7 +1301,7 @@ export default class Weight extends React.Component<IWeightProps, IState> {
               top: 0,
             }}
           >
-            <svg width={xMax + "px"} height={window.innerHeight + "px"}>
+            <svg width={this.props.xMax + "px"} height={window.innerHeight + "px"}>
               <defs>
                 <marker
                   id="accArrow"
@@ -1319,10 +1316,10 @@ export default class Weight extends React.Component<IWeightProps, IState> {
                 </marker>
               </defs>
               <line
-                x1={xPosition + radius}
-                y1={yPosition + radius}
-                x2={xPosition + radius + getNewAccelerationX(updatedForces) * 7}
-                y2={yPosition + radius + getNewAccelerationY(updatedForces) * 7}
+                x1={this.state.xPosition + this.props.radius}
+                y1={this.state.yPosition + this.props.radius}
+                x2={this.state.xPosition + this.props.radius + this.getNewAccelerationX(this.props.updatedForces) * 7}
+                y2={this.state.yPosition + this.props.radius + this.getNewAccelerationY(this.props.updatedForces) * 7}
                 stroke={"green"}
                 strokeWidth="5"
                 markerEnd="url(#accArrow)"
@@ -1332,15 +1329,15 @@ export default class Weight extends React.Component<IWeightProps, IState> {
               style={{
                 pointerEvents: "none",
                 position: "absolute",
-                left: xPosition + radius + xAccel * 3 + 25 + "px",
-                top: yPosition + radius + yAccel * 3 + 70 + "px",
+                left: this.state.xPosition + this.props.radius + this.state.xAccel * 3 + 25 + "px",
+                top: this.state.yPosition + this.props.radius + this.state.yAccel * 3 + 70 + "px",
                 zIndex: -1,
                 lineHeight: 0.5,
               }}
             >
               <p>
                 {Math.round(
-                  100 * Math.sqrt(xAccel * xAccel + yAccel * yAccel)
+                  100 * Math.sqrt(this.state.xAccel * this.state.xAccel + this.state.yAccel * this.state.yAccel)
                 ) / 100}{" "}
                 m/s
                 <sup>2</sup>
@@ -1349,7 +1346,7 @@ export default class Weight extends React.Component<IWeightProps, IState> {
           </div>
         </div>
       )}
-      {!dragging && showVelocity && (
+      {!this.state.dragging && this.props.showVelocity && (
         <div>
           <div
             style={{
@@ -1360,7 +1357,7 @@ export default class Weight extends React.Component<IWeightProps, IState> {
               top: 0,
             }}
           >
-            <svg width={xMax + "px"} height={window.innerHeight + "px"}>
+            <svg width={this.props.xMax + "px"} height={window.innerHeight + "px"}>
               <defs>
                 <marker
                   id="velArrow"
@@ -1375,10 +1372,10 @@ export default class Weight extends React.Component<IWeightProps, IState> {
                 </marker>
               </defs>
               <line
-                x1={xPosition + radius}
-                y1={yPosition + radius}
-                x2={xPosition + radius + xVelocity * 3}
-                y2={yPosition + radius + yVelocity * 3}
+                x1={this.state.xPosition + this.props.radius}
+                y1={this.state.yPosition + this.props.radius}
+                x2={this.state.xPosition + this.props.radius + this.state.xVelocity * 3}
+                y2={this.state.yPosition + this.props.radius + this.state.yVelocity * 3}
                 stroke={"blue"}
                 strokeWidth="5"
                 markerEnd="url(#velArrow)"
@@ -1388,8 +1385,8 @@ export default class Weight extends React.Component<IWeightProps, IState> {
               style={{
                 pointerEvents: "none",
                 position: "absolute",
-                left: xPosition + radius + xVelocity * 3 + 25 + "px",
-                top: yPosition + radius + yVelocity * 3 + "px",
+                left: this.state.xPosition + this.props.radius + this.state.xVelocity * 3 + 25 + "px",
+                top: this.state.yPosition +  this.props.radius + this.state.yVelocity * 3 + "px",
                 zIndex: -1,
                 lineHeight: 0.5,
               }}
@@ -1398,8 +1395,8 @@ export default class Weight extends React.Component<IWeightProps, IState> {
                 {Math.round(
                   100 *
                     Math.sqrt(
-                      displayXVelocity * displayXVelocity +
-                        displayYVelocity * displayYVelocity
+                      this.props.displayXVelocity *  this.props.displayXVelocity +
+                      this.props.displayYVelocity *  this.props.displayYVelocity
                     )
                 ) / 100}{" "}
                 m/s
@@ -1630,5 +1627,5 @@ export default class Weight extends React.Component<IWeightProps, IState> {
           );
         })}
     </div>
-  );
+  }
 };