1 files changed, 34 insertions, 37 deletions

diff --git a/src/client/views/nodes/RadialMenuItem.tsx b/src/client/views/nodes/RadialMenuItem.tsx
index 8876b4879..c931202f1 100644
--- a/src/client/views/nodes/RadialMenuItem.tsx
+++ b/src/client/views/nodes/RadialMenuItem.tsx
@@ -1,8 +1,8 @@
-import React = require("react");
+import * as React from 'react';
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { observer } from "mobx-react";
-import { UndoManager } from "../../util/UndoManager";
+import { observer } from 'mobx-react';
+import { UndoManager } from '../../util/UndoManager';
 
 export interface RadialMenuProps {
     description: string;
@@ -15,17 +15,15 @@ export interface RadialMenuProps {
     selected: number;
 }
 
-
 @observer
 export class RadialMenuItem extends React.Component<RadialMenuProps> {
-
     componentDidMount = () => {
         this.setcircle();
-    }
+    };
 
     componentDidUpdate = () => {
         this.setcircle();
-    }
+    };
 
     handleEvent = async (e: React.PointerEvent) => {
         this.props.closeMenu && this.props.closeMenu();
@@ -35,38 +33,36 @@ export class RadialMenuItem extends React.Component<RadialMenuProps> {
         }
         await this.props.event({ x: e.clientX, y: e.clientY });
         batch && batch.end();
-    }
-
+    };
 
     setcircle() {
         let circlemin = 0;
         let circlemax = 1;
-        this.props.min ? circlemin = this.props.min : null;
-        this.props.max ? circlemax = this.props.max : null;
-        if (document.getElementById("myCanvas") !== null) {
-            const c: any = document.getElementById("myCanvas");
-            let color = "white";
+        this.props.min ? (circlemin = this.props.min) : null;
+        this.props.max ? (circlemax = this.props.max) : null;
+        if (document.getElementById('myCanvas') !== null) {
+            const c: any = document.getElementById('myCanvas');
+            let color = 'white';
             switch (circlemin % 3) {
                 case 1:
-                    color = "#c2c2c5";
+                    color = '#c2c2c5';
                     break;
                 case 0:
-                    color = "#f1efeb";
+                    color = '#f1efeb';
                     break;
                 case 2:
-                    color = "lightgray";
+                    color = 'lightgray';
                     break;
             }
             if (circlemax % 3 === 1 && circlemin === circlemax - 1) {
-                color = "#c2c2c5";
+                color = '#c2c2c5';
             }
 
             if (this.props.selected === this.props.min) {
-                color = "#808080";
-
+                color = '#808080';
             }
             if (c.getContext) {
-                const ctx = c.getContext("2d");
+                const ctx = c.getContext('2d');
                 ctx.beginPath();
                 ctx.arc(150, 150, 150, (circlemin / circlemax) * 2 * Math.PI, ((circlemin + 1) / circlemax) * 2 * Math.PI);
                 ctx.arc(150, 150, 50, ((circlemin + 1) / circlemax) * 2 * Math.PI, (circlemin / circlemax) * 2 * Math.PI, true);
@@ -79,35 +75,36 @@ export class RadialMenuItem extends React.Component<RadialMenuProps> {
     calculatorx() {
         let circlemin = 0;
         let circlemax = 1;
-        this.props.min ? circlemin = this.props.min : null;
-        this.props.max ? circlemax = this.props.max : null;
-        const avg = ((circlemin / circlemax) + ((circlemin + 1) / circlemax)) / 2;
+        this.props.min ? (circlemin = this.props.min) : null;
+        this.props.max ? (circlemax = this.props.max) : null;
+        const avg = (circlemin / circlemax + (circlemin + 1) / circlemax) / 2;
         const degrees = 360 * avg;
-        const x = 100 * Math.cos(degrees * Math.PI / 180);
-        const y = -125 * Math.sin(degrees * Math.PI / 180);
+        const x = 100 * Math.cos((degrees * Math.PI) / 180);
+        const y = -125 * Math.sin((degrees * Math.PI) / 180);
         return x;
     }
 
     calculatory() {
-
         let circlemin = 0;
         let circlemax = 1;
-        this.props.min ? circlemin = this.props.min : null;
-        this.props.max ? circlemax = this.props.max : null;
-        const avg = ((circlemin / circlemax) + ((circlemin + 1) / circlemax)) / 2;
+        this.props.min ? (circlemin = this.props.min) : null;
+        this.props.max ? (circlemax = this.props.max) : null;
+        const avg = (circlemin / circlemax + (circlemin + 1) / circlemax) / 2;
         const degrees = 360 * avg;
-        const x = 125 * Math.cos(degrees * Math.PI / 180);
-        const y = -100 * Math.sin(degrees * Math.PI / 180);
+        const x = 125 * Math.cos((degrees * Math.PI) / 180);
+        const y = -100 * Math.sin((degrees * Math.PI) / 180);
         return y;
     }
 
-
     render() {
         return (
-            <div className={"radialMenu-item" + (this.props.selected ? " radialMenu-itemSelected" : "")} onPointerUp={this.handleEvent}>
-                <canvas id="myCanvas" height="300" width="300"> Your browser does not support the HTML5 canvas tag.</canvas>
-                <FontAwesomeIcon icon={this.props.icon} size="3x" style={{ position: "absolute", left: this.calculatorx() + 150 - 19, top: this.calculatory() + 150 - 19 }} />
+            <div className={'radialMenu-item' + (this.props.selected ? ' radialMenu-itemSelected' : '')} onPointerUp={this.handleEvent}>
+                <canvas id="myCanvas" height="300" width="300">
+                    {' '}
+                    Your browser does not support the HTML5 canvas tag.
+                </canvas>
+                <FontAwesomeIcon icon={this.props.icon} size="3x" style={{ position: 'absolute', left: this.calculatorx() + 150 - 19, top: this.calculatory() + 150 - 19 }} />
             </div>
         );
     }
-}
\ No newline at end of file
+}