diff options
3 files changed, 70 insertions, 94 deletions
diff --git a/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.scss b/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.scss index 0f05010b4..2e16417f5 100644 --- a/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.scss +++ b/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.scss @@ -69,4 +69,8 @@ button { .mechanicsSimulationSettingsMenuRowDescription { width: 50%; +} + +.dropdownMenu { + z-index: 50; }
\ No newline at end of file diff --git a/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx b/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx index 5335fc1ec..3cb34d5b9 100644 --- a/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx +++ b/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx @@ -33,10 +33,9 @@ import { import Typography from "@mui/material/Typography"; import "./PhysicsSimulationBox.scss"; import InputField from "./PhysicsSimulationInputField"; -// import questions from "./PhysicsSimulationQuestions.json"; -// import tutorials from "./PhysicsSimulationTutorial.json"; +import questions from "./PhysicsSimulationQuestions.json"; +import tutorials from "./PhysicsSimulationTutorial.json"; import Wall from "./PhysicsSimulationWall"; -import IWall from "./PhysicsSimulationWall"; import Weight from "./PhysicsSimulationWeight"; interface IWallProps { @@ -211,7 +210,7 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi this.dataDoc.mass2 = this.dataDoc.mass2 ?? 1; // Setup simulation - this.setupSimulation() + this.setupSimulation(this.dataDoc.simulationType, this.dataDoc.mode) } componentDidUpdate() { @@ -220,16 +219,17 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi this.radius = 0.05*this.layoutDoc._height ?? 50; } - setupSimulation = () => { - if (this.dataDoc.simulationType != "Circular Motion") { + setupSimulation = (simulationType: string, mode: string) => { + this.dataDoc.simulationPaused = true; + if (simulationType != "Circular Motion") { this.dataDoc.startVelX = 0; this.dataDoc.setStartVelY = 0; this.dataDoc.velocityXDisplay = (0); this.dataDoc.velocityYDisplay = (0); } - if (this.dataDoc.mode == "Freeform") { + if (mode == "Freeform") { this.dataDoc.showForceMagnitudes = (true); - if (this.dataDoc.simulationType == "One Weight") { + if (simulationType == "One Weight") { this.dataDoc.showComponentForces = false; this.dataDoc.startPosY = (this.yMin + this.radius); this.dataDoc.startPosX = ((this.xMax + this.xMin) / 2 - this.radius); @@ -252,7 +252,7 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi }, ]); this.dataDoc.simulationReset = (!this.dataDoc.simulationReset); - } else if (this.dataDoc.simulationType == "Inclined Plane") { + } else if (simulationType == "Inclined Plane") { this.changeWedgeBasedOnNewAngle(26); this.dataDoc.startForces = ([ { @@ -263,46 +263,46 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi }, ]); this.updateForcesWithFriction(Number(this.dataDoc.coefficientOfStaticFriction)); - } else if (this.dataDoc.simulationType == "Pendulum") { + } else if (simulationType == "Pendulum") { this.setupPendulum(); - } else if (this.dataDoc.simulationType == "Spring") { + } else if (simulationType == "Spring") { this.setupSpring(); - } else if (this.dataDoc.simulationType == "Circular Motion") { + } else if (simulationType == "Circular Motion") { this.setupCircular(0); - } else if (this.dataDoc.simulationType == "Pulley") { + } else if (simulationType == "Pulley") { this.setupPulley(); - } else if (this.dataDoc.simulationType == "Suspension") { + } else if (simulationType == "Suspension") { this.setupSuspension(); } - } else if (this.dataDoc.mode == "Review") { + } else if (mode == "Review") { this.dataDoc.showComponentForces = (false); this.dataDoc.showForceMagnitudes = (true); this.dataDoc.showAcceleration = (false); this.dataDoc.showVelocity = (false); this.dataDoc.showForces= (true); // this.generateNewQuestion(); - if (this.dataDoc.simulationType == "One Weight") { + if (simulationType == "One Weight") { // TODO - one weight review problems - } else if (this.dataDoc.simulationType == "Spring") { + } else if (simulationType == "Spring") { this.setupSpring(); // TODO - spring review problems - } else if (this.dataDoc.simulationType == "Inclined Plane") { + } else if (simulationType == "Inclined Plane") { this.dataDoc.updatedForces = ([]); this.dataDoc.startForces = ([]); - } else if (this.dataDoc.simulationType == "Pendulum") { + } else if (simulationType == "Pendulum") { this.setupPendulum(); // TODO - pendulum review problems - } else if (this.dataDoc.simulationType == "Circular Motion") { + } else if (simulationType == "Circular Motion") { this.setupCircular(0); // TODO - circular motion review problems - } else if (this.dataDoc.simulationType == "Pulley") { + } else if (simulationType == "Pulley") { this.setupPulley(); // TODO - pulley tutorial review problems - } else if (this.dataDoc.simulationType == "Suspension") { + } else if (simulationType == "Suspension") { this.setupSuspension(); // TODO - suspension tutorial review problems } - } else if (this.dataDoc.mode == "Tutorial") { + } else if (mode == "Tutorial") { this.dataDoc.showComponentForces = (false); this.dataDoc.stepNumber = (0); this.dataDoc.showAcceleration = (false); @@ -1195,10 +1195,10 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi }; this.dataDoc.updatedForces = ([gravityForce1, tensionForce1]); this.dataDoc.startForces = ([gravityForce1, tensionForce1]); - this.dataDoc.startPosY2 = ((this.props.yMax + this.props.yMin) / 2); - this.dataDoc.startPosX2 = ((this.props.xMin + this.props.xMax) / 2 + 5); - this.dataDoc.positionYDisplay2 = (this.getDisplayYPos((this.props.yMax + this.props.yMin) / 2)); - this.dataDoc.positionXDisplay2 = ((this.props.xMin + this.props.xMax) / 2 + 5); + this.dataDoc.startPosY2 = ((this.yMax + this.yMin) / 2); + this.dataDoc.startPosX2 = ((this.xMin + this.xMax) / 2 + 5); + this.dataDoc.positionYDisplay2 = (this.getDisplayYPos((this.yMax + this.yMin) / 2)); + this.dataDoc.positionXDisplay2 = ((this.xMin + this.xMax) / 2 + 5); this.dataDoc.updatedForces2 = ([gravityForce2, tensionForce2]); this.dataDoc.startForces2 = ([gravityForce2, tensionForce2]); this.dataDoc.simulationReset = (!this.dataDoc.simulationReset); @@ -1278,32 +1278,6 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi <LinearProgress /> </div> )} - <div - style={{ - position: "fixed", - top: 1 + "em", - left: this.xMin + 12 + "px", - }} - > - <div className="dropdownMenu"> - <select - value={this.dataDoc.simulationType} - onChange={(event) => { - this.dataDoc.simulationType = (event.target.value); - this.setupSimulation() - }} - style={{ height: "2em", width: "100%", fontSize: "16px" }} - > - <option value="One Weight">Projectile</option> - <option value="Inclined Plane">Inclined Plane</option> - <option value="Pendulum">Pendulum</option> - <option value="Spring">Spring</option> - <option value="Circular Motion">Circular Motion</option> - <option value="Pulley">Pulley</option> - <option value="Suspension">Suspension</option> - </select> - </div> - </div> </div> <div className="mechanicsSimulationElements"> <Weight @@ -1341,7 +1315,7 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi springRestLength={this.dataDoc.springRestLength} startForces={this.dataDoc.startForces} startPosX={this.dataDoc.startPosX} - startPosY={this.dataDoc.startPosY} + startPosY={this.dataDoc.startPosY ?? 0} startVelX={this.dataDoc.startVelX} startVelY={this.dataDoc.startVelY} timestepSize={0.05} @@ -1454,11 +1428,29 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi )} </Stack> <div className="dropdownMenu"> + <select + value={this.dataDoc.simulationType} + onChange={(event) => { + this.dataDoc.simulationType = (event.target.value); + this.setupSimulation(event.target.value, this.dataDoc.mode) + }} + style={{ height: "2em", width: "100%", fontSize: "16px" }} + > + <option value="One Weight">Projectile</option> + <option value="Inclined Plane">Inclined Plane</option> + <option value="Pendulum">Pendulum</option> + <option value="Spring">Spring</option> + <option value="Circular Motion">Circular Motion</option> + <option value="Pulley">Pulley</option> + <option value="Suspension">Suspension</option> + </select> + </div> + <div className="dropdownMenu"> <select value={this.dataDoc.mode} onChange={(event) => { this.dataDoc.mode = (event.target.value); - this.setupSimulation() + this.setupSimulation(this.dataDoc.simulationType, event.target.value) }} style={{ height: "2em", width: "100%", fontSize: "16px" }} > diff --git a/src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx b/src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx index 368f35f3c..f78f14704 100644 --- a/src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx +++ b/src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx @@ -179,7 +179,6 @@ export default class Weight extends React.Component<IWeightProps, IState> { componentDidUpdate(prevProps: Readonly<IWeightProps>, prevState: Readonly<IState>, snapshot?: any): void { // Change pendulum angle from input field if (prevProps.adjustPendulumAngle != this.props.adjustPendulumAngle) { - console.log('pendulum angle') let length = this.props.adjustPendulumAngle.length; const x = length * Math.cos(((90 - this.props.adjustPendulumAngle.angle) * Math.PI) / 180); @@ -197,7 +196,6 @@ export default class Weight extends React.Component<IWeightProps, IState> { // When display values updated by user, update real values if (prevProps.updateDisplay != this.props.updateDisplay) { - console.log('update display') if (this.props.updateDisplay.xDisplay != this.state.xPosition) { let x = this.props.updateDisplay.xDisplay; x = Math.max(0, x); @@ -232,26 +230,25 @@ export default class Weight extends React.Component<IWeightProps, IState> { // Prevent bug when switching between sims if (prevProps.startForces != this.props.startForces) { - console.log('switch sims') this.setState({xVelocity: this.props.startVelX}) this.setState({yVelocity: this.props.startVelY}) this.setDisplayValues(); } - // Make sure weight doesn't go above max height - if (prevState.updatedStartPosY != this.state.updatedStartPosY || prevProps.startVelY != this.props.startVelY) { - console.log('max height check') - if (this.props.dataDoc['simulationType'] == "One Weight") { - let maxYPos = this.state.updatedStartPosY; - if (this.props.startVelY != 0) { - maxYPos -= (this.props.startVelY * this.props.startVelY) / (2 * Math.abs(this.props.gravity)); - } - if (maxYPos < 0) { - maxYPos = 0; - } - this.setState({maxPosYConservation: maxYPos}) - } - } + // // Make sure weight doesn't go above max height + // if (prevState.updatedStartPosY != this.state.updatedStartPosY || prevProps.startVelY != this.props.startVelY) { + // console.log('max height check') + // if (this.props.dataDoc['simulationType'] == "One Weight") { + // let maxYPos = this.state.updatedStartPosY; + // if (this.props.startVelY != 0) { + // maxYPos -= (this.props.startVelY * this.props.startVelY) / (2 * Math.abs(this.props.gravity)); + // } + // if (maxYPos < 0) { + // maxYPos = 0; + // } + // this.setState({maxPosYConservation: maxYPos}) + // } + // } // Check for collisions and update if (prevState.timer != this.state.timer) { @@ -416,8 +413,7 @@ export default class Weight extends React.Component<IWeightProps, IState> { // Update x position when start pos x changes if (prevProps.startPosX != this.props.startPosX) { - console.log('xpos') - if (this.props.paused) { + if (this.props.paused && !isNaN(this.props.startPosX)) { this.setState({xPosition: this.props.startPosX}) this.setState({updatedStartPosX: this.props.startPosX}) this.setXPosDisplay(this.props.startPosX) @@ -426,11 +422,10 @@ export default class Weight extends React.Component<IWeightProps, IState> { // Update y position when start pos y changes TODO debug if (prevProps.startPosY != this.props.startPosY) { - console.log('ypos') - if (this.props.paused) { - // this.setState({yPosition: this.props.startPosY}) - this.setState({updatedStartPosY: this.props.startPosY}) - this.setYPosDisplay(this.props.startPosY) + if (this.props.paused && !isNaN(this.props.startPosY)) { + this.setState({yPosition: this.props.startPosY}) + this.setState({updatedStartPosY: this.props.startPosY ?? 0}) + this.setYPosDisplay(this.props.startPosY ?? 0) } } @@ -1110,7 +1105,6 @@ export default class Weight extends React.Component<IWeightProps, IState> { position: "absolute", left: 0, top: 0, - zIndex: -2, }} > <svg width={this.props.xMax + "px"} height={this.props.layoutDoc._height + "px"}> @@ -1133,7 +1127,6 @@ export default class Weight extends React.Component<IWeightProps, IState> { position: "absolute", left: 0, top: 0, - zIndex: -2, }} > <svg width={this.props.xMax + "px"} height={this.props.layoutDoc._height + "px"}> @@ -1149,7 +1142,6 @@ export default class Weight extends React.Component<IWeightProps, IState> { <p style={{ position: "absolute", - zIndex: 10, left: (this.props.xMax + this.props.xMin) / 2 - this.props.radius - this.props.yMin - 200 + 80 + "px", top: 10 + "px", backgroundColor: this.labelBackgroundColor, @@ -1178,7 +1170,6 @@ export default class Weight extends React.Component<IWeightProps, IState> { position: "absolute", left: 0, top: 0, - zIndex: -2, }} > <svg width={this.props.xMax + "px"} height={this.props.layoutDoc._height + "px"}> @@ -1195,7 +1186,6 @@ export default class Weight extends React.Component<IWeightProps, IState> { <p style={{ position: "absolute", - zIndex: 10, left: (this.props.xMax + this.props.xMin) / 2 + this.props.yMin + 200 + this.props.radius - 80 + "px", top: 10 + "px", backgroundColor: this.labelBackgroundColor, @@ -1226,7 +1216,6 @@ export default class Weight extends React.Component<IWeightProps, IState> { position: "absolute", left: 0, top: 0, - zIndex: -2, }} > <svg width={this.props.xMax + "px"} height={this.props.layoutDoc._height + "px"}> @@ -1249,7 +1238,6 @@ export default class Weight extends React.Component<IWeightProps, IState> { position: "absolute", left: 0, top: 0, - zIndex: -2, }} > <svg width={this.props.xMax + "px"} height={this.props.layoutDoc._height + "px"}> @@ -1278,7 +1266,6 @@ export default class Weight extends React.Component<IWeightProps, IState> { <p style={{ position: "absolute", - zIndex: -1, left: this.props.xMax / 2 + "px", top: 30 + "px", backgroundColor: this.labelBackgroundColor, @@ -1320,7 +1307,6 @@ export default class Weight extends React.Component<IWeightProps, IState> { style={{ pointerEvents: "none", position: "absolute", - zIndex: -1, left: 0, top: 0, }} @@ -1355,7 +1341,6 @@ export default class Weight extends React.Component<IWeightProps, IState> { position: "absolute", left: this.state.xPosition + this.props.radius + this.state.xAccel * 3 + 25 + "px", top: this.state.yPosition + this.props.radius + this.state.yAccel * 3 + 70 + "px", - zIndex: -1, lineHeight: 0.5, }} > @@ -1376,7 +1361,6 @@ export default class Weight extends React.Component<IWeightProps, IState> { style={{ pointerEvents: "none", position: "absolute", - zIndex: -1, left: 0, top: 0, }} @@ -1411,7 +1395,6 @@ export default class Weight extends React.Component<IWeightProps, IState> { position: "absolute", left: this.state.xPosition + this.props.radius + this.state.xVelocity * 3 + 25 + "px", top: this.state.yPosition + this.props.radius + this.state.yVelocity * 3 + "px", - zIndex: -1, lineHeight: 0.5, }} > @@ -1473,7 +1456,6 @@ export default class Weight extends React.Component<IWeightProps, IState> { style={{ pointerEvents: "none", position: "absolute", - zIndex: -1, left: this.props.xMin, top: this.props.yMin, }} @@ -1526,7 +1508,6 @@ export default class Weight extends React.Component<IWeightProps, IState> { position: "absolute", left: labelLeft + "px", top: labelTop + "px", - // zIndex: -1, lineHeight: 0.5, backgroundColor: this.labelBackgroundColor, }} @@ -1584,7 +1565,6 @@ export default class Weight extends React.Component<IWeightProps, IState> { style={{ pointerEvents: "none", position: "absolute", - zIndex: -1, left: this.props.xMin, top: this.props.yMin, }} |