diff options
Diffstat (limited to 'src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx')
| -rw-r--r-- | src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx | 187 |
1 files changed, 95 insertions, 92 deletions
diff --git a/src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx b/src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx index a2883e825..1d980ebf4 100644 --- a/src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx +++ b/src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx @@ -2,6 +2,7 @@ import { Doc, HeightSym, WidthSym } from '../../../../fields/Doc'; import React = require('react'); import './PhysicsSimulationBox.scss'; import { NumCast } from '../../../../fields/Types'; +import { computed } from 'mobx'; interface IWallProps { length: number; @@ -29,7 +30,7 @@ export interface IWeightProps { elasticCollisions: boolean; gravity: number; mass: number; - mode: string; + simulationMode: string; noMovement: boolean; paused: boolean; pendulumAngle: number; @@ -55,7 +56,7 @@ export interface IWeightProps { timestepSize: number; updateXDisplay: number; updateYDisplay: number; - updatedForces: IForce[]; + forcesUpdated: IForce[]; wallPositions: IWallProps[]; wedgeHeight: number; wedgeWidth: number; @@ -117,7 +118,9 @@ export default class Weight extends React.Component<IWeightProps, IState> { } // Constants - draggable = this.props.dataDoc.simulation_Type != 'Inclined Plane' && this.props.dataDoc.simulation_Type != 'Pendulum' && this.props.dataDoc.mode == 'Freeform'; + @computed get draggable() { + return this.props.simulationType != 'Inclined Plane' && this.props.simulationType != 'Pendulum' && this.props.simulationMode == 'Freeform'; + } epsilon = 0.0001; labelBackgroundColor = `rgba(255,255,255,0.5)`; @@ -151,30 +154,30 @@ export default class Weight extends React.Component<IWeightProps, IState> { setYPosDisplay = (yPos: number) => { const displayPos = this.getDisplayYPos(yPos); if (this.props.color == 'red') { - this.props.dataDoc.position_YDisplay = Math.round(displayPos * 100) / 100; + this.props.dataDoc.mass1_positionY = Math.round(displayPos * 100) / 100; } else { - this.props.dataDoc.position_YDisplay2 = Math.round(displayPos * 100) / 100; + this.props.dataDoc.mass2_positionY = Math.round(displayPos * 100) / 100; } }; setXPosDisplay = (xPos: number) => { if (this.props.color == 'red') { - this.props.dataDoc.position_XDisplay = Math.round(xPos * 100) / 100; + this.props.dataDoc.mass1_positionX = Math.round(xPos * 100) / 100; } else { - this.props.dataDoc.position_XDisplay2 = Math.round(xPos * 100) / 100; + this.props.dataDoc.mass2_positionX = Math.round(xPos * 100) / 100; } }; setYVelDisplay = (yVel: number) => { if (this.props.color == 'red') { - this.props.dataDoc.velocity_YDisplay = (-1 * Math.round(yVel * 100)) / 100; + this.props.dataDoc.mass1_velocityY = (-1 * Math.round(yVel * 100)) / 100; } else { - this.props.dataDoc.velocity_YDisplay2 = (-1 * Math.round(yVel * 100)) / 100; + this.props.dataDoc.mass2_velocityY = (-1 * Math.round(yVel * 100)) / 100; } }; setXVelDisplay = (xVel: number) => { if (this.props.color == 'red') { - this.props.dataDoc.velocity_XDisplay = Math.round(xVel * 100) / 100; + this.props.dataDoc.mass1_velocityX = Math.round(xVel * 100) / 100; } else { - this.props.dataDoc.velocity_XDisplay2 = Math.round(xVel * 100) / 100; + this.props.dataDoc.mass2_velocityX = Math.round(xVel * 100) / 100; } }; @@ -185,15 +188,15 @@ export default class Weight extends React.Component<IWeightProps, IState> { this.setYVelDisplay(yVel); this.setXVelDisplay(xVel); if (this.props.color == 'red') { - this.props.dataDoc.acceleration_YDisplay = (-1 * Math.round(this.getNewAccelerationY(this.props.updatedForces) * 100)) / 100; - this.props.dataDoc.acceleration_XDisplay = Math.round(this.getNewAccelerationX(this.props.updatedForces) * 100) / 100; + this.props.dataDoc.mass1_accelerationY = (-1 * Math.round(this.getNewAccelerationY(this.props.forcesUpdated) * 100)) / 100; + this.props.dataDoc.mass1_accelerationX = Math.round(this.getNewAccelerationX(this.props.forcesUpdated) * 100) / 100; } else { - this.props.dataDoc.acceleration_YDisplay2 = (-1 * Math.round(this.getNewAccelerationY(this.props.updatedForces) * 100)) / 100; - this.props.dataDoc.acceleration_XDisplay2 = Math.round(this.getNewAccelerationX(this.props.updatedForces) * 100) / 100; + this.props.dataDoc.mass2_accelerationY = (-1 * Math.round(this.getNewAccelerationY(this.props.forcesUpdated) * 100)) / 100; + this.props.dataDoc.mass2_accelerationX = Math.round(this.getNewAccelerationX(this.props.forcesUpdated) * 100) / 100; } - this.setState({ xAccel: Math.round(this.getNewAccelerationX(this.props.updatedForces) * 100) / 100 }); - this.setState({ yAccel: (-1 * Math.round(this.getNewAccelerationY(this.props.updatedForces) * 100)) / 100 }); + this.setState({ xAccel: Math.round(this.getNewAccelerationX(this.props.forcesUpdated) * 100) / 100 }); + this.setState({ yAccel: (-1 * Math.round(this.getNewAccelerationY(this.props.forcesUpdated) * 100)) / 100 }); }; componentDidUpdate(prevProps: Readonly<IWeightProps>, prevState: Readonly<IState>, snapshot?: any): void { @@ -221,9 +224,9 @@ export default class Weight extends React.Component<IWeightProps, IState> { this.setState({ updatedStartPosX: x }); this.setState({ xPosition: x }); if (this.props.color == 'red') { - this.props.dataDoc.position_XDisplay = x; + this.props.dataDoc.mass1_positionX = x; } else { - this.props.dataDoc.position_XDisplay2 = x; + this.props.dataDoc.mass2_positionX = x; } } @@ -235,9 +238,9 @@ export default class Weight extends React.Component<IWeightProps, IState> { this.setState({ updatedStartPosY: coordinatePosition }); this.setState({ yPosition: coordinatePosition }); if (this.props.color == 'red') { - this.props.dataDoc.position_YDisplay = y; + this.props.dataDoc.mass1_positionY = y; } else { - this.props.dataDoc.position_YDisplay2 = y; + this.props.dataDoc.mass2_positionY = y; } } @@ -245,9 +248,9 @@ export default class Weight extends React.Component<IWeightProps, IState> { let x = this.props.displayXVelocity; this.setState({ xVelocity: x }); if (this.props.color == 'red') { - this.props.dataDoc.velocity_XDisplay = x; + this.props.dataDoc.mass1_velocityX = x; } else { - this.props.dataDoc.velocity_XDisplay2 = x; + this.props.dataDoc.mass2_velocityX = x; } } @@ -255,9 +258,9 @@ export default class Weight extends React.Component<IWeightProps, IState> { let y = this.props.displayYVelocity; this.setState({ yVelocity: -y }); if (this.props.color == 'red') { - this.props.dataDoc.velocity_YDisplay = y; + this.props.dataDoc.mass1_velocityY = y; } else { - this.props.dataDoc.velocity_YDisplay2 = y; + this.props.dataDoc.mass2_velocityY = y; } } } @@ -271,7 +274,7 @@ export default class Weight extends React.Component<IWeightProps, IState> { // Make sure weight doesn't go above max height if ((prevState.updatedStartPosY != this.state.updatedStartPosY || prevProps.startVelY != this.props.startVelY) && !isNaN(this.state.updatedStartPosY) && !isNaN(this.props.startVelY)) { - if (this.props.dataDoc.simulation_Type == 'One Weight') { + if (this.props.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)); @@ -288,12 +291,12 @@ export default class Weight extends React.Component<IWeightProps, IState> { if (prevState.timer != this.state.timer) { if (!this.props.noMovement) { let collisions = false; - if (this.props.dataDoc.simulation_Type == 'One Weight' || this.props.dataDoc.simulation_Type == 'Inclined Plane') { + if (this.props.simulationType == 'One Weight' || this.props.simulationType == 'Inclined Plane') { const collisionsWithGround = this.checkForCollisionsWithGround(); const collisionsWithWalls = this.checkForCollisionsWithWall(); collisions = collisionsWithGround || collisionsWithWalls; } - if (this.props.dataDoc.simulation_Type == 'Pulley') { + if (this.props.simulationType == 'Pulley') { if (this.state.yPosition <= this.props.yMin + 100 || this.state.yPosition >= this.props.yMax - 100) { collisions = true; } @@ -313,7 +316,7 @@ export default class Weight extends React.Component<IWeightProps, IState> { // Convert from static to kinetic friction if/when weight slips on inclined plane if (prevState.xVelocity != this.state.xVelocity) { - if (this.props.dataDoc.simulation_Type == 'Inclined Plane' && Math.abs(this.state.xVelocity) > 0.1 && this.props.dataDoc.mode != 'Review' && !this.state.kineticFriction) { + if (this.props.simulationType == 'Inclined Plane' && Math.abs(this.state.xVelocity) > 0.1 && this.props.simulationMode != 'Review' && !this.state.kineticFriction) { this.setState({ kineticFriction: true }); const normalForce: IForce = { description: 'Normal Force', @@ -367,10 +370,10 @@ export default class Weight extends React.Component<IWeightProps, IState> { component: false, }; if (this.props.coefficientOfKineticFriction != 0) { - this.props.dataDoc.updatedForces = [gravityForce, normalForce, frictionForce]; + this.props.dataDoc.mass1_forcesUpdated = [gravityForce, normalForce, frictionForce]; this.props.dataDoc.componentForces = [frictionForceComponent, normalForceComponent, gravityParallel, gravityPerpendicular]; } else { - this.props.dataDoc.updatedForces = [gravityForce, normalForce]; + this.props.dataDoc.mass1_forcesUpdated = [gravityForce, normalForce]; this.props.dataDoc.componentForces = [normalForceComponent, gravityParallel, gravityPerpendicular]; } } @@ -379,7 +382,7 @@ export default class Weight extends React.Component<IWeightProps, IState> { // Add/remove walls when simulation type changes if (prevProps.simulationType != this.props.simulationType) { let w: IWallProps[] = []; - if (this.props.dataDoc.simulation_Type == 'One Weight' || this.props.dataDoc.simulation_Type == 'Inclined Plane') { + if (this.props.simulationType == 'One Weight' || this.props.simulationType == 'Inclined Plane') { w = this.props.wallPositions; } this.setState({ walls: w }); @@ -438,27 +441,27 @@ export default class Weight extends React.Component<IWeightProps, IState> { this.setState({ kineticFriction: false }); this.setState({ xPosition: this.state.updatedStartPosX }); this.setState({ yPosition: this.state.updatedStartPosY }); - this.setState({ xVelocity: this.props.startVelX ?? 0 }); - this.setState({ yVelocity: this.props.startVelY ?? 0 }); - this.props.dataDoc.pendulum_angle = this.props.dataDoc.start_PendulumAngle; - this.props.dataDoc.updatedForces = this.props.dataDoc.start_Forces; - this.props.dataDoc.updatedForces2 = this.props.dataDoc.start_Forces2; + this.setState({ xVelocity: this.props.startVelX }); + this.setState({ yVelocity: this.props.startVelY }); + this.props.dataDoc.pendulum_angle = this.props.startPendulumAngle; + this.props.dataDoc.mass1_forcesUpdated = this.props.dataDoc.mass1_forcesStart; + this.props.dataDoc.mass2_forcesUpdated = this.props.dataDoc.mass2_forcesStart; if (this.props.color == 'red') { - this.props.dataDoc.position_XDisplay = this.state.updatedStartPosX; - this.props.dataDoc.position_YDisplay = this.state.updatedStartPosY; - this.props.dataDoc.velocity_XDisplay = this.props.startVelX ?? 0; - this.props.dataDoc.velocity_YDisplay = this.props.startVelY ?? 0; - this.props.dataDoc.acceleration_XDisplay = 0; - this.props.dataDoc.acceleration_YDisplay = 0; + this.props.dataDoc.mass1_positionX = this.state.updatedStartPosX; + this.props.dataDoc.mass1_positionY = this.state.updatedStartPosY; + this.props.dataDoc.mass1_velocityX = this.props.startVelX; + this.props.dataDoc.mass1_velocityY = this.props.startVelY; + this.props.dataDoc.mass1_accelerationX = 0; + this.props.dataDoc.mass1_accelerationY = 0; } else { - this.props.dataDoc.position_XDisplay2 = this.state.updatedStartPosX; - this.props.dataDoc.position_YDisplay2 = this.state.updatedStartPosY; - this.props.dataDoc.velocity_XDisplay2 = this.props.startVelX ?? 0; - this.props.dataDoc.velocity_YDisplay2 = this.props.startVelY ?? 0; - this.props.dataDoc.acceleration_XDisplay2 = 0; - this.props.dataDoc.acceleration_YDisplay2 = 0; + this.props.dataDoc.mass2_positionX = this.state.updatedStartPosX; + this.props.dataDoc.mass2_positionY = this.state.updatedStartPosY; + this.props.dataDoc.mass2_velocityX = this.props.startVelX; + this.props.dataDoc.mass2_velocityY = this.props.startVelY; + this.props.dataDoc.mass2_accelerationX = 0; + this.props.dataDoc.mass2_accelerationY = 0; } - this.setState({ angleLabel: Math.round(NumCast(this.props.dataDoc.pendulum_angle) ?? 0 * 100) / 100 }); + this.setState({ angleLabel: Math.round(this.props.pendulumAngle * 100) / 100 }); }; // Compute x acceleration from forces, F=ma @@ -618,7 +621,7 @@ export default class Weight extends React.Component<IWeightProps, IState> { this.setState({ yVelocity: -this.state.yVelocity }); } else { this.setState({ yVelocity: 0 }); - if (this.props.dataDoc.simulation_Type != 'Two Weights') { + if (this.props.simulationType != 'Two Weights') { const forceOfGravity: IForce = { description: 'Gravity', magnitude: Math.abs(this.props.gravity) * this.props.mass, @@ -631,8 +634,8 @@ export default class Weight extends React.Component<IWeightProps, IState> { directionInDegrees: wall.angleInDegrees + 90, component: false, }; - this.props.dataDoc.updatedForces = [forceOfGravity, normalForce]; - if (this.props.dataDoc.simulation_Type == 'Inclined Plane') { + this.props.dataDoc.mass1_forcesUpdated = [forceOfGravity, normalForce]; + if (this.props.simulationType == 'Inclined Plane') { const forceOfGravityC: IForce = { description: 'Gravity', magnitude: Math.abs(this.props.gravity) * this.props.mass, @@ -681,12 +684,12 @@ export default class Weight extends React.Component<IWeightProps, IState> { const newYVel = currentYVel + deltaYVel * dt; const newDeltaXPos = newXVel; const newDeltaYPos = newYVel; - let forces = this.props.updatedForces; - if (this.props.dataDoc.simulation_Type == 'Pendulum') { + let forces = this.props.forcesUpdated; + if (this.props.simulationType == 'Pendulum') { forces = this.getNewPendulumForces(newXPos, newYPos, newXVel, newYVel); - } else if (this.props.dataDoc.simulation_Type == 'Spring') { + } else if (this.props.simulationType == 'Spring') { forces = this.getNewSpringForces(newYPos); - } else if (this.props.dataDoc.simulation_Type == 'Circular Motion') { + } else if (this.props.simulationType == 'Circular Motion') { forces = this.getNewCircularMotionForces(newXPos, newYPos); } const newDeltaXVel = this.getNewAccelerationX(forces); @@ -711,12 +714,12 @@ export default class Weight extends React.Component<IWeightProps, IState> { let yPos = this.state.yPosition; let xVel = this.state.xVelocity; let yVel = this.state.yVelocity; - let forces: IForce[] = this.props.dataDoc.updatedForces; - if (this.props.dataDoc.simulation_Type == 'Pendulum') { + let forces: IForce[] = this.props.dataDoc.mass1_forcesUpdated; + if (this.props.simulationType == 'Pendulum') { forces = this.getNewPendulumForces(xPos, yPos, xVel, yVel); - } else if (this.props.dataDoc.simulation_Type == 'Spring') { + } else if (this.props.simulationType == 'Spring') { forces = this.getNewSpringForces(yPos); - } else if (this.props.dataDoc.simulation_Type == 'Circular Motion') { + } else if (this.props.simulationType == 'Circular Motion') { forces = this.getNewCircularMotionForces(xPos, yPos); } const xAcc = this.getNewAccelerationX(forces); @@ -733,7 +736,7 @@ export default class Weight extends React.Component<IWeightProps, IState> { yPos += ((this.props.timestepSize * 1.0) / 6.0) * (k1.deltaYPos + 2 * (k2.deltaYPos + k3.deltaYPos) + k4.deltaYPos); } // make sure harmonic motion maintained and errors don't propagate - if (this.props.dataDoc.simulation_Type == 'Spring') { + if (this.props.simulationType == 'Spring') { if (startYVel < 0 && yVel > 0 && yPos < this.props.springRestLength) { let equilibriumPos = this.props.springRestLength + (this.props.mass * Math.abs(this.props.gravity)) / this.props.springConstant; let amplitude = Math.abs(equilibriumPos - this.props.springStartLength); @@ -744,7 +747,7 @@ export default class Weight extends React.Component<IWeightProps, IState> { yPos = equilibriumPos + amplitude; } } - if (this.props.dataDoc.simulation_Type == 'Pendulum') { + if (this.props.simulationType == 'Pendulum') { let startX = this.state.updatedStartPosX; if (startXVel <= 0 && xVel > 0) { xPos = this.state.updatedStartPosX; @@ -760,7 +763,7 @@ export default class Weight extends React.Component<IWeightProps, IState> { yPos = this.props.startPosY; } } - if (this.props.dataDoc.simulation_Type == 'One Weight') { + if (this.props.simulationType == 'One Weight') { if (yPos < this.state.maxPosYConservation) { yPos = this.state.maxPosYConservation; } @@ -769,18 +772,18 @@ export default class Weight extends React.Component<IWeightProps, IState> { this.setState({ yVelocity: yVel }); this.setState({ xPosition: xPos }); this.setState({ yPosition: yPos }); - let forcesn = this.props.dataDoc.updatedForces; - if (this.props.dataDoc.simulation_Type == 'Pendulum') { + let forcesn = this.props.dataDoc.mass1_forcesUpdated; + if (this.props.simulationType == 'Pendulum') { forcesn = this.getNewPendulumForces(xPos, yPos, xVel, yVel); - } else if (this.props.dataDoc.simulation_Type == 'Spring') { + } else if (this.props.simulationType == 'Spring') { forcesn = this.getNewSpringForces(yPos); - } else if (this.props.dataDoc.simulation_Type == 'Circular Motion') { + } else if (this.props.simulationType == 'Circular Motion') { forcesn = this.getNewCircularMotionForces(xPos, yPos); } - this.props.dataDoc.updatedForces = forcesn; + this.props.dataDoc.mass1_forcesUpdated = forcesn; // set component forces if they change - if (this.props.dataDoc.simulation_Type == 'Pendulum') { + if (this.props.simulationType == 'Pendulum') { let x = this.props.xMax / 2 - xPos - this.props.radius; let y = yPos + this.props.radius + 5; let angle = (Math.atan(y / x) * 180) / Math.PI; @@ -851,7 +854,7 @@ export default class Weight extends React.Component<IWeightProps, IState> { } else if (newX < 10) { newX = 10; } - if (this.props.dataDoc.simulation_Type == 'Suspension') { + if (this.props.simulationType == 'Suspension') { if (newX < (this.props.xMax + this.props.xMin) / 4 - this.props.radius - 15) { newX = (this.props.xMax + this.props.xMin) / 4 - this.props.radius - 15; } else if (newX > (3 * (this.props.xMax + this.props.xMin)) / 4 - this.props.radius / 2 - 15) { @@ -860,13 +863,13 @@ export default class Weight extends React.Component<IWeightProps, IState> { } this.setState({ yPosition: newY }); - this.props.dataDoc.position_YDisplay = Math.round((this.props.yMax - 2 * this.props.radius - newY + 5) * 100) / 100; - if (this.props.dataDoc.simulation_Type != 'Pulley') { + this.props.dataDoc.mass1_positionY = Math.round((this.props.yMax - 2 * this.props.radius - newY + 5) * 100) / 100; + if (this.props.simulationType != 'Pulley') { this.setState({ xPosition: newX }); - this.props.dataDoc.position_XDisplay = newX; + this.props.dataDoc.mass1_positionX = newX; } - if (this.props.dataDoc.simulation_Type != 'Suspension') { - if (this.props.dataDoc.simulation_Type != 'Pulley') { + if (this.props.simulationType != 'Suspension') { + if (this.props.simulationType != 'Pulley') { this.setState({ updatedStartPosX: newX }); } this.setState({ updatedStartPosY: newY }); @@ -878,7 +881,7 @@ export default class Weight extends React.Component<IWeightProps, IState> { }} onPointerUp={e => { if (this.state.dragging) { - if (this.props.dataDoc.simulation_Type != 'Pendulum' && this.props.dataDoc.simulation_Type != 'Suspension') { + if (this.props.simulationType != 'Pendulum' && this.props.simulationType != 'Suspension') { this.resetEverything(); } this.setState({ dragging: false }); @@ -895,10 +898,10 @@ export default class Weight extends React.Component<IWeightProps, IState> { } else if (newX < 10) { newX = 10; } - if (this.props.dataDoc.simulation_Type == 'Spring') { - this.props.dataDoc.springStartLength = newY; + if (this.props.simulationType == 'Spring') { + this.props.dataDoc.spring_lengthStart = newY; } - if (this.props.dataDoc.simulation_Type == 'Suspension') { + if (this.props.simulationType == 'Suspension') { let x1rod = (this.props.xMax + this.props.xMin) / 2 - this.props.radius - this.props.yMin - 200; let x2rod = (this.props.xMax + this.props.xMin) / 2 + this.props.yMin + 200 + this.props.radius; let deltaX1 = this.state.xPosition + this.props.radius - x1rod; @@ -928,7 +931,7 @@ export default class Weight extends React.Component<IWeightProps, IState> { directionInDegrees: 270, component: false, }; - this.props.dataDoc.updatedForces = [tensionForce1, tensionForce2, grav]; + this.props.dataDoc.mass1_forcesUpdated = [tensionForce1, tensionForce2, grav]; } } }}> @@ -936,7 +939,7 @@ export default class Weight extends React.Component<IWeightProps, IState> { <p className="weightLabel">{this.props.mass} kg</p> </div> </div> - {this.props.dataDoc.simulation_Type == 'Spring' && ( + {this.props.simulationType == 'Spring' && ( <div className="spring" style={{ @@ -967,7 +970,7 @@ export default class Weight extends React.Component<IWeightProps, IState> { </div> )} - {this.props.dataDoc.simulation_Type == 'Pulley' && ( + {this.props.simulationType == 'Pulley' && ( <div className="rod" style={{ @@ -981,7 +984,7 @@ export default class Weight extends React.Component<IWeightProps, IState> { </svg> </div> )} - {this.props.dataDoc.simulation_Type == 'Pulley' && ( + {this.props.simulationType == 'Pulley' && ( <div className="wheel" style={{ @@ -995,7 +998,7 @@ export default class Weight extends React.Component<IWeightProps, IState> { </svg> </div> )} - {this.props.dataDoc.simulation_Type == 'Suspension' && ( + {this.props.simulationType == 'Suspension' && ( <div className="rod" style={{ @@ -1060,7 +1063,7 @@ export default class Weight extends React.Component<IWeightProps, IState> { </p> </div> )} - {this.props.dataDoc.simulation_Type == 'Circular Motion' && ( + {this.props.simulationType == 'Circular Motion' && ( <div className="rod" style={{ @@ -1081,7 +1084,7 @@ export default class Weight extends React.Component<IWeightProps, IState> { </svg> </div> )} - {this.props.dataDoc.simulation_Type == 'Pendulum' && ( + {this.props.simulationType == 'Pendulum' && ( <div className="rod" style={{ @@ -1118,7 +1121,7 @@ export default class Weight extends React.Component<IWeightProps, IState> { )} </div> )} - {this.props.dataDoc.simulation_Type == 'Inclined Plane' && ( + {this.props.simulationType == 'Inclined Plane' && ( <div> <div style={{ position: 'absolute', left: '0', top: '0' }}> <svg width={this.props.xMax + 'px'} height={this.props.yMax + 'px'}> @@ -1154,8 +1157,8 @@ export default class Weight extends React.Component<IWeightProps, IState> { <line x1={this.state.xPosition + this.props.radius} y1={this.state.yPosition + this.props.radius} - x2={this.state.xPosition + this.props.radius + this.getNewAccelerationX(this.props.updatedForces) * 15} - y2={this.state.yPosition + this.props.radius + this.getNewAccelerationY(this.props.updatedForces) * 15} + x2={this.state.xPosition + this.props.radius + this.getNewAccelerationX(this.props.forcesUpdated) * 15} + y2={this.state.yPosition + this.props.radius + this.getNewAccelerationY(this.props.forcesUpdated) * 15} stroke={'green'} strokeWidth="5" markerEnd="url(#accArrow)" @@ -1282,8 +1285,8 @@ export default class Weight extends React.Component<IWeightProps, IState> { })} {!this.state.dragging && this.props.showForces && - this.props.updatedForces && - this.props.updatedForces.map((force, index) => { + this.props.forcesUpdated && + this.props.forcesUpdated.map((force, index) => { if (force.magnitude < this.epsilon) { return; } |