more phys cleanup

1 files changed, 50 insertions, 87 deletions

diff --git a/src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx b/src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx
index 025c757c9..ac28ee4a0 100644
--- a/src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx
+++ b/src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx
@@ -1,6 +1,5 @@
 import { computed, trace } from 'mobx';
 import { observer } from 'mobx-react';
-import { Doc, HeightSym, WidthSym } from '../../../../fields/Doc';
 import './PhysicsSimulationBox.scss';
 import React = require('react');
 
@@ -17,10 +16,9 @@ interface IForce {
     component: boolean;
 }
 export interface IWeightProps {
-    dataDoc: Doc;
-    layoutDoc: Doc;
-    adjustPendulumAngle: number;
-    adjustPendulumLength: number;
+    pause: () => void;
+    panelWidth: () => number;
+    panelHeight: () => number;
     circularMotionRadius: number;
     coefficientOfKineticFriction: number;
     color: string;
@@ -50,6 +48,7 @@ export interface IWeightProps {
     springStartLength: number;
     startForces: () => IForce[];
     startPendulumAngle: number;
+    startPendulumLength: number;
     startPosX: number;
     startPosY: number;
     startVelX: number;
@@ -59,6 +58,11 @@ export interface IWeightProps {
     updateMassPosY: number;
     forcesUpdated: () => IForce[];
     setForcesUpdated: (x: IForce[]) => {};
+    setPosition: (x: number | undefined, y: number | undefined) => void;
+    setVelocity: (x: number | undefined, y: number | undefined) => void;
+    setAcceleration: (x: number, y: number) => void;
+    setPendulumAngle: (ang: number | undefined, length: number | undefined) => void;
+    setSpringLength: (length: number) => void;
     wallPositions: IWallProps[];
     wedgeHeight: number;
     wedgeWidth: number;
@@ -147,43 +151,15 @@ export default class Weight extends React.Component<IWeightProps, IState> {
     // Helper function to go between display and real values
     getDisplayYPos = (yPos: number) => this.props.yMax - yPos - 2 * this.props.radius + 5;
 
-    // Set display values based on real values
-    setPosition = (xPos: number | undefined, yPos: number | undefined) => {
-        if (this.props.color == 'red') {
-            yPos !== undefined && (this.props.dataDoc.mass1_positionY = Math.round(this.getDisplayYPos(yPos) * 100) / 100);
-            xPos !== undefined && (this.props.dataDoc.mass1_positionX = Math.round(xPos * 100) / 100);
-        } else {
-            yPos !== undefined && (this.props.dataDoc.mass2_positionY = Math.round(this.getDisplayYPos(yPos) * 100) / 100);
-            xPos !== undefined && (this.props.dataDoc.mass2_positionX = Math.round(xPos * 100) / 100);
-        }
-    };
-    setVelocity = (xVel: number | undefined, yVel: number | undefined) => {
-        if (this.props.color == 'red') {
-            yVel !== undefined && (this.props.dataDoc.mass1_velocityY = (-1 * Math.round(yVel * 100)) / 100);
-            xVel !== undefined && (this.props.dataDoc.mass1_velocityX = Math.round(xVel * 100) / 100);
-        } else {
-            yVel !== undefined && (this.props.dataDoc.mass2_velocityY = (-1 * Math.round(yVel * 100)) / 100);
-            xVel !== undefined && (this.props.dataDoc.mass2_velocityX = Math.round(xVel * 100) / 100);
-        }
-    };
-    setAcceleration = (xAccel: number, yAccel: number) => {
-        if (this.props.color == 'red') {
-            this.props.dataDoc.mass1_accelerationY = yAccel;
-            this.props.dataDoc.mass1_accelerationX = xAccel;
-        } else {
-            this.props.dataDoc.mass2_accelerationY = yAccel;
-            this.props.dataDoc.mass2_accelerationX = xAccel;
-        }
-
-        this.setState({ xAccel });
-        this.setState({ yAccel });
-    };
-
     // Update display values when simulation updates
     setDisplayValues = (xPos: number = this.state.xPosition, yPos: number = this.state.yPosition, xVel: number = this.state.xVelocity, yVel: number = this.state.yVelocity) => {
-        this.setPosition(xPos, yPos);
-        this.setVelocity(xVel, yVel);
-        this.setAcceleration(Math.round(this.getNewAccelerationX(this.props.forcesUpdated()) * 100) / 100, (-1 * Math.round(this.getNewAccelerationY(this.props.forcesUpdated()) * 100)) / 100);
+        this.props.setPosition(xPos, this.getDisplayYPos(yPos));
+        this.props.setVelocity(xVel, yVel);
+        const xAccel = Math.round(this.getNewAccelerationX(this.props.forcesUpdated()) * 100) / 100;
+        const yAccel = (-1 * Math.round(this.getNewAccelerationY(this.props.forcesUpdated()) * 100)) / 100;
+        this.props.setAcceleration(xAccel, yAccel);
+        this.setState({ xAccel });
+        this.setState({ yAccel });
     };
 
     componentDidUpdate(prevProps: Readonly<IWeightProps>, prevState: Readonly<IState>, snapshot?: any): void {
@@ -194,18 +170,17 @@ export default class Weight extends React.Component<IWeightProps, IState> {
         }
 
         // Change pendulum angle from input field
-        if (prevProps.adjustPendulumAngle != this.props.adjustPendulumAngle || prevProps.adjustPendulumLength !== this.props.adjustPendulumLength) {
-            let length = this.props.adjustPendulumLength;
-            const x = length * Math.cos(((90 - this.props.adjustPendulumAngle) * Math.PI) / 180);
-            const y = length * Math.sin(((90 - this.props.adjustPendulumAngle) * Math.PI) / 180);
+        if (prevProps.startPendulumAngle != this.props.startPendulumAngle || prevProps.startPendulumLength !== this.props.startPendulumLength) {
+            let length = this.props.startPendulumLength;
+            const x = length * Math.cos(((90 - this.props.startPendulumAngle) * Math.PI) / 180);
+            const y = length * Math.sin(((90 - this.props.startPendulumAngle) * Math.PI) / 180);
             const xPos = this.props.xMax / 2 - x - this.props.radius;
             const yPos = y - this.props.radius - 5;
             this.setState({ xPosition: xPos });
             this.setState({ yPosition: yPos });
             this.setState({ updatedStartPosX: xPos });
             this.setState({ updatedStartPosY: yPos });
-            this.props.dataDoc.pendulum_angle = this.props.adjustPendulumAngle;
-            this.props.dataDoc.pendulum_length = this.props.adjustPendulumLength;
+            this.props.setPendulumAngle(this.props.startPendulumAngle, this.props.startPendulumLength);
         }
 
         // When display values updated by user, update real value
@@ -215,7 +190,7 @@ export default class Weight extends React.Component<IWeightProps, IState> {
             x = Math.min(x, this.props.xMax - 2 * this.props.radius);
             this.setState({ updatedStartPosX: x });
             this.setState({ xPosition: x });
-            this.setPosition(x, undefined);
+            this.props.setPosition(x, undefined);
         }
         if (prevProps.updateMassPosY != this.props.updateMassPosY) {
             let y = this.props.updateMassPosY;
@@ -224,18 +199,18 @@ export default class Weight extends React.Component<IWeightProps, IState> {
             let coordinatePosition = this.getDisplayYPos(y);
             this.setState({ updatedStartPosY: coordinatePosition });
             this.setState({ yPosition: coordinatePosition });
-            this.setPosition(undefined, y);
+            this.props.setPosition(undefined, this.getDisplayYPos(y));
 
             if (this.props.displayXVelocity != this.state.xVelocity) {
                 let x = this.props.displayXVelocity;
                 this.setState({ xVelocity: x });
-                this.setVelocity(x, undefined);
+                this.props.setVelocity(x, undefined);
             }
 
             if (this.props.displayYVelocity != -this.state.yVelocity) {
                 let y = this.props.displayYVelocity;
                 this.setState({ yVelocity: -y });
-                this.setVelocity(undefined, y);
+                this.props.setVelocity(undefined, y);
             }
         }
 
@@ -360,7 +335,7 @@ export default class Weight extends React.Component<IWeightProps, IState> {
             if (this.props.paused && !isNaN(this.props.startPosX)) {
                 this.setState({ xPosition: this.props.startPosX });
                 this.setState({ updatedStartPosX: this.props.startPosX });
-                this.setPosition(this.props.startPosX, undefined);
+                this.props.setPosition(this.props.startPosX, undefined);
             }
         }
 
@@ -369,7 +344,7 @@ export default class Weight extends React.Component<IWeightProps, IState> {
             if (this.props.paused && !isNaN(this.props.startPosY)) {
                 this.setState({ yPosition: this.props.startPosY });
                 this.setState({ updatedStartPosY: this.props.startPosY ?? 0 });
-                this.setPosition(undefined, this.props.startPosY ?? 0);
+                this.props.setPosition(undefined, this.getDisplayYPos(this.props.startPosY));
             }
         }
 
@@ -410,23 +385,11 @@ export default class Weight extends React.Component<IWeightProps, IState> {
         this.setState({ yPosition: this.state.updatedStartPosY });
         this.setState({ xVelocity: this.props.startVelX });
         this.setState({ yVelocity: this.props.startVelY });
-        this.props.dataDoc.pendulum_angle = this.props.startPendulumAngle;
+        this.props.setPendulumAngle(this.props.startPendulumAngle, undefined);
         this.props.setForcesUpdated(this.props.startForces());
-        if (this.props.color == 'red') {
-            this.props.dataDoc.mass1_positionX = this.state.updatedStartPosX;
-            this.props.dataDoc.mass1_positionY = this.state.updatedStartPosY;
-            this.props.dataDoc.mass1_velocityX = this.props.startVelX;
-            this.props.dataDoc.mass1_velocityY = this.props.startVelY;
-            this.props.dataDoc.mass1_accelerationX = 0;
-            this.props.dataDoc.mass1_accelerationY = 0;
-        } else {
-            this.props.dataDoc.mass2_positionX = this.state.updatedStartPosX;
-            this.props.dataDoc.mass2_positionY = this.state.updatedStartPosY;
-            this.props.dataDoc.mass2_velocityX = this.props.startVelX;
-            this.props.dataDoc.mass2_velocityY = this.props.startVelY;
-            this.props.dataDoc.mass2_accelerationX = 0;
-            this.props.dataDoc.mass2_accelerationY = 0;
-        }
+        this.props.setPosition(this.state.updatedStartPosX, this.state.updatedStartPosY);
+        this.props.setVelocity(this.props.startVelX, this.props.startVelY);
+        this.props.setAcceleration(0, 0);
         this.setState({ angleLabel: Math.round(this.props.pendulumAngle * 100) / 100 });
     };
 
@@ -514,7 +477,7 @@ export default class Weight extends React.Component<IWeightProps, IState> {
         }
 
         const pendulumLength = Math.sqrt(x * x + y * y);
-        this.props.dataDoc.pendulum_angle = oppositeAngle;
+        this.props.setPendulumAngle(oppositeAngle, undefined);
 
         const mag = this.props.mass * Math.abs(this.props.gravity) * Math.cos((oppositeAngle * Math.PI) / 180) + (this.props.mass * (xVel * xVel + yVel * yVel)) / pendulumLength;
 
@@ -544,7 +507,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) * this.props.layoutDoc[WidthSym]();
+                    const wallX = (wall.xPos / 100) * this.props.panelWidth();
                     if (wall.xPos < 0.35) {
                         if (minX <= wallX) {
                             this.setState({ xPosition: wallX + 0.01 });
@@ -580,7 +543,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) * this.props.layoutDoc[HeightSym]();
+                    const groundY = (wall.yPos / 100) * this.props.panelHeight();
                     if (maxY > groundY) {
                         this.setState({ yPosition: groundY - 2 * this.props.radius - 0.01 });
                         if (this.props.elasticCollisions) {
@@ -626,7 +589,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) * this.props.layoutDoc[HeightSym]();
+                    const groundY = (wall.yPos / 100) * this.props.panelHeight();
                     if (minY < groundY) {
                         this.setState({ yPosition: groundY + 0.01 });
                         if (this.props.elasticCollisions) {
@@ -800,7 +763,7 @@ export default class Weight extends React.Component<IWeightProps, IState> {
                     className="weightContainer"
                     onPointerDown={e => {
                         if (this.draggable) {
-                            this.props.dataDoc.paused = true;
+                            this.props.pause();
                             this.setState({ dragging: true });
                             this.setState({ clickPositionX: e.clientX });
                             this.setState({ clickPositionY: e.clientY });
@@ -830,10 +793,10 @@ export default class Weight extends React.Component<IWeightProps, IState> {
                             }
 
                             this.setState({ yPosition: newY });
-                            this.props.dataDoc.mass1_positionY = Math.round((this.props.yMax - 2 * this.props.radius - newY + 5) * 100) / 100;
+                            this.props.setPosition(undefined, Math.round((this.props.yMax - 2 * this.props.radius - newY + 5) * 100) / 100);
                             if (this.props.simulationType != 'Pulley') {
                                 this.setState({ xPosition: newX });
-                                this.props.dataDoc.mass1_positionX = newX;
+                                this.props.setPosition(newX, undefined);
                             }
                             if (this.props.simulationType != 'Suspension') {
                                 if (this.props.simulationType != 'Pulley') {
@@ -866,7 +829,7 @@ export default class Weight extends React.Component<IWeightProps, IState> {
                                 newX = 10;
                             }
                             if (this.props.simulationType == 'Spring') {
-                                this.props.dataDoc.spring_lengthStart = newY;
+                                this.props.setSpringLength(newY);
                             }
                             if (this.props.simulationType == 'Suspension') {
                                 let x1rod = (this.props.xMax + this.props.xMin) / 2 - this.props.radius - this.props.yMin - 200;
@@ -915,7 +878,7 @@ export default class Weight extends React.Component<IWeightProps, IState> {
                             left: 0,
                             top: 0,
                         }}>
-                        <svg width={this.props.xMax + 'px'} height={this.props.layoutDoc._height + 'px'}>
+                        <svg width={this.props.xMax + 'px'} height={this.props.panelHeight() + 'px'}>
                             {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map(val => {
                                 const count = 10;
                                 let xPos1;
@@ -946,7 +909,7 @@ export default class Weight extends React.Component<IWeightProps, IState> {
                             left: 0,
                             top: 0,
                         }}>
-                        <svg width={this.props.xMax + 'px'} height={this.props.layoutDoc._height + 'px'}>
+                        <svg width={this.props.xMax + 'px'} height={this.props.panelHeight() + 'px'}>
                             <line 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" />
                         </svg>
                     </div>
@@ -960,7 +923,7 @@ export default class Weight extends React.Component<IWeightProps, IState> {
                             left: 0,
                             top: 0,
                         }}>
-                        <svg width={this.props.xMax + 'px'} height={this.props.layoutDoc._height + 'px'}>
+                        <svg width={this.props.xMax + 'px'} height={this.props.panelHeight() + 'px'}>
                             <circle cx={(this.props.xMax + this.props.xMin) / 2} cy={this.props.radius} r={this.props.radius * 1.5} fill={'#808080'} />
                         </svg>
                     </div>
@@ -974,7 +937,7 @@ export default class Weight extends React.Component<IWeightProps, IState> {
                             left: 0,
                             top: 0,
                         }}>
-                        <svg width={this.props.xMax + 'px'} height={this.props.layoutDoc._height + 'px'}>
+                        <svg width={this.props.xMax + 'px'} height={this.props.panelHeight() + 'px'}>
                             <line
                                 x1={this.state.xPosition + this.props.radius}
                                 y1={this.state.yPosition + this.props.radius}
@@ -1004,7 +967,7 @@ export default class Weight extends React.Component<IWeightProps, IState> {
                                 left: 0,
                                 top: 0,
                             }}>
-                            <svg width={this.props.layoutDoc._width + 'px'} height={this.props.layoutDoc._height + 'px'}>
+                            <svg width={this.props.panelWidth() + 'px'} height={this.props.panelHeight() + 'px'}>
                                 <line
                                     x1={this.state.xPosition + this.props.radius}
                                     y1={this.state.yPosition + this.props.radius}
@@ -1039,7 +1002,7 @@ export default class Weight extends React.Component<IWeightProps, IState> {
                             left: 0,
                             top: 0,
                         }}>
-                        <svg width={this.props.xMax + 'px'} height={this.props.layoutDoc._height + 'px'}>
+                        <svg width={this.props.xMax + 'px'} height={this.props.panelHeight() + 'px'}>
                             <line
                                 x1={this.state.xPosition + this.props.radius}
                                 y1={this.state.yPosition + this.props.radius}
@@ -1060,7 +1023,7 @@ export default class Weight extends React.Component<IWeightProps, IState> {
                             left: 0,
                             top: 0,
                         }}>
-                        <svg width={this.props.xMax + 'px'} height={this.props.layoutDoc._height + 'px'}>
+                        <svg width={this.props.xMax + 'px'} height={this.props.panelHeight() + 'px'}>
                             <line 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>
                         {!this.state.dragging && (
@@ -1115,7 +1078,7 @@ export default class Weight extends React.Component<IWeightProps, IState> {
                                 left: 0,
                                 top: 0,
                             }}>
-                            <svg width={this.props.xMax + 'px'} height={this.props.layoutDoc._height + 'px'}>
+                            <svg width={this.props.xMax + 'px'} height={this.props.panelHeight() + 'px'}>
                                 <defs>
                                     <marker id="accArrow" markerWidth="10" markerHeight="10" refX="0" refY="3" orient="auto" markerUnits="strokeWidth">
                                         <path d="M0,0 L0,6 L9,3 z" fill="green" />
@@ -1156,7 +1119,7 @@ export default class Weight extends React.Component<IWeightProps, IState> {
                                 left: 0,
                                 top: 0,
                             }}>
-                            <svg width={this.props.xMax + 'px'} height={this.props.layoutDoc._height + 'px'}>
+                            <svg width={this.props.xMax + 'px'} height={this.props.panelHeight() + 'px'}>
                                 <defs>
                                     <marker id="velArrow" markerWidth="10" markerHeight="10" refX="0" refY="3" orient="auto" markerUnits="strokeWidth">
                                         <path d="M0,0 L0,6 L9,3 z" fill="blue" />
@@ -1224,7 +1187,7 @@ export default class Weight extends React.Component<IWeightProps, IState> {
                                         left: this.props.xMin,
                                         top: this.props.yMin,
                                     }}>
-                                    <svg width={this.props.xMax - this.props.xMin + 'px'} height={this.props.layoutDoc._height + 'px'}>
+                                    <svg width={this.props.xMax - this.props.xMin + 'px'} height={this.props.panelHeight() + 'px'}>
                                         <defs>
                                             <marker id="forceArrow" markerWidth="10" markerHeight="10" refX="0" refY="3" orient="auto" markerUnits="strokeWidth">
                                                 <path d="M0,0 L0,6 L9,3 z" fill={color} />
@@ -1289,7 +1252,7 @@ export default class Weight extends React.Component<IWeightProps, IState> {
                                         left: this.props.xMin,
                                         top: this.props.yMin,
                                     }}>
-                                    <svg width={this.props.xMax - this.props.xMin + 'px'} height={this.props.layoutDoc._height + 'px'}>
+                                    <svg width={this.props.xMax - this.props.xMin + 'px'} height={this.props.panelHeight() + 'px'}>
                                         <defs>
                                             <marker id="forceArrow" markerWidth="10" markerHeight="10" refX="0" refY="3" orient="auto" markerUnits="strokeWidth">
                                                 <path d="M0,0 L0,6 L9,3 z" fill={color} />