1 files changed, 57 insertions, 39 deletions
diff --git a/src/client/views/nodes/PhysicsSimulationWedge.tsx b/src/client/views/nodes/PhysicsSimulationWedge.tsx
index 0dc7751f3..bf0cadce2 100644
--- a/src/client/views/nodes/PhysicsSimulationWedge.tsx
+++ b/src/client/views/nodes/PhysicsSimulationWedge.tsx
@@ -1,3 +1,4 @@
+import React from "react";
 import { useState, useEffect, useCallback } from "react";
 import "./PhysicsSimulationBox.scss";
 
@@ -7,58 +8,75 @@ export interface IWedgeProps {
   startLeft: number;
 }
 
-export const Wedge = (props: IWedgeProps) => {
-  const { startHeight, startWidth, startLeft } = props;
+interface IState {
+  angleInRadians: number, 
+  left: number,
+  coordinates: string,
+}
+
+export default class Wedge extends React.Component<IWedgeProps, IState> {
 
-  const [angleInRadians, setAngleInRadians] = useState(
-    Math.atan(startHeight / startWidth)
-  );
-  const [left, setLeft] = useState(startLeft);
-  const [coordinates, setCoordinates] = useState("");
+  constructor(props: any) {
+    super(props)
+    this.state = {
+      angleInRadians: Math.atan(this.props.startHeight / this.props.startWidth),
+      left: this.props.startLeft,
+      coordinates: "",
+    }
+  }
 
-  const color = "#deb887";
+  color = "#deb887";
 
-  useEffect(() => {
+  updateCoordinates() {
     const coordinatePair1 =
-      Math.round(left) + "," + Math.round(window.innerHeight * 0.8) + " ";
+      Math.round(this.state.left) + "," + Math.round(window.innerHeight * 0.8) + " ";
     const coordinatePair2 =
-      Math.round(left + startWidth) +
+      Math.round(this.state.left + this.props.startWidth) +
       "," +
       Math.round(window.innerHeight * 0.8) +
       " ";
     const coordinatePair3 =
-      Math.round(left) +
+      Math.round(this.state.left) +
       "," +
-      Math.round(window.innerHeight * 0.8 - startHeight);
+      Math.round(window.innerHeight * 0.8 - this.props.startHeight);
     const coord = coordinatePair1 + coordinatePair2 + coordinatePair3;
-    setCoordinates(coord);
-  }, [left, startWidth, startHeight]);
+    this.setState({coordinates: coord}); 
+  }
 
-  useEffect(() => {
-    setAngleInRadians(Math.atan(startHeight / startWidth));
-  }, [startWidth, startHeight]);
+  componentDidMount() {
+    this.updateCoordinates()
+  }
 
-  return (
-    <div>
-      <div style={{ position: "absolute", left: "0", top: "0", zIndex: -5 }}>
-        <svg
-          width={window.innerWidth * 0.7 + "px"}
-          height={window.innerHeight * 0.8 + "px"}
+  componentDidUpdate(prevProps: Readonly<IWedgeProps>, prevState: Readonly<IState>, snapshot?: any): void {
+    this.updateCoordinates();
+    if (prevProps.startHeight != this.props.startHeight || prevProps.startWidth != this.props.startWidth) {
+      this.setState({angleInRadians: Math.atan(this.props.startHeight / this.props.startWidth)});
+    } 
+  }
+  
+  render() {
+    return (
+      <div>
+        <div style={{ position: "absolute", left: "0", top: "0", zIndex: -5 }}>
+          <svg
+            width={window.innerWidth * 0.7 + "px"}
+            height={window.innerHeight * 0.8 + "px"}
+          >
+            <polygon points={this.state.coordinates} style={{ fill: "burlywood" }} />
+          </svg>
+        </div>
+
+        <p
+          style={{
+            position: "absolute",
+            zIndex: 500,
+            left: Math.round(this.state.left + this.props.startWidth - 80) + "px",
+            top: Math.round(window.innerHeight * 0.8 - 40) + "px",
+          }}
         >
-          <polygon points={coordinates} style={{ fill: "burlywood" }} />
-        </svg>
+          {Math.round(((this.state.angleInRadians * 180) / Math.PI) * 100) / 100}°
+        </p>
       </div>
-
-      <p
-        style={{
-          position: "absolute",
-          zIndex: 500,
-          left: Math.round(left + startWidth - 80) + "px",
-          top: Math.round(window.innerHeight * 0.8 - 40) + "px",
-        }}
-      >
-        {Math.round(((angleInRadians * 180) / Math.PI) * 100) / 100}°
-      </p>
-    </div>
-  );
+    );
+  }
 };