1 files changed, 17 insertions, 22 deletions

diff --git a/src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx b/src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx
index f533df109..2165c8ba9 100644
--- a/src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx
+++ b/src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx
@@ -1,8 +1,7 @@
-import { computed } from 'mobx';
+import { computed, IReactionDisposer, reaction } from 'mobx';
 import { observer } from 'mobx-react';
 import './PhysicsSimulationBox.scss';
 import React = require('react');
-import _ = require('lodash');
 
 interface IWallProps {
     length: number;
@@ -19,6 +18,7 @@ export interface IWeightProps {
     pause: () => void;
     panelWidth: () => number;
     panelHeight: () => number;
+    resetRequest: () => number;
     circularMotionRadius: number;
     coefficientOfKineticFriction: number;
     color: string;
@@ -35,7 +35,6 @@ export interface IWeightProps {
     pendulumAngle: number;
     pendulumLength: number;
     radius: number;
-    reset: boolean;
     showAcceleration: boolean;
     showComponentForces: boolean;
     showForceMagnitudes: boolean;
@@ -83,7 +82,6 @@ interface IState {
     timer: number;
     updatedStartPosX: any;
     updatedStartPosY: any;
-    walls: IWallProps[];
     xPosition: number;
     xVelocity: number;
     yPosition: number;
@@ -106,7 +104,6 @@ export default class Weight extends React.Component<IWeightProps, IState> {
             timer: 0,
             updatedStartPosX: this.props.startPosX,
             updatedStartPosY: this.props.startPosY,
-            walls: [],
             xPosition: this.props.startPosX,
             xVelocity: this.props.startVelX,
             yPosition: this.props.startPosY,
@@ -117,12 +114,13 @@ export default class Weight extends React.Component<IWeightProps, IState> {
     }
 
     _timer: NodeJS.Timeout | undefined;
+    _resetDisposer: IReactionDisposer | undefined;
 
     componentWillUnmount() {
         this._timer && clearTimeout(this._timer);
+        this._resetDisposer?.();
     }
     componentWillUpdate(nextProps: Readonly<IWeightProps>, nextState: Readonly<IState>, nextContext: any): void {
-        if (nextProps.simulationType !== this.props.simulationType) setTimeout(() => this.setState({ timer: this.state.timer + 1 }));
         if (nextProps.paused) {
             this._timer && clearTimeout(this._timer);
             this._timer = undefined;
@@ -142,6 +140,10 @@ export default class Weight extends React.Component<IWeightProps, IState> {
     @computed get panelWidth() {
         return Math.max(1000, this.props.panelWidth()) + 'px';
     }
+
+    @computed get walls() {
+        return ['One Weight', 'Inclined Plane'].includes(this.props.simulationType) ? this.props.wallPositions : [];
+    }
     epsilon = 0.0001;
     labelBackgroundColor = `rgba(255,255,255,0.5)`;
 
@@ -179,7 +181,9 @@ export default class Weight extends React.Component<IWeightProps, IState> {
         this.props.setAcceleration(xAccel, yAccel);
         this.setState({ xAccel, yAccel });
     };
-
+    componentDidMount() {
+        this._resetDisposer = reaction(() => this.props.resetRequest(), this.resetEverything);
+    }
     componentDidUpdate(prevProps: Readonly<IWeightProps>, prevState: Readonly<IState>, snapshot?: any): void {
         if (prevProps.simulationType != this.props.simulationType) {
             this.setState({ xVelocity: this.props.startVelX, yVelocity: this.props.startVelY });
@@ -251,11 +255,6 @@ export default class Weight extends React.Component<IWeightProps, IState> {
             this.setDisplayValues();
         }
 
-        // Reset everything on reset button click
-        if (prevProps.reset != this.props.reset) {
-            this.resetEverything();
-        }
-
         // Convert from static to kinetic friction if/when weight slips on inclined plane
         if (prevState.xVelocity != this.state.xVelocity) {
             if (this.props.simulationType == 'Inclined Plane' && Math.abs(this.state.xVelocity) > 0.1 && this.props.simulationMode != 'Review' && !this.state.kineticFriction) {
@@ -300,11 +299,6 @@ export default class Weight extends React.Component<IWeightProps, IState> {
             }
         }
 
-        // Add/remove walls when simulation type changes
-        if (prevProps.simulationType != this.props.simulationType) {
-            this.setState({ walls: ['One Weight', 'Inclined Plane'].includes(this.props.simulationType) ? this.props.wallPositions : [] });
-        }
-
         // Update x position when start pos x changes
         if (prevProps.startPosX != this.props.startPosX) {
             if (this.props.paused && !isNaN(this.props.startPosX)) {
@@ -322,7 +316,7 @@ export default class Weight extends React.Component<IWeightProps, IState> {
         }
 
         // Update wedge coordinates
-        if (!this.state.coordinates || prevProps.wedgeWidth != this.props.wedgeWidth || prevProps.wedgeHeight != this.props.wedgeHeight) {
+        if (!this.state.coordinates || this.props.yMax !== prevProps.yMax || prevProps.wedgeWidth != this.props.wedgeWidth || prevProps.wedgeHeight != this.props.wedgeHeight) {
             const left = this.props.xMax * 0.25;
             const coordinatePair1 = Math.round(left) + ',' + this.props.yMax + ' ';
             const coordinatePair2 = Math.round(left + this.props.wedgeWidth) + ',' + this.props.yMax + ' ';
@@ -365,6 +359,7 @@ export default class Weight extends React.Component<IWeightProps, IState> {
         this.props.setPosition(this.state.updatedStartPosX, this.state.updatedStartPosY);
         this.props.setVelocity(this.props.startVelX, this.props.startVelY);
         this.props.setAcceleration(0, 0);
+        setTimeout(() => this.setState({ timer: this.state.timer + 1 }));
     };
 
     // Compute x acceleration from forces, F=ma
@@ -438,7 +433,7 @@ export default class Weight extends React.Component<IWeightProps, IState> {
     checkForCollisionsWithWall = () => {
         let collision = false;
         if (this.state.xVelocity !== 0) {
-            this.state.walls
+            this.walls
                 .filter(wall => wall.angleInDegrees === 90)
                 .forEach(wall => {
                     const wallX = (wall.xPos / 100) * this.props.panelWidth();
@@ -462,7 +457,7 @@ export default class Weight extends React.Component<IWeightProps, IState> {
         const minY = this.state.yPosition;
         const maxY = this.state.yPosition + 2 * this.props.radius;
         if (this.state.yVelocity > 0) {
-            this.state.walls.forEach(wall => {
+            this.walls.forEach(wall => {
                 if (wall.angleInDegrees == 0 && wall.yPos > 0.4) {
                     const groundY = (wall.yPos / 100) * this.props.panelHeight();
                     const gravity = this.gravityForce();
@@ -488,7 +483,7 @@ export default class Weight extends React.Component<IWeightProps, IState> {
             });
         }
         if (this.state.yVelocity < 0) {
-            this.state.walls.forEach(wall => {
+            this.walls.forEach(wall => {
                 if (wall.angleInDegrees == 0 && wall.yPos < 0.4) {
                     const groundY = (wall.yPos / 100) * this.props.panelHeight();
                     if (minY < groundY) {
@@ -708,7 +703,7 @@ export default class Weight extends React.Component<IWeightProps, IState> {
                         top: this.state.yPosition + this.props.radius + 2 * (magY / mag) * this.props.radius + magY + 'px',
                         lineHeight: 1,
                     }}>
-                    {/* <p>{label}</p> */}
+                    <p style={{ background: 'white' }}>{label}</p>
                 </div>
             </div>
         );