From e3fb03ce3f5cd67cd37a5fc193b285dac6781cbe Mon Sep 17 00:00:00 2001
From: Luis Fernando Molina <Luis-Fernando-Molina@users.noreply.github.com>
Date: Sun, 23 Aug 2020 16:00:41 +0200
Subject: [PATCH] Look and Feel UI

---
 Canvas.js                 | 21 +++++----------------
 FloatingSpace/UiObject.js | 32 +++++++++++++++++++++-----------
 2 files changed, 26 insertions(+), 27 deletions(-)

diff --git a/Canvas.js b/Canvas.js
index d5b2cf6ac..d07cb3823 100644
--- a/Canvas.js
+++ b/Canvas.js
@@ -48,7 +48,6 @@ function newCanvas() {
     thisObject.eventHandler = newEventHandler()
 
     let lastContainerMouseOver
-    let lastShortcutKeyRejection
 
     thisObject.mouse = {
         position: {
@@ -467,23 +466,13 @@ function newCanvas() {
                         nodeOnFocus.payload.uiObject.setValue('Shortcut Key Removed ')
                         return
                     } else {
-                        if (lastShortcutKeyRejection !== event.key + nodeUsingThisKey.type + ' ' + nodeUsingThisKey.name) {
-                            /* The first time we show a warning that this key is in use. */
-                            nodeOnFocus.payload.uiObject.setErrorMessage('Key already in use by ' + nodeUsingThisKey.type + ' ' + nodeUsingThisKey.name)
-                            lastShortcutKeyRejection = event.key + nodeUsingThisKey.type + ' ' + nodeUsingThisKey.name
-                            return
-                        } else {
-                            /* After the warning, we allow the key to be re-assigned */
-                            nodeUsingThisKey.payload.uiObject.shortcutKey = ''
-                            nodeUsingThisKey === undefined
-                        }
+                        /* After the warning, we allow the key to be re-assigned */
+                        nodeUsingThisKey.payload.uiObject.shortcutKey = ''
+                        nodeUsingThisKey === undefined
+                        nodeOnFocus.payload.uiObject.shortcutKey = event.key
+                        nodeOnFocus.payload.uiObject.setValue('Shortcut Key: Ctrl + Alt + ' + event.key)
                     }
                 }
-                /* If there is not node using this key and a node in focus, we assign this key to this node */
-                if (nodeUsingThisKey === undefined && nodeOnFocus !== undefined) {
-                    nodeOnFocus.payload.uiObject.shortcutKey = event.key
-                    nodeOnFocus.payload.uiObject.setValue('Shortcut Key: Ctrl + Alt + ' + event.key)
-                }
                 return
             }
         }
diff --git a/FloatingSpace/UiObject.js b/FloatingSpace/UiObject.js
index 00c0bc344..b30b99d2d 100644
--- a/FloatingSpace/UiObject.js
+++ b/FloatingSpace/UiObject.js
@@ -1078,7 +1078,7 @@ function newUiObject() {
 
     function drawForeground() {
         if (thisObject.isOnFocus === false) {
-            
+
             if (isDragging === false) {
                 thisObject.menu.drawForeground()
             }
@@ -1670,19 +1670,20 @@ function newUiObject() {
 
             let nodeDefinition = getNodeDefinition(thisObject.payload.node)
             if (nodeDefinition !== undefined) {
+                /* Hierarchy Head Ring */
                 if (nodeDefinition.isHierarchyHead === true) {
-                    VISIBLE_RADIUS = thisObject.payload.floatingObject.currentHierarchyRing * 2.8
+                    VISIBLE_RADIUS = thisObject.payload.floatingObject.currentHierarchyRing * 3.8
                     if (canvas.floatingSpace.inMapMode === true) {
                         VISIBLE_RADIUS = canvas.floatingSpace.transformRadiusToMap(VISIBLE_RADIUS)
                     }
-                    let OPACITY = 1
+                    let OPACITY = 0.5
 
                     browserCanvasContext.beginPath()
                     browserCanvasContext.arc(visiblePosition.x, visiblePosition.y, VISIBLE_RADIUS, 0, Math.PI * 2, true)
                     browserCanvasContext.closePath()
                     browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.LIGHT_GREY + ', ' + OPACITY + ')'
                     browserCanvasContext.lineWidth = 10
-                    browserCanvasContext.setLineDash([4, 16])
+                    browserCanvasContext.setLineDash([1, 10])
                     browserCanvasContext.stroke()
 
                     browserCanvasContext.beginPath()
@@ -1693,33 +1694,42 @@ function newUiObject() {
                     if (thisObject.payload.node.isIncluded === true) {
                         browserCanvasContext.setLineDash([0, 0])
                     } else {
-                        browserCanvasContext.setLineDash([20, 20])
+                        browserCanvasContext.setLineDash([10, 20])
                     }
                     browserCanvasContext.stroke()
                 }
             }
 
             if (thisObject.isOnFocus === true) {
+                /* Black Translucent Background when node is in focus */
                 VISIBLE_RADIUS = thisObject.container.frame.radius * 1.5
                 browserCanvasContext.beginPath()
                 browserCanvasContext.arc(visiblePosition.x, visiblePosition.y, VISIBLE_RADIUS, 0, Math.PI * 2, true)
                 browserCanvasContext.closePath()
-
-                browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.BLACK + ', 0.60)'
-
+                browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.BLACK + ', 0.65)'
                 browserCanvasContext.fill()
+                /* Border when node is in focus */
+                if (hasError !== true && nodeDefinition.isHierarchyHead !== true) {
+                    browserCanvasContext.beginPath()
+                    browserCanvasContext.arc(visiblePosition.x, visiblePosition.y, VISIBLE_RADIUS, 0, Math.PI * 2, true)
+                    browserCanvasContext.closePath()
+                    browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + 1 + ')'
+                    browserCanvasContext.lineWidth = 3
+                    browserCanvasContext.setLineDash([0, 0])
+                    browserCanvasContext.stroke()
+                }
             }
 
             if (hasError === true) {
                 VISIBLE_RADIUS = thisObject.container.frame.radius * 1.5
+                if (canvas.floatingSpace.inMapMode === true) {
+                    VISIBLE_RADIUS = canvas.floatingSpace.transformRadiusToMap(VISIBLE_RADIUS)
+                }
                 let OPACITY = errorMessageCounter / 30
-
                 browserCanvasContext.beginPath()
                 browserCanvasContext.arc(visiblePosition.x, visiblePosition.y, VISIBLE_RADIUS, 0, Math.PI * 2, true)
                 browserCanvasContext.closePath()
-
                 browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.RED + ', ' + OPACITY + ')'
-
                 browserCanvasContext.lineWidth = 5
                 browserCanvasContext.setLineDash([5, 10])
                 browserCanvasContext.stroke()