more phys fixes for resizing windows.

2 files changed, 52 insertions, 35 deletions

diff --git a/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx b/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx
index c4e8e7721..a0b47f13f 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 } from 'mobx';
+import { computed, reaction } from 'mobx';
 import { observer } from 'mobx-react';
 import { NumListCast } from '../../../../fields/Doc';
 import { List } from '../../../../fields/List';
@@ -186,28 +186,28 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
     xMin = 0;
     yMin = 0;
     xMax = this.props.PanelWidth() * 0.6;
-    yMax = this.props.PanelHeight() * 0.9;
+    yMax = this.props.PanelHeight();
     color = `rgba(0,0,0,0.5)`;
     radius = 50;
     wallPositions: IWallProps[] = [];
 
     componentDidMount() {
-        // Setup simulation
-        this.setupSimulation();
+        // Setup and update simulation
+        reaction(() => [this.props.PanelWidth(), this.props.PanelHeight()], this.setupSimulation, { fireImmediately: true });
 
         // Create walls
         this.wallPositions = [
-            { length: (this.xMax / this.props.PanelWidth()) * 100, xPos: 0, yPos: 0, angleInDegrees: 0 },
-            { length: (this.xMax / this.props.PanelWidth()) * 100, xPos: 0, yPos: (this.yMax / this.props.PanelHeight()) * 100, angleInDegrees: 0 },
-            { length: (this.yMax / this.props.PanelHeight()) * 100, xPos: 0, yPos: 0, angleInDegrees: 90 },
-            { length: (this.yMax / this.props.PanelHeight()) * 100, xPos: (this.xMax / this.props.PanelWidth()) * 100, yPos: 0, angleInDegrees: 90 },
+            { length: 100, xPos: 0, yPos: 0, angleInDegrees: 0 },
+            { length: 100, xPos: 0, yPos: 100, angleInDegrees: 0 },
+            { length: 100, xPos: 0, yPos: 0, angleInDegrees: 90 },
+            { length: 100, xPos: (this.xMax / this.props.PanelWidth()) * 100, yPos: 0, angleInDegrees: 90 },
         ];
     }
 
     componentDidUpdate() {
-        if (this.xMax !== this.props.PanelWidth() * 0.6 || this.yMax != this.props.PanelHeight() * 0.9) {
+        if (this.xMax !== this.props.PanelWidth() * 0.6 || this.yMax != this.props.PanelHeight()) {
             this.xMax = this.props.PanelWidth() * 0.6;
-            this.yMax = this.props.PanelHeight() * 0.9;
+            this.yMax = this.props.PanelHeight();
             this.setupSimulation();
         }
     }
@@ -237,17 +237,14 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
                     this.dataDoc.simulation_reset = !this.dataDoc.simulation_reset;
                     ``;
                     break;
-                case 'Inclined Plane': 
-                    this.changeWedgeBasedOnNewAngle(26);
-                    this.dataDoc.mass1_forcesStart = JSON.stringify([this.gravityForce(this.mass1)]);
-                    this.updateForcesWithFriction(NumCast(this.dataDoc.coefficientOfStaticFriction));
-                    break;
-                case 'Pendulum': this.setupPendulum(); break;
-                case 'Spring':   this.setupSpring(); break;
-                case 'Circular Motion': this.setupCircular(0); break;
-                case 'Pulley':this.setupPulley(); break;
-                case 'Suspension': this.setupSuspension();break;
+                case 'Inclined Plane':  this.setupInclinedPlane(); break;
+                case 'Pendulum':        this.setupPendulum(); break;
+                case 'Spring':          this.setupSpring(); break;
+                case 'Circular Motion': this.setupCircular(20); break;
+                case 'Pulley':          this.setupPulley(); break;
+                case 'Suspension':      this.setupSuspension();break;
             }
+            this.dataDoc.simulation_reset = !this.dataDoc.simulation_reset;
         } else if (mode == 'Review') {
             this.dataDoc.simulation_showComponentForces = false;
             this.dataDoc.simulation_showForceMagnitudes = true;
@@ -307,9 +304,9 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
                     this.dataDoc.simulation_showForceMagnitudes = tutorials.pendulum.steps[0].showMagnitude;
                     break;
                 case 'Inclined Plane':
-                    this.dataDoc.simulation_showForces = true;
                     this.dataDoc.wedge_angle = 26;
-                    this.changeWedgeBasedOnNewAngle(26);
+                    this.setupInclinedPlane();
+                    this.dataDoc.simulation_showForces = true;
                     this.dataDoc.tutorial = JSON.stringify(tutorials.inclinePlane);
                     this.dataDoc.mass1_forcesStart = JSON.stringify(tutorials.inclinePlane.steps[0].forces);
                     this.dataDoc.simulation_showForceMagnitudes = tutorials.inclinePlane.steps[0].showMagnitude;
@@ -412,7 +409,7 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
         this.dataDoc.wedge_height = Math.tan(radAng) * this.dataDoc.wedge_width;
 
         // update weight position based on updated wedge width/height
-        let yPos = this.yMax - this.mass1Radius * 2 - this.dataDoc.wedge_height - this.mass1Radius * Math.cos(radAng) + this.mass1Radius;
+        let yPos = this.yMax - this.dataDoc.wedge_height - this.mass1Radius * Math.cos(radAng) - this.mass1Radius;
         let xPos = this.xMax * 0.25 + this.mass1Radius * Math.sin(radAng) - this.mass1Radius;
 
         this.dataDoc.mass1_positionXstart = xPos;
@@ -657,9 +654,15 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
         this.dataDoc.simulation_reset = !this.dataDoc.simulation_reset;
     };
 
+    setupInclinedPlane = () => {
+        this.changeWedgeBasedOnNewAngle(this.wedgeAngle);
+        this.dataDoc.mass1_forcesStart = JSON.stringify([this.gravityForce(this.mass1)]);
+        this.updateForcesWithFriction(NumCast(this.dataDoc.coefficientOfStaticFriction));
+    };
+
     // Default setup for pendulum simulation
     setupPendulum = () => {
-        const length = 300;
+        const length = (300 * this.props.PanelWidth()) / 1000;
         const angle = 30;
         const x = length * Math.cos(((90 - angle) * Math.PI) / 180);
         const y = length * Math.sin(((90 - angle) * Math.PI) / 180);
@@ -745,10 +748,10 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
     setupPulley = () => {
         this.dataDoc.simulation_showComponentForces = false;
         this.dataDoc.mass1_positionYstart = (this.yMax + this.yMin) / 2;
-        this.dataDoc.mass1_positionXstart = (this.xMin + this.xMax) / 2 - 2 * (0.08 * this.props.PanelHeight()) - 5;
+        this.dataDoc.mass1_positionXstart = (this.xMin + this.xMax) / 2 - 2 * this.mass1Radius - 5;
         this.dataDoc.mass1_positionY = this.getDisplayYPos((this.yMax + this.yMin) / 2);
-        this.dataDoc.mass1_positionX = (this.xMin + this.xMax) / 2 - 2 * (0.08 * this.props.PanelHeight()) - 5;
-        let a = (-1 * ((this.mass1 - this.mass2) * Math.abs(this.gravity))) / (this.mass1 + this.mass2);
+        this.dataDoc.mass1_positionX = (this.xMin + this.xMax) / 2 - 2 * this.mass1Radius - 5;
+        const a = (-1 * ((this.mass1 - this.mass2) * Math.abs(this.gravity))) / (this.mass1 + this.mass2);
         const gravityForce1 = this.gravityForce(this.mass1);
         const tensionForce1: IForce = {
             description: 'Tension',
@@ -756,17 +759,16 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
             directionInDegrees: 90,
             component: false,
         };
-        a *= -1;
+        this.dataDoc.mass1_forcesUpdated = JSON.stringify([gravityForce1, tensionForce1]);
+        this.dataDoc.mass1_forcesStart = JSON.stringify([gravityForce1, tensionForce1]);
+
         const gravityForce2 = this.gravityForce(this.mass2);
         const tensionForce2: IForce = {
             description: 'Tension',
-            magnitude: this.mass2 * a + this.mass2 * Math.abs(this.gravity),
+            magnitude: -this.mass2 * a + this.mass2 * Math.abs(this.gravity),
             directionInDegrees: 90,
             component: false,
         };
-
-        this.dataDoc.mass1_forcesUpdated = JSON.stringify([gravityForce1, tensionForce1]);
-        this.dataDoc.mass1_forcesStart = JSON.stringify([gravityForce1, tensionForce1]);
         this.dataDoc.mass2_positionYstart = (this.yMax + this.yMin) / 2;
         this.dataDoc.mass2_positionXstart = (this.xMin + this.xMax) / 2 + 5;
         this.dataDoc.mass2_positionY = this.getDisplayYPos((this.yMax + this.yMin) / 2);
@@ -904,7 +906,15 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
                                     </div>
                                 )}
                             </div>
-                            <div className="mechanicsSimulationElements" style={{ transform: `scale(${this.props.PanelWidth() / 1000})` }}>
+                            <div
+                                className="mechanicsSimulationElements"
+                                style={{
+                                    //
+                                    width: '60%',
+                                    height: '100%',
+                                    position: 'absolute',
+                                    background: 'yellow',
+                                }}>
                                 <Weight
                                     {...commonWeightProps}
                                     color="red"
@@ -950,7 +960,7 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
                                     />
                                 )}
                             </div>
-                            <div style={{ position: 'absolute', transform: `scale(${this.props.PanelWidth() / 1000}`, transformOrigin: 'top left', top: 0, left: 0, width: '100%', height: '100%' }}>
+                            <div style={{ position: 'absolute', transformOrigin: 'top left', top: 0, left: 0, width: '100%', height: '100%' }}>
                                 {(this.simulationType == 'One Weight' || this.simulationType == 'Inclined Plane') &&
                                     this.wallPositions?.map((element, index) => <Wall key={index} length={element.length} xPos={element.xPos} yPos={element.yPos} angleInDegrees={element.angleInDegrees} />)}
                             </div>
diff --git a/src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx b/src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx
index 35aeb59bf..d062cc8c5 100644
--- a/src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx
+++ b/src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx
@@ -811,7 +811,14 @@ export default class Weight extends React.Component<IWeightProps, IState> {
                             top: 0,
                         }}>
                         <svg width={this.panelWidth} height={this.panelHeight}>
-                            <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" />
+                            <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>
                 )}