diff options
Diffstat (limited to 'src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx')
| -rw-r--r-- | src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx | 136 |
1 files changed, 55 insertions, 81 deletions
diff --git a/src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx b/src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx index 94e101490..025c757c9 100644 --- a/src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx +++ b/src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx @@ -1,7 +1,8 @@ +import { computed, trace } from 'mobx'; +import { observer } from 'mobx-react'; import { Doc, HeightSym, WidthSym } from '../../../../fields/Doc'; -import React = require('react'); import './PhysicsSimulationBox.scss'; -import { computed } from 'mobx'; +import React = require('react'); interface IWallProps { length: number; @@ -54,8 +55,8 @@ export interface IWeightProps { startVelX: number; startVelY: number; timestepSize: number; - updateXDisplay: number; - updateYDisplay: number; + updateMassPosX: number; + updateMassPosY: number; forcesUpdated: () => IForce[]; setForcesUpdated: (x: IForce[]) => {}; wallPositions: IWallProps[]; @@ -86,7 +87,7 @@ interface IState { xAccel: number; yAccel: number; } - +@observer export default class Weight extends React.Component<IWeightProps, IState> { constructor(props: any) { super(props); @@ -144,63 +145,54 @@ export default class Weight extends React.Component<IWeightProps, IState> { }; // Helper function to go between display and real values - getDisplayYPos = (yPos: number) => { - return this.props.yMax - yPos - 2 * this.props.radius + 5; - }; - getYPosFromDisplay = (yDisplay: number) => { - return this.props.yMax - yDisplay - 2 * this.props.radius + 5; - }; + getDisplayYPos = (yPos: number) => this.props.yMax - yPos - 2 * this.props.radius + 5; // Set display values based on real values - setYPosDisplay = (yPos: number) => { - const displayPos = this.getDisplayYPos(yPos); + setPosition = (xPos: number | undefined, yPos: number | undefined) => { if (this.props.color == 'red') { - this.props.dataDoc.mass1_positionY = Math.round(displayPos * 100) / 100; + yPos !== undefined && (this.props.dataDoc.mass1_positionY = Math.round(this.getDisplayYPos(yPos) * 100) / 100); + xPos !== undefined && (this.props.dataDoc.mass1_positionX = Math.round(xPos * 100) / 100); } else { - this.props.dataDoc.mass2_positionY = Math.round(displayPos * 100) / 100; + yPos !== undefined && (this.props.dataDoc.mass2_positionY = Math.round(this.getDisplayYPos(yPos) * 100) / 100); + xPos !== undefined && (this.props.dataDoc.mass2_positionX = Math.round(xPos * 100) / 100); } }; - setXPosDisplay = (xPos: number) => { + setVelocity = (xVel: number | undefined, yVel: number | undefined) => { if (this.props.color == 'red') { - this.props.dataDoc.mass1_positionX = Math.round(xPos * 100) / 100; + yVel !== undefined && (this.props.dataDoc.mass1_velocityY = (-1 * Math.round(yVel * 100)) / 100); + xVel !== undefined && (this.props.dataDoc.mass1_velocityX = Math.round(xVel * 100) / 100); } else { - this.props.dataDoc.mass2_positionX = Math.round(xPos * 100) / 100; + yVel !== undefined && (this.props.dataDoc.mass2_velocityY = (-1 * Math.round(yVel * 100)) / 100); + xVel !== undefined && (this.props.dataDoc.mass2_velocityX = Math.round(xVel * 100) / 100); } }; - setYVelDisplay = (yVel: number) => { + setAcceleration = (xAccel: number, yAccel: number) => { if (this.props.color == 'red') { - this.props.dataDoc.mass1_velocityY = (-1 * Math.round(yVel * 100)) / 100; + this.props.dataDoc.mass1_accelerationY = yAccel; + this.props.dataDoc.mass1_accelerationX = xAccel; } else { - this.props.dataDoc.mass2_velocityY = (-1 * Math.round(yVel * 100)) / 100; - } - }; - setXVelDisplay = (xVel: number) => { - if (this.props.color == 'red') { - this.props.dataDoc.mass1_velocityX = Math.round(xVel * 100) / 100; - } else { - this.props.dataDoc.mass2_velocityX = Math.round(xVel * 100) / 100; + this.props.dataDoc.mass2_accelerationY = yAccel; + this.props.dataDoc.mass2_accelerationX = xAccel; } + + this.setState({ xAccel }); + this.setState({ yAccel }); }; // Update display values when simulation updates setDisplayValues = (xPos: number = this.state.xPosition, yPos: number = this.state.yPosition, xVel: number = this.state.xVelocity, yVel: number = this.state.yVelocity) => { - this.setYPosDisplay(yPos); - this.setXPosDisplay(xPos); - this.setYVelDisplay(yVel); - this.setXVelDisplay(xVel); - if (this.props.color == 'red') { - 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.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.forcesUpdated()) * 100) / 100 }); - this.setState({ yAccel: (-1 * Math.round(this.getNewAccelerationY(this.props.forcesUpdated()) * 100)) / 100 }); + this.setPosition(xPos, yPos); + this.setVelocity(xVel, yVel); + this.setAcceleration(Math.round(this.getNewAccelerationX(this.props.forcesUpdated()) * 100) / 100, (-1 * Math.round(this.getNewAccelerationY(this.props.forcesUpdated()) * 100)) / 100); }; componentDidUpdate(prevProps: Readonly<IWeightProps>, prevState: Readonly<IState>, snapshot?: any): void { + if (prevProps.simulationType != this.props.simulationType) { + this.setState({ xVelocity: this.props.startVelX }); + this.setState({ yVelocity: this.props.startVelY }); + this.setDisplayValues(); + } + // Change pendulum angle from input field if (prevProps.adjustPendulumAngle != this.props.adjustPendulumAngle || prevProps.adjustPendulumLength !== this.props.adjustPendulumLength) { let length = this.props.adjustPendulumLength; @@ -217,52 +209,33 @@ export default class Weight extends React.Component<IWeightProps, IState> { } // When display values updated by user, update real value - if (prevProps.updateYDisplay != this.props.updateYDisplay || prevProps.updateXDisplay !== this.props.updateXDisplay) { - if (this.props.updateXDisplay != this.state.xPosition) { - let x = this.props.updateXDisplay; - x = Math.max(0, x); - x = Math.min(x, this.props.xMax - 2 * this.props.radius); - this.setState({ updatedStartPosX: x }); - this.setState({ xPosition: x }); - if (this.props.color == 'red') { - this.props.dataDoc.mass1_positionX = x; - } else { - this.props.dataDoc.mass2_positionX = x; - } - } - - if (this.props.updateYDisplay != this.getDisplayYPos(this.state.yPosition)) { - let y = this.props.updateYDisplay; - y = Math.max(0, y); - y = Math.min(y, this.props.yMax - 2 * this.props.radius); - let coordinatePosition = this.getYPosFromDisplay(y); - this.setState({ updatedStartPosY: coordinatePosition }); - this.setState({ yPosition: coordinatePosition }); - if (this.props.color == 'red') { - this.props.dataDoc.mass1_positionY = y; - } else { - this.props.dataDoc.mass2_positionY = y; - } - } + if (prevProps.updateMassPosX !== this.props.updateMassPosX) { + let x = this.props.updateMassPosX; + x = Math.max(0, x); + x = Math.min(x, this.props.xMax - 2 * this.props.radius); + this.setState({ updatedStartPosX: x }); + this.setState({ xPosition: x }); + this.setPosition(x, undefined); + } + if (prevProps.updateMassPosY != this.props.updateMassPosY) { + let y = this.props.updateMassPosY; + y = Math.max(0, y); + y = Math.min(y, this.props.yMax - 2 * this.props.radius); + let coordinatePosition = this.getDisplayYPos(y); + this.setState({ updatedStartPosY: coordinatePosition }); + this.setState({ yPosition: coordinatePosition }); + this.setPosition(undefined, y); if (this.props.displayXVelocity != this.state.xVelocity) { let x = this.props.displayXVelocity; this.setState({ xVelocity: x }); - if (this.props.color == 'red') { - this.props.dataDoc.mass1_velocityX = x; - } else { - this.props.dataDoc.mass2_velocityX = x; - } + this.setVelocity(x, undefined); } if (this.props.displayYVelocity != -this.state.yVelocity) { let y = this.props.displayYVelocity; this.setState({ yVelocity: -y }); - if (this.props.color == 'red') { - this.props.dataDoc.mass1_velocityY = y; - } else { - this.props.dataDoc.mass2_velocityY = y; - } + this.setVelocity(undefined, y); } } @@ -387,7 +360,7 @@ export default class Weight extends React.Component<IWeightProps, IState> { 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); + this.setPosition(this.props.startPosX, undefined); } } @@ -396,7 +369,7 @@ export default class Weight extends React.Component<IWeightProps, IState> { 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); + this.setPosition(undefined, this.props.startPosY ?? 0); } } @@ -820,6 +793,7 @@ export default class Weight extends React.Component<IWeightProps, IState> { // Render weight, spring, rod(s), vectors render() { + trace(); return ( <div> <div |