fixed resizing physbox container.

4 files changed, 68 insertions, 78 deletions

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 1a2409508..13c27d182 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -689,8 +689,8 @@ export namespace Docs {
                 DocumentType.SIMULATION,
                 {
                     data: '',
-                    layout: { view: PhysicsSimulationBox, dataField: defaultDataKey },
-                    options: { _height: 100, position: '', acceleration: '', pendulum: '', spring: '', wedge: '', simulation: '', review: '' },
+                    layout: { view: PhysicsSimulationBox, dataField: defaultDataKey, _width: 1000, _height: 800 },
+                    options: { _height: 100, layout_forceReflow: true, nativeHeightUnfrozen: true, nativeDimModifiable: true, position: '', acceleration: '', pendulum: '', spring: '', wedge: '', simulation: '', review: '' },
                 },
             ],
         ]);
diff --git a/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.scss b/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.scss
index c29e36a97..b498296bf 100644
--- a/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.scss
+++ b/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.scss
@@ -14,6 +14,8 @@
             position: fixed;
             left: 60%;
             padding: 1em;
+            height: 100%;
+            overflow: auto;
 
             .mechanicsSimulationControls {
                 display: flex;
diff --git a/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx b/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx
index eb41e0de8..bb41cd72e 100644
--- a/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx
+++ b/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx
@@ -76,10 +76,6 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
         return FieldView.LayoutString(PhysicsSimulationBox, fieldKey);
     }
 
-    constructor(props: any) {
-        super(props);
-    }
-
     @computed get circularMotionRadius() {
         return NumCast(this.dataDoc.circularMotionRadius, 150);
     }
@@ -137,7 +133,7 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
         return NumCast(this.dataDoc.mass1_positionXstart, Math.round((this.xMax * 0.5 - 200) * 10) / 10);
     }
     @computed get mass1PosYStart() {
-        return NumCast(this.dataDoc.mass1_positionYstart, this.getDisplayYPos((400 - 0.08 * this.layoutDoc[HeightSym]()) * Math.tan((26 * Math.PI) / 180) + Math.sqrt(26)));
+        return NumCast(this.dataDoc.mass1_positionYstart, this.getDisplayYPos((400 - 0.08 * this.props.PanelHeight()) * Math.tan((26 * Math.PI) / 180) + Math.sqrt(26)));
     }
     @computed get mass1VelXStart() {
         return NumCast(this.dataDoc.mass1_velocityXstart);
@@ -150,7 +146,7 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
         return NumCast(this.dataDoc.mass2_positionXstart);
     }
     @computed get mass2PosYStart() {
-        return NumCast(this.dataDoc.mass2_positionYstart, this.getDisplayYPos((400 - 0.08 * this.layoutDoc[HeightSym]()) * Math.tan((26 * Math.PI) / 180) + Math.sqrt(26)));
+        return NumCast(this.dataDoc.mass2_positionYstart, this.getDisplayYPos((400 - 0.08 * this.props.PanelHeight()) * Math.tan((26 * Math.PI) / 180) + Math.sqrt(26)));
     }
     @computed get mass2VelXStart() {
         return NumCast(this.dataDoc.mass2_velocityXstart);
@@ -159,15 +155,6 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
         return NumCast(this.dataDoc.mass2_velocityYstart);
     }
 
-    // Constants
-    xMin = 0;
-    yMin = 0;
-    xMax = 100;
-    yMax = 100;
-    color = `rgba(0,0,0,0.5)`;
-    radius = 50;
-    wallPositions: IWallProps[] = [];
-
     @computed get selectedQuestion() {
         return this.dataDoc.selectedQuestion ? (JSON.parse(StrCast(this.dataDoc.selectedQuestion)) as QuestionTemplate) : questions.inclinePlane[0];
     }
@@ -177,41 +164,42 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
     @computed get selectedSolutions() {
         return NumListCast(this.dataDoc.selectedSolutions);
     }
+    @computed get questionPartOne() {
+        return StrCast(this.dataDoc.questionPartOne);
+    }
+    @computed get questionPartTwo() {
+        return StrCast(this.dataDoc.questionPartTwo);
+    }
+
+    // Constants
+    xMin = 0;
+    yMin = 0;
+    xMax = 100;
+    yMax = 100;
+    color = `rgba(0,0,0,0.5)`;
+    radius = 50;
+    wallPositions: IWallProps[] = [];
 
     componentDidMount() {
-        // Used throughout sims
-        this.layoutDoc._width = 1000;
-        this.layoutDoc._height = 800;
-        this.xMax = this.layoutDoc._width * 0.6;
-        this.yMax = this.layoutDoc._height * 0.9;
-        this.dataDoc.simulation_showComponentForces = this.dataDoc.simulation_showComponentForces ?? false;
-        this.dataDoc.simulation_speed = NumCast(this.dataDoc.simulation_speed, 2);
-        // Used for review mode
-        // this.dataDoc.currentForceSketch = this.dataDoc.currentForceSketch ?? null;
-        // this.dataDoc.deleteMode = this.dataDoc.deleteMode ?? false;
-        // this.dataDoc.forceSketches = this.dataDoc.forceSketches ?? [];
-        this.dataDoc.questionPartOne = '';
-        this.dataDoc.questionPartTwo = '';
-        // this.dataDoc.sketching = this.dataDoc.sketching ?? false;
+        this.xMax = this.props.PanelWidth() * 0.6;
+        this.yMax = this.props.PanelHeight() * 0.9;
 
         // Setup simulation
         this.setupSimulation();
 
         // Create walls
-        let walls = [];
-        walls.push({ length: (this.xMax / this.layoutDoc._width) * 100, xPos: 0, yPos: 0, angleInDegrees: 0 });
-        walls.push({ length: (this.xMax / this.layoutDoc._width) * 100, xPos: 0, yPos: (this.yMax / this.layoutDoc._height) * 100, angleInDegrees: 0 });
-        walls.push({ length: (this.yMax / this.layoutDoc._height) * 100, xPos: 0, yPos: 0, angleInDegrees: 90 });
-        walls.push({ length: (this.yMax / this.layoutDoc._height) * 100, xPos: (this.xMax / this.layoutDoc._width) * 100, yPos: 0, angleInDegrees: 90 });
-        this.wallPositions = 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 },
+        ];
     }
 
     componentDidUpdate() {
-        if (this.xMax !== this.layoutDoc[WidthSym]() * 0.6 || this.yMax != this.layoutDoc[HeightSym]() * 0.9) {
-            this.layoutDoc._width = Math.max(this.layoutDoc[WidthSym](), 800);
-            this.layoutDoc._height = Math.max(this.layoutDoc[HeightSym](), 600);
-            this.xMax = this.layoutDoc._width * 0.6;
-            this.yMax = this.layoutDoc._height * 0.9;
+        if (this.xMax !== this.props.PanelWidth() * 0.6 || this.yMax != this.props.PanelHeight() * 0.9) {
+            this.xMax = this.props.PanelWidth() * 0.6;
+            this.yMax = this.props.PanelHeight() * 0.9;
             this.setupSimulation();
         }
     }
@@ -230,10 +218,10 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
             this.dataDoc.simulation_showForceMagnitudes = true;
             if (simulationType == 'One Weight') {
                 this.dataDoc.simulation_showComponentForces = false;
-                this.dataDoc.mass1_positionYstart = this.yMin + 0.08 * this.layoutDoc[HeightSym]();
-                this.dataDoc.mass1_positionXstart = (this.xMax + this.xMin) / 2 - 0.08 * this.layoutDoc[HeightSym]();
-                this.dataDoc.mass1_positionY = this.getDisplayYPos(this.yMin + 0.08 * this.layoutDoc[HeightSym]());
-                this.dataDoc.mass1_positionX = (this.xMax + this.xMin) / 2 - 0.08 * this.layoutDoc[HeightSym]();
+                this.dataDoc.mass1_positionYstart = this.yMin + 0.08 * this.props.PanelHeight();
+                this.dataDoc.mass1_positionXstart = (this.xMax + this.xMin) / 2 - 0.08 * this.props.PanelHeight();
+                this.dataDoc.mass1_positionY = this.getDisplayYPos(this.yMin + 0.08 * this.props.PanelHeight());
+                this.dataDoc.mass1_positionX = (this.xMax + this.xMin) / 2 - 0.08 * this.props.PanelHeight();
                 this.dataDoc.mass1_forcesUpdated = JSON.stringify([
                     {
                         description: 'Gravity',
@@ -319,7 +307,7 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
             if (this.simulationType == 'One Weight') {
                 this.dataDoc.simulation_showForces = true;
                 this.dataDoc.mass1_positionYstart = this.yMax - 100;
-                this.dataDoc.mass1_positionXstart = (this.xMax + this.xMin) / 2 - 0.08 * this.layoutDoc[HeightSym]();
+                this.dataDoc.mass1_positionXstart = (this.xMax + this.xMin) / 2 - 0.08 * this.props.PanelHeight();
                 this.dataDoc.tutorial = JSON.stringify(tutorials.freeWeight);
                 this.dataDoc.mass1_forcesStart = JSON.stringify(tutorials.freeWeight.steps[0].forces);
                 this.dataDoc.simulation_showForceMagnitudes = tutorials.freeWeight.steps[0].showMagnitude;
@@ -327,7 +315,7 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
                 this.dataDoc.simulation_showForces = true;
                 this.setupSpring();
                 this.dataDoc.mass1_positionYstart = this.yMin + 200 + 19.62;
-                this.dataDoc.mass1_positionXstart = (this.xMax + this.xMin) / 2 - 0.08 * this.layoutDoc[HeightSym]();
+                this.dataDoc.mass1_positionXstart = (this.xMax + this.xMin) / 2 - 0.08 * this.props.PanelHeight();
                 this.dataDoc.tutorial = JSON.stringify(tutorials.spring);
                 this.dataDoc.mass1_forcesStart = JSON.stringify(tutorials.spring.steps[0].forces);
                 this.dataDoc.simulation_showForceMagnitudes = tutorials.spring.steps[0].showMagnitude;
@@ -368,10 +356,10 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
 
     // Helper function to go between display and real values
     getDisplayYPos = (yPos: number) => {
-        return this.yMax - yPos - 2 * (0.08 * this.layoutDoc[HeightSym]()) + 5;
+        return this.yMax - yPos - 2 * (0.08 * this.props.PanelHeight()) + 5;
     };
     getYPosFromDisplay = (yDisplay: number) => {
-        return this.yMax - yDisplay - 2 * (0.08 * this.layoutDoc[HeightSym]()) + 5;
+        return this.yMax - yDisplay - 2 * (0.08 * this.props.PanelHeight()) + 5;
     };
 
     // Update forces when coefficient of static friction changes in freeform mode
@@ -442,27 +430,27 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
         this.dataDoc.wedge_height = Math.tan((angle * Math.PI) / 180) * this.xMax * 0.5;
 
         // update weight position based on updated wedge width/height
-        let yPos = this.yMax - 0.08 * this.layoutDoc[HeightSym]() * 2 - Math.tan((angle * Math.PI) / 180) * this.xMax * 0.5;
+        let yPos = this.yMax - 0.08 * this.props.PanelHeight() * 2 - Math.tan((angle * Math.PI) / 180) * this.xMax * 0.5;
 
         // adjust y position
         if (angle >= 5 && angle < 10) {
-            yPos += 0.08 * this.layoutDoc[HeightSym]() * 0.1;
+            yPos += 0.08 * this.props.PanelHeight() * 0.1;
         } else if (angle >= 10 && angle < 15) {
-            yPos += 0.08 * this.layoutDoc[HeightSym]() * 0.23;
+            yPos += 0.08 * this.props.PanelHeight() * 0.23;
         } else if (angle >= 15 && angle < 20) {
-            yPos += 0.08 * this.layoutDoc[HeightSym]() * 0.26;
+            yPos += 0.08 * this.props.PanelHeight() * 0.26;
         } else if (angle >= 20 && angle < 25) {
-            yPos += 0.08 * this.layoutDoc[HeightSym]() * 0.33;
+            yPos += 0.08 * this.props.PanelHeight() * 0.33;
         } else if (angle >= 25 && angle < 30) {
-            yPos += 0.08 * this.layoutDoc[HeightSym]() * 0.35;
+            yPos += 0.08 * this.props.PanelHeight() * 0.35;
         } else if (angle >= 30 && angle < 35) {
-            yPos += 0.08 * this.layoutDoc[HeightSym]() * 0.4;
+            yPos += 0.08 * this.props.PanelHeight() * 0.4;
         } else if (angle >= 35 && angle < 40) {
-            yPos += 0.08 * this.layoutDoc[HeightSym]() * 0.45;
+            yPos += 0.08 * this.props.PanelHeight() * 0.45;
         } else if (angle >= 40 && angle < 45) {
-            yPos += 0.08 * this.layoutDoc[HeightSym]() * 0.47;
+            yPos += 0.08 * this.props.PanelHeight() * 0.47;
         } else if (angle >= 45) {
-            yPos += 0.08 * this.layoutDoc[HeightSym]() * 0.52;
+            yPos += 0.08 * this.props.PanelHeight() * 0.52;
         }
 
         this.dataDoc.mass1_positionXstart = this.xMax * 0.25;
@@ -692,8 +680,8 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
         this.dataDoc.simulation_showComponentForces = false;
         this.dataDoc.mass1_velocityYstart = 0;
         this.dataDoc.mass1_velocityXstart = value;
-        let xPos = (this.xMax + this.xMin) / 2 - 0.08 * this.layoutDoc[HeightSym]();
-        let yPos = (this.yMax + this.yMin) / 2 + this.circularMotionRadius - 0.08 * this.layoutDoc[HeightSym]();
+        let xPos = (this.xMax + this.xMin) / 2 - 0.08 * this.props.PanelHeight();
+        let yPos = (this.yMax + this.yMin) / 2 + this.circularMotionRadius - 0.08 * this.props.PanelHeight();
         this.dataDoc.mass1_positionYstart = yPos;
         this.dataDoc.mass1_positionXstart = xPos;
         const tensionForce: IForce = {
@@ -713,8 +701,8 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
         const angle = 30;
         const x = length * Math.cos(((90 - angle) * Math.PI) / 180);
         const y = length * Math.sin(((90 - angle) * Math.PI) / 180);
-        const xPos = this.xMax / 2 - x - 0.08 * this.layoutDoc[HeightSym]();
-        const yPos = y - 0.08 * this.layoutDoc[HeightSym]() - 5;
+        const xPos = this.xMax / 2 - x - 0.08 * this.props.PanelHeight();
+        const yPos = y - 0.08 * this.props.PanelHeight() - 5;
         this.dataDoc.mass1_positionXstart = xPos;
         this.dataDoc.mass1_positionYstart = yPos;
         const mag = this.mass1 * Math.abs(this.gravity) * Math.sin((60 * Math.PI) / 180);
@@ -778,7 +766,7 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
         };
         this.dataDoc.mass1_forcesUpdated = JSON.stringify([gravityForce]);
         this.dataDoc.mass1_forcesStart = JSON.stringify([gravityForce]);
-        this.dataDoc.mass1_positionXstart = this.xMax / 2 - 0.08 * this.layoutDoc[HeightSym]();
+        this.dataDoc.mass1_positionXstart = this.xMax / 2 - 0.08 * this.props.PanelHeight();
         this.dataDoc.mass1_positionYstart = 200;
         this.dataDoc.spring_constant = 0.5;
         this.dataDoc.spring_lengthRest = 200;
@@ -788,7 +776,7 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
 
     // Default setup for suspension simulation
     setupSuspension = () => {
-        let xPos = (this.xMax + this.xMin) / 2 - 0.08 * this.layoutDoc[HeightSym]();
+        let xPos = (this.xMax + this.xMin) / 2 - 0.08 * this.props.PanelHeight();
         let yPos = this.yMin + 200;
         this.dataDoc.mass1_positionYstart = yPos;
         this.dataDoc.mass1_positionXstart = xPos;
@@ -822,9 +810,9 @@ 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.layoutDoc[HeightSym]()) - 5;
+        this.dataDoc.mass1_positionXstart = (this.xMin + this.xMax) / 2 - 2 * (0.08 * this.props.PanelHeight()) - 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.layoutDoc[HeightSym]()) - 5;
+        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);
         const gravityForce1: IForce = {
             description: 'Gravity',
@@ -938,8 +926,8 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
         const commonWeightProps = {
             pause: this.pause,
             paused: BoolCast(this.dataDoc.simulation_paused),
-            panelWidth: this.layoutDoc[WidthSym],
-            panelHeight: this.layoutDoc[HeightSym],
+            panelWidth: this.props.PanelWidth,
+            panelHeight: this.props.PanelHeight,
             xMax: this.xMax,
             xMin: this.xMin,
             yMax: this.yMax,
@@ -964,9 +952,9 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
             pendulumLength: this.pendulumLength,
             startPendulumAngle: this.pendulumAngleStart,
             startPendulumLength: this.pendulumLengthStart,
-            radius: 0.08 * this.layoutDoc[HeightSym](),
+            radius: 0.08 * this.props.PanelHeight(),
             reset: BoolCast(this.dataDoc.simulation_reset),
-            simulationSpeed: NumCast(this.dataDoc.simulation_speed),
+            simulationSpeed: NumCast(this.dataDoc.simulation_speed, 2),
             showAcceleration: BoolCast(this.dataDoc.simulation_showAcceleration),
             showForceMagnitudes: BoolCast(this.dataDoc.simulation_showForceMagnitudes),
             showForces: BoolCast(this.dataDoc.simulation_showForces),
@@ -983,9 +971,9 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
                                     <div
                                         style={{
                                             position: 'fixed',
-                                            left: 0.1 * this.layoutDoc[WidthSym]() + 'px',
-                                            top: 0.95 * this.layoutDoc[HeightSym]() + 'px',
-                                            width: 0.5 * this.layoutDoc[WidthSym]() + 'px',
+                                            left: 0.1 * this.props.PanelWidth() + 'px',
+                                            top: 0.95 * this.props.PanelHeight() + 'px',
+                                            width: 0.5 * this.props.PanelWidth() + 'px',
                                         }}>
                                         <LinearProgress />
                                     </div>
@@ -1138,8 +1126,8 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
                                 </Dialog>
                                 <div className="wordProblemBox">
                                     <div className="question">
-                                        <p>{StrCast(this.dataDoc.questionPartOne)}</p>
-                                        <p>{StrCast(this.dataDoc.questionPartTwo)}</p>
+                                        <p>{this.questionPartOne}</p>
+                                        <p>{this.questionPartTwo}</p>
                                     </div>
                                     <div className="answers">
                                         {this.selectedQuestion.answerParts.includes('force of gravity') && (
diff --git a/src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx b/src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx
index ac28ee4a0..c036f1041 100644
--- a/src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx
+++ b/src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx
@@ -1062,7 +1062,7 @@ export default class Weight extends React.Component<IWeightProps, IState> {
                         <p
                             style={{
                                 position: 'absolute',
-                                left: Math.round(this.props.xMax * 0.5 - 200 + this.props.wedgeWidth - 80) + 'px',
+                                left: Math.round(this.props.xMax * 0.25 + this.props.wedgeWidth / 3) + 'px',
                                 top: Math.round(this.props.yMax - 40) + 'px',
                             }}>
                             {Math.round(((Math.atan(this.props.wedgeHeight / this.props.wedgeWidth) * 180) / Math.PI) * 100) / 100}°