diff options
Diffstat (limited to 'src')
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}° |