Preparing to draw from the Floating Space

Canvas.js

@@ -175,7 +175,8 @@ function newCanvas () {
           animation.addCallBackFunction('Bottom Space', thisObject.bottomSpace.draw, onFunctionAdded)
           animation.addCallBackFunction('Top Space', thisObject.topSpace.draw, onFunctionAdded)
           animation.addCallBackFunction('Strategy Space', thisObject.strategySpace.draw, onFunctionAdded)
-          animation.addCallBackFunction('Floating Space', thisObject.floatingSpace.floatingLayer.physicsLoop, onFunctionAdded)
+          animation.addCallBackFunction('Floating Space Draw', thisObject.floatingSpace.draw, onFunctionAdded)
+          animation.addCallBackFunction('Floating Space Physics', thisObject.floatingSpace.floatingLayer.physicsLoop, onFunctionAdded)
           animation.addCallBackFunction('Splash Screen', splashScreen.draw, onFunctionAdded)
           animation.start(onStart)
 

FloatingSpace/FloatingLayer.js

@@ -302,6 +302,10 @@ function newFloatingLayer () {
     } catch (err) {
       if (ERROR_LOG === true) { logger.write('[ERROR] getFloatingObject -> err.message = ' + err.message) }
     }
+  }
+
+  function draw () {
+
   }
 
     /******************************************/

Spaces/FloatingSpace.js

@@ -12,11 +12,16 @@ function newFloatingSpace () {
     profileBalls: undefined,
     strategyParts: undefined,
     noteSets: undefined,
+    makeVisible: makeVisible,
+    makeInvisible: makeInvisible,
+    draw: draw,
     getContainer: getContainer,
     initialize: initialize,
     finalize: finalize
   }
 
+  let visible = false
+
   return thisObject
 
   function finalize () {
@@ -40,6 +45,18 @@ function newFloatingSpace () {
     thisObject.strategyParts.initialize(thisObject.floatingLayer)
   }
 
+  function makeVisible () {
+    canvas.chartSpace.visible = false
+    canvas.panelsSpace.visible = false
+    visible = true
+  }
+
+  function makeInvisible () {
+    canvas.chartSpace.visible = true
+    canvas.panelsSpace.visible = true
+    visible = false
+  }
+
   function getContainer (point) {
     let container
 
@@ -48,5 +65,21 @@ function newFloatingSpace () {
 
     return container
   }
+
+  function draw () {
+    if (visible === true) {
+      drawBackground()
+    }
+  }
+
+  function drawBackground () {
+    browserCanvasContext.beginPath()
+
+    browserCanvasContext.rect(SIDE_PANEL_WIDTH, 0, browserCanvas.width - SIDE_PANEL_WIDTH, browserCanvas.height)
+    browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.BLACK + ', 1)'
+
+    browserCanvasContext.closePath()
+    browserCanvasContext.fill()
+  }
 }
 

StrategySpace/StrategyCollectionItem.js

@@ -17,7 +17,7 @@ function newStrategyCollectionItem () {
   thisObject.container.isClickeable = true
   thisObject.container.isDraggeable = false
 
-  let visible = false
+  let status = 'off'
 
   return thisObject
 
@@ -39,16 +39,14 @@ function newStrategyCollectionItem () {
   }
 
   function onMouseClick (event) {
-    if (visible === false) {
-      canvas.chartSpace.visible = false
-      canvas.panelsSpace.visible = false
+    if (status === 'off') {
+      canvas.floatingSpace.makeVisible()
       generateStrategyParts()
-      visible = true
+      status = 'on'
     } else {
-      canvas.chartSpace.visible = true
-      canvas.panelsSpace.visible = true
+      canvas.floatingSpace.makeInvisible()
       destroyStrategyParts()
-      visible = false
+      status = 'off'
     }
   }
 
@@ -260,19 +258,6 @@ function newStrategyCollectionItem () {
     text()
     arrow()
     icon()
-    floatingBackground()
-  }
-
-  function floatingBackground () {
-    if (visible === false) { return }
-
-    browserCanvasContext.beginPath()
-
-    browserCanvasContext.rect(SIDE_PANEL_WIDTH, 0, browserCanvas.width - SIDE_PANEL_WIDTH, browserCanvas.height)
-    browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.BLACK + ', 1)'
-
-    browserCanvasContext.closePath()
-    browserCanvasContext.fill()
   }
 
   function text () {