diff options
| -rw-r--r-- | src/client/views/nodes/PhysicsSimulationWeight.tsx | 75 |
1 files changed, 37 insertions, 38 deletions
diff --git a/src/client/views/nodes/PhysicsSimulationWeight.tsx b/src/client/views/nodes/PhysicsSimulationWeight.tsx index fc75fa5aa..f7755dc5c 100644 --- a/src/client/views/nodes/PhysicsSimulationWeight.tsx +++ b/src/client/views/nodes/PhysicsSimulationWeight.tsx @@ -35,14 +35,14 @@ interface IState { clickPositionY: number, dragging: boolean, kineticFriction: boolean, + timer: number; + update: boolean, updatedStartPosX: number, updatedStartPosY: number, - timer: number; xPosition: number, - yPosition: number, xVelocity: number, + yPosition: number, yVelocity: number, - update: boolean, } export default class Weight extends React.Component<IWeightProps, IState> { @@ -57,8 +57,8 @@ export default class Weight extends React.Component<IWeightProps, IState> { updatedStartPosX: this.props.dataDoc['startPosX'], updatedStartPosY: this.props.dataDoc['startPosY'], xPosition: this.props.dataDoc['startPosX'], - yPosition: this.props.dataDoc['startPosY'], xVelocity: this.props.startVelX ? this.props.startVelX: 0, + yPosition: this.props.dataDoc['startPosY'], yVelocity: this.props.startVelY ? this.props.startVelY: 0, } } @@ -74,20 +74,20 @@ export default class Weight extends React.Component<IWeightProps, IState> { // Var weightStyle = { + alignItems: "center", backgroundColor: this.props.color, - borderStyle: "solid", borderColor: "black", - position: "absolute" as "absolute", - left: this.props.dataDoc['startPosX'] + "px", - top: this.props.dataDoc['startPosY'] + "px", - width: 2 * this.props.radius + "px", - height: 2 * this.props.radius + "px", - zIndex: 5, borderRadius: 50 + "%", + borderStyle: "solid", display: "flex", + height: 2 * this.props.radius + "px", justifyContent: "center", - alignItems: "center", + left: this.props.dataDoc['startPosX'] + "px", + position: "absolute" as "absolute", + top: this.props.dataDoc['startPosY'] + "px", touchAction: "none", + width: 2 * this.props.radius + "px", + zIndex: 5, }; // Helper function to go between display and real values @@ -174,20 +174,18 @@ export default class Weight extends React.Component<IWeightProps, IState> { } } // Update sim - if (!this.props.dataDoc['simulationPaused']) { - if (this.state.timer != prevState.timer) { - console.log('update sim') - console.log('update') - let collisions = false; - if (!this.props.dataDoc['pendulum']) { - const collisionsWithGround = this.checkForCollisionsWithGround(); - const collisionsWithWalls = this.checkForCollisionsWithWall(); - collisions = collisionsWithGround || collisionsWithWalls; - } - if (!collisions) { - this.update(); - } - this.setDisplayValues(); + if (this.state.timer != prevState.timer) { + if (!this.props.dataDoc['simulationPaused']) { + let collisions = false; + if (!this.props.dataDoc['pendulum']) { + const collisionsWithGround = this.checkForCollisionsWithGround(); + const collisionsWithWalls = this.checkForCollisionsWithWall(); + collisions = collisionsWithGround || collisionsWithWalls; + } + if (!collisions) { + this.update(); + } + this.setDisplayValues(); } } @@ -270,20 +268,20 @@ export default class Weight extends React.Component<IWeightProps, IState> { } this.weightStyle = { + alignItems: "center", backgroundColor: this.props.color, - borderStyle: "solid", borderColor: this.state.dragging ? "lightblue" : "black", - position: "absolute" as "absolute", - left: this.state.xPosition + "px", - top: this.state.yPosition + "px", - width: 2 * this.props.radius + "px", - height: 2 * this.props.radius + "px", borderRadius: 50 + "%", + borderStyle: "solid", display: "flex", - zIndex: 5, + height: 2 * this.props.radius + "px", justifyContent: "center", - alignItems: "center", + left: this.state.xPosition + "px", + position: "absolute" as "absolute", + top: this.state.yPosition + "px", touchAction: "none", + width: 2 * this.props.radius + "px", + zIndex: 5, }; } @@ -375,6 +373,7 @@ export default class Weight extends React.Component<IWeightProps, IState> { const maxX = this.state.xPosition + 2 * this.props.radius; const containerWidth = 300; if (this.state.xVelocity != 0) { + if (this.props.dataDoc.wallPositions) { this.props.dataDoc['wallPositions'].forEach((wall) => { if (wall.angleInDegrees == 90) { const wallX = (wall.xPos / 100) * 300; @@ -401,6 +400,7 @@ export default class Weight extends React.Component<IWeightProps, IState> { } } }); + } } return collision; }; @@ -409,7 +409,8 @@ export default class Weight extends React.Component<IWeightProps, IState> { let collision = false; const maxY = this.state.yPosition + 2 * this.props.radius; if (this.state.yVelocity > 0) { - this.props.dataDoc['wallPositions'] .forEach((wall) => { + if (this.props.dataDoc.wallPositions) { + this.props.dataDoc['wallPositions'].forEach((wall) => { if (wall.angleInDegrees == 0) { const groundY = (wall.yPos / 100) * this.props.yMax; if (maxY >= groundY) { @@ -434,6 +435,7 @@ export default class Weight extends React.Component<IWeightProps, IState> { } } }); + } } return collision; }; @@ -505,9 +507,6 @@ export default class Weight extends React.Component<IWeightProps, IState> { }; - - - labelBackgroundColor = `rgba(255,255,255,0.5)`; render () { |