refactorweight

2 files changed, 52 insertions, 49 deletions

diff --git a/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx b/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx
index bdc76048c..35a7ee346 100644
--- a/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx
+++ b/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx
@@ -1281,6 +1281,7 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
           <div className="mechanicsSimulationElements">
             <Weight
               dataDoc={this.dataDoc}
+              layoutDoc={this.layoutDoc}
               adjustPendulumAngle={this.dataDoc.adjustPendulumAngle}
               gravity={this.dataDoc.gravity}
               circularMotionRadius={this.dataDoc.circularMotionRadius}
@@ -1329,6 +1330,7 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
             {this.dataDoc.simulationType == "Pulley" && (
               <Weight
                 dataDoc={this.dataDoc}
+                layoutDoc={this.layoutDoc}
                 adjustPendulumAngle={this.dataDoc.adjustPendulumAngle}
                 circularMotionRadius={this.dataDoc.circularMotionRadius}
                 gravity={this.dataDoc.gravity}
diff --git a/src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx b/src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx
index 2ae34374d..c24438e19 100644
--- a/src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx
+++ b/src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx
@@ -12,6 +12,7 @@ export interface IForce {
 }
 export interface IWeightProps {
   dataDoc: Doc;
+  layoutDoc: Doc;
   adjustPendulumAngle: { angle: number; length: number };
   circularMotionRadius: number;
   coefficientOfKineticFriction: number;
@@ -584,7 +585,7 @@ export default class Weight extends React.Component<IWeightProps, IState> {
     if (this.state.xVelocity != 0) {
       this.state.walls.forEach((wall) => {
         if (wall.angleInDegrees == 90) {
-          const wallX = (wall.xPos / 100) * window.innerWidth;
+          const wallX = (wall.xPos / 100) * this.props.layoutDoc._width;
           if (wall.xPos < 0.35) {
             if (minX <= wallX) {
               this.setState({xPosition: wallX+0.01});
@@ -613,14 +614,14 @@ export default class Weight extends React.Component<IWeightProps, IState> {
   };
 
   // Check for collisions in y direction
-  const checkForCollisionsWithGround = () => {
+  checkForCollisionsWithGround = () => {
     let collision = false;
     const minY = this.state.yPosition;
     const maxY = this.state.yPosition + 2 * this.props.radius;
     if (this.state.yVelocity > 0) {
       this.state.walls.forEach((wall) => {
         if (wall.angleInDegrees == 0 && wall.yPos > 0.4) {
-          const groundY = (wall.yPos / 100) * window.innerHeight;
+          const groundY = (wall.yPos / 100) * this.props.layoutDoc._height;
           if (maxY > groundY) {
             this.setState({yPosition: groundY- 2 * this.props.radius-0.01});
             if (this.props.elasticCollisions) {
@@ -666,7 +667,7 @@ export default class Weight extends React.Component<IWeightProps, IState> {
     if (this.state.yVelocity < 0) {
       this.state.walls.forEach((wall) => {
         if (wall.angleInDegrees == 0 && wall.yPos < 0.4) {
-          const groundY = (wall.yPos / 100) * window.innerHeight;
+          const groundY = (wall.yPos / 100) * this.props.layoutDoc._height;
           if (minY < groundY) {
             this.setState({yPosition: groundY + 0.01});
             if (this.props.elasticCollisions) {
@@ -730,7 +731,7 @@ export default class Weight extends React.Component<IWeightProps, IState> {
     let yPos = this.state.yPosition;
     let xVel = this.state.xVelocity;
     let yVel = this.state.yVelocity;
-    let forces = this.props.dataDoc['updatedForces'];
+    let forces: IForce[] = this.props.dataDoc['updatedForces'];
     if (this.props.dataDoc['simulationType'] == "Pendulum") {
       forces = this.getNewPendulumForces(xPos, yPos, xVel, yVel);
     } else if (this.props.dataDoc['simulationType'] == "Spring") {
@@ -1025,7 +1026,7 @@ export default class Weight extends React.Component<IWeightProps, IState> {
             zIndex: -2,
           }}
         >
-          <svg width={this.props.xMax + "px"} height={window.innerHeight + "px"}>
+          <svg width={this.props.xMax + "px"} height={this.props.layoutDoc._height + "px"}>
             {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((val) => {
               const count = 10;
               let xPos1;
@@ -1067,7 +1068,7 @@ export default class Weight extends React.Component<IWeightProps, IState> {
             zIndex: -1,
           }}
         >
-          <svg width={this.props.xMax + "px"} height={window.innerHeight + "px"}>
+          <svg width={this.props.xMax + "px"} height={this.props.layoutDoc._height + "px"}>
             <circle
               cx={(this.props.xMax + this.props.xMin) / 2}
               cy={this.props.radius}
@@ -1088,7 +1089,7 @@ export default class Weight extends React.Component<IWeightProps, IState> {
             zIndex: -2,
           }}
         >
-          <svg width={this.props.xMax + "px"} height={window.innerHeight + "px"}>
+          <svg width={this.props.xMax + "px"} height={this.props.layoutDoc._height + "px"}>
             <line
               x1={this.state.xPosition + this.props.radius}
               y1={this.state.yPosition + this.props.radius}
@@ -1111,7 +1112,7 @@ export default class Weight extends React.Component<IWeightProps, IState> {
             zIndex: -2,
           }}
         >
-          <svg width={this.props.xMax + "px"} height={window.innerHeight + "px"}>
+          <svg width={this.props.xMax + "px"} height={this.props.layoutDoc._height + "px"}>
             <line
               x1={this.state.xPosition + this.props.radius}
               y1={this.state.yPosition + this.props.radius}
@@ -1156,7 +1157,7 @@ export default class Weight extends React.Component<IWeightProps, IState> {
             zIndex: -2,
           }}
         >
-          <svg width={this.props.xMax + "px"} height={window.innerHeight + "px"}>
+          <svg width={this.props.xMax + "px"} height={this.props.layoutDoc._height + "px"}>
             <line
               x1={this.state.xPosition + this.props.radius}
               y1={this.state.yPosition + this.props.radius}
@@ -1204,7 +1205,7 @@ export default class Weight extends React.Component<IWeightProps, IState> {
             zIndex: -2,
           }}
         >
-          <svg width={this.props.xMax + "px"} height={window.innerHeight + "px"}>
+          <svg width={this.props.xMax + "px"} height={this.props.layoutDoc._height + "px"}>
             <line
               x1={this.state.xPosition + this.props.radius}
               y1={this.state.yPosition + this.props.radius}
@@ -1227,7 +1228,7 @@ export default class Weight extends React.Component<IWeightProps, IState> {
             zIndex: -2,
           }}
         >
-          <svg width={this.props.xMax + "px"} height={window.innerHeight + "px"}>
+          <svg width={this.props.xMax + "px"} height={this.props.layoutDoc._height + "px"}>
             <line
               x1={this.state.xPosition + this.props.radius}
               y1={this.state.yPosition + this.props.radius}
@@ -1280,7 +1281,7 @@ export default class Weight extends React.Component<IWeightProps, IState> {
               position: "absolute",
               zIndex: 500,
               left: Math.round(this.props.xMax * 0.5 - 200 + this.props.wedgeWidth - 80) + "px",
-              top: Math.round(window.innerHeight * 0.8 - 40) + "px",
+              top: Math.round(this.props.layoutDoc._height * 0.8 - 40) + "px",
             }}
           >
             {Math.round(
@@ -1301,7 +1302,7 @@ export default class Weight extends React.Component<IWeightProps, IState> {
               top: 0,
             }}
           >
-            <svg width={this.props.xMax + "px"} height={window.innerHeight + "px"}>
+            <svg width={this.props.xMax + "px"} height={this.props.layoutDoc._height + "px"}>
               <defs>
                 <marker
                   id="accArrow"
@@ -1357,7 +1358,7 @@ export default class Weight extends React.Component<IWeightProps, IState> {
               top: 0,
             }}
           >
-            <svg width={this.props.xMax + "px"} height={window.innerHeight + "px"}>
+            <svg width={this.props.xMax + "px"} height={this.props.layoutDoc._height + "px"}>
               <defs>
                 <marker
                   id="velArrow"
@@ -1395,8 +1396,8 @@ export default class Weight extends React.Component<IWeightProps, IState> {
                 {Math.round(
                   100 *
                     Math.sqrt(
-                      this.props.displayXVelocity *  this.props.displayXVelocity +
-                      this.props.displayYVelocity *  this.props.displayYVelocity
+                      this.props.displayXVelocity * this.props.displayXVelocity +
+                      this.props.displayYVelocity * this.props.displayYVelocity
                     )
                 ) / 100}{" "}
                 m/s
@@ -1405,14 +1406,14 @@ export default class Weight extends React.Component<IWeightProps, IState> {
           </div>
         </div>
       )}
-      {!dragging &&
-        showComponentForces &&
-        componentForces.map((force, index) => {
-          if (force.magnitude < epsilon) {
+      {!this.state.dragging &&
+        this.props.showComponentForces &&
+        this.props.componentForces.map((force, index) => {
+          if (force.magnitude < this.epsilon) {
             return;
           }
-          let arrowStartY: number = yPosition + radius;
-          const arrowStartX: number = xPosition + radius;
+          let arrowStartY: number = this.state.yPosition + this.props.radius;
+          const arrowStartX: number = this.state.xPosition + this.props.radius;
           let arrowEndY: number =
             arrowStartY -
             Math.abs(force.magnitude) *
@@ -1438,10 +1439,10 @@ export default class Weight extends React.Component<IWeightProps, IState> {
           } else {
             labelTop -= 40;
           }
-          labelTop = Math.min(labelTop, yMax + 50);
-          labelTop = Math.max(labelTop, yMin);
-          labelLeft = Math.min(labelLeft, xMax - 60);
-          labelLeft = Math.max(labelLeft, xMin);
+          labelTop = Math.min(labelTop, this.props.yMax + 50);
+          labelTop = Math.max(labelTop, this.props.yMin);
+          labelLeft = Math.min(labelLeft, this.props.xMax - 60);
+          labelLeft = Math.max(labelLeft, this.props.xMin);
 
           return (
             <div key={index}>
@@ -1450,13 +1451,13 @@ export default class Weight extends React.Component<IWeightProps, IState> {
                   pointerEvents: "none",
                   position: "absolute",
                   zIndex: -1,
-                  left: xMin,
-                  top: yMin,
+                  left: this.props.xMin,
+                  top: this.props.yMin,
                 }}
               >
                 <svg
-                  width={xMax - xMin + "px"}
-                  height={window.innerHeight + "px"}
+                  width={this.props.xMax - this.props.xMin + "px"}
+                  height={this.props.layoutDoc._height + "px"}
                 >
                   <defs>
                     <marker
@@ -1504,26 +1505,26 @@ export default class Weight extends React.Component<IWeightProps, IState> {
                   top: labelTop + "px",
                   // zIndex: -1,
                   lineHeight: 0.5,
-                  backgroundColor: labelBackgroundColor,
+                  backgroundColor: this.labelBackgroundColor,
                 }}
               >
                 {force.description && <p>{force.description}</p>}
                 {!force.description && <p>Force</p>}
-                {showForceMagnitudes && (
+                {this.props.showForceMagnitudes && (
                   <p>{Math.round(100 * force.magnitude) / 100} N</p>
                 )}
               </div>
             </div>
           );
         })}
-      {!dragging &&
-        showForces &&
-        updatedForces.map((force, index) => {
-          if (force.magnitude < epsilon) {
+      {!this.state.dragging &&
+        this.props.showForces &&
+        this.props.updatedForces.map((force, index) => {
+          if (force.magnitude < this.epsilon) {
             return;
           }
-          let arrowStartY: number = yPosition + radius;
-          const arrowStartX: number = xPosition + radius;
+          let arrowStartY: number = this.state.yPosition + this.props.radius;
+          const arrowStartX: number = this.state.xPosition + this.props.radius;
           let arrowEndY: number =
             arrowStartY -
             Math.abs(force.magnitude) *
@@ -1549,10 +1550,10 @@ export default class Weight extends React.Component<IWeightProps, IState> {
           } else {
             labelTop -= 40;
           }
-          labelTop = Math.min(labelTop, yMax + 50);
-          labelTop = Math.max(labelTop, yMin);
-          labelLeft = Math.min(labelLeft, xMax - 60);
-          labelLeft = Math.max(labelLeft, xMin);
+          labelTop = Math.min(labelTop, this.props.yMax + 50);
+          labelTop = Math.max(labelTop, this.props.yMin);
+          labelLeft = Math.min(labelLeft, this.props.xMax - 60);
+          labelLeft = Math.max(labelLeft, this.props.xMin);
 
           return (
             <div key={index}>
@@ -1561,13 +1562,13 @@ export default class Weight extends React.Component<IWeightProps, IState> {
                   pointerEvents: "none",
                   position: "absolute",
                   zIndex: -1,
-                  left: xMin,
-                  top: yMin,
+                  left: this.props.xMin,
+                  top: this.props.yMin,
                 }}
               >
                 <svg
-                  width={xMax - xMin + "px"}
-                  height={window.innerHeight + "px"}
+                  width={this.props.xMax - this.props.xMin + "px"}
+                  height={this.props.layoutDoc._height + "px"}
                 >
                   <defs>
                     <marker
@@ -1614,12 +1615,12 @@ export default class Weight extends React.Component<IWeightProps, IState> {
                   left: labelLeft + "px",
                   top: labelTop + "px",
                   lineHeight: 0.5,
-                  backgroundColor: labelBackgroundColor,
+                  backgroundColor: this.labelBackgroundColor,
                 }}
               >
                 {force.description && <p>{force.description}</p>}
                 {!force.description && <p>Force</p>}
-                {showForceMagnitudes && (
+                {this.props.showForceMagnitudes && (
                   <p>{Math.round(100 * force.magnitude) / 100} N</p>
                 )}
               </div>