middeground and draw focus implemented

FloatingSpace/FloatingLayer.js

@@ -182,11 +182,21 @@ function newFloatingLayer () {
         floatingObject.drawBackground()
       }
 
+      for (let i = 0; i < visibleFloatingObjects.length; i++) {
+        let floatingObject = visibleFloatingObjects[i]
+        floatingObject.drawMiddleground()
+      }
+
       for (let i = 0; i < visibleFloatingObjects.length; i++) {
         let floatingObject = visibleFloatingObjects[visibleFloatingObjects.length - i - 1]
         floatingObject.drawForeground()
       }
 
+      for (let i = 0; i < visibleFloatingObjects.length; i++) {
+        let floatingObject = visibleFloatingObjects[i]
+        floatingObject.drawOnFocus()
+      }
+
       makeVisible()
     }
 

FloatingSpace/FloatingObject.js

@@ -27,7 +27,9 @@ function newFloatingObject () {
     radomizeCurrentPosition: radomizeCurrentPosition,
     radomizeCurrentSpeed: radomizeCurrentSpeed,
     drawBackground: drawBackground,
+    drawMiddleground: drawMiddleground,
     drawForeground: drawForeground,
+    drawOnFocus: drawOnFocus,
     updateMass: updateMass,                 // Function to update the mass when the zoom level changed.
     updateRadius: updateRadius,             // Function to update the radius when the zoom level changed.
     getContainer: getContainer,
@@ -202,10 +204,18 @@ function newFloatingObject () {
     thisObject.underlayingObject.drawBackground(thisObject)
   }
 
+  function drawMiddleground () {
+    thisObject.underlayingObject.drawMiddleground(thisObject)
+  }
+
   function drawForeground () {
     thisObject.underlayingObject.drawForeground(thisObject)
   }
 
+  function drawOnFocus () {
+    thisObject.underlayingObject.drawOnFocus(thisObject)
+  }
+
   function initializeMass (suggestedValue) {
     let mass = suggestedValue
     if (mass < 0.1) {

FloatingSpace/Note.js

@@ -6,7 +6,9 @@ function newNote () {
     container: undefined,
     physics: physics,
     drawBackground: drawBackground,
+    drawMiddleground: drawMiddleground,
     drawForeground: drawForeground,
+    drawOnFocus: drawOnFocus,
     getContainer: getContainer,
     initialize: initialize
   }
@@ -88,6 +90,14 @@ function newNote () {
     }
   }
 
+  function drawOnFocus () {
+
+  }
+
+  function drawMiddleground () {
+
+  }
+
   function drawForeground (pFloatingObject) {
     const BUBBLE_CORNERS_RADIUS = 5
     const TITLE_BAR_HEIGHT = 14

FloatingSpace/ProfileBall.js

@@ -6,7 +6,9 @@ function newProfileBall () {
     container: undefined,
     physics: physics,
     drawBackground: drawBackground,
+    drawMiddleground: drawMiddleground,
     drawForeground: drawForeground,
+    drawOnFocus: drawOnFocus,
     getContainer: getContainer,
     initialize: initialize
   }
@@ -215,6 +217,14 @@ function newProfileBall () {
     }
   }
 
+  function drawOnFocus () {
+
+  }
+
+  function drawMiddleground () {
+
+  }
+
   function drawForeground (pFloatingObject) {
     if (pFloatingObject.container.frame.radius > 5) {
             /* Contourn */

FloatingSpace/StrategyPart.js

@@ -14,7 +14,9 @@ function newStrategyPart () {
     payload: undefined,
     physics: physics,
     drawBackground: drawBackground,
+    drawMiddleground: drawMiddleground,
     drawForeground: drawForeground,
+    drawOnFocus: drawOnFocus,
     getContainer: getContainer,
     finalize: finalize,
     initialize: initialize
@@ -316,15 +318,37 @@ function newStrategyPart () {
 
   function drawBackground (pFloatingObject) {
     if (thisObject.isOnFocus === false) {
-      drawPartBackground(pFloatingObject)
+      drawConnectingLine(pFloatingObject)
       thisObject.menu.drawBackground()
+    }
+  }
 
-      drawPartForeground(pFloatingObject)
+  function drawMiddleground (pFloatingObject) {
+    if (thisObject.isOnFocus === false) {
+      drawText(pFloatingObject)
+    }
+  }
+
+  function drawForeground (pFloatingObject) {
+    if (thisObject.isOnFocus === false) {
+      drawBodyAndPicture(pFloatingObject)
       thisObject.menu.drawForeground()
     }
   }
 
-  function drawPartBackground (pFloatingObject) {
+  function drawOnFocus (pFloatingObject) {
+    if (thisObject.isOnFocus === true) {
+      drawConnectingLine(pFloatingObject)
+      thisObject.menu.drawBackground()
+
+      drawText(pFloatingObject)
+
+      drawBodyAndPicture(pFloatingObject)
+      thisObject.menu.drawForeground()
+    }
+  }
+
+  function drawConnectingLine (pFloatingObject) {
     if (pFloatingObject.payload.parentNode === undefined) { return }
 
     /* Here we do the trick of recalculation the position of the anchor by setting it to the position of its parent */
@@ -371,67 +395,55 @@ function newStrategyPart () {
       browserCanvasContext.fillStyle = 'rgba(30, 30, 30, 1)'
       browserCanvasContext.fill()
     }
+  }
 
-    drawText()
+  function drawText (pFloatingObject) {
+/* Text Follows */
+    let position = {
+      x: pFloatingObject.container.frame.position.x,
+      y: pFloatingObject.container.frame.position.y
+    }
+    let radius = pFloatingObject.container.frame.radius
+            /* Label Text */
+    let labelPoint
+    let fontSize = pFloatingObject.currentFontSize
+    let label
 
-    function drawText () {
-  /* Text Follows */
-      let position = {
-        x: pFloatingObject.container.frame.position.x,
-        y: pFloatingObject.container.frame.position.y
-      }
-      let radius = pFloatingObject.container.frame.radius
-              /* Label Text */
-      let labelPoint
-      let fontSize = pFloatingObject.currentFontSize
-      let label
+    if (radius > 6 && thisObject.isOnFocus === true) {
+      browserCanvasContext.strokeStyle = pFloatingObject.labelStrokeStyle
 
-      if (radius > 6 && thisObject.isOnFocus === true) {
-        browserCanvasContext.strokeStyle = pFloatingObject.labelStrokeStyle
+      browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
+
+      label = pFloatingObject.payload.downLabel
+
+      if (label !== undefined) {
+        labelPoint = {
+          x: position.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO,
+          y: position.y - radius * 1 / 2 - fontSize * FONT_ASPECT_RATIO - 10
+        }
 
         browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
-
-        label = pFloatingObject.payload.downLabel
-
-        if (label !== undefined) {
-          labelPoint = {
-            x: position.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO,
-            y: position.y - radius * 1 / 2 - fontSize * FONT_ASPECT_RATIO - 10
-          }
-
-          browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
-          browserCanvasContext.fillStyle = pFloatingObject.labelStrokeStyle
-          browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y)
-        }
+        browserCanvasContext.fillStyle = pFloatingObject.labelStrokeStyle
+        browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y)
       }
-      if (radius > 6) {
-        label = pFloatingObject.payload.upLabel
+    }
+    if (radius > 6) {
+      label = pFloatingObject.payload.upLabel
 
-        if (label !== undefined) {
-          labelPoint = {
-            x: position.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO,
-            y: position.y + radius * 2 / 3 + fontSize * FONT_ASPECT_RATIO + 15
-          }
-
-          browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
-          browserCanvasContext.fillStyle = pFloatingObject.labelStrokeStyle
-          browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y)
+      if (label !== undefined) {
+        labelPoint = {
+          x: position.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO,
+          y: position.y + radius * 2 / 3 + fontSize * FONT_ASPECT_RATIO + 15
         }
+
+        browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
+        browserCanvasContext.fillStyle = pFloatingObject.labelStrokeStyle
+        browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y)
       }
     }
   }
 
-  function drawForeground (pFloatingObject) {
-    if (thisObject.isOnFocus === true) {
-      drawPartBackground(pFloatingObject)
-      thisObject.menu.drawBackground()
-
-      drawPartForeground(pFloatingObject)
-      thisObject.menu.drawForeground()
-    }
-  }
-
-  function drawPartForeground (pFloatingObject) {
+  function drawBodyAndPicture (pFloatingObject) {
     let position = {
       x: pFloatingObject.container.frame.position.x,
       y: pFloatingObject.container.frame.position.y