Balance Controls Implemented

Panels/ProductsPanel.js

@@ -45,7 +45,7 @@
 
      var position = {
        x: viewPort.visibleArea.topLeft.x,
-       y: viewPort.visibleArea.bottomLeft.y - thisObject.container.frame.height
+       y: viewPort.visibleArea.topLeft.y// viewPort.visibleArea.bottomLeft.y - thisObject.container.frame.height
      }
 
      thisObject.container.frame.position = position

Spaces/BottomSpace.js

@@ -5,6 +5,9 @@ function newBottomSpace () {
     container: undefined,
     draw: draw,
     getContainer: getContainer,     // returns the inner most container that holds the point received by parameter.
+    createNewControl: createNewControl,
+    destroyControl: destroyControl,
+    getControl: getControl,
     initialize: initialize
   }
 
@@ -14,6 +17,7 @@ function newBottomSpace () {
 
   container.isDraggeable = false
 
+  controlsMap = new Map()
   resize()
 
   return thisObject
@@ -22,6 +26,57 @@ function newBottomSpace () {
     window.canvasApp.eventHandler.listenToEvent('Browser Resized', resize)
   }
 
+  function createNewControl (pType, pDrawFunction, pOwner) {
+    let control
+
+    switch (pType) {
+
+      case 'Over The Line':
+        {
+          control = newUIControl()
+          control.initialize()
+          control.drawFunction = pDrawFunction
+          break
+        }
+    }
+
+    let controlArray = controlsMap.get(pOwner)
+    if (controlArray === undefined) {
+      controlArray = []
+      controlsMap.set(pOwner, controlArray)
+    }
+
+    controlArray.push(control)
+
+    control.handle = Math.floor((Math.random() * 10000000) + 1)
+
+    return control.handle
+  }
+
+  function destroyControl (pControlHandle) {
+    for (let i = 0; i < thisObject.controls.length; i++) {
+      let control = thisObject.controls[i]
+
+      if (control.handle === pControlHandle) {
+        thisObject.controls.splice(i, 1)  // Delete item from array.
+        return
+      }
+    }
+  }
+
+  function getControl (pControlHandle, pOwner) {
+    thisObject.controls = controlsMap.get(pOwner)
+    if (thisObject.controls != undefined) {
+      for (let i = 0; i < thisObject.controls.length; i++) {
+        let control = thisObject.controls[i]
+
+        if (control.handle === pControlHandle) {
+          return control
+        }
+      }
+    }
+  }
+
   function resize () {
     container.frame.position.x = 0
     container.frame.position.y = viewPort.visibleArea.bottomLeft.y
@@ -40,6 +95,22 @@ function newBottomSpace () {
     thisObject.container.frame.draw(false, false)
 
     drawBackground()
+
+    thisObject.controls = controlsMap.get('Global')
+    if (thisObject.controls !== undefined) {
+      for (let i = 0; i < thisObject.controls.length; i++) {
+        let control = thisObject.controls[i]
+        control.draw()
+      }
+    }
+
+    thisObject.controls = controlsMap.get(window.CHART_ON_FOCUS)
+    if (thisObject.controls !== undefined) {
+      for (let i = 0; i < thisObject.controls.length; i++) {
+        let control = thisObject.controls[i]
+        control.draw()
+      }
+    }
   }
 
   function drawBackground () {

Spaces/PanelsSpace.js

@@ -16,7 +16,7 @@ function newPanelsSpace () {
     initialize: initialize
   }
 
-  var container = newContainer()
+  let container = newContainer()
   container.initialize()
   thisObject.container = container
   thisObject.container.isDraggeable = false
@@ -99,8 +99,8 @@ function newPanelsSpace () {
     thisObject.container.frame.draw(false, false)
 
     thisObject.panels = panelsMap.get('Global')
-    if (thisObject.panels != undefined) {
-      for (var i = 0; i < thisObject.panels.length; i++) {
+    if (thisObject.panels !== undefined) {
+      for (let i = 0; i < thisObject.panels.length; i++) {
         let panel = thisObject.panels[i]
         panel.draw()
       }
@@ -108,7 +108,7 @@ function newPanelsSpace () {
 
     thisObject.panels = panelsMap.get(window.CHART_ON_FOCUS)
     if (thisObject.panels !== undefined) {
-      for (var i = 0; i < thisObject.panels.length; i++) {
+      for (let i = 0; i < thisObject.panels.length; i++) {
         let panel = thisObject.panels[i]
         panel.draw()
       }

UIControl.js

@@ -0,0 +1,55 @@
+function newUIControl () {
+  let thisObject = {
+    drawFunction: undefined,
+    paramsArray: undefined,
+    container: undefined,
+    draw: draw,
+    parentContainer: undefined,
+    getContainer: getContainer,     // returns the inner most container that holds the point received by parameter.
+    initialize: initialize
+  }
+
+  let isInitialized = false
+   /* Cointainer stuff */
+
+  let container = newContainer()
+
+  container.name = 'UI Control'
+  container.initialize()
+
+  container.isClickeable = true
+
+  thisObject.container = container
+  thisObject.container.frame.containerName = 'Panel Tab Button'
+
+  return thisObject
+
+  function initialize () {
+    isInitialized = true
+  }
+
+  function draw () {
+    if (isInitialized === false) { return }
+
+    if (thisObject.drawFunction !== undefined && thisObject.paramsArray !== undefined) {
+      thisObject.drawFunction(thisObject.paramsArray)
+    }
+  }
+
+  function getContainer (point) {
+    var container
+
+       /* First we check if thisObject point is inside thisObject space. */
+
+    if (thisObject.container.frame.isThisPointHere(point, true) === true) {
+           /* Now we see which is the inner most container that has it */
+
+      return thisObject.container
+    } else {
+           /* This point does not belong to thisObject space. */
+
+      return undefined
+    }
+  }
+}
+