Container with connect to parent with individual events

Container.js

@@ -20,7 +20,10 @@ function newContainer () {
   let connectedToParentWidth = false
   let connectedToParentHeight = false
   let connectedToParentRadius = false
-  let connectedToParentEvents = false
+
+  let onDimmensionsChangedParentEvent = false
+  let onMouseOverParentEvent = false
+  let onMouseNotOverParentEvent = false
 
   let isConnectedToParent = false
 
@@ -55,11 +58,14 @@ function newContainer () {
     thisObject.displacement.containerName = pName
   }
 
-  function connectToParent (parentContainer, onWidth, onHeight, onRadius, onEvents) {
+  function connectToParent (parentContainer, onWidth, onHeight, onRadius, onDimmensionsChangedEvent, onMouseOverEvent, onMouseNotOverEvent) {
     connectedToParentWidth = onWidth
     connectedToParentHeight = onHeight
     connectedToParentRadius = onRadius
-    connectedToParentEvents = onEvents
+
+    onDimmensionsChangedParentEvent = onDimmensionsChangedEvent
+    onMouseOverParentEvent = onMouseOverEvent
+    onMouseNotOverParentEvent = onMouseNotOverEvent
 
     isConnectedToParent = true
 
@@ -67,9 +73,13 @@ function newContainer () {
     thisObject.frame.parentFrame = parentContainer.frame
     thisObject.parentContainer = parentContainer
 
-    if (connectedToParentEvents === true) {
+    if (onDimmensionsChangedParentEvent === true) {
       dimensionsChangedEventSubscriptionId = thisObject.parentContainer.eventHandler.listenToEvent('Dimmensions Changed', onParentDimmensionsChanged)
+    }
+    if (onMouseOverParentEvent === true) {
       onMouseOverEventSubscriptionId = thisObject.parentContainer.eventHandler.listenToEvent('onMouseOver', onMouseOver)
+    }
+    if (onMouseNotOverParentEvent === true) {
       onMouseNotOverEventSubscriptionId = thisObject.parentContainer.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver)
     }
 

FloatingSpace/CircularMenu.js

@@ -4,6 +4,7 @@ function newCircularMenu () {
 
   let thisObject = {
     container: undefined,
+    isDeployed: undefined,
     physics: physics,
     drawBackground: drawBackground,
     drawForeground: drawForeground,
@@ -22,8 +23,6 @@ function newCircularMenu () {
   let menuItemsInitialValues = []
   let menuItems = []
 
-  let isMouseOver = false
-
   return thisObject
 
   function initialize (menuItemsInitialValues) {
@@ -43,7 +42,7 @@ function newCircularMenu () {
       menuItem.angle = menuItemInitialValue.angle
 
       menuItem.initialize()
-      menuItem.container.connectToParent(thisObject.container, false, false, true, true)
+      menuItem.container.connectToParent(thisObject.container, false, false, true, true, false, false)
       menuItems.push(menuItem)
     }
 
@@ -72,16 +71,18 @@ function newCircularMenu () {
     for (let i = 0; i < menuItems.length; i++) {
       let menutItem = menuItems[i]
       menutItem.targetRadius = menutItem.rawRadius * 1.5
+      menutItem.isDeployed = true
     }
-    isMouseOver = true
+    thisObject.isDeployed = true
   }
 
   function onMouseNotOver () {
     for (let i = 0; i < menuItems.length; i++) {
       let menutItem = menuItems[i]
       menutItem.targetRadius = menutItem.rawRadius * 0 - i * 5
+      menutItem.isDeployed = false
     }
-    isMouseOver = false
+    thisObject.isDeployed = false
   }
 
   function drawBackground (pFloatingObject) {

FloatingSpace/CircularMenuItem.js

@@ -3,6 +3,7 @@ function newCircularMenuItem () {
   const MODULE_NAME = 'Circular Menu Iem'
 
   let thisObject = {
+    isDeployed: undefined,
     iconOn: undefined,
     iconOff: undefined,
     label: undefined,
@@ -31,8 +32,6 @@ function newCircularMenuItem () {
   thisObject.container.frame.width = 150
   thisObject.container.frame.height = 30
 
-  let isMouseOver = false
-
   return thisObject
 
   function initialize () {
@@ -79,11 +78,11 @@ function newCircularMenuItem () {
   }
 
   function onMouseOver () {
-    isMouseOver = true
+
   }
 
   function onMouseNotOver () {
-    isMouseOver = false
+
   }
 
   function onMouseClick (event) {
@@ -91,7 +90,7 @@ function newCircularMenuItem () {
   }
 
   function drawBackground () {
-    if (isMouseOver === true) {
+    if (thisObject.isDeployed === true) {
       let point = {
         x: thisObject.container.frame.position.x,
         y: thisObject.container.frame.position.y

FloatingSpace/FloatingObject.js

@@ -88,7 +88,7 @@ function newFloatingObject () {
         case 'Strategy Part': {
           thisObject.underlayingObject = newStrategyPart()
           thisObject.underlayingObject.initialize(floatingLayer, pSubType)
-          thisObject.underlayingObject.container.connectToParent(thisObject.container, false, false, true, true)
+          thisObject.underlayingObject.container.connectToParent(thisObject.container, false, false, true, true, true, true)
           break
         }
         default: {

FloatingSpace/StrategyPart.js

@@ -240,7 +240,7 @@ function newStrategyPart () {
 
     thisObject.menu = newCircularMenu()
     thisObject.menu.initialize(menuItemsInitialValues)
-    thisObject.menu.container.connectToParent(thisObject.container, false, false, true, true)
+    thisObject.menu.container.connectToParent(thisObject.container, false, false, true, true, true, true)
 
 /* Load Part Image */
 

PlottersManager.js

@@ -221,7 +221,7 @@ function newPlottersManager () {
 
           let plotter = getNewPlotter(competition.plotter.host, competition.plotter.codeName, competition.plotter.moduleName)
 
-          plotter.container.connectToParent(thisObject.container, true, true, false, true)
+          plotter.container.connectToParent(thisObject.container, true, true, false, true, true, true)
 
           plotter.container.frame.position.x = thisObject.container.frame.width / 2 - plotter.container.frame.width / 2
           plotter.container.frame.position.y = thisObject.container.frame.height / 2 - plotter.container.frame.height / 2
@@ -463,7 +463,7 @@ function newPlottersManager () {
 
           let plotter = getNewPlotter(pProductCard.product.plotter.devTeam, pProductCard.product.plotter.codeName, pProductCard.product.plotter.moduleName)
 
-          plotter.container.connectToParent(thisObject.container, true, true, false, true)
+          plotter.container.connectToParent(thisObject.container, true, true, false, true, true, true)
 
           plotter.container.frame.position.x = thisObject.container.frame.width / 2 - plotter.container.frame.width / 2
           plotter.container.frame.position.y = thisObject.container.frame.height / 2 - plotter.container.frame.height / 2

TimeMachine.js

@@ -82,7 +82,7 @@ function newTimeMachine () {
 
     let timelineChart = newTimelineChart()
 
-    timelineChart.container.connectToParent(thisObject.container, true, true, false, true)
+    timelineChart.container.connectToParent(thisObject.container, true, true, false, true, true, true)
     timelineChart.container.frame.height = thisObject.container.frame.height
 
     timelineChart.container.frame.position.x = thisObject.container.frame.width / 2 - timelineChart.container.frame.width / 2
@@ -106,7 +106,7 @@ function newTimeMachine () {
       /* Each Time Machine has a Time Scale and a Right Scale. */
 
       timeScale = newTimeScale()
-      timeScale.container.connectToParent(thisObject.container, false, false, false, true)
+      timeScale.container.connectToParent(thisObject.container, false, false, false, true, true, true)
       timeScale.container.eventHandler.listenToEvent('Lenght Percentage Changed', function (event) {
         thisObject.container.frame.width = TIME_MACHINE_WIDTH * event.lenghtPercentage / 100
         thisObject.container.eventHandler.raiseEvent('Dimmensions Changed', event)
@@ -115,7 +115,7 @@ function newTimeMachine () {
       timeScale.initialize(timeLineCoordinateSystem)
 
       rigthScale = newRateScale()
-      rigthScale.container.connectToParent(thisObject.container, false, false, false, true)
+      rigthScale.container.connectToParent(thisObject.container, false, false, false, true, true, true)
       rigthScale.container.eventHandler.listenToEvent('Height Percentage Changed', function (event) {
         thisObject.container.frame.height = TIME_MACHINE_HEIGHT * event.heightPercentage / 100
         thisObject.container.eventHandler.raiseEvent('Dimmensions Changed', event)
@@ -157,7 +157,7 @@ function newTimeMachine () {
 
         let timelineChart = newTimelineChart()
 
-        timelineChart.container.connectToParent(thisObject.container, true, true, false, true)
+        timelineChart.container.connectToParent(thisObject.container, true, true, false, true, true, true)
 
         timelineChart.container.frame.height = thisObject.container.frame.height
 

TimelineChart.js

@@ -123,7 +123,7 @@
 
        plotterManager = newPlottersManager()
 
-       plotterManager.container.connectToParent(thisObject.container, true, true, false, true)
+       plotterManager.container.connectToParent(thisObject.container, true, true, false, true, true, true)
 
        plotterManager.container.frame.position.x = 0
        plotterManager.container.frame.position.y = 0
@@ -142,7 +142,7 @@
          }
 
          timePeriodScale = newTimePeriodScale()
-         timePeriodScale.container.connectToParent(thisObject.container, false, false, false, true)
+         timePeriodScale.container.connectToParent(thisObject.container, false, false, false, true, true, true)
          timePeriodScale.container.eventHandler.listenToEvent('Time Period Changed', function (event) {
            let currentTimePeriod = timePeriod
            timePeriod = event.timePeriod