Menu Item Click Working!

Container.js

@@ -25,12 +25,16 @@ function newContainer () {
   let onDimmensionsChangedParentEvent = false
   let onMouseOverParentEvent = false
   let onMouseNotOverParentEvent = false
+  let onFocusParentEvent = false
+  let onNotFocusParentEvent = false
 
   let isConnectedToParent = false
 
   let dimensionsChangedEventSubscriptionId
   let onMouseOverEventSubscriptionId
   let onMouseNotOverEventSubscriptionId
+  let onFocusEventSubscriptionId
+  let onNotFocusEventSubscriptionId
 
   return thisObject
 
@@ -39,6 +43,8 @@ function newContainer () {
       thisObject.parentContainer.eventHandler.stopListening(dimensionsChangedEventSubscriptionId)
       thisObject.parentContainer.eventHandler.stopListening(onMouseOverEventSubscriptionId)
       thisObject.parentContainer.eventHandler.stopListening(onMouseNotOverEventSubscriptionId)
+      thisObject.parentContainer.eventHandler.stopListening(onFocusEventSubscriptionId)
+      thisObject.parentContainer.eventHandler.stopListening(onNotFocusEventSubscriptionId)
     }
   }
 
@@ -59,7 +65,17 @@ function newContainer () {
     thisObject.displacement.containerName = pName
   }
 
-  function connectToParent (parentContainer, onWidth, onHeight, onRadius, onDimmensionsChangedEvent, onMouseOverEvent, onMouseNotOverEvent) {
+  function connectToParent (
+    parentContainer,
+    onWidth,
+    onHeight,
+    onRadius,
+    onDimmensionsChangedEvent,
+    onMouseOverEvent,
+    onMouseNotOverEvent,
+    onFocusEvent,
+    onNotFocusEvent
+  ) {
     connectedToParentWidth = onWidth
     connectedToParentHeight = onHeight
     connectedToParentRadius = onRadius
@@ -67,6 +83,8 @@ function newContainer () {
     onDimmensionsChangedParentEvent = onDimmensionsChangedEvent
     onMouseOverParentEvent = onMouseOverEvent
     onMouseNotOverParentEvent = onMouseNotOverEvent
+    onFocusParentEvent = onFocusEvent
+    onNotFocusParentEvent = onNotFocusEvent
 
     isConnectedToParent = true
 
@@ -83,6 +101,12 @@ function newContainer () {
     if (onMouseNotOverParentEvent === true) {
       onMouseNotOverEventSubscriptionId = thisObject.parentContainer.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver)
     }
+    if (onFocusParentEvent === true) {
+      onFocusEventSubscriptionId = thisObject.parentContainer.eventHandler.listenToEvent('onFocus', onFocus)
+    }
+    if (onNotFocusParentEvent === true) {
+      onNotFocusEventSubscriptionId = thisObject.parentContainer.eventHandler.listenToEvent('onNotFocus', onNotFocus)
+    }
 
     if (connectedToParentWidth) {
       thisObject.frame.width = thisObject.parentContainer.frame.width
@@ -123,6 +147,14 @@ function newContainer () {
     thisObject.eventHandler.raiseEvent('onMouseNotOver', event)
   }
 
+  function onFocus (event) {
+    thisObject.eventHandler.raiseEvent('onFocus', event)
+  }
+
+  function onNotFocus (event) {
+    thisObject.eventHandler.raiseEvent('onNotFocus', event)
+  }
+
   function isForThisPurpose (purpose) {
     if (purpose !== undefined) {
       switch (purpose) {

FloatingSpace/CircularMenu.js

@@ -42,12 +42,12 @@ function newCircularMenu () {
       menuItem.angle = menuItemInitialValue.angle
 
       menuItem.initialize()
-      menuItem.container.connectToParent(thisObject.container, false, false, true, true, true, true)
+      menuItem.container.connectToParent(thisObject.container, false, false, true, true, false, false, true, true)
       menuItems.push(menuItem)
     }
 
-    thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver)
-    thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver)
+    thisObject.container.eventHandler.listenToEvent('onFocus', onFocus)
+    thisObject.container.eventHandler.listenToEvent('onNotFocus', onNotFocus)
   }
 
   function getContainer (point) {
@@ -69,7 +69,7 @@ function newCircularMenu () {
     }
   }
 
-  function onMouseOver () {
+  function onFocus () {
     for (let i = 0; i < menuItems.length; i++) {
       let menutItem = menuItems[i]
       menutItem.targetRadius = menutItem.rawRadius * 1.5
@@ -78,7 +78,7 @@ function newCircularMenu () {
     thisObject.isDeployed = true
   }
 
-  function onMouseNotOver () {
+  function onNotFocus () {
     for (let i = 0; i < menuItems.length; i++) {
       let menutItem = menuItems[i]
       menutItem.targetRadius = menutItem.rawRadius * 0 - i * 5

FloatingSpace/CircularMenuItem.js

@@ -55,15 +55,15 @@ function newCircularMenuItem () {
     thisObject.iconOn.src = window.canvasApp.urlPrefix + thisObject.imagePathOn
     thisObject.icon = thisObject.iconOn // The default value is ON.
 
-    thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver)
     thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick)
+    thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver)
     thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver)
   }
 
   function getContainer (point) {
     let container
     if (thisObject.isDeployed === true) {
-      if (thisObject.container.frame.isThisPointHere(point, true, true) === true) {
+      if (thisObject.container.frame.isThisPointHere(point, true, false) === true) {
         return thisObject.container
       } else {
         return undefined

FloatingSpace/FloatingObject.js

@@ -12,6 +12,7 @@ function newFloatingObject () {
 
     physics: physics,
     positionLocked: false,
+    isOnFocus: false,
 
     payload: undefined,                     // This is a reference to an object controlled by a Plotter. The plotter can change its internal value and we will see them from here.
     type: undefined,                        // Currently there are two types of Floating Objects: Profile Balls, and Notes.
@@ -89,7 +90,7 @@ function newFloatingObject () {
         case 'Strategy Part': {
           thisObject.underlayingObject = newStrategyPart()
           thisObject.underlayingObject.initialize(floatingLayer, pSubType)
-          thisObject.underlayingObject.container.connectToParent(thisObject.container, false, false, true, true, true, true)
+          thisObject.underlayingObject.container.connectToParent(thisObject.container, false, false, true, true, false, false, true, true)
           break
         }
         default: {
@@ -167,14 +168,18 @@ function newFloatingObject () {
   }
 
   function onMouseOver (point) {
-    thisObject.targetRadius = thisObject.rawRadius * 6.0
-    thisObject.targetImageSize = thisObject.rawImageSize * 2.0
-    thisObject.targetFontSize = thisObject.rawFontSize * 2.0
+    if (thisObject.isOnFocus === false) {
+      thisObject.targetRadius = thisObject.rawRadius * 6.0
+      thisObject.targetImageSize = thisObject.rawImageSize * 2.0
+      thisObject.targetFontSize = thisObject.rawFontSize * 2.0
 
-    thisObject.underlayingObject.container.eventHandler.raiseEvent('onMouseOver', point)
+      thisObject.underlayingObject.container.eventHandler.raiseEvent('onFocus', point)
 
-    thisObject.positionLocked = true
-    canvas.floatingSpace.container.eventHandler.raiseEvent('onFocusAquired', thisObject.container)
+      thisObject.positionLocked = true
+
+      canvas.floatingSpace.container.eventHandler.raiseEvent('onFocusAquired', thisObject.container)
+      thisObject.isOnFocus = true
+    }
   }
 
   function mouseOverFlotingSpace (point) {
@@ -188,13 +193,16 @@ function newFloatingObject () {
   }
 
   function removeFocus () {
-    thisObject.targetRadius = thisObject.rawRadius * 1
-    thisObject.targetImageSize = thisObject.rawImageSize * 1
-    thisObject.targetFontSize = thisObject.rawFontSize * 1
+    if (thisObject.isOnFocus === true) {
+      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('onNotFocus')
 
-    thisObject.positionLocked = false
+      thisObject.positionLocked = false
+      thisObject.isOnFocus = false
+    }
   }
 
   function onMouseClick (pPoint) {
@@ -304,3 +312,4 @@ function newFloatingObject () {
 
   }
 }
+

FloatingSpace/StrategyPart.js

@@ -5,6 +5,7 @@ function newStrategyPart () {
   let thisObject = {
     type: undefined,
     menu: undefined,
+    isOnFocus: false,
     container: undefined,
     physics: physics,
     drawBackground: drawBackground,
@@ -22,7 +23,6 @@ function newStrategyPart () {
   thisObject.container.frame.position.y = 0
 
   let floatingLayer
-  let isMouseOver = false
   let image
   let imagePath
 
@@ -240,7 +240,7 @@ function newStrategyPart () {
 
     thisObject.menu = newCircularMenu()
     thisObject.menu.initialize(menuItemsInitialValues)
-    thisObject.menu.container.connectToParent(thisObject.container, false, false, true, true, true, true)
+    thisObject.menu.container.connectToParent(thisObject.container, false, false, true, true, false, false, true, true)
 
 /* Load Part Image */
 
@@ -254,9 +254,9 @@ function newStrategyPart () {
       image.src = window.canvasApp.urlPrefix + imagePath
     }
 
-    thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver)
+    thisObject.container.eventHandler.listenToEvent('onFocus', onFocus)
+    thisObject.container.eventHandler.listenToEvent('onNotFocus', onNotFocus)
     thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick)
-    thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver)
   }
 
   function getContainer (point) {
@@ -276,14 +276,12 @@ function newStrategyPart () {
     thisObject.menu.physics()
   }
 
-  function onMouseOver () {
-    // thisObject.menu.container.eventHandler.raiseEvent('onMouseOver')
-    isMouseOver = true
+  function onFocus () {
+    thisObject.isOnFocus = true
   }
 
-  function onMouseNotOver () {
-    // thisObject.menu.container.eventHandler.raiseEvent('onMouseNotOver')
-    isMouseOver = false
+  function onNotFocus () {
+    thisObject.isOnFocus = false
   }
 
   function onMouseClick (event) {
@@ -291,7 +289,7 @@ function newStrategyPart () {
   }
 
   function drawBackground (pFloatingObject) {
-    if (isMouseOver === false) {
+    if (thisObject.isOnFocus === false) {
       drawPartBackground(pFloatingObject)
       thisObject.menu.drawBackground()
 
@@ -343,7 +341,7 @@ function newStrategyPart () {
   }
 
   function drawForeground (pFloatingObject) {
-    if (isMouseOver === true) {
+    if (thisObject.isOnFocus === true) {
       drawPartBackground(pFloatingObject)
       thisObject.menu.drawBackground()
 
@@ -390,7 +388,7 @@ function newStrategyPart () {
 
         /* Label Text */
 
-    if (radius > 6 && isMouseOver === true) {
+    if (radius > 6 && thisObject.isOnFocus === true) {
       browserCanvasContext.strokeStyle = pFloatingObject.labelStrokeStyle
 
       let labelPoint
@@ -415,7 +413,7 @@ function newStrategyPart () {
 
       label = pFloatingObject.payload.profile.downLabel
 
-      if (label !== undefined && isMouseOver === true) {
+      if (label !== undefined && thisObject.isOnFocus === true) {
         labelPoint = {
           x: position.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO,
           y: position.y + radius * 1 / 2 + fontSize * FONT_ASPECT_RATIO + 15