No ring, more UX imrprovements while on map mode

Projects/Foundations/UI/Spaces/Floating-Space/UiObject.js

@@ -2111,274 +2111,316 @@ function newUiObject() {
                 return
             }
 
-            if (thisObject.isOnFocus === true) {
-                /* Black Translucent Background when node is in focus */
-                VISIBLE_RADIUS = thisObject.payload.floatingObject.container.frame.radius
-                browserCanvasContext.beginPath()
-                browserCanvasContext.arc(visiblePosition.x, visiblePosition.y, VISIBLE_RADIUS, 0, Math.PI * 2, true)
-                browserCanvasContext.closePath()
-                browserCanvasContext.fillStyle = 'rgba(' + UI.projects.foundations.spaces.floatingSpace.style.backgroundColor + ', 0.70)'
-                browserCanvasContext.fill()
-                /* Border when node is in focus */
-                if (
-                    thisObject.hasError !== true &&
-                    thisObject.WarningError !== true &&
-                    thisObject.hasInfo !== true &&
-                    schemaDocument.isHierarchyHead !== true &&
-                    thisObject.circularProgressBar === undefined
-                ) {
+            drawOnFocus()
+            drawHierarchyHeadRing()
+            drawProjectHeadRing()
+            drawInfoRing()
+            drawWarningRing() 
+            drawErrorRing()
+            drawHighlighted()
+            drawReadyToChainAttach()
+            drawAvailableToChainAttach()
+            drawReadyToReferenceAttach()
+            drawAvailableToReferenceAttach()
+
+            function drawOnFocus() {
+                if (thisObject.isOnFocus === true) {
+                    /* Black Translucent Background when node is in focus */
+                    VISIBLE_RADIUS = thisObject.payload.floatingObject.container.frame.radius
                     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([]) // Resets Line Dash
+                    browserCanvasContext.fillStyle = 'rgba(' + UI.projects.foundations.spaces.floatingSpace.style.backgroundColor + ', 0.70)'
+                    browserCanvasContext.fill()
+                    /* Border when node is in focus */
+                    if (
+                        thisObject.hasError !== true &&
+                        thisObject.WarningError !== true &&
+                        thisObject.hasInfo !== true &&
+                        schemaDocument.isHierarchyHead !== true &&
+                        thisObject.circularProgressBar === undefined
+                    ) {
+                        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([]) // Resets Line Dash
+                        browserCanvasContext.stroke()
+
+                        browserCanvasContext.beginPath()
+                        browserCanvasContext.arc(visiblePosition.x, visiblePosition.y, VISIBLE_RADIUS - 1, 0, Math.PI * 2, true)
+                        browserCanvasContext.closePath()
+                        browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.DARK_TURQUOISE + ', ' + 1 + ')'
+                        browserCanvasContext.lineWidth = 2
+                        browserCanvasContext.setLineDash([]) // Resets Line Dash
+                        browserCanvasContext.stroke()
+
+                    }
+                }
+            }
+
+            function drawHierarchyHeadRing() {
+                /* Hierarchy Head Ring */
+                if (schemaDocument.isHierarchyHead === true) {
+
+                    if (UI.projects.foundations.spaces.floatingSpace.inMapMode === true) {
+                        if (schemaDocument.inMapMode !== undefined) {
+                            if (schemaDocument.inMapMode.showHierarchyHeadRing === false) {
+                                return
+                            }
+                        }
+                    }
+
+                    VISIBLE_RADIUS = thisObject.payload.floatingObject.container.frame.radius
+                    if (UI.projects.foundations.spaces.floatingSpace.inMapMode === true) {
+                        VISIBLE_RADIUS = UI.projects.foundations.spaces.floatingSpace.transformRadiusToMap(VISIBLE_RADIUS)
+                    }
+                    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([1, 10])
                     browserCanvasContext.stroke()
 
                     browserCanvasContext.beginPath()
-                    browserCanvasContext.arc(visiblePosition.x, visiblePosition.y, VISIBLE_RADIUS - 1, 0, Math.PI * 2, true)
+                    browserCanvasContext.arc(visiblePosition.x, visiblePosition.y, VISIBLE_RADIUS, 0, Math.PI * 2, true)
                     browserCanvasContext.closePath()
-                    browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.DARK_TURQUOISE + ', ' + 1 + ')'
-                    browserCanvasContext.lineWidth = 2
+                    browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.LIGHT_GREY + ', ' + OPACITY + ')'
+                    browserCanvasContext.lineWidth = 1
+                    if (thisObject.payload.node.isPlugin === true) {
+                        browserCanvasContext.setLineDash([]) // Resets Line Dash
+                    } else {
+                        browserCanvasContext.setLineDash([10, 20])
+                    }
+                    browserCanvasContext.stroke()
                     browserCanvasContext.setLineDash([]) // Resets Line Dash
+                }
+            }
+
+            function drawProjectHeadRing() {
+                /* Project Head Ring */
+                if (schemaDocument.isProjectHead === true) {
+                    VISIBLE_RADIUS = thisObject.payload.floatingObject.container.frame.radius
+                    if (UI.projects.foundations.spaces.floatingSpace.inMapMode === true) {
+                        VISIBLE_RADIUS = UI.projects.foundations.spaces.floatingSpace.transformRadiusToMap(VISIBLE_RADIUS)
+                    }
+                    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.DARK_TURQUOISE + ', ' + OPACITY + ')'
+
+                    if (thisObject.payload.floatingObject.isOnFocus === true) {
+                        browserCanvasContext.lineWidth = 30
+                        browserCanvasContext.setLineDash([]) // Resets Line Dash
+                    } else {
+                        browserCanvasContext.lineWidth = 30
+                        browserCanvasContext.setLineDash([1, 3])
+
+                    }
+                    browserCanvasContext.stroke()
+                    browserCanvasContext.setLineDash([]) // Resets Line Dash
+                }
+            }
+
+            function drawInfoRing() {
+                /* Info Ring */
+                if (thisObject.hasInfo === true) {
+                    VISIBLE_RADIUS = thisObject.payload.floatingObject.container.frame.radius
+                    if (UI.projects.foundations.spaces.floatingSpace.inMapMode === true) {
+                        VISIBLE_RADIUS = UI.projects.foundations.spaces.floatingSpace.transformRadiusToMap(VISIBLE_RADIUS)
+                    }
+                    let OPACITY = infoMessageCounter / 30
+                    browserCanvasContext.beginPath()
+                    browserCanvasContext.arc(visiblePosition.x, visiblePosition.y, VISIBLE_RADIUS, 0, Math.PI * 2, true)
+                    browserCanvasContext.closePath()
+                    browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.DARK_TURQUOISE + ', ' + OPACITY + ')'
+                    browserCanvasContext.lineWidth = 5
+                    browserCanvasContext.setLineDash([2 + infoRingAnimation, 14 - infoRingAnimation])
+                    browserCanvasContext.stroke()
+                    browserCanvasContext.setLineDash([]) // Resets Line Dash
+                }
+            }
+
+            function drawWarningRing() {
+                /* Warning Ring */
+                if (thisObject.hasWarning === true) {
+                    VISIBLE_RADIUS = thisObject.payload.floatingObject.container.frame.radius
+                    if (UI.projects.foundations.spaces.floatingSpace.inMapMode === true) {
+                        VISIBLE_RADIUS = UI.projects.foundations.spaces.floatingSpace.transformRadiusToMap(VISIBLE_RADIUS)
+                    }
+                    let OPACITY = warningMessageCounter / 30
+                    browserCanvasContext.beginPath()
+                    browserCanvasContext.arc(visiblePosition.x, visiblePosition.y, VISIBLE_RADIUS, 0, Math.PI * 2, true)
+                    browserCanvasContext.closePath()
+                    browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.TITANIUM_YELLOW + ', ' + OPACITY + ')'
+                    browserCanvasContext.lineWidth = 5
+                    browserCanvasContext.setLineDash([2 + warningRingAnimation, 14 - warningRingAnimation])
+                    browserCanvasContext.stroke()
+                    browserCanvasContext.setLineDash([]) // Resets Line Dash
+                }
+            }
+
+            function drawErrorRing() {
+                /* Error Ring */
+                if (thisObject.hasError === true) {
+                    VISIBLE_RADIUS = thisObject.payload.floatingObject.container.frame.radius
+                    if (UI.projects.foundations.spaces.floatingSpace.inMapMode === true) {
+                        VISIBLE_RADIUS = UI.projects.foundations.spaces.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([2 + errorRingAnimation, 14 - errorRingAnimation])
+                    browserCanvasContext.stroke()
+                    browserCanvasContext.setLineDash([]) // Resets Line Dash
+                }
+            }
+
+            function drawHighlighted() {
+                if (isHighlighted === true) {
+                    VISIBLE_RADIUS = thisObject.payload.floatingObject.container.frame.radius
+                    let OPACITY = highlightCounter / 10
+
+                    browserCanvasContext.beginPath()
+                    browserCanvasContext.arc(visiblePosition.x, visiblePosition.y, VISIBLE_RADIUS, 0, Math.PI * 2, true)
+                    browserCanvasContext.closePath()
+
+                    browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.TITANIUM_YELLOW + ', ' + OPACITY + ')'
+
+                    browserCanvasContext.lineWidth = 10
+                    browserCanvasContext.setLineDash([4, 20])
+                    browserCanvasContext.stroke()
+                    browserCanvasContext.setLineDash([]) // Resets Line Dash
+                }
+            }
+
+            function drawReadyToChainAttach() {
+                if (isReadyToChainAttach === true) {
+                    VISIBLE_RADIUS = thisObject.payload.floatingObject.container.frame.radius * 2.5 + readyToChainAttachDisplayCounter - readyToChainAttachDisplayCounter / 2
+                    let OPACITY = readyToChainAttachCounter / 10
+
+                    browserCanvasContext.beginPath()
+                    browserCanvasContext.arc(visiblePosition.x, visiblePosition.y, VISIBLE_RADIUS, 0, Math.PI * 2, true)
+                    browserCanvasContext.closePath()
+                    browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.TITANIUM_YELLOW + ', ' + OPACITY + ')'
+                    browserCanvasContext.lineWidth = 10
+                    browserCanvasContext.setLineDash([10, 90])
                     browserCanvasContext.stroke()
 
-                }
-            }
+                    browserCanvasContext.beginPath()
+                    browserCanvasContext.arc(visiblePosition.x, visiblePosition.y, VISIBLE_RADIUS, 0, Math.PI * 2, true)
+                    browserCanvasContext.closePath()
+                    browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.TITANIUM_YELLOW + ', ' + OPACITY + ')'
+                    browserCanvasContext.lineWidth = 5
+                    browserCanvasContext.setLineDash([5, 45])
+                    browserCanvasContext.stroke()
 
-            /* Hierarchy Head Ring */
-            if (schemaDocument.isHierarchyHead === true) {
-                VISIBLE_RADIUS = thisObject.payload.floatingObject.container.frame.radius
-                if (UI.projects.foundations.spaces.floatingSpace.inMapMode === true) {
-                    VISIBLE_RADIUS = UI.projects.foundations.spaces.floatingSpace.transformRadiusToMap(VISIBLE_RADIUS)
-                }
-                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.TITANIUM_YELLOW + ', ' + OPACITY + ')'
+                    browserCanvasContext.lineWidth = 1
+                    browserCanvasContext.setLineDash([2, 8])
+                    browserCanvasContext.stroke()
 
-                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([1, 10])
-                browserCanvasContext.stroke()
-
-                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 = 1
-                if (thisObject.payload.node.isPlugin === true) {
                     browserCanvasContext.setLineDash([]) // Resets Line Dash
-                } else {
-                    browserCanvasContext.setLineDash([10, 20])
                 }
-                browserCanvasContext.stroke()
-                browserCanvasContext.setLineDash([]) // Resets Line Dash
             }
 
-            /* Project Head Ring */
-            if (schemaDocument.isProjectHead === true) {
-                VISIBLE_RADIUS = thisObject.payload.floatingObject.container.frame.radius
-                if (UI.projects.foundations.spaces.floatingSpace.inMapMode === true) {
-                    VISIBLE_RADIUS = UI.projects.foundations.spaces.floatingSpace.transformRadiusToMap(VISIBLE_RADIUS)
-                }
-                let OPACITY = 0.5
+            function drawAvailableToChainAttach() {
+                if (isAvailableToChainAttach === true && isReadyToChainAttach === false) {
+                    VISIBLE_RADIUS = thisObject.payload.floatingObject.container.frame.radius * 2.5
+                    let OPACITY = availableToChainAttachCounter / 10
 
-                browserCanvasContext.beginPath()
-                browserCanvasContext.arc(visiblePosition.x, visiblePosition.y, VISIBLE_RADIUS, 0, Math.PI * 2, true)
-                browserCanvasContext.closePath()
-                browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.DARK_TURQUOISE + ', ' + OPACITY + ')'
+                    browserCanvasContext.beginPath()
+                    browserCanvasContext.arc(visiblePosition.x, visiblePosition.y, VISIBLE_RADIUS, 0, Math.PI * 2, true)
+                    browserCanvasContext.closePath()
+                    browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.TURQUOISE + ', ' + OPACITY + ')'
+                    browserCanvasContext.lineWidth = 10
+                    browserCanvasContext.setLineDash([8, 32])
+                    browserCanvasContext.stroke()
+
+                    browserCanvasContext.beginPath()
+                    browserCanvasContext.arc(visiblePosition.x, visiblePosition.y, VISIBLE_RADIUS, 0, Math.PI * 2, true)
+                    browserCanvasContext.closePath()
+                    browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.TURQUOISE + ', ' + OPACITY + ')'
+                    browserCanvasContext.lineWidth = 2
+                    browserCanvasContext.setLineDash([3, 5])
+                    browserCanvasContext.stroke()
 
-                if (thisObject.payload.floatingObject.isOnFocus === true) {
-                    browserCanvasContext.lineWidth = 30
                     browserCanvasContext.setLineDash([]) // Resets Line Dash
-                } else {
-                    browserCanvasContext.lineWidth = 30
-                    browserCanvasContext.setLineDash([1, 3])
-
                 }
-                browserCanvasContext.stroke()
-                browserCanvasContext.setLineDash([]) // Resets Line Dash
             }
 
-            /* Info Ring */
-            if (thisObject.hasInfo === true) {
-                VISIBLE_RADIUS = thisObject.payload.floatingObject.container.frame.radius
-                if (UI.projects.foundations.spaces.floatingSpace.inMapMode === true) {
-                    VISIBLE_RADIUS = UI.projects.foundations.spaces.floatingSpace.transformRadiusToMap(VISIBLE_RADIUS)
+            function drawReadyToReferenceAttach() {
+                if (isReadyToReferenceAttach === true) {
+                    VISIBLE_RADIUS = thisObject.payload.floatingObject.container.frame.radius * 2.5 + readyToReferenceAttachDisplayCounter - readyToReferenceAttachDisplayCounter / 2
+                    let OPACITY = readyToReferenceAttachCounter / 10
+
+                    browserCanvasContext.beginPath()
+                    browserCanvasContext.arc(visiblePosition.x, visiblePosition.y, VISIBLE_RADIUS, 0, Math.PI * 2, true)
+                    browserCanvasContext.closePath()
+                    browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.GOLDEN_ORANGE + ', ' + OPACITY + ')'
+                    browserCanvasContext.lineWidth = 10
+                    browserCanvasContext.setLineDash([10, 90])
+                    browserCanvasContext.stroke()
+
+                    browserCanvasContext.beginPath()
+                    browserCanvasContext.arc(visiblePosition.x, visiblePosition.y, VISIBLE_RADIUS, 0, Math.PI * 2, true)
+                    browserCanvasContext.closePath()
+                    browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.GOLDEN_ORANGE + ', ' + OPACITY + ')'
+                    browserCanvasContext.lineWidth = 5
+                    browserCanvasContext.setLineDash([5, 45])
+                    browserCanvasContext.stroke()
+
+                    browserCanvasContext.beginPath()
+                    browserCanvasContext.arc(visiblePosition.x, visiblePosition.y, VISIBLE_RADIUS, 0, Math.PI * 2, true)
+                    browserCanvasContext.closePath()
+                    browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.GOLDEN_ORANGE + ', ' + OPACITY + ')'
+                    browserCanvasContext.lineWidth = 1
+                    browserCanvasContext.setLineDash([2, 8])
+                    browserCanvasContext.stroke()
+
+                    browserCanvasContext.setLineDash([]) // Resets Line Dash
                 }
-                let OPACITY = infoMessageCounter / 30
-                browserCanvasContext.beginPath()
-                browserCanvasContext.arc(visiblePosition.x, visiblePosition.y, VISIBLE_RADIUS, 0, Math.PI * 2, true)
-                browserCanvasContext.closePath()
-                browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.DARK_TURQUOISE + ', ' + OPACITY + ')'
-                browserCanvasContext.lineWidth = 5
-                browserCanvasContext.setLineDash([2 + infoRingAnimation, 14 - infoRingAnimation])
-                browserCanvasContext.stroke()
-                browserCanvasContext.setLineDash([]) // Resets Line Dash
             }
 
-            /* Warning Ring */
-            if (thisObject.hasWarning === true) {
-                VISIBLE_RADIUS = thisObject.payload.floatingObject.container.frame.radius
-                if (UI.projects.foundations.spaces.floatingSpace.inMapMode === true) {
-                    VISIBLE_RADIUS = UI.projects.foundations.spaces.floatingSpace.transformRadiusToMap(VISIBLE_RADIUS)
+            function drawAvailableToReferenceAttach() {
+                if (isAvailableToReferenceAttach === true && isReadyToReferenceAttach === false) {
+                    VISIBLE_RADIUS = thisObject.payload.floatingObject.container.frame.radius * 2.5
+                    let OPACITY = availableToReferenceAttachCounter / 10
+
+                    browserCanvasContext.beginPath()
+                    browserCanvasContext.arc(visiblePosition.x, visiblePosition.y, VISIBLE_RADIUS, 0, Math.PI * 2, true)
+                    browserCanvasContext.closePath()
+                    browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.GREY + ', ' + OPACITY + ')'
+                    browserCanvasContext.lineWidth = 10
+                    browserCanvasContext.setLineDash([8, 32])
+                    browserCanvasContext.stroke()
+
+                    browserCanvasContext.beginPath()
+                    browserCanvasContext.arc(visiblePosition.x, visiblePosition.y, VISIBLE_RADIUS, 0, Math.PI * 2, true)
+                    browserCanvasContext.closePath()
+                    browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.GREY + ', ' + OPACITY + ')'
+                    browserCanvasContext.lineWidth = 2
+                    browserCanvasContext.setLineDash([3, 5])
+                    browserCanvasContext.stroke()
+
+                    browserCanvasContext.setLineDash([]) // Resets Line Dash
                 }
-                let OPACITY = warningMessageCounter / 30
-                browserCanvasContext.beginPath()
-                browserCanvasContext.arc(visiblePosition.x, visiblePosition.y, VISIBLE_RADIUS, 0, Math.PI * 2, true)
-                browserCanvasContext.closePath()
-                browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.TITANIUM_YELLOW + ', ' + OPACITY + ')'
-                browserCanvasContext.lineWidth = 5
-                browserCanvasContext.setLineDash([2 + warningRingAnimation, 14 - warningRingAnimation])
-                browserCanvasContext.stroke()
-                browserCanvasContext.setLineDash([]) // Resets Line Dash
-            }
-
-            /* Error Ring */
-            if (thisObject.hasError === true) {
-                VISIBLE_RADIUS = thisObject.payload.floatingObject.container.frame.radius
-                if (UI.projects.foundations.spaces.floatingSpace.inMapMode === true) {
-                    VISIBLE_RADIUS = UI.projects.foundations.spaces.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([2 + errorRingAnimation, 14 - errorRingAnimation])
-                browserCanvasContext.stroke()
-                browserCanvasContext.setLineDash([]) // Resets Line Dash
-            }
-
-            if (isHighlighted === true) {
-                VISIBLE_RADIUS = thisObject.payload.floatingObject.container.frame.radius
-                let OPACITY = highlightCounter / 10
-
-                browserCanvasContext.beginPath()
-                browserCanvasContext.arc(visiblePosition.x, visiblePosition.y, VISIBLE_RADIUS, 0, Math.PI * 2, true)
-                browserCanvasContext.closePath()
-
-                browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.TITANIUM_YELLOW + ', ' + OPACITY + ')'
-
-                browserCanvasContext.lineWidth = 10
-                browserCanvasContext.setLineDash([4, 20])
-                browserCanvasContext.stroke()
-                browserCanvasContext.setLineDash([]) // Resets Line Dash
-            }
-
-            if (isReadyToChainAttach === true) {
-                VISIBLE_RADIUS = thisObject.payload.floatingObject.container.frame.radius * 2.5 + readyToChainAttachDisplayCounter - readyToChainAttachDisplayCounter / 2
-                let OPACITY = readyToChainAttachCounter / 10
-
-                browserCanvasContext.beginPath()
-                browserCanvasContext.arc(visiblePosition.x, visiblePosition.y, VISIBLE_RADIUS, 0, Math.PI * 2, true)
-                browserCanvasContext.closePath()
-                browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.TITANIUM_YELLOW + ', ' + OPACITY + ')'
-                browserCanvasContext.lineWidth = 10
-                browserCanvasContext.setLineDash([10, 90])
-                browserCanvasContext.stroke()
-
-                browserCanvasContext.beginPath()
-                browserCanvasContext.arc(visiblePosition.x, visiblePosition.y, VISIBLE_RADIUS, 0, Math.PI * 2, true)
-                browserCanvasContext.closePath()
-                browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.TITANIUM_YELLOW + ', ' + OPACITY + ')'
-                browserCanvasContext.lineWidth = 5
-                browserCanvasContext.setLineDash([5, 45])
-                browserCanvasContext.stroke()
-
-                browserCanvasContext.beginPath()
-                browserCanvasContext.arc(visiblePosition.x, visiblePosition.y, VISIBLE_RADIUS, 0, Math.PI * 2, true)
-                browserCanvasContext.closePath()
-                browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.TITANIUM_YELLOW + ', ' + OPACITY + ')'
-                browserCanvasContext.lineWidth = 1
-                browserCanvasContext.setLineDash([2, 8])
-                browserCanvasContext.stroke()
-
-                browserCanvasContext.setLineDash([]) // Resets Line Dash
-            }
-
-            if (isAvailableToChainAttach === true && isReadyToChainAttach === false) {
-                VISIBLE_RADIUS = thisObject.payload.floatingObject.container.frame.radius * 2.5
-                let OPACITY = availableToChainAttachCounter / 10
-
-                browserCanvasContext.beginPath()
-                browserCanvasContext.arc(visiblePosition.x, visiblePosition.y, VISIBLE_RADIUS, 0, Math.PI * 2, true)
-                browserCanvasContext.closePath()
-                browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.TURQUOISE + ', ' + OPACITY + ')'
-                browserCanvasContext.lineWidth = 10
-                browserCanvasContext.setLineDash([8, 32])
-                browserCanvasContext.stroke()
-
-                browserCanvasContext.beginPath()
-                browserCanvasContext.arc(visiblePosition.x, visiblePosition.y, VISIBLE_RADIUS, 0, Math.PI * 2, true)
-                browserCanvasContext.closePath()
-                browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.TURQUOISE + ', ' + OPACITY + ')'
-                browserCanvasContext.lineWidth = 2
-                browserCanvasContext.setLineDash([3, 5])
-                browserCanvasContext.stroke()
-
-                browserCanvasContext.setLineDash([]) // Resets Line Dash
-            }
-
-            if (isReadyToReferenceAttach === true) {
-                VISIBLE_RADIUS = thisObject.payload.floatingObject.container.frame.radius * 2.5 + readyToReferenceAttachDisplayCounter - readyToReferenceAttachDisplayCounter / 2
-                let OPACITY = readyToReferenceAttachCounter / 10
-
-                browserCanvasContext.beginPath()
-                browserCanvasContext.arc(visiblePosition.x, visiblePosition.y, VISIBLE_RADIUS, 0, Math.PI * 2, true)
-                browserCanvasContext.closePath()
-                browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.GOLDEN_ORANGE + ', ' + OPACITY + ')'
-                browserCanvasContext.lineWidth = 10
-                browserCanvasContext.setLineDash([10, 90])
-                browserCanvasContext.stroke()
-
-                browserCanvasContext.beginPath()
-                browserCanvasContext.arc(visiblePosition.x, visiblePosition.y, VISIBLE_RADIUS, 0, Math.PI * 2, true)
-                browserCanvasContext.closePath()
-                browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.GOLDEN_ORANGE + ', ' + OPACITY + ')'
-                browserCanvasContext.lineWidth = 5
-                browserCanvasContext.setLineDash([5, 45])
-                browserCanvasContext.stroke()
-
-                browserCanvasContext.beginPath()
-                browserCanvasContext.arc(visiblePosition.x, visiblePosition.y, VISIBLE_RADIUS, 0, Math.PI * 2, true)
-                browserCanvasContext.closePath()
-                browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.GOLDEN_ORANGE + ', ' + OPACITY + ')'
-                browserCanvasContext.lineWidth = 1
-                browserCanvasContext.setLineDash([2, 8])
-                browserCanvasContext.stroke()
-
-                browserCanvasContext.setLineDash([]) // Resets Line Dash
-            }
-
-            if (isAvailableToReferenceAttach === true && isReadyToReferenceAttach === false) {
-                VISIBLE_RADIUS = thisObject.payload.floatingObject.container.frame.radius * 2.5
-                let OPACITY = availableToReferenceAttachCounter / 10
-
-                browserCanvasContext.beginPath()
-                browserCanvasContext.arc(visiblePosition.x, visiblePosition.y, VISIBLE_RADIUS, 0, Math.PI * 2, true)
-                browserCanvasContext.closePath()
-                browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.GREY + ', ' + OPACITY + ')'
-                browserCanvasContext.lineWidth = 10
-                browserCanvasContext.setLineDash([8, 32])
-                browserCanvasContext.stroke()
-
-                browserCanvasContext.beginPath()
-                browserCanvasContext.arc(visiblePosition.x, visiblePosition.y, VISIBLE_RADIUS, 0, Math.PI * 2, true)
-                browserCanvasContext.closePath()
-                browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.GREY + ', ' + OPACITY + ')'
-                browserCanvasContext.lineWidth = 2
-                browserCanvasContext.setLineDash([3, 5])
-                browserCanvasContext.stroke()
-
-                browserCanvasContext.setLineDash([]) // Resets Line Dash
             }
         }
 
         /* Image */
-
         if (icon !== undefined) {
             if (icon.canDrawIcon === true) {
                 let additionalImageSize = 0

Projects/Governance/Schemas/App-Schema/user-profile.json

@@ -79,6 +79,7 @@
     ],
     "inMapMode": {
         "showNodeType": false,
+        "showHierarchyHeadRing": false,
         "smallIcon": true
     }
 }

Projects/Governance/UI/Spaces/User-Profile-Space/UserProfile.js

@@ -79,10 +79,18 @@ function newGovernanceUserProfileSpace() {
                     break
                 }
                 case (yOffset === Y_STEP): {
-                    yOffset = 1
+                    yOffset = Y_STEP * 2
                     break
                 }
-                case (yOffset === 1): {
+                case (yOffset === Y_STEP * 2): {
+                    yOffset = Y_STEP * 1 + 1
+                    break
+                }
+                case (yOffset ===  Y_STEP * 1 + 1): {
+                    yOffset = Y_STEP * 0 + 1
+                    break
+                }
+                case (yOffset === Y_STEP * 0 + 1): {
                     yOffset = -Y_STEP
                     break
                 }