physics layout fixes for window resizing and for resetting walls properly

1 files changed, 41 insertions, 39 deletions

diff --git a/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx b/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx
index f4acba2a6..be8dbbd40 100644
--- a/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx
+++ b/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx
@@ -6,7 +6,7 @@ import QuestionMarkIcon from '@mui/icons-material/QuestionMark';
 import ReplayIcon from '@mui/icons-material/Replay';
 import { Box, Button, Checkbox, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, FormControl, FormControlLabel, FormGroup, IconButton, LinearProgress, Stack } from '@mui/material';
 import Typography from '@mui/material/Typography';
-import { computed, IReactionDisposer, reaction } from 'mobx';
+import { action, computed, IReactionDisposer, observable, reaction } from 'mobx';
 import { observer } from 'mobx-react';
 import { NumListCast } from '../../../../fields/Doc';
 import { List } from '../../../../fields/List';
@@ -76,6 +76,7 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
     }
 
     _widthDisposer: IReactionDisposer | undefined;
+    @observable _simReset = 0;
 
     // semi-Constants
     xMin = 0;
@@ -215,6 +216,7 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
         directionInDegrees: 270,
     });
 
+    @action
     setupSimulation = () => {
         const simulationType = this.simulationType;
         const mode = this.simulationMode;
@@ -237,8 +239,6 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
                     this.dataDoc.mass1_positionX = (this.xMax + this.xMin) / 2 - this.mass1Radius;
                     this.dataDoc.mass1_forcesUpdated = JSON.stringify([this.gravityForce(this.mass1)]);
                     this.dataDoc.mass1_forcesStart = JSON.stringify([this.gravityForce(this.mass1)]);
-                    this.dataDoc.simulation_reset = !this.dataDoc.simulation_reset;
-                    ``;
                     break;
                 case 'Inclined Plane':  this.setupInclinedPlane(); break;
                 case 'Pendulum':        this.setupPendulum(); break;
@@ -247,7 +247,7 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
                 case 'Pulley':          this.setupPulley(); break;
                 case 'Suspension':      this.setupSuspension();break;
             }
-            this.dataDoc.simulation_reset = !this.dataDoc.simulation_reset;
+            this._simReset++;
         } else if (mode == 'Review') {
             this.dataDoc.simulation_showComponentForces = false;
             this.dataDoc.simulation_showForceMagnitudes = true;
@@ -333,7 +333,7 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
                     this.dataDoc.simulation_showForceMagnitudes = tutorials.suspension.steps[0].showMagnitude;
                     break;
             }
-            this.dataDoc.simulation_reset = !this.dataDoc.simulation_reset;
+            this._simReset++;
         }
     };
 
@@ -604,6 +604,7 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
     };
 
     // Default setup for uniform circular motion simulation
+    @action
     setupCircular = (value: number) => {
         this.dataDoc.simulation_showComponentForces = false;
         this.dataDoc.mass1_velocityYstart = 0;
@@ -619,7 +620,7 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
         };
         this.dataDoc.mass1_forcesUpdated = JSON.stringify([tensionForce]);
         this.dataDoc.mass1_forcesStart = JSON.stringify([tensionForce]);
-        this.dataDoc.simulation_reset = !this.dataDoc.simulation_reset;
+        this._simReset++;
     };
 
     setupInclinedPlane = () => {
@@ -662,6 +663,7 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
     };
 
     // Default setup for spring simulation
+    @action
     setupSpring = () => {
         this.dataDoc.simulation_showComponentForces = false;
         this.dataDoc.mass1_forcesUpdated = JSON.stringify([this.gravityForce(this.mass1)]);
@@ -671,10 +673,11 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
         this.dataDoc.spring_constant = 0.5;
         this.dataDoc.spring_lengthRest = 200;
         this.dataDoc.spring_lengthStart = 200;
-        this.dataDoc.simulation_reset = !this.dataDoc.simulation_reset;
+        this._simReset++;
     };
 
     // Default setup for suspension simulation
+    @action
     setupSuspension = () => {
         let xPos = (this.xMax + this.xMin) / 2 - this.mass1Radius;
         let yPos = this.yMin + 200;
@@ -696,10 +699,11 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
         const gravity = this.gravityForce(this.mass1);
         this.dataDoc.mass1_forcesUpdated = JSON.stringify([tensionForce1, tensionForce2, gravity]);
         this.dataDoc.mass1_forcesStart = JSON.stringify([tensionForce1, tensionForce2, gravity]);
-        this.dataDoc.simulation_reset = !this.dataDoc.simulation_reset;
+        this._simReset++;
     };
 
     // Default setup for pulley simulation
+    @action
     setupPulley = () => {
         this.dataDoc.simulation_showComponentForces = false;
         this.dataDoc.mass1_positionYstart = (this.yMax + this.yMin) / 2;
@@ -728,8 +732,7 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
         this.dataDoc.mass2_positionX = (this.xMin + this.xMax) / 2 + 5;
         this.dataDoc.mass2_forcesUpdated = JSON.stringify([gravityForce2, tensionForce2]);
         this.dataDoc.mass2_forcesStart = JSON.stringify([gravityForce2, tensionForce2]);
-
-        this.dataDoc.simulation_reset = !this.dataDoc.simulation_reset;
+        this._simReset++;
     };
 
     public static parseJSON(json: string) {
@@ -799,12 +802,14 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
     setSpringLength = (length: number) => {
         this.dataDoc.spring_lengthStart = length;
     };
+    resetRequest = () => this._simReset;
     render() {
         const commonWeightProps = {
             pause: this.pause,
             paused: BoolCast(this.dataDoc.simulation_paused),
             panelWidth: this.props.PanelWidth,
             panelHeight: this.props.PanelHeight,
+            resetRequest: this.resetRequest,
             xMax: this.xMax,
             xMin: this.xMin,
             yMax: this.yMax,
@@ -830,7 +835,6 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
             startPendulumAngle: this.pendulumAngleStart,
             startPendulumLength: this.pendulumLengthStart,
             radius: this.mass1Radius,
-            reset: BoolCast(this.dataDoc.simulation_reset),
             simulationSpeed: NumCast(this.dataDoc.simulation_speed, 2),
             showAcceleration: BoolCast(this.dataDoc.simulation_showAcceleration),
             showForceMagnitudes: BoolCast(this.dataDoc.simulation_showForceMagnitudes),
@@ -916,7 +920,7 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
                             </div>
                         </div>
                     </div>
-                    <div className="mechanicsSimulationEquationContainer">
+                    <div className="mechanicsSimulationEquationContainer" style={{ overflow: 'auto', height: `${(1000 / this.props.PanelWidth()) * 100}%`, transform: `scale(${this.props.PanelWidth() / 1000})` }}>
                         <div className="mechanicsSimulationControls">
                             <Stack direction="row" spacing={1}>
                                 {this.dataDoc.simulation_paused && this.simulationMode != 'Tutorial' && (
@@ -930,7 +934,7 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
                                     </IconButton>
                                 )}
                                 {this.dataDoc.simulation_paused && this.simulationMode != 'Tutorial' && (
-                                    <IconButton onClick={() => (this.dataDoc.simulation_reset = !this.dataDoc.simulation_reset)}>
+                                    <IconButton onClick={action(() => this._simReset++)}>
                                         <ReplayIcon />
                                     </IconButton>
                                 )}
@@ -1291,11 +1295,11 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
                                 </p>
                                 <div style={{ display: 'flex', flexDirection: 'column' }}>
                                     <Button
-                                        onClick={() => {
-                                            this.dataDoc.simulation_reset = !this.dataDoc.simulation_reset;
+                                        onClick={action(() => {
+                                            this._simReset++;
                                             this.checkAnswers();
                                             this.dataDoc.simulation_showIcon = true;
-                                        }}
+                                        })}
                                         variant="outlined">
                                         <p>Submit</p>
                                     </Button>
@@ -1427,7 +1431,7 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
                                             unit={'N/m'}
                                             upperBound={500}
                                             value={this.springConstant}
-                                            effect={(val: number) => (this.dataDoc.simulation_reset = !this.dataDoc.simulation_reset)}
+                                            effect={action(() => this._simReset++)}
                                             radianEquivalent={false}
                                             mode={'Freeform'}
                                             labelWidth={'7em'}
@@ -1441,7 +1445,7 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
                                             unit=""
                                             upperBound={500}
                                             value={this.springLengthRest}
-                                            effect={(val: number) => (this.dataDoc.simulation_reset = !this.dataDoc.simulation_reset)}
+                                            effect={action(() => this._simReset++)}
                                             radianEquivalent={false}
                                             mode="Freeform"
                                             labelWidth={'7em'}
@@ -1455,11 +1459,11 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
                                             unit=""
                                             upperBound={this.springLengthRest}
                                             value={this.springLengthStart - this.springLengthRest}
-                                            effect={(val: number) => {
+                                            effect={action((val: number) => {
                                                 this.dataDoc.mass1_positionYstart = this.springLengthRest + val;
                                                 this.dataDoc.spring_lengthStart = this.springLengthRest + val;
-                                                this.dataDoc.simulation_reset = !this.dataDoc.simulation_reset;
-                                            }}
+                                                this._simReset++;
+                                            })}
                                             radianEquivalent={false}
                                             mode="Freeform"
                                             labelWidth={'7em'}
@@ -1477,10 +1481,10 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
                                             unit={'°'}
                                             upperBound={49}
                                             value={this.wedgeAngle}
-                                            effect={(val: number) => {
+                                            effect={action((val: number) => {
                                                 this.changeWedgeBasedOnNewAngle(val);
-                                                this.dataDoc.simulation_reset = !this.dataDoc.simulation_reset;
-                                            }}
+                                                this._simReset++;
+                                            })}
                                             radianEquivalent={true}
                                             mode={'Freeform'}
                                             labelWidth={'2em'}
@@ -1498,13 +1502,13 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
                                             unit={''}
                                             upperBound={1}
                                             value={NumCast(this.dataDoc.coefficientOfStaticFriction) ?? 0}
-                                            effect={(val: number) => {
+                                            effect={action((val: number) => {
                                                 this.updateForcesWithFriction(val);
                                                 if (val < NumCast(this.dataDoc.coefficientOfKineticFriction)) {
                                                     this.dataDoc.soefficientOfKineticFriction = val;
                                                 }
-                                                this.dataDoc.simulation_reset = !this.dataDoc.simulation_reset;
-                                            }}
+                                                this._simReset++;
+                                            })}
                                             mode={'Freeform'}
                                             labelWidth={'2em'}
                                         />
@@ -1521,9 +1525,7 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
                                             unit={''}
                                             upperBound={NumCast(this.dataDoc.coefficientOfStaticFriction)}
                                             value={NumCast(this.dataDoc.coefficientOfKineticFriction) ?? 0}
-                                            effect={(val: number) => {
-                                                this.dataDoc.simulation_reset = !this.dataDoc.simulation_reset;
-                                            }}
+                                            effect={action(() => this._simReset++)}
                                             mode={'Freeform'}
                                             labelWidth={'2em'}
                                         />
@@ -1556,7 +1558,7 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
                                             unit={'°'}
                                             upperBound={59}
                                             value={NumCast(this.dataDoc.pendulum_angle, 30)}
-                                            effect={value => {
+                                            effect={action(value => {
                                                 this.dataDoc.pendulum_angleStart = value;
                                                 this.dataDoc.pendulum_lengthStart = this.dataDoc.pendulum_length;
                                                 if (this.simulationType == 'Pendulum') {
@@ -1589,9 +1591,9 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
                                                     this.dataDoc.mass1_forcesStart = JSON.stringify([this.gravityForce(this.mass1), forceOfTension]);
                                                     this.dataDoc.mass1_forcesUpdated = JSON.stringify([this.gravityForce(this.mass1), forceOfTension]);
                                                     this.dataDoc.mass1_componentForces = JSON.stringify([forceOfTension, gravityParallel, gravityPerpendicular]);
-                                                    this.dataDoc.simulation_reset = !this.dataDoc.simulation_reset;
+                                                    this._simReset++;
                                                 }
-                                            }}
+                                            })}
                                             radianEquivalent={true}
                                             mode="Freeform"
                                             labelWidth="5em"
@@ -1605,13 +1607,13 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
                                             unit="m"
                                             upperBound={400}
                                             value={Math.round(this.pendulumLength)}
-                                            effect={value => {
+                                            effect={action(value => {
                                                 if (this.simulationType == 'Pendulum') {
                                                     this.dataDoc.pendulum_angleStart = this.pendulumAngle;
                                                     this.dataDoc.pendulum_lengthStart = value;
-                                                    this.dataDoc.simulation_reset = !this.dataDoc.simulation_reset;
+                                                    this._simReset++;
                                                 }
-                                            }}
+                                            })}
                                             radianEquivalent={false}
                                             mode="Freeform"
                                             labelWidth="5em"
@@ -1768,10 +1770,10 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
                                                         unit={'m/s'}
                                                         upperBound={50}
                                                         value={NumCast(this.dataDoc.mass1_velocityX)}
-                                                        effect={value => {
+                                                        effect={action(value => {
                                                             this.dataDoc.mass1_velocityXstart = value;
-                                                            this.dataDoc.simulation_reset = !this.dataDoc.simulation_reset;
-                                                        }}
+                                                            this._simReset++;
+                                                        })}
                                                         small={true}
                                                         mode="Freeform"
                                                     />