start converting weight file to class

1 files changed, 180 insertions, 217 deletions

diff --git a/src/client/views/nodes/PhysicsSimulationWeight.tsx b/src/client/views/nodes/PhysicsSimulationWeight.tsx
index cc024f29a..d234c1395 100644
--- a/src/client/views/nodes/PhysicsSimulationWeight.tsx
+++ b/src/client/views/nodes/PhysicsSimulationWeight.tsx
@@ -1,6 +1,8 @@
+import React from "react";
 import { useEffect, useState } from "react";
+import { render } from "react-dom";
 import { IWallProps } from "./PhysicsSimulationWall";
-import { Wedge } from "./PhysicsSimulationWedge";
+import Wedge from "./PhysicsSimulationWedge";
 
 export interface IForce {
   description: string;
@@ -35,8 +37,6 @@ export interface IWeightProps {
   setPendulumLength: (val: number) => any;
   setStartPendulumAngle: (val: number) => any;
   showAcceleration: boolean;
-  mode: string;
-  noMovement: boolean;
   pendulumAngle: number;
   setSketching: (val: boolean) => any;
   showForces: boolean;
@@ -56,154 +56,121 @@ export interface IWeightProps {
   wedgeHeight: number;
 }
 
-export const Weight = (props: IWeightProps) => {
-  const {
-    adjustPendulumAngle,
-    color,
-    displayXPosition,
-    displayYPosition,
-    displayXVelocity,
-    displayYVelocity,
-    elasticCollisions,
-    startForces,
-    incrementTime,
-    mass,
-    paused,
-    pendulum,
-    pendulumLength,
-    wedge,
-    radius,
-    mode,
-    noMovement,
-    pendulumAngle,
-    reset,
-    setSketching,
-    setDisplayXAcceleration,
-    setDisplayXPosition,
-    setDisplayXVelocity,
-    setDisplayYAcceleration,
-    setDisplayYPosition,
-    setDisplayYVelocity,
-    setPaused,
-    setPendulumAngle,
-    setPendulumLength,
-    setStartPendulumAngle,
-    showAcceleration,
-    showForces,
-    showForceMagnitudes,
-    showVelocity,
-    startPosX,
-    startPosY,
-    startVelX,
-    startVelY,
-    timestepSize,
-    updateDisplay,
-    updatedForces,
-    setUpdatedForces,
-    walls,
-    coefficientOfKineticFriction,
-    wedgeWidth,
-    wedgeHeight,
-  } = props;
+interface IState {
+  dragging: boolean,
+  kineticFriction: boolean,
+  updatedStartPosX: number,
+  updatedStartPosY: number,
+  xPosition: number,
+  yPosition: number,
+  xVelocity: number,
+  yVelocity: number,
+}
+export default class Weight extends React.Component<IWeightProps, IState> {
+
+  constructor(props: any) {
+    super(props)
+    this.state = {
+      dragging: false,
+      kineticFriction: false,
+      updatedStartPosX: this.props.startPosX,
+      updatedStartPosY: this.props.startPosY,
+      xPosition: this.props.startPosX,
+      yPosition: this.props.startPosY,
+      xVelocity: this.props.startVelX ? this.props.startVelX: 0,
+      yVelocity: this.props.startVelY ? this.props.startVelY: 0,
+    }
+  }
 
   // Constants
-  const draggable = !wedge && mode == "Freeform";
-  const epsilon = 0.0001;
-
-  const forceOfGravity: IForce = {
+  draggable = !this.props.wedge;
+  epsilon = 0.0001;
+  forceOfGravity: IForce = {
     description: "Gravity",
-    magnitude: mass * 9.81,
+    magnitude: this.props.mass * 9.81,
     directionInDegrees: 270,
   };
-  const xMax = window.innerWidth * 0.7;
-  const xMin = 0;
-  const yMax = window.innerHeight * 0.8;
-  const yMin = 0;
-
-  // State hooks
-  const [dragging, setDragging] = useState(false);
-  const [kineticFriction, setKineticFriction] = useState(false);
-  const [updatedStartPosX, setUpdatedStartPosX] = useState(startPosX);
-  const [updatedStartPosY, setUpdatedStartPosY] = useState(startPosY);
-  const [xPosition, setXPosition] = useState(startPosX);
-  const [xVelocity, setXVelocity] = useState(startVelX ?? 0);
-  const [yPosition, setYPosition] = useState(startPosY);
-  const [yVelocity, setYVelocity] = useState(startVelY ?? 0);
+  xMax = window.innerWidth * 0.7;
+  xMin = 0;
+  yMax = window.innerHeight * 0.8;
+  yMin = 0;
 
   // Helper function to go between display and real values
   const getDisplayYPos = (yPos: number) => {
-    return yMax - yPos - 2 * radius + 5;
+    return this.yMax - yPos - 2 * this.props.radius + 5;
   };
   const getYPosFromDisplay = (yDisplay: number) => {
-    return yMax - yDisplay - 2 * radius + 5;
+    return this.yMax - yDisplay - 2 * this.props.radius + 5;
   };
 
   // Set display values based on real values
   const setYPosDisplay = (yPos: number) => {
-    const displayPos = getDisplayYPos(yPos);
-    setDisplayYPosition(Math.round(displayPos * 100) / 100);
+    const displayPos = this.getDisplayYPos(yPos);
+    this.props.setDisplayYPosition(Math.round(displayPos * 100) / 100)
   };
   const setXPosDisplay = (xPos: number) => {
-    setDisplayXPosition(Math.round(xPos * 100) / 100);
+    this.props.setDisplayXPosition(Math.round(xPos * 100) / 100);
   };
   const setYVelDisplay = (yVel: number) => {
-    setDisplayYVelocity((-1 * Math.round(yVel * 100)) / 100);
+    this.props.setDisplayYVelocity((-1 * Math.round(yVel * 100)) / 100);
   };
   const setXVelDisplay = (xVel: number) => {
-    setDisplayXVelocity(Math.round(xVel * 100) / 100);
+    this.props.setDisplayXVelocity(Math.round(xVel * 100) / 100);
   };
 
   const setDisplayValues = (
-    xPos: number = xPosition,
-    yPos: number = yPosition,
-    xVel: number = xVelocity,
-    yVel: number = yVelocity
+    xPos: number = this.state.xPosition,
+    yPos: number = this.state.yPosition,
+    xVel: number = this.state.xVelocity,
+    yVel: number = this.state.yVelocity
   ) => {
-    setYPosDisplay(yPos);
-    setXPosDisplay(xPos);
-    setYVelDisplay(yVel);
-    setXVelDisplay(xVel);
-    setDisplayYAcceleration(
-      (-1 * Math.round(getNewAccelerationY(updatedForces) * 100)) / 100
+    this.setYPosDisplay(yPos);
+    this.setXPosDisplay(xPos);
+    this.setYVelDisplay(yVel);
+    this.setXVelDisplay(xVel);
+    this.props.setDisplayYAcceleration(
+      (-1 * Math.round(getNewAccelerationY(this.props.updatedForces) * 100)) / 100
     );
-    setDisplayXAcceleration(
-      Math.round(getNewAccelerationX(updatedForces) * 100) / 100
+    this.props.setDisplayXAcceleration(
+      Math.round(getNewAccelerationX(this.props.updatedForces) * 100) / 100
     );
   };
 
   // When display values updated by user, update real values
-  useEffect(() => {
-    if (updateDisplay.xDisplay != xPosition) {
-      let x = updateDisplay.xDisplay;
-      x = Math.max(0, x);
-      x = Math.min(x, xMax - 2 * radius);
-      setUpdatedStartPosX(x);
-      setXPosition(x);
-      setDisplayXPosition(x);
-    }
-
-    if (updateDisplay.yDisplay != getDisplayYPos(yPosition)) {
-      let y = updateDisplay.yDisplay;
-      y = Math.max(0, y);
-      y = Math.min(y, yMax - 2 * radius);
-      setDisplayYPosition(y);
-      let coordinatePosition = getYPosFromDisplay(y);
-      setUpdatedStartPosY(coordinatePosition);
-      setYPosition(coordinatePosition);
-    }
-
-    if (displayXVelocity != xVelocity) {
-      let x = displayXVelocity;
-      setXVelocity(x);
-      setDisplayXVelocity(x);
-    }
-
-    if (displayYVelocity != -yVelocity) {
-      let y = displayYVelocity;
-      setYVelocity(-y);
-      setDisplayYVelocity(y);
+  componentDidUpdate(prevProps: Readonly<IWeightProps>, prevState: Readonly<IState>, snapshot?: any): void {
+    if (this.props.updateDisplay != prevProps.updateDisplay) {
+      if (this.props.updateDisplay.xDisplay != this.state.xPosition) {
+        let x = this.props.updateDisplay.xDisplay;
+        x = Math.max(0, x);
+        x = Math.min(x, this.xMax - 2 * this.props.radius);
+        this.setState({updatedStartPosX: x})
+        this.setState({xPosition: x})
+        this.props.setDisplayXPosition(x);
+      }
+  
+      if (this.props.updateDisplay.yDisplay != this.getDisplayYPos(this.state.yPosition)) {
+        let y = this.props.updateDisplay.yDisplay;
+        y = Math.max(0, y);
+        y = Math.min(y, this.yMax - 2 * this.props.radius);
+        this.props.setDisplayYPosition(y);
+        let coordinatePosition = this.getYPosFromDisplay(y);
+        this.setState({updatedStartPosY: coordinatePosition})
+        this.setState({yPosition: coordinatePosition})
+      }
+  
+      if (this.props.displayXVelocity != this.state.xVelocity) {
+        let x = this.props.displayXVelocity;
+        this.setState({xVelocity: x})
+        this.props.setDisplayXVelocity(x);
+      }
+  
+      if (this.props.displayYVelocity != this.state.yVelocity) {
+        let y = this.props.displayYVelocity;
+        this.setState({yVelocity: -y})
+        this.props.setDisplayXVelocity(y);
+      }
     }
-  }, [updateDisplay]);
+  }
 
   // Check for collisions and update
   useEffect(() => {
@@ -264,7 +231,7 @@ export const Weight = (props: IWeightProps) => {
       newXAcc +=
         (force.magnitude *
           Math.cos((force.directionInDegrees * Math.PI) / 180)) /
-        mass;
+        this.props.mass;
     });
     return newXAcc;
   };
@@ -276,7 +243,7 @@ export const Weight = (props: IWeightProps) => {
         (-1 *
           (force.magnitude *
             Math.sin((force.directionInDegrees * Math.PI) / 180))) /
-        mass;
+          this.props.mass;
     });
     return newYAcc;
   };
@@ -287,11 +254,11 @@ export const Weight = (props: IWeightProps) => {
     xVel: number,
     yVel: number
   ) => {
-    if (!pendulum) {
-      return updatedForces;
+    if (!this.props.pendulum) {
+      return this.state.updatedForces;
     }
-    const x = xMax / 2 - xPos - radius;
-    const y = yPos + radius + 5;
+    const x = this.xMax / 2 - xPos - this.props.radius;
+    const y = yPos + this.props.radius + 5;
     let angle = (Math.atan(y / x) * 180) / Math.PI;
     if (angle < 0) {
       angle += 180;
@@ -306,8 +273,8 @@ export const Weight = (props: IWeightProps) => {
     setPendulumLength(Math.sqrt(x * x + y * y));
 
     const mag =
-      mass * 9.81 * Math.cos((oppositeAngle * Math.PI) / 180) +
-      (mass * (xVel * xVel + yVel * yVel)) / pendulumLength;
+      this.props.mass * 9.81 * Math.cos((oppositeAngle * Math.PI) / 180) +
+      (this.props.mass * (xVel * xVel + yVel * yVel)) / pendulumLength;
 
     const forceOfTension: IForce = {
       description: "Tension",
@@ -315,24 +282,24 @@ export const Weight = (props: IWeightProps) => {
       directionInDegrees: angle,
     };
 
-    return [forceOfGravity, forceOfTension];
+    return [this.forceOfGravity, forceOfTension];
   };
 
   const getNewPosition = (pos: number, vel: number) => {
-    return pos + vel * timestepSize;
+    return pos + vel * this.props.timestepSize;
   };
 
   const getNewVelocity = (vel: number, acc: number) => {
-    return vel + acc * timestepSize;
+    return vel + acc * this.props.timestepSize;
   };
 
   const checkForCollisionsWithWall = () => {
     let collision = false;
-    const minX = xPosition;
-    const maxX = xPosition + 2 * radius;
+    const minX = this.state.xPosition;
+    const maxX = this.state.xPosition + 2 * this.props.radius;
     const containerWidth = window.innerWidth;
-    if (xVelocity != 0) {
-      walls.forEach((wall) => {
+    if (this.state.xVelocity != 0) {
+      this.props.walls.forEach((wall) => {
         if (wall.angleInDegrees == 90) {
           const wallX = (wall.xPos / 100) * window.innerWidth;
           if (wall.xPos < 0.35) {
@@ -542,43 +509,39 @@ export const Weight = (props: IWeightProps) => {
     setYPosDisplay(startPosY);
   }, [startPosY]);
 
-  return (
+  render () {
+    return (
     <div style={{ zIndex: -1000 }}>
       <div
         className="weightContainer"
         onPointerDown={(e) => {
-          if (draggable) {
+          if (this.props.draggable) {
             e.preventDefault();
-            setPaused(true);
-            setDragging(true);
+            this.props.setPaused(true);
+            this.setState({dragging: true});
             setClickPositionX(e.clientX);
             setClickPositionY(e.clientY);
-          } else if (mode == "Review") {
-            setSketching(true);
           }
         }}
         onPointerMove={(e) => {
           e.preventDefault();
-          if (dragging) {
-            let newY = yPosition + e.clientY - clickPositionY;
-            if (newY > yMax - 2 * radius) {
-              newY = yMax - 2 * radius;
+          if (this.state.dragging) {
+            let newY = this.state.yPosition + e.clientY - clickPositionY;
+            if (newY > this.yMax - 2 * this.props.radius) {
+              newY = this.yMax - 2 * this.props.radius;
             }
 
-            let newX = xPosition + e.clientX - clickPositionX;
-            if (newX > xMax - 2 * radius) {
-              newX = xMax - 2 * radius;
+            let newX = this.state.xPosition + e.clientX - clickPositionX;
+            if (newX > this.xMax - 2 * this.props.radius) {
+              newX = this.xMax - 2 * this.props.radius;
             } else if (newX < 0) {
               newX = 0;
             }
-
-            setXPosition(newX);
-            setYPosition(newY);
-            setUpdatedStartPosX(newX);
-            setUpdatedStartPosY(newY);
-            setDisplayYPosition(
-              Math.round((yMax - 2 * radius - newY + 5) * 100) / 100
-            );
+            this.setState({xPosition: newX})
+            this.setState({yPosition: newY})
+            this.setState({updatedStartPosX: newX})
+            this.setState({updatedStartPosY: newY})
+            this.setState({displayYPosition: Math.round((yMax - 2 * radius - newY + 5) * 100) / 100})
             setClickPositionX(e.clientX);
             setClickPositionY(e.clientY);
             setDisplayValues();
@@ -591,20 +554,20 @@ export const Weight = (props: IWeightProps) => {
               resetEverything();
             }
             setDragging(false);
-            let newY = yPosition + e.clientY - clickPositionY;
-            if (newY > yMax - 2 * radius) {
-              newY = yMax - 2 * radius;
+            let newY = this.state.yPosition + e.clientY - clickPositionY;
+            if (newY > this.yMax - 2 * this.props.radius) {
+              newY = this.yMax - 2 * this.props.radius;
             }
 
             let newX = xPosition + e.clientX - clickPositionX;
-            if (newX > xMax - 2 * radius) {
-              newX = xMax - 2 * radius;
+            if (newX > this.xMax - 2 * this.props.radius) {
+              newX = this.xMax - 2 * this.props.radius;
             } else if (newX < 0) {
               newX = 0;
             }
-            if (pendulum) {
-              const x = xMax / 2 - newX - radius;
-              const y = newY + radius + 5;
+            if (this.state.pendulum) {
+              const x = this.xMax / 2 - newX - this.props.radius;
+              const y = newY + this.props.radius + 5;
               let angle = (Math.atan(y / x) * 180) / Math.PI;
               if (angle < 0) {
                 angle += 180;
@@ -615,20 +578,19 @@ export const Weight = (props: IWeightProps) => {
               }
 
               const pendulumLength = Math.sqrt(x * x + y * y);
-              setPendulumAngle(oppositeAngle);
-              setPendulumLength(Math.sqrt(x * x + y * y));
+              this.props.setPendulumAngle(oppositeAngle);
+              this.props.setPendulumLength(Math.sqrt(x * x + y * y));
               const mag = 9.81 * Math.cos((oppositeAngle * Math.PI) / 180);
               const forceOfTension: IForce = {
                 description: "Tension",
                 magnitude: mag,
                 directionInDegrees: angle,
               };
-
-              setKineticFriction(false);
-              setXVelocity(startVelX ?? 0);
-              setYVelocity(startVelY ?? 0);
+              this.setState({kineticFriction: false})
+              this.setState({xVelocity: startVelX ?? 0})
+              this.setState({yVelocity: startVelY ?? 0})
               setDisplayValues();
-              setUpdatedForces([forceOfGravity, forceOfTension]);
+              this.setState({updatedForces :[forceOfGravity, forceOfTension]});
             }
           }
         }}
@@ -637,7 +599,7 @@ export const Weight = (props: IWeightProps) => {
           <p className="weightLabel">{mass} kg</p>
         </div>
       </div>
-      {pendulum && (
+      {this.state.pendulum && (
         <div
           className="rod"
           style={{
@@ -648,45 +610,45 @@ export const Weight = (props: IWeightProps) => {
             zIndex: -2,
           }}
         >
-          <svg width={xMax + "px"} height={window.innerHeight + "px"}>
+          <svg width={this.xMax + "px"} height={window.innerHeight + "px"}>
             <line
-              x1={xPosition + radius}
-              y1={yPosition + radius}
-              x2={xMax / 2}
+              x1={this.state.xPosition + this.props.radius}
+              y1={this.state.yPosition + this.props.radius}
+              x2={this.xMax / 2}
               y2={-5}
               stroke={"#deb887"}
               strokeWidth="10"
             />
           </svg>
-          {!dragging && (
+          {!this.state.dragging && (
             <div>
               <p
                 style={{
                   position: "absolute",
                   zIndex: 5,
-                  left: xPosition + "px",
-                  top: yPosition - 70 + "px",
+                  left: this.state.xPosition + "px",
+                  top: this.state.yPosition - 70 + "px",
                   backgroundColor: labelBackgroundColor,
                 }}
               >
-                {Math.round(pendulumLength)} m
+                {Math.round(this.props.pendulumLength)} m
               </p>
               <p
                 style={{
                   position: "absolute",
                   zIndex: -1,
-                  left: xMax / 2 + "px",
+                  left: this.xMax / 2 + "px",
                   top: 30 + "px",
                   backgroundColor: labelBackgroundColor,
                 }}
               >
-                {Math.round(pendulumAngle * 100) / 100}°
+                {Math.round(this.props.pendulumAngle * 100) / 100}°
               </p>
             </div>
           )}
         </div>
       )}
-      {!dragging && showAcceleration && (
+      {!this.state.dragging && this.props.showAcceleration && (
         <div>
           <div
             style={{
@@ -697,7 +659,7 @@ export const Weight = (props: IWeightProps) => {
               top: 0,
             }}
           >
-            <svg width={xMax + "px"} height={window.innerHeight + "px"}>
+            <svg width={this.xMax + "px"} height={window.innerHeight + "px"}>
               <defs>
                 <marker
                   id="accArrow"
@@ -712,10 +674,10 @@ export const Weight = (props: IWeightProps) => {
                 </marker>
               </defs>
               <line
-                x1={xPosition + radius}
-                y1={yPosition + radius}
-                x2={xPosition + radius + getNewAccelerationX(updatedForces) * 5}
-                y2={yPosition + radius + getNewAccelerationY(updatedForces) * 5}
+                x1={this.state.xPosition + this.props.radius}
+                y1={this.state.yPosition + this.props.radius}
+                x2={this.state.xPosition + this.props.radius + getNewAccelerationX(this.state.updatedForces) * 5}
+                y2={this.state.yPosition + this.props.radius + getNewAccelerationY(this.state.updatedForces) * 5}
                 stroke={"green"}
                 strokeWidth="5"
                 markerEnd="url(#accArrow)"
@@ -726,15 +688,15 @@ export const Weight = (props: IWeightProps) => {
                 pointerEvents: "none",
                 position: "absolute",
                 left:
-                  xPosition +
-                  radius +
-                  getNewAccelerationX(updatedForces) * 5 +
+                  this.state.xPosition +
+                  this.props.radius +
+                  getNewAccelerationX(this.state.updatedForces) * 5 +
                   25 +
                   "px",
                 top:
-                  yPosition +
-                  radius +
-                  getNewAccelerationY(updatedForces) * 5 +
+                  this.state.yPosition +
+                  this.props.radius +
+                  getNewAccelerationY(this.state.updatedForces) * 5 +
                   25 +
                   "px",
                 zIndex: -1,
@@ -745,8 +707,8 @@ export const Weight = (props: IWeightProps) => {
                 {Math.round(
                   100 *
                     Math.sqrt(
-                      Math.pow(getNewAccelerationX(updatedForces) * 3, 2) +
-                        Math.pow(getNewAccelerationY(updatedForces) * 3, 2)
+                      Math.pow(getNewAccelerationX(this.state.updatedForces) * 3, 2) +
+                        Math.pow(getNewAccelerationY(this.state.updatedForces) * 3, 2)
                     )
                 ) / 100}{" "}
                 m/s<sup>2</sup>
@@ -755,7 +717,7 @@ export const Weight = (props: IWeightProps) => {
           </div>
         </div>
       )}
-      {!dragging && showVelocity && (
+      {!this.state.dragging && this.props.showVelocity && (
         <div>
           <div
             style={{
@@ -766,7 +728,7 @@ export const Weight = (props: IWeightProps) => {
               top: 0,
             }}
           >
-            <svg width={xMax + "px"} height={window.innerHeight + "px"}>
+            <svg width={this.xMax + "px"} height={window.innerHeight + "px"}>
               <defs>
                 <marker
                   id="velArrow"
@@ -781,10 +743,10 @@ export const Weight = (props: IWeightProps) => {
                 </marker>
               </defs>
               <line
-                x1={xPosition + radius}
-                y1={yPosition + radius}
-                x2={xPosition + radius + xVelocity * 3}
-                y2={yPosition + radius + yVelocity * 3}
+                x1={this.state.xPosition + this.props.radius}
+                y1={this.state.yPosition + this.props.radius}
+                x2={this.state.xPosition + this.props.radius + this.state.xVelocity * 3}
+                y2={this.state.yPosition + this.props.radius + this.state.yVelocity * 3}
                 stroke={"blue"}
                 strokeWidth="5"
                 markerEnd="url(#velArrow)"
@@ -794,15 +756,15 @@ export const Weight = (props: IWeightProps) => {
               style={{
                 pointerEvents: "none",
                 position: "absolute",
-                left: xPosition + radius + xVelocity * 3 + 25 + "px",
-                top: yPosition + radius + yVelocity * 3 + "px",
+                left: this.state.xPosition + this.props.radius + this.state.xVelocity * 3 + 25 + "px",
+                top: this.state.yPosition + this.props.radius + this.state.yVelocity * 3 + "px",
                 zIndex: -1,
                 lineHeight: 0.5,
               }}
             >
               <p>
                 {Math.round(
-                  100 * Math.sqrt(xVelocity * xVelocity + yVelocity * yVelocity)
+                  100 * Math.sqrt(this.state.xVelocity**2 + this.state.yVelocity**2)
                 ) / 100}{" "}
                 m/s
               </p>
@@ -810,14 +772,14 @@ export const Weight = (props: IWeightProps) => {
           </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) *
@@ -843,10 +805,10 @@ export const Weight = (props: IWeightProps) => {
           } 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.yMax + 50);
+          labelTop = Math.max(labelTop, this.yMin);
+          labelLeft = Math.min(labelLeft, this.xMax - 60);
+          labelLeft = Math.max(labelLeft, this.xMin);
 
           return (
             <div key={index}>
@@ -908,5 +870,6 @@ export const Weight = (props: IWeightProps) => {
           );
         })}
     </div>
-  );
+    );
+  }
 };