Menu Items being highlighted!

Canvas.js

@@ -47,7 +47,7 @@ function newCanvas () {
   thisObject.eventHandler = newEventHandler()
 
   let splashScreen
-
+  let lastContainerMouseOver
   return thisObject
 
 /*
@@ -538,10 +538,6 @@ function newCanvas () {
     try {
       if (INFO_LOG === true) { logger.write('[INFO] onMouseOver -> Entering function.') }
 
-           /* First we raise the event signaling theat the mouse is potentially over another item, so that the current item can turn itself off. */
-
-      thisObject.eventHandler.raiseEvent('onMouseNotOver')
-
            /* Then we check who is the current object underneeth the mounse. */
 
       let point = {
@@ -557,7 +553,7 @@ function newCanvas () {
         container = thisObject.strategySpace.getContainer(point)
 
         if (container !== undefined && container.detectMouseOver === true) {
-          container.eventHandler.raiseEvent('onMouseOver', point)
+          containerFound()
           return
         }
       }
@@ -568,7 +564,7 @@ function newCanvas () {
         container = thisObject.topSpace.getContainer(point)
 
         if (container !== undefined && container.detectMouseOver === true) {
-          container.eventHandler.raiseEvent('onMouseOver', point)
+          containerFound()
           return
         }
       }
@@ -579,7 +575,7 @@ function newCanvas () {
         container = thisObject.bottomSpace.getContainer(point)
 
         if (container !== undefined && container.detectMouseOver === true) {
-          container.eventHandler.raiseEvent('onMouseOver', point)
+          containerFound()
           return
         }
       }
@@ -590,7 +586,7 @@ function newCanvas () {
         container = thisObject.panelsSpace.getContainer(point)
 
         if (container !== undefined && container.detectMouseOver === true) {
-          container.eventHandler.raiseEvent('onMouseOver', point)
+          containerFound()
           return
         }
       }
@@ -600,7 +596,7 @@ function newCanvas () {
         container = thisObject.floatingSpace.getContainer(point)
 
         if (container !== undefined && container.detectMouseOver === true) {
-          container.eventHandler.raiseEvent('onMouseOver', point)
+          containerFound()
           return
         }
       }
@@ -611,10 +607,21 @@ function newCanvas () {
         container = thisObject.chartSpace.getContainer(point, GET_CONTAINER_PURPOSE.MOUSE_OVER)
 
         if (container !== undefined && container.detectMouseOver === true) {
-          container.eventHandler.raiseEvent('onMouseOver', point)
+          containerFound()
           return
         }
       }
+
+      function containerFound () {
+        if (lastContainerMouseOver !== undefined) {
+          if (container.id !== lastContainerMouseOver.id) {
+            lastContainerMouseOver.eventHandler.raiseEvent('onMouseNotOver', point)
+          }
+        }
+
+        container.eventHandler.raiseEvent('onMouseOver', point)
+        lastContainerMouseOver = container
+      }
     } catch (err) {
       if (ERROR_LOG === true) { logger.write('[ERROR] onMouseOver -> err = ' + err.stack) }
     }
@@ -738,3 +745,4 @@ function newCanvas () {
     }
   }
 }
+

FloatingSpace/CircularMenu.js

@@ -42,7 +42,7 @@ function newCircularMenu () {
       menuItem.angle = menuItemInitialValue.angle
 
       menuItem.initialize()
-      menuItem.container.connectToParent(thisObject.container, false, false, true, true, false, false)
+      menuItem.container.connectToParent(thisObject.container, false, false, true, true, true, true)
       menuItems.push(menuItem)
     }
 
@@ -53,10 +53,12 @@ function newCircularMenu () {
   function getContainer (point) {
     let container
 
-    for (let i = 0; i < menuItems.length; i++) {
-      let menutItem = menuItems[i]
-      container = menutItem.getContainer(point)
-      if (container !== undefined) { return container }
+    if (thisObject.isDeployed === true) {
+      for (let i = 0; i < menuItems.length; i++) {
+        let menutItem = menuItems[i]
+        container = menutItem.getContainer(point)
+        if (container !== undefined) { return container }
+      }
     }
   }
 
@@ -74,6 +76,7 @@ function newCircularMenu () {
       menutItem.isDeployed = true
     }
     thisObject.isDeployed = true
+    console.log('mouse over')
   }
 
   function onMouseNotOver () {
@@ -83,6 +86,7 @@ function newCircularMenu () {
       menutItem.isDeployed = false
     }
     thisObject.isDeployed = false
+    console.log('mouse not over')
   }
 
   function drawBackground (pFloatingObject) {
@@ -99,3 +103,4 @@ function newCircularMenu () {
     }
   }
 }
+

FloatingSpace/CircularMenuItem.js

@@ -32,6 +32,8 @@ function newCircularMenuItem () {
   thisObject.container.frame.width = 150
   thisObject.container.frame.height = 30
 
+  let isMouseOver = false
+
   return thisObject
 
   function initialize () {
@@ -59,11 +61,12 @@ function newCircularMenuItem () {
 
   function getContainer (point) {
     let container
-
-    if (thisObject.container.frame.isThisPointHere(point, true, true) === true) {
-      return thisObject.container
-    } else {
-      return undefined
+    if (thisObject.isDeployed === true) {
+      if (thisObject.container.frame.isThisPointHere(point, true, true) === true) {
+        return thisObject.container
+      } else {
+        return undefined
+      }
     }
   }
 
@@ -75,14 +78,21 @@ function newCircularMenuItem () {
         thisObject.currentRadius = thisObject.currentRadius - 0.5
       }
     }
+
+    thisObject.container.frame.position.x = thisObject.container.frame.radius * 3 / 7 * Math.cos(toRadians(thisObject.angle)) - thisObject.currentRadius
+    thisObject.container.frame.position.y = thisObject.container.frame.radius * 3 / 7 * Math.sin(toRadians(thisObject.angle)) - thisObject.container.frame.height / 2
   }
 
-  function onMouseOver () {
-
+  function onMouseOver (point) {
+    if (thisObject.container.frame.isThisPointHere(point, true, false) === true) {
+      isMouseOver = true
+    } else {
+      isMouseOver = false
+    }
   }
 
-  function onMouseNotOver () {
-
+  function onMouseNotOver (point) {
+    isMouseOver = false
   }
 
   function onMouseClick (event) {
@@ -90,16 +100,23 @@ function newCircularMenuItem () {
   }
 
   function drawBackground () {
-    if (thisObject.isDeployed === true) {
-      let point = {
-        x: thisObject.container.frame.position.x,
-        y: thisObject.container.frame.position.y
+    if (thisObject.container.frame.position.x > 0 && thisObject.isDeployed === true) {
+      let position = {
+        x: 0,
+        y: 0
       }
 
+      position = thisObject.container.frame.frameThisPoint(position)
+
       browserCanvasContext.beginPath()
 
-      browserCanvasContext.rect(point.x, point.y, thisObject.container.frame.width, thisObject.container.frame.height)
-      browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.RED + ', 1)'
+      browserCanvasContext.rect(position.x, position.y, thisObject.container.frame.width, thisObject.container.frame.height)
+
+      if (isMouseOver === true) {
+        browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.RED + ', 1)'
+      } else {
+        browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.RED + ', 0.5)'
+      }
 
       browserCanvasContext.closePath()
       browserCanvasContext.fill()
@@ -107,25 +124,16 @@ function newCircularMenuItem () {
   }
 
   function drawForeground () {
-    let position = {
-      x: 0,
-      y: 0
+    let menuPosition = {
+      x: thisObject.currentRadius,
+      y: thisObject.container.frame.height / 2
     }
 
-    thisObject.container.frame.position.x = 0
-    thisObject.container.frame.position.y = 0
-    position = thisObject.container.frame.frameThisPoint(position)
+    menuPosition = thisObject.container.frame.frameThisPoint(menuPosition)
 
         /* Menu  Item */
 
-    if (thisObject.canDrawIcon === true && thisObject.currentRadius > 1) {
-      let menuPosition = {
-        x: position.x + thisObject.container.frame.radius * 4 / 7 * Math.cos(toRadians(thisObject.angle)),
-        y: position.y - thisObject.container.frame.radius * 4 / 7 * Math.sin(toRadians(thisObject.angle)) }
-
-      thisObject.container.frame.position.x = menuPosition.x - thisObject.currentRadius
-      thisObject.container.frame.position.y = menuPosition.y - thisObject.container.frame.height / 2
-
+    if (thisObject.canDrawIcon === true && thisObject.currentRadius > 1 && thisObject.isDeployed === true) {
       browserCanvasContext.drawImage(thisObject.icon, menuPosition.x - thisObject.currentRadius, menuPosition.y - thisObject.currentRadius, thisObject.currentRadius * 2, thisObject.currentRadius * 2)
 
         /* Menu Label */

FloatingSpace/FloatingObject.js

@@ -102,7 +102,7 @@ function newFloatingObject () {
 
       thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver)
       thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick)
-      canvas.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver)
+      thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver)
 
       if (callBackFunction !== undefined) { callBackFunction(GLOBAL.DEFAULT_OK_RESPONSE) }
     } catch (err) {
@@ -132,11 +132,11 @@ function newFloatingObject () {
   function thisObjectPhysics () {
                            // The radius also have a target.
 
-    if (Math.abs(thisObject.container.frame.radius - thisObject.targetRadius) >= 1) {
+    if (Math.abs(thisObject.container.frame.radius - thisObject.targetRadius) >= 3) {
       if (thisObject.container.frame.radius < thisObject.targetRadius) {
-        thisObject.container.frame.radius = thisObject.container.frame.radius + 2.5
+        thisObject.container.frame.radius = thisObject.container.frame.radius + 3
       } else {
-        thisObject.container.frame.radius = thisObject.container.frame.radius - 2.5
+        thisObject.container.frame.radius = thisObject.container.frame.radius - 3
       }
       thisObject.container.eventHandler.raiseEvent('Dimmensions Changed', event)
     }
@@ -162,20 +162,20 @@ function newFloatingObject () {
     }
   }
 
-  function onMouseOver () {
-    thisObject.targetRadius = thisObject.rawRadius * 5.0
+  function onMouseOver (point) {
+    thisObject.targetRadius = thisObject.rawRadius * 6.0
     thisObject.targetImageSize = thisObject.rawImageSize * 2.0
     thisObject.targetFontSize = thisObject.rawFontSize * 2.0
 
-    thisObject.underlayingObject.container.eventHandler.raiseEvent('onMouseOver')
+    thisObject.underlayingObject.container.eventHandler.raiseEvent('onMouseOver', point)
   }
 
-  function onMouseNotOver () {
+  function onMouseNotOver (point) {
     thisObject.targetRadius = thisObject.rawRadius * 1
     thisObject.targetImageSize = thisObject.rawImageSize * 1
     thisObject.targetFontSize = thisObject.rawFontSize * 1
 
-    thisObject.underlayingObject.container.eventHandler.raiseEvent('onMouseNotOver')
+    thisObject.underlayingObject.container.eventHandler.raiseEvent('onMouseNotOver', point)
   }
 
   function onMouseClick (pPoint) {

FloatingSpace/StrategyPart.js

@@ -277,12 +277,12 @@ function newStrategyPart () {
   }
 
   function onMouseOver () {
-    thisObject.menu.container.eventHandler.raiseEvent('onMouseOver')
+    // thisObject.menu.container.eventHandler.raiseEvent('onMouseOver')
     isMouseOver = true
   }
 
   function onMouseNotOver () {
-    thisObject.menu.container.eventHandler.raiseEvent('onMouseNotOver')
+    // thisObject.menu.container.eventHandler.raiseEvent('onMouseNotOver')
     isMouseOver = false
   }
 
@@ -399,7 +399,7 @@ function newStrategyPart () {
       if (label !== undefined) {
         labelPoint = {
           x: position.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO,
-          y: position.y - radius / 2 - fontSize * FONT_ASPECT_RATIO - 10
+          y: position.y - radius / 3 - fontSize * FONT_ASPECT_RATIO - 10
         }
 
         browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
@@ -412,7 +412,7 @@ function newStrategyPart () {
       if (label !== undefined && isMouseOver === true) {
         labelPoint = {
           x: position.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO,
-          y: position.y + radius / 2 + fontSize * FONT_ASPECT_RATIO + 15
+          y: position.y + radius / 3 + fontSize * FONT_ASPECT_RATIO + 15
         }
 
         browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY

Scales/RateScale.js

@@ -33,7 +33,7 @@ function newRateScale () {
     }
   }
 
-  let visible = false
+  let visible = true
   let timeLineCoordinateSystem
 
   return thisObject

Scales/TimePeriodScale.js

@@ -27,7 +27,7 @@ function newTimePeriodScale () {
     }
   }
 
-  let visible = false
+  let visible = true
   let timeLineCoordinateSystem
   let objectStorage = {}
   let filePeriodIndex = FILES_PERIOD_DEFAULT_VALUE

Scales/TimeScale.js

@@ -27,7 +27,7 @@ function newTimeScale () {
     }
   }
 
-  let visible = false
+  let visible = true
   let timeLineCoordinateSystem
 
   return thisObject