From 2379bdba987e524806eecd62cf439cd2bdad3db8 Mon Sep 17 00:00:00 2001
From: Andy Rickert <andrew_rickert@brown.edu>
Date: Thu, 9 Jan 2020 23:54:49 -0800
Subject: added icons

---
 src/client/views/nodes/DocumentView.tsx   | 13 ++++++-------
 src/client/views/nodes/RadialMenu.tsx     |  2 +-
 src/client/views/nodes/RadialMenuItem.tsx | 31 ++++++++++++++++++++++++++++---
 3 files changed, 35 insertions(+), 11 deletions(-)

(limited to 'src')

diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index c9a56b46f..9bc0244ba 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -146,7 +146,6 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
 
     @action
     onRadialMenu = async (event: React.TouchEvent): Promise<void> => {
-        console.log("YUH")
         // the touch onContextMenu is button 0, the pointer onContextMenu is button 2
         // if (e.button === 0) {
         //     e.preventDefault();
@@ -166,18 +165,18 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
         const two = RadialMenu.Instance.findByDescription("two...");
         const three = RadialMenu.Instance.findByDescription("three...");
         const four= RadialMenu.Instance.findByDescription("four...");
-        const five= RadialMenu.Instance.findByDescription("five...");
-        const six= RadialMenu.Instance.findByDescription("six...");
-        const seven= RadialMenu.Instance.findByDescription("seven...");
+        // const five= RadialMenu.Instance.findByDescription("five...");
+        // const six= RadialMenu.Instance.findByDescription("six...");
+        // const seven= RadialMenu.Instance.findByDescription("seven...");
 
 
         !one?rm.addItem({ description: "one", event: () => this.props.addDocTab(Docs.Create.KVPDocument(this.props.Document, { width: 300, height: 300 }), undefined, "onRight"), icon: "layer-group",selected:-1 }):null;
         !two?rm.addItem({ description: "two", event: () => this.props.addDocTab(Docs.Create.KVPDocument(this.props.Document, { width: 300, height: 300 }), undefined, "onRight"), icon: "layer-group",selected:-1  }):null;
         !three?rm.addItem({ description: "three", event: () => this.props.addDocTab(Docs.Create.KVPDocument(this.props.Document, { width: 300, height: 300 }), undefined, "onRight"), icon: "layer-group",selected:-1  }):null;
         !four?rm.addItem({ description: "four", event: () => this.props.addDocTab(Docs.Create.KVPDocument(this.props.Document, { width: 300, height: 300 }), undefined, "onRight"), icon: "layer-group",selected:-1 }):null;
-        !five?rm.addItem({ description: "five", event: () => this.props.addDocTab(Docs.Create.KVPDocument(this.props.Document, { width: 300, height: 300 }), undefined, "onRight"), icon: "layer-group",selected:-1 }):null;
-        !six?rm.addItem({ description: "six", event: () => this.props.addDocTab(Docs.Create.KVPDocument(this.props.Document, { width: 300, height: 300 }), undefined, "onRight"), icon: "layer-group" ,selected:-1}):null;
-        !seven?rm.addItem({ description: "seven", event: () => this.props.addDocTab(Docs.Create.KVPDocument(this.props.Document, { width: 300, height: 300 }), undefined, "onRight"), icon: "layer-group" ,selected:-1}):null;
+        // !five?rm.addItem({ description: "five", event: () => this.props.addDocTab(Docs.Create.KVPDocument(this.props.Document, { width: 300, height: 300 }), undefined, "onRight"), icon: "layer-group",selected:-1 }):null;
+        // !six?rm.addItem({ description: "six", event: () => this.props.addDocTab(Docs.Create.KVPDocument(this.props.Document, { width: 300, height: 300 }), undefined, "onRight"), icon: "layer-group" ,selected:-1}):null;
+        // !seven?rm.addItem({ description: "seven", event: () => this.props.addDocTab(Docs.Create.KVPDocument(this.props.Document, { width: 300, height: 300 }), undefined, "onRight"), icon: "layer-group" ,selected:-1}):null;
 
         runInAction(() => {
             // cm.addItem({
diff --git a/src/client/views/nodes/RadialMenu.tsx b/src/client/views/nodes/RadialMenu.tsx
index 4fbb40c5f..b0cf3bb98 100644
--- a/src/client/views/nodes/RadialMenu.tsx
+++ b/src/client/views/nodes/RadialMenu.tsx
@@ -188,7 +188,7 @@ export class RadialMenu extends React.Component {
             return null;
         }
         const style = this._yRelativeToTop ? { left: this._mouseX-150, top: this._mouseY-150 } :
-            { left: this._mouseX-150, bottom: this._mouseY+150 };
+            { left: this._mouseX-150, top: this._mouseY-150 };
 
         const contents = (
             <>
diff --git a/src/client/views/nodes/RadialMenuItem.tsx b/src/client/views/nodes/RadialMenuItem.tsx
index 727d1c3be..f077dd447 100644
--- a/src/client/views/nodes/RadialMenuItem.tsx
+++ b/src/client/views/nodes/RadialMenuItem.tsx
@@ -12,7 +12,7 @@ export interface OriginalMenuProps {
     description: string;
     event: (stuff?: any) => void;
     undoable?: boolean;
-    icon: IconProp; //maybe should be optional (icon?)
+    icon: IconProp;
     closeMenu?: () => void;
     min?: number;
     max?:number;
@@ -68,10 +68,8 @@ export class RadialMenuItem extends React.Component<RadialMenuProps & { selected
         if (circlemax%3===1 && circlemin===circlemax-1){
             color="#c2c2c5";
         }
-        console.log(this.props.selected,this.props.min)
 
         if (this.props.selected === this.props.min){
-            console.log(this.props.selected,this.props.min)
             color="#808080";
         
         }
@@ -86,10 +84,37 @@ export class RadialMenuItem extends React.Component<RadialMenuProps & { selected
     }
     }
 
+    calculatorx(){
+        let circlemin=0;
+        let circlemax=1
+        this.props.min? circlemin=this.props.min:null;
+        this.props.max? circlemax=this.props.max:null;
+        let avg = ((circlemin/circlemax)+((circlemin+1)/circlemax))/2;
+        let degrees = 360*avg;
+        let x= 100*Math.cos(degrees*Math.PI/180);
+        let 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;
+        let avg = ((circlemin/circlemax)+((circlemin+1)/circlemax))/2;
+        let degrees = 360*avg;
+        let x= 125*Math.cos(degrees*Math.PI/180);
+        let y =-100*Math.sin(degrees*Math.PI/180);
+        return y;
+    }
+
+
     render() {
             return (
                 <div className={"radialMenu-item" + (this.props.selected ? " radialMenu-itemSelected" : "")} onClick={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>
             );
     }
-- 
cgit v1.2.3-70-g09d2