diff options
-rw-r--r-- | src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx | 355 |
1 files changed, 177 insertions, 178 deletions
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>θ</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> - θ: {Math.round(Number(wedgeAngle) * 100) / 100}° ≈{" "} - {Math.round(((Number(wedgeAngle) * Math.PI) / 180) * 100) / + θ: {Math.round(Number(this.dataDoc.wedgeAngle) * 100) / 100}° ≈{" "} + {Math.round(((Number(this.dataDoc.wedgeAngle) * Math.PI) / 180) * 100) / 100}{" "} rad <br /> - μ <sub>s</sub>: {coefficientOfStaticFriction} + μ <sub>s</sub>: {this.dataDoc.coefficientOfStaticFriction} <br /> - μ <sub>k</sub>: {coefficientOfKineticFriction} + μ <sub>k</sub>: {this.dataDoc.coefficientOfKineticFriction} </Typography> )} - {simulationType == "Pendulum" && !simulationPaused && ( + {this.dataDoc.simulationType == "Pendulum" && !this.dataDoc.simulationPaused && ( <Typography> - θ: {Math.round(pendulumAngle * 100) / 100}° ≈{" "} - {Math.round(((pendulumAngle * Math.PI) / 180) * 100) / 100}{" "} + θ: {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 |