1 files changed, 37 insertions, 45 deletions

diff --git a/src/client/views/nodes/RadialMenu.tsx b/src/client/views/nodes/RadialMenu.tsx
index 7f0956e51..191877cb5 100644
--- a/src/client/views/nodes/RadialMenu.tsx
+++ b/src/client/views/nodes/RadialMenu.tsx
@@ -1,8 +1,8 @@
-import React = require("react");
-import { action, computed, IReactionDisposer, observable, reaction, runInAction } from "mobx";
-import { observer } from "mobx-react";
-import "./RadialMenu.scss";
-import { RadialMenuItem, RadialMenuProps } from "./RadialMenuItem";
+import * as React from 'react';
+import { action, computed, IReactionDisposer, observable, reaction, runInAction } from 'mobx';
+import { observer } from 'mobx-react';
+import './RadialMenu.scss';
+import { RadialMenuItem, RadialMenuProps } from './RadialMenuItem';
 
 @observer
 export class RadialMenu extends React.Component {
@@ -23,11 +23,10 @@ export class RadialMenu extends React.Component {
 
     public used: boolean = false;
 
-
     catchTouch = (te: React.TouchEvent) => {
         te.stopPropagation();
         te.preventDefault();
-    }
+    };
 
     @action
     onPointerDown = (e: PointerEvent) => {
@@ -35,8 +34,8 @@ export class RadialMenu extends React.Component {
         this._mouseX = e.clientX;
         this._mouseY = e.clientY;
         this.used = false;
-        document.addEventListener("pointermove", this.onPointerMove);
-    }
+        document.addEventListener('pointermove', this.onPointerMove);
+    };
 
     @observable
     private _closest: number = -1;
@@ -60,11 +59,10 @@ export class RadialMenu extends React.Component {
                 }
             }
             this._closest = closest;
-        }
-        else {
+        } else {
             this._closest = -1;
         }
-    }
+    };
     @action
     onPointerUp = (e: PointerEvent) => {
         this.used = true;
@@ -75,43 +73,41 @@ export class RadialMenu extends React.Component {
             this._shouldDisplay = false;
         }
         this._shouldDisplay && (this._display = true);
-        document.removeEventListener("pointermove", this.onPointerMove);
+        document.removeEventListener('pointermove', this.onPointerMove);
         if (this._closest !== -1 && this._items?.length > this._closest) {
             this._items[this._closest].event();
         }
-    }
+    };
     componentWillUnmount() {
-        document.removeEventListener("pointerdown", this.onPointerDown);
+        document.removeEventListener('pointerdown', this.onPointerDown);
 
-        document.removeEventListener("pointerup", this.onPointerUp);
+        document.removeEventListener('pointerup', this.onPointerUp);
         this._reactionDisposer && this._reactionDisposer();
     }
 
     @action
     componentDidMount = () => {
-        document.addEventListener("pointerdown", this.onPointerDown);
-        document.addEventListener("pointerup", this.onPointerUp);
+        document.addEventListener('pointerdown', this.onPointerDown);
+        document.addEventListener('pointerup', this.onPointerUp);
         this.previewcircle();
         this._reactionDisposer = reaction(
             () => this._shouldDisplay,
-            () => this._shouldDisplay && !this._mouseDown && runInAction(() => this._display = true)
+            () => this._shouldDisplay && !this._mouseDown && runInAction(() => (this._display = true))
         );
-    }
+    };
 
     componentDidUpdate = () => {
         this.previewcircle();
-    }
+    };
 
     @observable private _pageX: number = 0;
     @observable private _pageY: number = 0;
     @observable _display: boolean = false;
     @observable private _yRelativeToTop: boolean = true;
 
-
     @observable private _width: number = 0;
     @observable private _height: number = 0;
 
-
     getItems() {
         return this._items;
     }
@@ -133,7 +129,7 @@ export class RadialMenu extends React.Component {
         this._mouseX = x;
         this._mouseY = y;
         this._shouldDisplay = true;
-    }
+    };
     // @computed
     // get pageX() {
     //     const x = this._pageX;
@@ -168,7 +164,7 @@ export class RadialMenu extends React.Component {
         this.clearItems();
         this._display = false;
         this._shouldDisplay = false;
-    }
+    };
 
     @action
     openMenu = (x: number, y: number) => {
@@ -176,56 +172,52 @@ export class RadialMenu extends React.Component {
         this._pageY = y;
         this._shouldDisplay;
         this._display = true;
-    }
+    };
 
     @action
     clearItems() {
         this._items = [];
     }
 
-
     previewcircle() {
-        if (document.getElementById("newCanvas") !== null) {
-            const c: any = document.getElementById("newCanvas");
+        if (document.getElementById('newCanvas') !== null) {
+            const c: any = document.getElementById('newCanvas');
             if (c.getContext) {
-                const ctx = c.getContext("2d");
+                const ctx = c.getContext('2d');
                 ctx.beginPath();
                 ctx.arc(150, 150, 50, 0, 2 * Math.PI);
-                ctx.fillStyle = "white";
+                ctx.fillStyle = 'white';
                 ctx.fill();
-                ctx.font = "12px Arial";
-                ctx.fillStyle = "black";
-                ctx.textAlign = "center";
-                let description = "";
+                ctx.font = '12px Arial';
+                ctx.fillStyle = 'black';
+                ctx.textAlign = 'center';
+                let description = '';
                 if (this._closest !== -1) {
                     description = this._items[this._closest].description;
                 }
                 if (description.length > 15) {
                     description = description.slice(0, 12);
-                    description += "...";
+                    description += '...';
                 }
                 ctx.fillText(description, 150, 150, 90);
             }
         }
     }
 
-
     render() {
         if (!this._display) {
             return null;
         }
-        const style = this._yRelativeToTop ? { left: this._pageX - 130, top: this._pageY - 130 } :
-            { left: this._pageX - 130, top: this._pageY - 130 };
+        const style = this._yRelativeToTop ? { left: this._pageX - 130, top: this._pageY - 130 } : { left: this._pageX - 130, top: this._pageY - 130 };
 
         return (
-
             <div className="radialMenu-cont" onTouchStart={this.catchTouch} style={style}>
-                <canvas id="newCanvas" style={{ position: "absolute" }} height="300" width="300"> Your browser does not support the HTML5 canvas tag.</canvas>
+                <canvas id="newCanvas" style={{ position: 'absolute' }} height="300" width="300">
+                    {' '}
+                    Your browser does not support the HTML5 canvas tag.
+                </canvas>
                 {this.menuItems}
             </div>
-
         );
     }
-
-
-}
\ No newline at end of file
+}