From 32ff2b6e39dfd943c784c3cb6afa8806ad3d11b9 Mon Sep 17 00:00:00 2001
From: Andy Rickert <andrew_rickert@brown.edu>
Date: Fri, 10 Jan 2020 19:03:08 -0800
Subject: added text in the middle of the menu for description

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

(limited to 'src')

diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 9bc0244ba..49d35637e 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -170,7 +170,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
         // 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;
+        !one?rm.addItem({ description: "one one one one one one one one 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;
diff --git a/src/client/views/nodes/RadialMenu.tsx b/src/client/views/nodes/RadialMenu.tsx
index b0cf3bb98..d8750a192 100644
--- a/src/client/views/nodes/RadialMenu.tsx
+++ b/src/client/views/nodes/RadialMenu.tsx
@@ -87,13 +87,17 @@ export class RadialMenu extends React.Component {
     componentDidMount = () => {
         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)
         );
     }
 
+    componentDidUpdate = () =>{
+        this.previewcircle();
+    }
+
     @observable private _pageX: number = 0;
     @observable private _pageY: number = 0;
     @observable private _display: boolean = false;
@@ -183,6 +187,33 @@ export class RadialMenu extends React.Component {
         this._items = [];
     }
 
+
+    previewcircle(){
+        if (document.getElementById("newCanvas")!==null){
+        var c : any= document.getElementById("newCanvas");
+        if (c.getContext){
+        var ctx = c.getContext("2d");
+        ctx.beginPath();
+        ctx.arc(150, 150, 50, 0,  2 * Math.PI);
+        ctx.fillStyle="white";
+        ctx.fill()
+        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 += "...";
+        }
+        ctx.fillText(description, 150, 150, 90);
+        }
+    }
+    }
+    
+
     render() {
         if (!this._display) {
             return null;
@@ -208,6 +239,7 @@ export class RadialMenu extends React.Component {
         return (
 
                     <div className="radialMenu-cont" style={style}>
+                        <canvas id="newCanvas" style={{position:"absolute"}}height="300" width="300"> Your browser does not support the HTML5 canvas tag.</canvas>
                         {contents}
                     </div>
 
diff --git a/src/client/views/nodes/RadialMenuItem.tsx b/src/client/views/nodes/RadialMenuItem.tsx
index f077dd447..4ca257df5 100644
--- a/src/client/views/nodes/RadialMenuItem.tsx
+++ b/src/client/views/nodes/RadialMenuItem.tsx
@@ -59,7 +59,7 @@ export class RadialMenuItem extends React.Component<RadialMenuProps & { selected
                 color = "#c2c2c5";
                 break;
             case 0:
-                color = "white";
+                color = "#f1efeb";
                 break;
             case 2:
                 color = "lightgray";
-- 
cgit v1.2.3-70-g09d2