aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx2
-rw-r--r--src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx99
2 files changed, 52 insertions, 49 deletions
diff --git a/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx b/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx
index bdc76048c..35a7ee346 100644
--- a/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx
+++ b/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx
@@ -1281,6 +1281,7 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
<div className="mechanicsSimulationElements">
<Weight
dataDoc={this.dataDoc}
+ layoutDoc={this.layoutDoc}
adjustPendulumAngle={this.dataDoc.adjustPendulumAngle}
gravity={this.dataDoc.gravity}
circularMotionRadius={this.dataDoc.circularMotionRadius}
@@ -1329,6 +1330,7 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
{this.dataDoc.simulationType == "Pulley" && (
<Weight
dataDoc={this.dataDoc}
+ layoutDoc={this.layoutDoc}
adjustPendulumAngle={this.dataDoc.adjustPendulumAngle}
circularMotionRadius={this.dataDoc.circularMotionRadius}
gravity={this.dataDoc.gravity}
diff --git a/src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx b/src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx
index 2ae34374d..c24438e19 100644
--- a/src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx
+++ b/src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx
@@ -12,6 +12,7 @@ export interface IForce {
}
export interface IWeightProps {
dataDoc: Doc;
+ layoutDoc: Doc;
adjustPendulumAngle: { angle: number; length: number };
circularMotionRadius: number;
coefficientOfKineticFriction: number;
@@ -584,7 +585,7 @@ export default class Weight extends React.Component<IWeightProps, IState> {
if (this.state.xVelocity != 0) {
this.state.walls.forEach((wall) => {
if (wall.angleInDegrees == 90) {
- const wallX = (wall.xPos / 100) * window.innerWidth;
+ const wallX = (wall.xPos / 100) * this.props.layoutDoc._width;
if (wall.xPos < 0.35) {
if (minX <= wallX) {
this.setState({xPosition: wallX+0.01});
@@ -613,14 +614,14 @@ export default class Weight extends React.Component<IWeightProps, IState> {
};
// Check for collisions in y direction
- const checkForCollisionsWithGround = () => {
+ checkForCollisionsWithGround = () => {
let collision = false;
const minY = this.state.yPosition;
const maxY = this.state.yPosition + 2 * this.props.radius;
if (this.state.yVelocity > 0) {
this.state.walls.forEach((wall) => {
if (wall.angleInDegrees == 0 && wall.yPos > 0.4) {
- const groundY = (wall.yPos / 100) * window.innerHeight;
+ const groundY = (wall.yPos / 100) * this.props.layoutDoc._height;
if (maxY > groundY) {
this.setState({yPosition: groundY- 2 * this.props.radius-0.01});
if (this.props.elasticCollisions) {
@@ -666,7 +667,7 @@ export default class Weight extends React.Component<IWeightProps, IState> {
if (this.state.yVelocity < 0) {
this.state.walls.forEach((wall) => {
if (wall.angleInDegrees == 0 && wall.yPos < 0.4) {
- const groundY = (wall.yPos / 100) * window.innerHeight;
+ const groundY = (wall.yPos / 100) * this.props.layoutDoc._height;
if (minY < groundY) {
this.setState({yPosition: groundY + 0.01});
if (this.props.elasticCollisions) {
@@ -730,7 +731,7 @@ 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 = this.props.dataDoc['updatedForces'];
+ let forces: IForce[] = this.props.dataDoc['updatedForces'];
if (this.props.dataDoc['simulationType'] == "Pendulum") {
forces = this.getNewPendulumForces(xPos, yPos, xVel, yVel);
} else if (this.props.dataDoc['simulationType'] == "Spring") {
@@ -1025,7 +1026,7 @@ export default class Weight extends React.Component<IWeightProps, IState> {
zIndex: -2,
}}
>
- <svg width={this.props.xMax + "px"} height={window.innerHeight + "px"}>
+ <svg width={this.props.xMax + "px"} height={this.props.layoutDoc._height + "px"}>
{[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((val) => {
const count = 10;
let xPos1;
@@ -1067,7 +1068,7 @@ export default class Weight extends React.Component<IWeightProps, IState> {
zIndex: -1,
}}
>
- <svg width={this.props.xMax + "px"} height={window.innerHeight + "px"}>
+ <svg width={this.props.xMax + "px"} height={this.props.layoutDoc._height + "px"}>
<circle
cx={(this.props.xMax + this.props.xMin) / 2}
cy={this.props.radius}
@@ -1088,7 +1089,7 @@ export default class Weight extends React.Component<IWeightProps, IState> {
zIndex: -2,
}}
>
- <svg width={this.props.xMax + "px"} height={window.innerHeight + "px"}>
+ <svg width={this.props.xMax + "px"} height={this.props.layoutDoc._height + "px"}>
<line
x1={this.state.xPosition + this.props.radius}
y1={this.state.yPosition + this.props.radius}
@@ -1111,7 +1112,7 @@ export default class Weight extends React.Component<IWeightProps, IState> {
zIndex: -2,
}}
>
- <svg width={this.props.xMax + "px"} height={window.innerHeight + "px"}>
+ <svg width={this.props.xMax + "px"} height={this.props.layoutDoc._height + "px"}>
<line
x1={this.state.xPosition + this.props.radius}
y1={this.state.yPosition + this.props.radius}
@@ -1156,7 +1157,7 @@ export default class Weight extends React.Component<IWeightProps, IState> {
zIndex: -2,
}}
>
- <svg width={this.props.xMax + "px"} height={window.innerHeight + "px"}>
+ <svg width={this.props.xMax + "px"} height={this.props.layoutDoc._height + "px"}>
<line
x1={this.state.xPosition + this.props.radius}
y1={this.state.yPosition + this.props.radius}
@@ -1204,7 +1205,7 @@ export default class Weight extends React.Component<IWeightProps, IState> {
zIndex: -2,
}}
>
- <svg width={this.props.xMax + "px"} height={window.innerHeight + "px"}>
+ <svg width={this.props.xMax + "px"} height={this.props.layoutDoc._height + "px"}>
<line
x1={this.state.xPosition + this.props.radius}
y1={this.state.yPosition + this.props.radius}
@@ -1227,7 +1228,7 @@ export default class Weight extends React.Component<IWeightProps, IState> {
zIndex: -2,
}}
>
- <svg width={this.props.xMax + "px"} height={window.innerHeight + "px"}>
+ <svg width={this.props.xMax + "px"} height={this.props.layoutDoc._height + "px"}>
<line
x1={this.state.xPosition + this.props.radius}
y1={this.state.yPosition + this.props.radius}
@@ -1280,7 +1281,7 @@ export default class Weight extends React.Component<IWeightProps, IState> {
position: "absolute",
zIndex: 500,
left: Math.round(this.props.xMax * 0.5 - 200 + this.props.wedgeWidth - 80) + "px",
- top: Math.round(window.innerHeight * 0.8 - 40) + "px",
+ top: Math.round(this.props.layoutDoc._height * 0.8 - 40) + "px",
}}
>
{Math.round(
@@ -1301,7 +1302,7 @@ export default class Weight extends React.Component<IWeightProps, IState> {
top: 0,
}}
>
- <svg width={this.props.xMax + "px"} height={window.innerHeight + "px"}>
+ <svg width={this.props.xMax + "px"} height={this.props.layoutDoc._height + "px"}>
<defs>
<marker
id="accArrow"
@@ -1357,7 +1358,7 @@ export default class Weight extends React.Component<IWeightProps, IState> {
top: 0,
}}
>
- <svg width={this.props.xMax + "px"} height={window.innerHeight + "px"}>
+ <svg width={this.props.xMax + "px"} height={this.props.layoutDoc._height + "px"}>
<defs>
<marker
id="velArrow"
@@ -1395,8 +1396,8 @@ export default class Weight extends React.Component<IWeightProps, IState> {
{Math.round(
100 *
Math.sqrt(
- this.props.displayXVelocity * this.props.displayXVelocity +
- this.props.displayYVelocity * this.props.displayYVelocity
+ this.props.displayXVelocity * this.props.displayXVelocity +
+ this.props.displayYVelocity * this.props.displayYVelocity
)
) / 100}{" "}
m/s
@@ -1405,14 +1406,14 @@ export default class Weight extends React.Component<IWeightProps, IState> {
</div>
</div>
)}
- {!dragging &&
- showComponentForces &&
- componentForces.map((force, index) => {
- if (force.magnitude < epsilon) {
+ {!this.state.dragging &&
+ this.props.showComponentForces &&
+ this.props.componentForces.map((force, index) => {
+ if (force.magnitude < this.epsilon) {
return;
}
- let arrowStartY: number = yPosition + radius;
- const arrowStartX: number = xPosition + radius;
+ let arrowStartY: number = this.state.yPosition + this.props.radius;
+ const arrowStartX: number = this.state.xPosition + this.props.radius;
let arrowEndY: number =
arrowStartY -
Math.abs(force.magnitude) *
@@ -1438,10 +1439,10 @@ export default class Weight extends React.Component<IWeightProps, IState> {
} else {
labelTop -= 40;
}
- labelTop = Math.min(labelTop, yMax + 50);
- labelTop = Math.max(labelTop, yMin);
- labelLeft = Math.min(labelLeft, xMax - 60);
- labelLeft = Math.max(labelLeft, xMin);
+ labelTop = Math.min(labelTop, this.props.yMax + 50);
+ labelTop = Math.max(labelTop, this.props.yMin);
+ labelLeft = Math.min(labelLeft, this.props.xMax - 60);
+ labelLeft = Math.max(labelLeft, this.props.xMin);
return (
<div key={index}>
@@ -1450,13 +1451,13 @@ export default class Weight extends React.Component<IWeightProps, IState> {
pointerEvents: "none",
position: "absolute",
zIndex: -1,
- left: xMin,
- top: yMin,
+ left: this.props.xMin,
+ top: this.props.yMin,
}}
>
<svg
- width={xMax - xMin + "px"}
- height={window.innerHeight + "px"}
+ width={this.props.xMax - this.props.xMin + "px"}
+ height={this.props.layoutDoc._height + "px"}
>
<defs>
<marker
@@ -1504,26 +1505,26 @@ export default class Weight extends React.Component<IWeightProps, IState> {
top: labelTop + "px",
// zIndex: -1,
lineHeight: 0.5,
- backgroundColor: labelBackgroundColor,
+ backgroundColor: this.labelBackgroundColor,
}}
>
{force.description && <p>{force.description}</p>}
{!force.description && <p>Force</p>}
- {showForceMagnitudes && (
+ {this.props.showForceMagnitudes && (
<p>{Math.round(100 * force.magnitude) / 100} N</p>
)}
</div>
</div>
);
})}
- {!dragging &&
- showForces &&
- updatedForces.map((force, index) => {
- if (force.magnitude < epsilon) {
+ {!this.state.dragging &&
+ this.props.showForces &&
+ this.props.updatedForces.map((force, index) => {
+ if (force.magnitude < this.epsilon) {
return;
}
- let arrowStartY: number = yPosition + radius;
- const arrowStartX: number = xPosition + radius;
+ let arrowStartY: number = this.state.yPosition + this.props.radius;
+ const arrowStartX: number = this.state.xPosition + this.props.radius;
let arrowEndY: number =
arrowStartY -
Math.abs(force.magnitude) *
@@ -1549,10 +1550,10 @@ export default class Weight extends React.Component<IWeightProps, IState> {
} else {
labelTop -= 40;
}
- labelTop = Math.min(labelTop, yMax + 50);
- labelTop = Math.max(labelTop, yMin);
- labelLeft = Math.min(labelLeft, xMax - 60);
- labelLeft = Math.max(labelLeft, xMin);
+ labelTop = Math.min(labelTop, this.props.yMax + 50);
+ labelTop = Math.max(labelTop, this.props.yMin);
+ labelLeft = Math.min(labelLeft, this.props.xMax - 60);
+ labelLeft = Math.max(labelLeft, this.props.xMin);
return (
<div key={index}>
@@ -1561,13 +1562,13 @@ export default class Weight extends React.Component<IWeightProps, IState> {
pointerEvents: "none",
position: "absolute",
zIndex: -1,
- left: xMin,
- top: yMin,
+ left: this.props.xMin,
+ top: this.props.yMin,
}}
>
<svg
- width={xMax - xMin + "px"}
- height={window.innerHeight + "px"}
+ width={this.props.xMax - this.props.xMin + "px"}
+ height={this.props.layoutDoc._height + "px"}
>
<defs>
<marker
@@ -1614,12 +1615,12 @@ export default class Weight extends React.Component<IWeightProps, IState> {
left: labelLeft + "px",
top: labelTop + "px",
lineHeight: 0.5,
- backgroundColor: labelBackgroundColor,
+ backgroundColor: this.labelBackgroundColor,
}}
>
{force.description && <p>{force.description}</p>}
{!force.description && <p>Force</p>}
- {showForceMagnitudes && (
+ {this.props.showForceMagnitudes && (
<p>{Math.round(100 * force.magnitude) / 100} N</p>
)}
</div>
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-10 19:36:03 +0000