From f6ad7cf21b8763a0dd54275a8e433e473e382afe Mon Sep 17 00:00:00 2001
From: brynnchernosky <56202540+brynnchernosky@users.noreply.github.com>
Date: Mon, 1 May 2023 14:45:01 -0400
Subject: add box

---
 .../nodes/PhysicsBox/PhysicsSimulationBox.tsx      | 355 ++++++++++-----------
 1 file changed, 177 insertions(+), 178 deletions(-)

(limited to 'src')

diff --git a/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx b/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx
index 101cf1d4a..446c4933b 100644
--- a/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx
+++ b/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx
@@ -89,8 +89,8 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
   // Constants
   const xMin = 0;
   const yMin = 0;
-  const xMax = window.innerWidth * 0.7;
-  const yMax = window.innerHeight * 0.8;
+  const xMax = 100;
+  const yMax = 100;
   const color = `rgba(0,0,0,0.5)`;
   const radius = 50;
   const wallPositions: IWallProps[] = [];
@@ -102,8 +102,8 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
     this.wallPositions.push({ length: 80, xPos: 69.5, yPos: 0, angleInDegrees: 90 });
 
     // Used throughout sims
-    this.xMax = this.layoutDoc._width;
-    this.yMax = this.layoutDoc._height;
+    this.xMax = this.layoutDoc._width*0.08;
+    this.yMax = this.layoutDoc._height*0.08;
     this.radius = 0.1*this.layoutDoc._height;
     this.dataDoc.reviewCoefficient = this.dataDoc.reviewCoefficient ?? 0;
     this.dataDoc.questionVariables = this.dataDoc.questionVariables ?? [];
@@ -356,8 +356,8 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
   }
 
   componentDidUpdate() {
-    this.xMax = this.layoutDoc._width;
-    this.yMax = this.layoutDoc._height;
+    this.xMax = this.layoutDoc._width*0.08;
+    this.yMax = this.layoutDoc._height*0.08;
     this.radius = 0.1*this.layoutDoc._height;
   }
 
@@ -1762,108 +1762,107 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
                   label="Show velocity vector"
                   labelPlacement="start"
                 />
-
                 <InputField
                   label={<Box>Speed</Box>}
                   lowerBound={1}
-                  changeValue={setSimulationSpeed}
+                  changeValue={this.dataDoc.simulationSpeed} //TODO - deal with input field change value now that datadoc is being used!
                   step={1}
                   unit={"x"}
                   upperBound={10}
-                  value={simulationSpeed}
+                  value={this.dataDoc.simulationSpeed}
                   labelWidth={"5em"}
                 />
-                {simulationPaused && simulationType != "Circular Motion" && (
+                {this.dataDoc.simulationPaused && this.dataDoc.simulationType != "Circular Motion" && (
                   <InputField
                     label={<Box>Gravity</Box>}
                     lowerBound={-30}
-                    changeValue={setGravity}
+                    changeValue={this.dataDoc.gravity}
                     step={0.01}
                     unit={"m/s2"}
                     upperBound={0}
-                    value={gravity}
+                    value={this.dataDoc.gravity}
                     effect={(val: number) => {
-                      setResetAll(!resetAll);
+                      this.dataDoc.resetAll = (!this.dataDoc.resetAll);
                     }}
                     labelWidth={"5em"}
                   />
                 )}
-                {simulationPaused && simulationType != "Pulley" && (
+                {this.dataDoc.simulationPaused && this.dataDoc.simulationType != "Pulley" && (
                   <InputField
                     label={<Box>Mass</Box>}
                     lowerBound={1}
-                    changeValue={setMass}
+                    changeValue={this.dataDoc.mass}
                     step={0.1}
                     unit={"kg"}
                     upperBound={5}
-                    value={mass}
+                    value={this.dataDoc.mass}
                     effect={(val: number) => {
-                      setResetAll(!resetAll);
+                      this.dataDoc.resetAll = (!this.dataDoc.resetAll);
                     }}
                     labelWidth={"5em"}
                   />
                 )}
-                {simulationPaused && simulationType == "Pulley" && (
+                {this.dataDoc.simulationPaused && this.dataDoc.simulationType == "Pulley" && (
                   <InputField
                     label={<Box>Red mass</Box>}
                     lowerBound={1}
-                    changeValue={setMass}
+                    changeValue={this.dataDoc.mass}
                     step={0.1}
                     unit={"kg"}
                     upperBound={5}
-                    value={mass}
+                    value={this.dataDoc.mass}
                     effect={(val: number) => {
-                      setResetAll(!resetAll);
+                      this.dataDoc.resetAll = (!this.dataDoc.resetAll);
                     }}
                     labelWidth={"5em"}
                   />
                 )}
-                {simulationPaused && simulationType == "Pulley" && (
+                {this.dataDoc.simulationPaused && this.dataDoc.simulationType == "Pulley" && (
                   <InputField
                     label={<Box>Blue mass</Box>}
                     lowerBound={1}
-                    changeValue={setMass2}
+                    changeValue={this.dataDoc.mass2}
                     step={0.1}
                     unit={"kg"}
                     upperBound={5}
-                    value={mass2}
+                    value={this.dataDoc.mass2}
                     effect={(val: number) => {
-                      setResetAll(!resetAll);
+                      this.dataDoc.resetAll = (!this.dataDoc.resetAll);
                     }}
                     labelWidth={"5em"}
                   />
                 )}
-                {simulationPaused && simulationType == "Circular Motion" && (
+                {this.dataDoc.simulationPaused && this.dataDoc.simulationType == "Circular Motion" && (
                   <InputField
                     label={<Box>Rod length</Box>}
                     lowerBound={100}
-                    changeValue={setCircularMotionRadius}
+                    changeValue={this.dataDoc.circularMotionRadius}
                     step={5}
                     unit={"kg"}
                     upperBound={250}
-                    value={circularMotionRadius}
+                    value={this.dataDoc.circularMotionRadius}
                     effect={(val: number) => {
-                      setResetAll(!resetAll);
+                      this.dataDoc.resetAll = (!this.dataDoc.resetAll);
                     }}
                     labelWidth={"5em"}
                   />
                 )}
               </FormGroup>
             </FormControl>
-            {simulationType == "Spring" && simulationPaused && (
+            {this.dataDoc.simulationType == "Spring" && this.dataDoc.simulationPaused && (
               <div>
                 <InputField
                   label={
                     <Typography color="inherit">Spring stiffness</Typography>
                   }
                   lowerBound={0.1}
-                  changeValue={setSpringConstant}
+                  changeValue={this.dataDoc.springConstant}
                   step={1}
                   unit={"N/m"}
                   upperBound={500}
                   value={springConstant}
                   effect={(val: number) => {
-                    setSimulationReset(!simulationReset);
+                    this.dataDoc.simulationReset(!this.dataDoc.simulationReset);
                   }}
                   radianEquivalent={false}
                   mode={"Freeform"}
@@ -1872,13 +1871,13 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
                 <InputField
                   label={<Typography color="inherit">Rest length</Typography>}
                   lowerBound={10}
-                  changeValue={setSpringRestLength}
+                  changeValue={this.dataDoc.springRestLength}
                   step={100}
                   unit={""}
                   upperBound={500}
-                  value={springRestLength}
+                  value={this.dataDoc.springRestLength}
                   effect={(val: number) => {
-                    setSimulationReset(!simulationReset);
+                    this.dataDoc.simulationReset = (!this.dataDoc.simulationReset);
                   }}
                   radianEquivalent={false}
                   mode={"Freeform"}
@@ -1890,16 +1889,16 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
                       Starting displacement
                     </Typography>
                   }
-                  lowerBound={-(springRestLength - 10)}
+                  lowerBound={-(this.dataDoc.springRestLength - 10)}
                   changeValue={(val: number) => {}}
                   step={10}
                   unit={""}
-                  upperBound={springRestLength}
-                  value={springStartLength - springRestLength}
+                  upperBound={this.dataDoc.springRestLength}
+                  value={this.dataDoc.springStartLength - this.dataDoc.springRestLength}
                   effect={(val: number) => {
-                    setStartPosY(springRestLength + val);
-                    setSpringStartLength(springRestLength + val);
-                    setSimulationReset(!simulationReset);
+                    this.dataDoc.startPosY = (this.dataDoc.springRestLength + val);
+                    this.dataDoc.springStartLength = (this.dataDoc.springRestLength + val);
+                    this.dataDoc.simulationReset = (!this.dataDoc.simulationReset);
                   }}
                   radianEquivalent={false}
                   mode={"Freeform"}
@@ -1907,19 +1906,19 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
                 />
               </div>
             )}
-            {simulationType == "Inclined Plane" && simulationPaused && (
+            {this.dataDoc.simulationType == "Inclined Plane" && this.dataDoc.simulationPaused && (
               <div>
                 <InputField
                   label={<Box>&theta;</Box>}
                   lowerBound={0}
-                  changeValue={setWedgeAngle}
+                  changeValue={this.dataDoc.wedgeAngle}
                   step={1}
                   unit={"°"}
                   upperBound={49}
-                  value={wedgeAngle}
+                  value={this.dataDoc.wedgeAngle}
                   effect={(val: number) => {
-                    changeWedgeBasedOnNewAngle(val);
-                    setSimulationReset(!simulationReset);
+                    this.changeWedgeBasedOnNewAngle(val);
+                    this.dataDoc.simulationReset = (!this.dataDoc.simulationReset);
                   }}
                   radianEquivalent={true}
                   mode={"Freeform"}
@@ -1932,17 +1931,17 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
                     </Box>
                   }
                   lowerBound={0}
-                  changeValue={setCoefficientOfStaticFriction}
+                  changeValue={this.dataDoc.coefficientOfStaticFriction}
                   step={0.1}
                   unit={""}
                   upperBound={1}
-                  value={coefficientOfStaticFriction}
+                  value={this.dataDoc.coefficientOfStaticFriction}
                   effect={(val: number) => {
-                    updateForcesWithFriction(val);
-                    if (val < Number(coefficientOfKineticFriction)) {
-                      setCoefficientOfKineticFriction(val);
+                    this.updateForcesWithFriction(val);
+                    if (val < Number(this.dataDoc.coefficientOfKineticFriction)) {
+                      this.dataDoc.soefficientOfKineticFriction = (val);
                     }
-                    setSimulationReset(!simulationReset);
+                    this.dataDoc.simulationReset = (!this.dataDoc.simulationReset);
                   }}
                   mode={"Freeform"}
                   labelWidth={"2em"}
@@ -1954,54 +1953,54 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
                     </Box>
                   }
                   lowerBound={0}
-                  changeValue={setCoefficientOfKineticFriction}
+                  changeValue={this.dataDoc.coefficientOfKineticFriction}
                   step={0.1}
                   unit={""}
-                  upperBound={Number(coefficientOfStaticFriction)}
-                  value={coefficientOfKineticFriction}
+                  upperBound={Number(this.dataDoc.coefficientOfStaticFriction)}
+                  value={this.dataDoc.coefficientOfKineticFriction}
                   effect={(val: number) => {
-                    setSimulationReset(!simulationReset);
+                    this.dataDoc.simulationReset = (!this.dataDoc.simulationReset);
                   }}
                   mode={"Freeform"}
                   labelWidth={"2em"}
                 />
               </div>
             )}
-            {simulationType == "Inclined Plane" && !simulationPaused && (
+            {this.dataDoc.simulationType == "Inclined Plane" && !this.dataDoc.simulationPaused && (
               <Typography>
-                &theta;: {Math.round(Number(wedgeAngle) * 100) / 100}° ≈{" "}
-                {Math.round(((Number(wedgeAngle) * Math.PI) / 180) * 100) /
+                &theta;: {Math.round(Number(this.dataDoc.wedgeAngle) * 100) / 100}° ≈{" "}
+                {Math.round(((Number(this.dataDoc.wedgeAngle) * Math.PI) / 180) * 100) /
                   100}{" "}
                 rad
                 <br />
-                &mu; <sub>s</sub>: {coefficientOfStaticFriction}
+                &mu; <sub>s</sub>: {this.dataDoc.coefficientOfStaticFriction}
                 <br />
-                &mu; <sub>k</sub>: {coefficientOfKineticFriction}
+                &mu; <sub>k</sub>: {this.dataDoc.coefficientOfKineticFriction}
               </Typography>
             )}
-            {simulationType == "Pendulum" && !simulationPaused && (
+            {this.dataDoc.simulationType == "Pendulum" && !this.dataDoc.simulationPaused && (
               <Typography>
-                &theta;: {Math.round(pendulumAngle * 100) / 100}° ≈{" "}
-                {Math.round(((pendulumAngle * Math.PI) / 180) * 100) / 100}{" "}
+                &theta;: {Math.round(this.dataDoc.pendulumAngle * 100) / 100}° ≈{" "}
+                {Math.round(((this.dataDoc.pendulumAngle * Math.PI) / 180) * 100) / 100}{" "}
                 rad
               </Typography>
             )}
-            {simulationType == "Pendulum" && simulationPaused && (
+            {this.dataDoc.simulationType == "Pendulum" && this.dataDoc.simulationPaused && (
               <div>
                 <InputField
                   label={<Box>Angle</Box>}
                   lowerBound={0}
-                  changeValue={setPendulumAngle}
+                  changeValue={this.dataDoc.pendulumAngle}
                   step={1}
                   unit={"°"}
                   upperBound={59}
-                  value={pendulumAngle}
+                  value={this.dataDoc.pendulumAngle}
                   effect={(value) => {
-                    setStartPendulumAngle(value);
+                    this.dataDoc.startPendulumAngle = (value);
                     if (simulationType == "Pendulum") {
                       const mag =
                         mass *
-                        Math.abs(gravity) *
+                        Math.abs(this.dataDoc.gravity) *
                         Math.cos((value * Math.PI) / 180);
 
                       const forceOfTension: IForce = {
@@ -2020,7 +2019,7 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
                       const gravityParallel: IForce = {
                         description: "Gravity Parallel Component",
                         magnitude:
-                          Math.abs(gravity) *
+                          Math.abs(this.dataDoc.gravity) *
                           Math.cos((value * Math.PI) / 180),
                         directionInDegrees: 270 - value,
                         component: true,
@@ -2028,50 +2027,50 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
                       const gravityPerpendicular: IForce = {
                         description: "Gravity Perpendicular Component",
                         magnitude:
-                          Math.abs(gravity) *
+                          Math.abs(this.dataDoc.gravity) *
                           Math.sin((value * Math.PI) / 180),
                         directionInDegrees: -value,
                         component: true,
                       };
 
-                      const length = pendulumLength;
+                      const length = this.dataDoc.pendulumLength;
                       const x =
                         length * Math.cos(((90 - value) * Math.PI) / 180);
                       const y =
                         length * Math.sin(((90 - value) * Math.PI) / 180);
-                      const xPos = xMax / 2 - x - radius;
+                      const xPos = this.xMax / 2 - x - radius;
                       const yPos = y - radius - 5;
-                      setStartPosX(xPos);
-                      setStartPosY(yPos);
+                      this.dataDoc.startPosX = (xPos);
+                      this.dataDoc.startPosY= (yPos);
 
-                      setStartForces([
+                      this.dataDoc.startForces = ([
                         {
                           description: "Gravity",
-                          magnitude: Math.abs(gravity) * mass,
+                          magnitude: Math.abs(this.dataDoc.gravity) * this.dataDoc.mass,
                           directionInDegrees: 270,
                           component: false,
                         },
                         forceOfTension,
                       ]);
-                      setUpdatedForces([
+                      this.dataDoc.updatedForces = ([
                         {
                           description: "Gravity",
-                          magnitude: Math.abs(gravity) * mass,
+                          magnitude: Math.abs(this.dataDoc.gravity) * this.dataDoc.mass,
                           directionInDegrees: 270,
                           component: false,
                         },
                         forceOfTension,
                       ]);
-                      setComponentForces([
+                      this.dataDoc.componentForces = ([
                         tensionComponent,
                         gravityParallel,
                         gravityPerpendicular,
                       ]);
-                      setAdjustPendulumAngle({
+                      this.dataDoc.adjustPendulumAngle = ({
                         angle: value,
                         length: pendulumLength,
                       });
-                      setSimulationReset(!simulationReset);
+                      this.dataDoc.simulationReset = (!this.dataDoc.simulationReset);
                     }
                   }}
                   radianEquivalent={true}
@@ -2081,18 +2080,18 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
                 <InputField
                   label={<Box>Rod length</Box>}
                   lowerBound={0}
-                  changeValue={setPendulumLength}
+                  changeValue={this.dataDoc.pendulumLength}
                   step={1}
                   unit={"m"}
                   upperBound={400}
-                  value={Math.round(pendulumLength)}
+                  value={Math.round(this.dataDoc.pendulumLength)}
                   effect={(value) => {
                     if (simulationType == "Pendulum") {
-                      setAdjustPendulumAngle({
-                        angle: pendulumAngle,
+                      this.dataDoc.adjustPendulumAngle = ({
+                        angle: this.dataDoc.pendulumAngle,
                         length: value,
                       });
-                      setSimulationReset(!simulationReset);
+                      this.dataDoc.simulationReset = (!this.dataDoc.simulationReset);
                     }
                   }}
                   radianEquivalent={false}
@@ -2104,39 +2103,39 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
           </div>
         )}
         <div className="mechanicsSimulationEquation">
-          {mode == "Freeform" && (
+          {this.dataDoc.mode == "Freeform" && (
             <table>
               <tbody>
                 <tr>
-                  <td>{simulationType == "Pulley" ? "Red Weight" : ""}</td>
+                  <td>{this.dataDoc.simulationType == "Pulley" ? "Red Weight" : ""}</td>
                   <td>X</td>
                   <td>Y</td>
                 </tr>
                 <tr>
                   <td
                     style={{ cursor: "help" }}
-                    onClick={() => {
-                      window.open(
-                        "https://www.khanacademy.org/science/physics/two-dimensional-motion"
-                      );
-                    }}
+                    // onClick={() => {
+                    //   window.open(
+                    //     "https://www.khanacademy.org/science/physics/two-dimensional-motion"
+                    //   );
+                    // }}
                   >
                     <Box>Position</Box>
                   </td>
-                  {(!simulationPaused ||
-                    simulationType == "Inclined Plane" ||
-                    simulationType == "Suspension" ||
-                    simulationType == "Circular Motion" ||
-                    simulationType == "Pulley") && (
+                  {(!this.dataDoc.simulationPaused ||
+                    this.dataDoc.simulationType == "Inclined Plane" ||
+                    this.dataDoc.simulationType == "Suspension" ||
+                    this.dataDoc.simulationType == "Circular Motion" ||
+                    this.dataDoc.simulationType == "Pulley") && (
                     <td style={{ cursor: "default" }}>
-                      {positionXDisplay} m
+                      {this.dataDoc.positionXDisplay} m
                     </td>
                   )}{" "}
-                  {simulationPaused &&
-                    simulationType != "Inclined Plane" &&
-                    simulationType != "Suspension" &&
-                    simulationType != "Circular Motion" &&
-                    simulationType != "Pulley" && (
+                  {this.dataDoc.simulationPaused &&
+                    this.dataDoc.simulationType != "Inclined Plane" &&
+                    this.dataDoc.simulationType != "Suspension" &&
+                    this.dataDoc.simulationType != "Circular Motion" &&
+                    this.dataDoc.simulationType != "Pulley" && (
                       <td
                         style={{
                           cursor: "default",
@@ -2144,15 +2143,15 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
                       >
                         <InputField
                           lowerBound={0}
-                          changeValue={setPositionXDisplay}
+                          changeValue={this.dataDoc.positionXDisplay}
                           step={1}
                           unit={"m"}
-                          upperBound={xMax - 110}
-                          value={positionXDisplay}
+                          upperBound={this.xMax - 110}
+                          value={this.dataDoc.positionXDisplay}
                           effect={(value) => {
-                            setDisplayChange({
+                            this.dataDoc.displayChange = ({
                               xDisplay: value,
-                              yDisplay: positionYDisplay,
+                              yDisplay: this.dataDoc.positionYDisplay,
                             });
                           }}
                           small={true}
@@ -2160,20 +2159,20 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
                         />
                       </td>
                     )}{" "}
-                  {(!simulationPaused ||
-                    simulationType == "Inclined Plane" ||
-                    simulationType == "Suspension" ||
-                    simulationType == "Circular Motion" ||
-                    simulationType == "Pulley") && (
+                  {(!this.dataDoc.simulationPaused ||
+                    this.dataDoc.simulationType == "Inclined Plane" ||
+                    this.dataDoc.simulationType == "Suspension" ||
+                    this.dataDoc.simulationType == "Circular Motion" ||
+                    this.dataDoc.simulationType == "Pulley") && (
                     <td style={{ cursor: "default" }}>
-                      {positionYDisplay} m
+                      {this.dataDoc.positionYDisplay} m
                     </td>
                   )}{" "}
-                  {simulationPaused &&
-                    simulationType != "Inclined Plane" &&
-                    simulationType != "Suspension" &&
-                    simulationType != "Circular Motion" &&
-                    simulationType != "Pulley" && (
+                  {this.dataDoc.simulationPaused &&
+                    this.dataDoc.simulationType != "Inclined Plane" &&
+                    this.dataDoc.simulationType != "Suspension" &&
+                    this.dataDoc.simulationType != "Circular Motion" &&
+                    this.dataDoc.simulationType != "Pulley" && (
                       <td
                         style={{
                           cursor: "default",
@@ -2181,14 +2180,14 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
                       >
                         <InputField
                           lowerBound={0}
-                          changeValue={setPositionYDisplay}
+                          changeValue={this.dataDoc.positionYDisplay}
                           step={1}
                           unit={"m"}
-                          upperBound={yMax - 110}
-                          value={positionYDisplay}
+                          upperBound={this.yMax - 110}
+                          value={this.dataDoc.positionYDisplay}
                           effect={(value) => {
-                            setDisplayChange({
-                              xDisplay: positionXDisplay,
+                            this.dataDoc.displayChange = ({
+                              xDisplay: this.dataDoc.positionXDisplay,
                               yDisplay: value,
                             });
                           }}
@@ -2201,24 +2200,24 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
                 <tr>
                   <td
                     style={{ cursor: "help" }}
-                    onClick={() => {
-                      window.open(
-                        "https://www.khanacademy.org/science/physics/two-dimensional-motion"
-                      );
-                    }}
+                    // onClick={() => {
+                    //   window.open(
+                    //     "https://www.khanacademy.org/science/physics/two-dimensional-motion"
+                    //   );
+                    // }}
                   >
                     <Box>Velocity</Box>
                   </td>
-                  {(!simulationPaused ||
-                    (simulationType != "One Weight" &&
-                      simulationType != "Circular Motion")) && (
+                  {(!this.dataDoc.simulationPaused ||
+                    (this.dataDoc.simulationType != "One Weight" &&
+                    this.dataDoc.simulationType != "Circular Motion")) && (
                     <td style={{ cursor: "default" }}>
-                      {velocityXDisplay} m/s
+                      {this.dataDoc.velocityXDisplay} m/s
                     </td>
                   )}{" "}
-                  {simulationPaused &&
-                    (simulationType == "One Weight" ||
-                      simulationType == "Circular Motion") && (
+                  {this.dataDoc.simulationPaused &&
+                    (this.dataDoc.simulationType == "One Weight" ||
+                    this.dataDoc.simulationType == "Circular Motion") && (
                       <td
                         style={{
                           cursor: "default",
@@ -2226,26 +2225,26 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
                       >
                         <InputField
                           lowerBound={-50}
-                          changeValue={setVelocityXDisplay}
+                          changeValue={this.dataDoc.velocityXDisplay}
                           step={1}
                           unit={"m/s"}
                           upperBound={50}
-                          value={velocityXDisplay}
+                          value={this.dataDoc.velocityXDisplay}
                           effect={(value) => {
-                            setStartVelX(value);
-                            setSimulationReset(!simulationReset);
+                            this.dataDoc.startVelX = (value);
+                            this.dataDoc.simulationReset = (!this.dataDoc.simulationReset);
                           }}
                           small={true}
                           mode={"Freeform"}
                         />
                       </td>
                     )}{" "}
-                  {(!simulationPaused || simulationType != "One Weight") && (
+                  {(!this.dataDoc.simulationPaused || this.dataDoc.simulationType != "One Weight") && (
                     <td style={{ cursor: "default" }}>
-                      {velocityYDisplay} m/s
+                      {this.dataDoc.velocityYDisplay} m/s
                     </td>
                   )}{" "}
-                  {simulationPaused && simulationType == "One Weight" && (
+                  {this.dataDoc.simulationPaused && this.dataDoc.simulationType == "One Weight" && (
                     <td
                       style={{
                         cursor: "default",
@@ -2253,16 +2252,16 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
                     >
                       <InputField
                         lowerBound={-50}
-                        changeValue={setVelocityYDisplay}
+                        changeValue={this.dataDoc.velocityYDisplay}
                         step={1}
                         unit={"m/s"}
                         upperBound={50}
-                        value={velocityYDisplay}
+                        value={this.dataDoc.velocityYDisplay}
                         effect={(value) => {
-                          setStartVelY(-value);
-                          setDisplayChange({
-                            xDisplay: positionXDisplay,
-                            yDisplay: positionYDisplay,
+                          this.dataDoc.startVelY = (-value);
+                          this.dataDoc.displayChange = ({
+                            xDisplay: this.dataDoc.positionXDisplay,
+                            yDisplay: this.dataDoc.positionYDisplay,
                           });
                         }}
                         small={true}
@@ -2274,19 +2273,19 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
                 <tr>
                   <td
                     style={{ cursor: "help" }}
-                    onClick={() => {
-                      window.open(
-                        "https://www.khanacademy.org/science/physics/two-dimensional-motion"
-                      );
-                    }}
+                    // onClick={() => {
+                    //   window.open(
+                    //     "https://www.khanacademy.org/science/physics/two-dimensional-motion"
+                    //   );
+                    // }}
                   >
                     <Box>Acceleration</Box>
                   </td>
                   <td style={{ cursor: "default" }}>
-                    {accelerationXDisplay} m/s<sup>2</sup>
+                    {this.dataDoc.accelerationXDisplay} m/s<sup>2</sup>
                   </td>
                   <td style={{ cursor: "default" }}>
-                    {accelerationYDisplay} m/s<sup>2</sup>
+                    {this.dataDoc.accelerationYDisplay} m/s<sup>2</sup>
                   </td>
                 </tr>
                 <tr>
@@ -2294,16 +2293,16 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
                     <Box>Momentum</Box>
                   </td>
                   <td>
-                    {Math.round(velocityXDisplay * mass * 10) / 10} kg*m/s
+                    {Math.round(this.dataDoc.velocityXDisplay * this.dataDoc.mass * 10) / 10} kg*m/s
                   </td>
                   <td>
-                    {Math.round(velocityYDisplay * mass * 10) / 10} kg*m/s
+                    {Math.round(this.dataDoc.velocityYDisplay * this.dataDoc.mass * 10) / 10} kg*m/s
                   </td>
                 </tr>
               </tbody>
             </table>
           )}
-          {mode == "Freeform" && simulationType == "Pulley" && (
+          {this.dataDoc.mode == "Freeform" && this.dataDoc.simulationType == "Pulley" && (
             <table>
               <tbody>
                 <tr>
@@ -2315,19 +2314,19 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
                   <td>
                     <Box>Position</Box>
                   </td>
-                  <td style={{ cursor: "default" }}>{positionXDisplay2} m</td>
-                  <td style={{ cursor: "default" }}>{positionYDisplay2} m</td>
+                  <td style={{ cursor: "default" }}>{this.dataDoc.positionXDisplay2} m</td>
+                  <td style={{ cursor: "default" }}>{this.dataDoc.positionYDisplay2} m</td>
                 </tr>
                 <tr>
                   <td>
                     <Box>Velocity</Box>
                   </td>
                   <td style={{ cursor: "default" }}>
-                    {velocityXDisplay2} m/s
+                    {this.dataDoc.velocityXDisplay2} m/s
                   </td>
 
                   <td style={{ cursor: "default" }}>
-                    {velocityYDisplay2} m/s
+                    {this.dataDoc.velocityYDisplay2} m/s
                   </td>
                 </tr>
                 <tr>
@@ -2335,10 +2334,10 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
                     <Box>Acceleration</Box>
                   </td>
                   <td style={{ cursor: "default" }}>
-                    {accelerationXDisplay2} m/s<sup>2</sup>
+                    {this.dataDoc.accelerationXDisplay2} m/s<sup>2</sup>
                   </td>
                   <td style={{ cursor: "default" }}>
-                    {accelerationYDisplay2} m/s<sup>2</sup>
+                    {this.dataDoc.accelerationYDisplay2} m/s<sup>2</sup>
                   </td>
                 </tr>
                 <tr>
@@ -2346,17 +2345,17 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
                     <Box>Momentum</Box>
                   </td>
                   <td>
-                    {Math.round(velocityXDisplay2 * mass * 10) / 10} kg*m/s
+                    {Math.round(this.dataDoc.velocityXDisplay2 * this.dataDoc.mass * 10) / 10} kg*m/s
                   </td>
                   <td>
-                    {Math.round(velocityYDisplay2 * mass * 10) / 10} kg*m/s
+                    {Math.round(this.dataDoc.velocityYDisplay2 * this.dataDoc.mass * 10) / 10} kg*m/s
                   </td>
                 </tr>
               </tbody>
             </table>
           )}
         </div>
-        {simulationType != "Pendulum" && simulationType != "Spring" && (
+        {this.dataDoc.simulationType != "Pendulum" && this.dataDoc.simulationType != "Spring" && (
           <div>
             <p>Kinematic Equations</p>
             <ul>
@@ -2373,7 +2372,7 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
             </ul>
           </div>
         )}
-        {simulationType == "Spring" && (
+        {this.dataDoc.simulationType == "Spring" && (
           <div>
             <p>Harmonic Motion Equations: Spring</p>
             <ul>
@@ -2409,7 +2408,7 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
             </ul>
           </div>
         )}
-        {simulationType == "Pendulum" && (
+        {this.dataDoc.simulationType == "Pendulum" && (
           <div>
             <p>Harmonic Motion Equations: Pendulum</p>
             <ul>
@@ -2425,8 +2424,8 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
     <div
       style={{
         position: "fixed",
-        top: window.innerHeight - 120 + 20 + "px",
-        left: xMin + 90 - 80 + "px",
+        top: this.layoutDoc._height - 120 + 20 + "px",
+        left: this.xMin + 90 - 80 + "px",
         zIndex: -10000,
       }}
     >
@@ -2466,8 +2465,8 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
       <p
         style={{
           position: "fixed",
-          top: window.innerHeight - 120 + 40 + "px",
-          left: xMin + 90 - 80 + "px",
+          top: this.layoutDoc._height - 120 + 40 + "px",
+          left: this.xMin + 90 - 80 + "px",
         }}
       >
         {simulationType == "Circular Motion" ? "Z" : "Y"}
@@ -2475,8 +2474,8 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
       <p
         style={{
           position: "fixed",
-          top: window.innerHeight - 120 + 80 + "px",
-          left: xMin + 90 - 40 + "px",
+          top: this.layoutDoc._height - 120 + 80 + "px",
+          left: this.xMin + 90 - 40 + "px",
         }}
       >
         X
-- 
cgit v1.2.3-70-g09d2