Merge pull request #42 from AAMasters/develop

Fixing BUG when reloading the page a different timePeriod might apperar

Candle.js

@@ -1,15 +0,0 @@
-function newCandle () {
-  let candle = {
-    open: undefined,
-    close: undefined,
-    min: 10000000000000,
-    max: 0,
-    begin: undefined,
-    end: undefined,
-    direction: undefined,
-    beginId: undefined,
-    endId: undefined
-  }
-
-  return candle
-}

Canvas.js

@@ -38,6 +38,7 @@ function newCanvas () {
     floatingSpace: undefined,
     panelsSpace: undefined,
     bottomSpace: undefined,
+    strategySpace: undefined,
     animation: undefined,
     initialize: initialize,
     finalize: finalize
@@ -52,13 +53,14 @@ function newCanvas () {
 /*
    The canvas object represents a layer on top of the browser canvas object.
 
-   Graphically, thiscanvas object has 4 spaces:
+   Graphically, thiscanvas object has 5 spaces:
 
    1. The "Top Space": It is where Team and User information is displayed.
    2. The "Chart Space": It is where the charts are plotted.
    3. The "Floating Space": It is where floating elements live. There is a physics engine for this layer that allows these elements to flow.
    4. The "Panels Space": It is where panels live. --> This space has yet to be develop, currently pannels are somehow at the Chart Space.
-   5. The "Bottom Space": Includes the breakpoint bar and a toolbar.
+   5. The "Bottom Space": Includes UIControls that other panels can add there.
+   6. The "Strategy Spece": Functionality to manage Strategies
 
    All these spaces are child objects of the Canvas object.
 
@@ -78,6 +80,9 @@ function newCanvas () {
    |
    |
    ---> bottomSpace
+   |
+   |
+   ---> strategySpace
 */
 
   function finalize () {
@@ -120,6 +125,9 @@ function newCanvas () {
       thisObject.topSpace = newTopSpace()
       await thisObject.topSpace.initialize()
 
+      thisObject.strategySpace = newStrategySpace()
+      await thisObject.strategySpace.initialize()
+
       thisObject.bottomSpace = newBottomSpace()
       thisObject.bottomSpace.initialize()
 
@@ -164,10 +172,11 @@ function newCanvas () {
           animation.addCallBackFunction('Chart Space', thisObject.chartSpace.draw, onFunctionAdded)
           animation.addCallBackFunction('Floating Space', thisObject.floatingSpace.floatingLayer.physicsLoop, onFunctionAdded)
           animation.addCallBackFunction('Panels Space', thisObject.panelsSpace.draw, onFunctionAdded)
-          animation.addCallBackFunction('Splash Screen', splashScreen.draw, onFunctionAdded)
           animation.addCallBackFunction('ViewPort Animate', viewPort.animate, onFunctionAdded)
           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('Splash Screen', splashScreen.draw, onFunctionAdded)
           animation.start(onStart)
 
           function onFunctionAdded (err) {
@@ -298,6 +307,20 @@ function newCanvas () {
 
       let container
 
+            /* We check if the mouse is over an element of the Strategy Space / */
+
+      container = thisObject.strategySpace.getContainer(point)
+
+      if (container !== undefined && container.isDraggeable === true) {
+        containerBeingDragged = container
+        containerDragStarted = true
+        return
+      }
+
+      if (container !== undefined && container.isDraggeable === false) {
+        return
+      }
+
            /* We check if the mouse is over an element of the Top Space / */
 
       container = thisObject.topSpace.getContainer(point)
@@ -373,6 +396,15 @@ function newCanvas () {
 
       let container
 
+            /* We check if the mouse is over an element of the Strategy Space / */
+
+      container = thisObject.strategySpace.getContainer(point)
+
+      if (container !== undefined && container.isClickeable === true) {
+        container.eventHandler.raiseEvent('onMouseClick', point)
+        return
+      }
+
            /* We check if the mouse is over an element of the Top Space / */
 
       container = thisObject.topSpace.getContainer(point)
@@ -506,6 +538,15 @@ function newCanvas () {
 
       let container
 
+            /* We check if the mouse is over an element of the Strategy Space / */
+
+      container = thisObject.strategySpace.getContainer(point)
+
+      if (container !== undefined && container.detectMouseOver === true) {
+        container.eventHandler.raiseEvent('onMouseOver', point)
+        return
+      }
+
            /* We check if the mouse is over an element of the Top Space / */
 
       container = thisObject.topSpace.getContainer(point)

ControlsToolBox/SidePanel.js

@@ -0,0 +1,134 @@
+function newSidePanel () {
+  const MODULE_NAME = 'Side Panel'
+  let thisObject = {
+    areas: [],
+    sidePanelTab: undefined,
+    container: undefined,
+    draw: draw,
+    getContainer: getContainer,
+    initialize: initialize
+  }
+
+  const SIDE_PANEL_WIDTH = 450
+  const SIDE_PANEL_TAB_WIDTH = 400
+
+  let isInitialized = false
+
+  thisObject.container = newContainer()
+  thisObject.container.name = MODULE_NAME
+  thisObject.container.initialize()
+  thisObject.container.isClickeable = true
+  thisObject.container.isDraggeable = false
+  thisObject.container.status = 'hidden'
+
+  resize()
+  return thisObject
+
+  function initialize () {
+    thisObject.sidePanelTab = newSidePanelTab()
+    thisObject.sidePanelTab.container.connectToParent(thisObject.container, false, false)
+    thisObject.sidePanelTab.initialize()
+
+    window.canvasApp.eventHandler.listenToEvent('Browser Resized', resize)
+    isInitialized = true
+  }
+
+  function resize () {
+    thisObject.container.frame.width = SIDE_PANEL_WIDTH
+    thisObject.container.frame.height = browserCanvas.height // - TOP_SPACE_HEIGHT
+    thisObject.container.frame.position.x = -SIDE_PANEL_WIDTH
+    thisObject.container.frame.position.y = 0 // TOP_SPACE_HEIGHT
+  }
+
+  function getContainer (point) {
+    let container
+
+    container = thisObject.sidePanelTab.getContainer(point)
+    if (container !== undefined) { return container }
+
+    if (thisObject.container.frame.isThisPointHere(point, true) === true) {
+      return thisObject.container
+    } else {
+      return undefined
+    }
+  }
+
+  function draw () {
+    if (isInitialized === false) { return }
+    borders()
+    thisObject.sidePanelTab.draw()
+
+    for (let i = 0; i < thisObject.areas.length; i++) {
+      let area = thisObject.areas[i]
+      area.draw()
+    }
+  }
+
+  function borders () {
+    let point1
+    let point2
+    let point3
+    let point4
+
+    point1 = {
+      x: 0,
+      y: 0
+    }
+
+    point2 = {
+      x: thisObject.container.frame.width,
+      y: 0
+    }
+
+    point3 = {
+      x: thisObject.container.frame.width,
+      y: thisObject.container.frame.height
+    }
+
+    point4 = {
+      x: 0,
+      y: thisObject.container.frame.height
+    }
+
+    point1 = thisObject.container.frame.frameThisPoint(point1)
+    point2 = thisObject.container.frame.frameThisPoint(point2)
+    point3 = thisObject.container.frame.frameThisPoint(point3)
+    point4 = thisObject.container.frame.frameThisPoint(point4)
+
+    browserCanvasContext.setLineDash([0, 0])
+    browserCanvasContext.beginPath()
+    browserCanvasContext.moveTo(point1.x, point1.y)
+    browserCanvasContext.lineTo(point2.x, point2.y)
+    browserCanvasContext.lineTo(point3.x, point3.y)
+    browserCanvasContext.lineTo(point4.x, point4.y)
+    browserCanvasContext.lineTo(point1.x, point1.y)
+    browserCanvasContext.closePath()
+
+    let opacity = 1
+
+    browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.LIGHT_GREY + ', ' + opacity + ''
+    browserCanvasContext.fill()
+
+    browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.GREY + ', ' + opacity + ''
+    browserCanvasContext.lineWidth = 0.3
+    browserCanvasContext.stroke()
+
+    /* Shadow */
+
+    if (thisObject.container.status !== 'hidden') {
+      for (let i = 0; i <= 30; i++) {
+        opacity = 1 - (i / 300) - 0.95
+
+        browserCanvasContext.setLineDash([0, 0])
+        browserCanvasContext.beginPath()
+        browserCanvasContext.moveTo(point2.x + i, point2.y)
+        browserCanvasContext.lineTo(point3.x + i, point3.y)
+        browserCanvasContext.closePath()
+
+        browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.BLACK + ', ' + opacity + ''
+        browserCanvasContext.lineWidth = 1
+        browserCanvasContext.stroke()
+      }
+    }
+  }
+}

ControlsToolBox/SidePanelTab.js

@@ -0,0 +1,216 @@
+function newSidePanelTab () {
+  const MODULE_NAME = 'Side Panel Tab'
+  let thisObject = {
+    pointerDirection: 'left',
+    container: undefined,
+    draw: draw,
+    getContainer: getContainer,
+    initialize: initialize
+  }
+
+  const TAB_WIDTH = 25
+  const TAB_HEIGHT = 60
+
+  let isInitialized = false
+  let animation = 'none'
+  let ORIGINAL_PARENT_POSITON
+  let xOffset = 0
+
+  thisObject.container = newContainer()
+  thisObject.container.name = MODULE_NAME
+  thisObject.container.initialize()
+  thisObject.container.isClickeable = true
+  thisObject.container.isDraggeable = false
+
+  return thisObject
+
+  function initialize () {
+    thisObject.container.frame.width = TAB_WIDTH
+    thisObject.container.frame.height = TAB_HEIGHT
+    thisObject.container.frame.position.x = 0 + thisObject.container.parentContainer.frame.width
+    thisObject.container.frame.position.y = 20
+
+    ORIGINAL_PARENT_POSITON = thisObject.container.parentContainer.frame.position.x
+
+    thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick)
+    isInitialized = true
+  }
+
+  function onMouseClick (event) {
+    if (thisObject.pointerDirection === 'left') {
+      animation = 'opening'
+    } else {
+      animation = 'closing'
+    }
+  }
+
+  function getContainer (point) {
+    let container
+    if (thisObject.container.frame.isThisPointHere(point, true) === true) {
+      return thisObject.container
+    } else {
+      return undefined
+    }
+  }
+
+  function draw () {
+    if (isInitialized === false) { return }
+    animate()
+    borders()
+    arrow()
+  }
+
+  function animate () {
+    const STEP = 50
+
+    if (animation === 'opening') {
+      xOffset = xOffset + STEP
+      thisObject.container.parentContainer.frame.position.x = ORIGINAL_PARENT_POSITON + xOffset
+      if (xOffset > thisObject.container.parentContainer.frame.width) {
+        animation = 'none'
+        xOffset = thisObject.container.parentContainer.frame.width
+        thisObject.container.parentContainer.frame.position.x = ORIGINAL_PARENT_POSITON + xOffset
+        thisObject.container.parentContainer.status = 'visible'
+        thisObject.pointerDirection = 'right'
+      }
+    }
+
+    if (animation === 'closing') {
+      xOffset = xOffset - STEP
+      thisObject.container.parentContainer.frame.position.x = ORIGINAL_PARENT_POSITON + xOffset
+      if (xOffset < 0) {
+        animation = 'none'
+        xOffset = 0
+        thisObject.container.parentContainer.frame.position.x = ORIGINAL_PARENT_POSITON
+        thisObject.container.parentContainer.status = 'hidden'
+        thisObject.pointerDirection = 'left'
+      }
+    }
+  }
+
+  function arrow () {
+    let point1
+    let point2
+    let point3
+
+    if (thisObject.pointerDirection === 'left') {
+      point1 = {
+        x: TAB_WIDTH * 3.5 / 10,
+        y: TAB_HEIGHT * 12.5 / 30
+      }
+
+      point2 = {
+        x: TAB_WIDTH * 6.5 / 10,
+        y: TAB_HEIGHT * 15 / 30
+      }
+
+      point3 = {
+        x: TAB_WIDTH * 3.5 / 10,
+        y: TAB_HEIGHT * 17.5 / 30
+      }
+    } else {
+      point1 = {
+        x: TAB_WIDTH * 6.5 / 10,
+        y: TAB_HEIGHT * 12.5 / 30
+      }
+
+      point2 = {
+        x: TAB_WIDTH * 3.5 / 10,
+        y: TAB_HEIGHT * 15 / 30
+      }
+
+      point3 = {
+        x: TAB_WIDTH * 6.5 / 10,
+        y: TAB_HEIGHT * 17.5 / 30
+      }
+    }
+
+    point1 = thisObject.container.frame.frameThisPoint(point1)
+    point2 = thisObject.container.frame.frameThisPoint(point2)
+    point3 = thisObject.container.frame.frameThisPoint(point3)
+
+    browserCanvasContext.beginPath()
+    browserCanvasContext.moveTo(point1.x, point1.y)
+    browserCanvasContext.lineTo(point2.x, point2.y)
+    browserCanvasContext.lineTo(point3.x, point3.y)
+    browserCanvasContext.closePath()
+
+    let opacity = 1
+
+    browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.GREY + ', ' + opacity + ''
+    browserCanvasContext.fill()
+  }
+
+  function borders () {
+    let point1
+    let point2
+    let point3
+    let point4
+
+    point1 = {
+      x: 0,
+      y: 0
+    }
+
+    point2 = {
+      x: TAB_WIDTH,
+      y: 0
+    }
+
+    point3 = {
+      x: TAB_WIDTH,
+      y: TAB_HEIGHT
+    }
+
+    point4 = {
+      x: 0,
+      y: TAB_HEIGHT
+    }
+
+    point1 = thisObject.container.frame.frameThisPoint(point1)
+    point2 = thisObject.container.frame.frameThisPoint(point2)
+    point3 = thisObject.container.frame.frameThisPoint(point3)
+    point4 = thisObject.container.frame.frameThisPoint(point4)
+
+    let opacity
+
+    /* Shadow */
+
+    for (let i = 0; i <= 5; i++) {
+      opacity = 1 - (i / 100) - 0.93
+
+      browserCanvasContext.beginPath()
+      browserCanvasContext.moveTo(point1.x + i, point1.y + i)
+      browserCanvasContext.lineTo(point2.x + i, point2.y + i)
+      browserCanvasContext.lineTo(point3.x + i, point3.y + i)
+      browserCanvasContext.lineTo(point4.x + i, point4.y + i)
+      browserCanvasContext.lineTo(point1.x + i, point1.y + i)
+      browserCanvasContext.closePath()
+
+      browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.BLACK + ', ' + opacity + ''
+      browserCanvasContext.lineWidth = 1
+      browserCanvasContext.stroke()
+    }
+
+    /* Background and Border */
+
+    browserCanvasContext.setLineDash([0, 0])
+    browserCanvasContext.beginPath()
+    browserCanvasContext.moveTo(point1.x, point1.y)
+    browserCanvasContext.lineTo(point2.x, point2.y)
+    browserCanvasContext.lineTo(point3.x, point3.y)
+    browserCanvasContext.lineTo(point4.x, point4.y)
+    browserCanvasContext.lineTo(point1.x, point1.y)
+    browserCanvasContext.closePath()
+
+    opacity = 1
+
+    browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + opacity + ''
+    browserCanvasContext.fill()
+
+    browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.GREY + ', ' + opacity + ''
+    browserCanvasContext.lineWidth = 0.3
+    browserCanvasContext.stroke()
+  }
+}
+

Frame.js

@@ -290,25 +290,16 @@ function newFrame () {
   }
 
   function background () {
-    borderPoint1 = {
-      x: PANEL_CORNERS_RADIOUS,
-      y: PANEL_CORNERS_RADIOUS
+    let params = {
+      cornerRadious: 5,
+      lineWidth: 0.1,
+      opacity: 0.75,
+      container: frame.container,
+      borderColor: UI_COLOR.DARK,
+      backgroundColor: UI_COLOR.WHITE
     }
 
-    borderPoint2 = {
-      x: frame.width - PANEL_CORNERS_RADIOUS,
-      y: PANEL_CORNERS_RADIOUS
-    }
-
-    borderPoint3 = {
-      x: frame.width - PANEL_CORNERS_RADIOUS,
-      y: frame.height - PANEL_CORNERS_RADIOUS
-    }
-
-    borderPoint4 = {
-      x: PANEL_CORNERS_RADIOUS,
-      y: frame.height - PANEL_CORNERS_RADIOUS
-    }
+    roundedCornersBackground(params)
 
     titleBarPoint1 = {
       x: 0,
@@ -322,36 +313,9 @@ function newFrame () {
 
         /* Now the transformations. */
 
-    borderPoint1 = frameThisPoint(borderPoint1)
-    borderPoint2 = frameThisPoint(borderPoint2)
-    borderPoint3 = frameThisPoint(borderPoint3)
-    borderPoint4 = frameThisPoint(borderPoint4)
-
     titleBarPoint1 = frameThisPoint(titleBarPoint1)
     titleBarPoint2 = frameThisPoint(titleBarPoint2)
 
-        /* We paint the panel background first */
-
-    browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 0.75)'
-    browserCanvasContext.beginPath()
-
-    browserCanvasContext.arc(borderPoint1.x, borderPoint1.y, PANEL_CORNERS_RADIOUS, 1.0 * Math.PI, 1.5 * Math.PI)
-    browserCanvasContext.lineTo(borderPoint2.x, borderPoint2.y - PANEL_CORNERS_RADIOUS)
-    browserCanvasContext.arc(borderPoint2.x, borderPoint2.y, PANEL_CORNERS_RADIOUS, 1.5 * Math.PI, 2.0 * Math.PI)
-    browserCanvasContext.lineTo(borderPoint3.x + PANEL_CORNERS_RADIOUS, borderPoint3.y)
-    browserCanvasContext.arc(borderPoint3.x, borderPoint3.y, PANEL_CORNERS_RADIOUS, 0 * Math.PI, 0.5 * Math.PI)
-    browserCanvasContext.lineTo(borderPoint4.x, borderPoint4.y + PANEL_CORNERS_RADIOUS)
-    browserCanvasContext.arc(borderPoint4.x, borderPoint4.y, PANEL_CORNERS_RADIOUS, 0.5 * Math.PI, 1.0 * Math.PI)
-    browserCanvasContext.lineTo(borderPoint1.x - PANEL_CORNERS_RADIOUS, borderPoint1.y)
-
-    browserCanvasContext.closePath()
-
-    browserCanvasContext.fill()
-
-    browserCanvasContext.lineWidth = 0.1
-    browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.MANGANESE_PURPLE + ', 0.75)'
-    browserCanvasContext.stroke()
-
         /* We paint the title bar now */
 
     browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK + ', 0.75)'

Globals.js

@@ -18,7 +18,10 @@ const DEFAULT_MARKET = {
 UI_COLOR = {
     DARK: "48, 48, 54",
     LIGHT: "234, 226, 222",
+    GREY: "150, 150, 150",
+    LIGHT_GREY: "247, 247, 247",    
     WHITE: "255, 255, 255",
+    BLACK: "0, 0, 0",
     GOLDEN_ORANGE: "240, 162, 2",
     RUSTED_RED: "204, 88, 53",
     GREEN: "188, 214, 67",
@@ -151,7 +154,7 @@ let INITIAL_TIME_PERIOD = ONE_DAY_IN_MILISECONDS  // This value will be overwrit
 
 let maxDate = new Date();
 maxDate.setMilliseconds(0);
-maxDate.setDate(maxDate.getDate() + 365 * 1);  // We might have charts that projects data into the future. 
+maxDate.setDate(maxDate.getDate() + 365 * 1);  // We might have charts that projects data into the future.
 
 const MIN_PLOTABLE_DATE = new Date(2015, 0, 1, 0, 0, 0);
 const MAX_PLOTABLE_DATE = maxDate;

Panels/ProductsPanel.js

@@ -41,11 +41,11 @@
      thisObject.container.name = 'Layers @ ' + exchange + ' ' + market.assetB + '/' + market.assetA
      thisObject.container.frame.containerName = thisObject.container.name
      thisObject.container.frame.width = UI_PANEL.WIDTH.LARGE
-     thisObject.container.frame.height = viewPort.visibleArea.bottomLeft.y - viewPort.visibleArea.topLeft.y // UI_PANEL.HEIGHT.LARGE;
+     thisObject.container.frame.height = UI_PANEL.HEIGHT.LARGE // viewPort.visibleArea.bottomLeft.y - viewPort.visibleArea.topLeft.y // UI_PANEL.HEIGHT.LARGE;
 
      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
@@ -82,7 +82,10 @@
          if (bot.products !== undefined) {
            for (let k = 0; k < bot.products.length; k++) {
              let product = bot.products[k]
-             if (product.shareWith !== 'Public' && devTeam.codeName !== userTeam.slug) { continue }
+
+             if (window.localStorage.getItem('Show AAMaster Layers') === null) {
+               if (product.shareWith !== 'Public' && devTeam.codeName !== userTeam.slug) { continue }
+             }
                         /* Now we create Product objects */
 
              let productCard = newProductCard()

Scales/RateScale.js

@@ -1,10 +1,5 @@
 function newRateScale () {
   const MODULE_NAME = 'Right Scale'
-  const INFO_LOG = false
-  const INTENSIVE_LOG = false
-  const ERROR_LOG = true
-  const logger = newWebDebugLog()
-  logger.fileName = MODULE_NAME
 
   let thisObject = {
     container: undefined,

Scales/TimePeriodScale.js

@@ -1,10 +1,5 @@
 function newTimePeriodScale () {
   const MODULE_NAME = 'Time Period Scale'
-  const INFO_LOG = false
-  const INTENSIVE_LOG = false
-  const ERROR_LOG = true
-  const logger = newWebDebugLog()
-  logger.fileName = MODULE_NAME
 
   let thisObject = {
     container: undefined,
@@ -78,6 +73,7 @@ function newTimePeriodScale () {
           }
         }
       }
+      saveObjectState()
       newTimePeriod()
     }
   }

Scales/TimeScale.js

@@ -1,10 +1,5 @@
 function newTimeScale () {
   const MODULE_NAME = 'Time Scale'
-  const INFO_LOG = false
-  const INTENSIVE_LOG = false
-  const ERROR_LOG = true
-  const logger = newWebDebugLog()
-  logger.fileName = MODULE_NAME
 
   let thisObject = {
     container: undefined,
@@ -183,7 +178,7 @@ to be visible at the top of the viewPort. */
       y: point1.y - viewPort.margins.TOP
     }
 
-    let date = getDateFromPoint(point, thisObject.container, timeLineCoordinateSystem)
+    let date = getDateFromPoint(point, thisObject.container.parentContainer, timeLineCoordinateSystem)
     date = new Date(date)
 
     let label = date.toUTCString()

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,70 @@ 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) {
+    thisObject.controls = controlsMap.get('Global')
+    if (thisObject.controls !== undefined) {
+      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
+        }
+      }
+    }
+
+    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]
+        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 +108,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
@@ -76,6 +76,10 @@ function newPanelsSpace () {
       let panel = thisObject.panels[i]
 
       if (panel.handle === pPanelHandle) {
+        if (panel.finalize !== undefined) {
+          panel.finalize()
+        }
+
         thisObject.panels.splice(i, 1)  // Delete item from array.
         return
       }
@@ -99,8 +103,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 +112,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()
       }

Spaces/StrategySpace.js

@@ -0,0 +1,45 @@
+
+function newStrategySpace () {
+  const MODULE_NAME = 'Strategy Space'
+  let thisObject = {
+    sidePanel: undefined,
+    strategyCollection: undefined,
+    container: undefined,
+    draw: draw,
+    getContainer: getContainer,
+    initialize: initialize
+  }
+
+  let container = newContainer()
+  container.initialize()
+  thisObject.container = container
+
+  container.isDraggeable = false
+
+  return thisObject
+
+  async function initialize () {
+    thisObject.sidePanel = newSidePanel()
+    thisObject.sidePanel.initialize()
+
+    thisObject.strategyCollection = newStrategyCollection()
+    thisObject.strategyCollection.container.connectToParent(thisObject.sidePanel.container, true, true)
+    await thisObject.strategyCollection.initialize()
+
+    thisObject.sidePanel.areas.push(thisObject.strategyCollection)
+  }
+
+  function getContainer (point) {
+    let container
+
+    if (thisObject.sidePanel !== undefined) {
+      container = thisObject.sidePanel.getContainer(point)
+      if (container !== undefined) { return container }
+    }
+    return
+  }
+
+  function draw () {
+    thisObject.sidePanel.draw()
+  }
+}

StrategySpace/StrategyCollection.js

@@ -0,0 +1,264 @@
+
+function newStrategyCollection () {
+  const MODULE_NAME = 'Strategy Collection'
+  const ERROR_LOG = true
+  const logger = newWebDebugLog()
+  logger.fileName = MODULE_NAME
+
+  let thisObject = {
+    strategies: undefined,
+    container: undefined,
+    draw: draw,
+    getContainer: getContainer,
+    initialize: initialize
+  }
+
+  let colletionItems = []
+
+  thisObject.container = newContainer()
+  thisObject.container.name = MODULE_NAME
+  thisObject.container.initialize()
+
+  thisObject.container.frame.width = 0
+  thisObject.container.frame.height = 0
+
+  thisObject.container.frame.position.x = 0
+  thisObject.container.frame.position.y = 0
+
+  thisObject.container.isDraggeable = false
+  thisObject.container.isClickeable = true
+
+  return thisObject
+
+  async function initialize () {
+    try {
+      const accessToken = window.localStorage.getItem('xaccess_token')
+      let user = window.localStorage.getItem('xuser')
+
+      if (user === null) {
+              // if there is no user that means that we are logged off, which means this object can not be used.
+        return
+      }
+
+      thisObject.container.eventHandler.listenToEvent('onMouseClick', onClick)
+
+      user = JSON.parse(user)
+
+      const authId = user.authId
+
+      let sessionToken
+
+      const apolloClient = new Apollo.lib.ApolloClient({
+        networkInterface: Apollo.lib.createNetworkInterface({
+          uri: window.canvasApp.graphQL.masterAppApiUrl,
+          transportBatching: true
+        }),
+        connectToDevTools: true
+      })
+
+      /* Getting the FB that own the Strategies */
+
+      let strategySimulationClone = ''
+      let clones = window.localStorage.getItem('userClones')
+      if (clones === null || clones === '') {
+        if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> no user clones found at local storage. Can not get Strategies without them. ') }
+        return
+      }
+      clones = JSON.parse(clones)
+      for (let i = 0; i < clones.length; i++) {
+        let clone = clones[i]
+        if (clone.botType === 'Indicator') {
+          strategySimulationClone = clone.botSlug
+        }
+      }
+
+      /* Getting all Strategies */
+
+      const networkInterface = Apollo.lib.createNetworkInterface({
+        uri: window.canvasApp.graphQL.masterAppApiUrl
+      })
+
+      networkInterface.use([{
+        applyMiddleware (req, next) {
+          req.options.headers = {
+            authorization: `Bearer ${accessToken}`
+          }
+          next()
+        }
+      }])
+
+      const QUERY = Apollo.gql`
+          query($fbSlug: String!){
+
+                    strategizer_StrategyByFb(fbSlug: $fbSlug){
+                    subStrategies(activeOnly: true){
+                        name
+                        entryPoint{
+                        situations{
+                            name
+                            conditions{
+                            name
+                            code
+                            }
+                        }
+                        }
+                        exitPoint{
+                        situations{
+                            name
+                            conditions{
+                            name
+                            code
+                            }
+                        }
+                        }
+                        sellPoint{
+                        situations{
+                            name
+                            conditions{
+                            name
+                            code
+                            }
+                        }
+                        }
+                        buyPoint{
+                        situations{
+                            name
+                            conditions{
+                            name
+                            code
+                            }
+                        }
+                        }
+                        stopLoss{
+                        phases{
+                            name
+                            code
+                            situations{
+                            name
+                            conditions{
+                                name
+                                code
+                            }
+                            }
+                        }
+                        }
+                        buyOrder{
+                        phases{
+                            name
+                            code
+                            situations{
+                            name
+                            conditions{
+                                name
+                                code
+                            }
+                            }
+                        }
+                        }
+                        sellOrder{
+                        phases{
+                            name
+                            code
+                            situations{
+                            name
+                            conditions{
+                                name
+                                code
+                            }
+                            }
+                        }
+                        }
+                    }
+                    }
+                }
+              `
+
+      const getStrategies = () => {
+        return new Promise((resolve, reject) => {
+          apolloClient.query({
+            query: QUERY,
+            variables: { fbSlug: strategySimulationClone}
+          })
+                  .then(response => {
+                    window.localStorage.setItem('userStrategies', JSON.stringify(response.data.strategizer_StrategyByFb.subStrategies))
+                    thisObject.strategies = response.data.strategizer_StrategyByFb.subStrategies
+                    createCollectionItems()
+                    resolve({ strategies: response.data.strategizer_StrategyByFb.subStrategies})
+                  })
+                  .catch(error => {
+                    console.log('apolloClient error getting user strategies', error.graphQLErrors, error.stack)
+                    reject(error)
+                  })
+        })
+      }
+
+          // To avoid race conditions, add asynchronous fetches to array
+      let fetchDataPromises = []
+
+      fetchDataPromises.push(getStrategies())
+
+          // When all asynchronous fetches resolve, authenticate user or throw error.
+      await Promise.all(fetchDataPromises).then(result => {
+
+      }, err => {
+        console.error('[ERROR] Login -> GraphQL Fetch Error -> err = ', err.stack)
+      })
+    } catch (err) {
+      if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err = ' + err.stack) }
+    }
+  }
+
+  function createCollectionItems () {
+    const TOP_MARGIN = 100
+    const ITEMS_SEPARATION = 90
+
+    for (let i = 0; i < thisObject.strategies.length; i++) {
+      let strategy = thisObject.strategies[i]
+      let collectionItem = newStrategyCollectionItem()
+
+      collectionItem.container.connectToParent(thisObject.container, false, false)
+      collectionItem.initialize()
+      collectionItem.strategy = strategy
+      collectionItem.container.frame.position.y = i * ITEMS_SEPARATION + TOP_MARGIN
+
+      colletionItems.push(collectionItem)
+
+      /* Load Strategies Icons */
+
+      let imageIndex = i + 1
+      if (imageIndex > 14) { imageIndex = 14 }
+
+      let strategyImage = loadEmoji('Symbols/Emoji Symbols-' + (112 + imageIndex) + '.png')
+      collectionItem.icon = strategyImage
+    }
+  }
+
+  function onClick () {
+
+  }
+
+  function getContainer (point) {
+    let container
+
+        /* First we check if this point is inside this object UI. */
+
+    if (thisObject.container.frame.isThisPointHere(point, true) === true) {
+      return this.container
+    } else {
+            /* This point does not belong to this space. */
+
+      return undefined
+    }
+  }
+
+  function draw () {
+    if (colletionItems === undefined) {
+      return
+    }
+
+    for (let i = 0; i < colletionItems.length; i++) {
+      let item = colletionItems[i]
+      item.draw()
+    }
+  }
+}

StrategySpace/StrategyCollectionItem.js

@@ -0,0 +1,164 @@
+function newStrategyCollectionItem () {
+  const MODULE_NAME = 'Strategy Collection Item'
+  let thisObject = {
+    icon: undefined,
+    strategy: undefined,
+    container: undefined,
+    draw: draw,
+    getContainer: getContainer,
+    initialize: initialize
+  }
+
+  let isInitialized = false
+
+  thisObject.container = newContainer()
+  thisObject.container.name = MODULE_NAME
+  thisObject.container.initialize()
+  thisObject.container.isClickeable = true
+  thisObject.container.isDraggeable = false
+
+  return thisObject
+
+  function initialize () {
+    const ITEM_WIDTH = 430
+    const ITEM_HEIGHT = 80
+
+    thisObject.container.frame.width = ITEM_WIDTH
+    thisObject.container.frame.height = ITEM_HEIGHT
+
+    const LEFT_MARGIN = (thisObject.container.parentContainer.frame.width - thisObject.container.frame.width) / 2
+    const TOP_MARGIN = 100
+
+    thisObject.container.frame.position.x = LEFT_MARGIN
+    thisObject.container.frame.position.y = TOP_MARGIN
+
+    thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick)
+    isInitialized = true
+  }
+
+  function onMouseClick (event) {
+
+  }
+
+  function getContainer (point) {
+    let container
+    if (thisObject.container.frame.isThispointHere(point, true) === true) {
+      return thisObject.container
+    } else {
+      return undefined
+    }
+  }
+
+  function draw () {
+    if (isInitialized === false) { return }
+
+    borders()
+    text()
+    arrow()
+    icon()
+  }
+
+  function text () {
+    if (thisObject.strategy === undefined) {
+      return
+    }
+
+    const LEFT_MARGIN = 80
+    const TOP_MARGIN = 45
+
+    let strategy = thisObject.strategy
+
+    let labelpoint = {
+      x: LEFT_MARGIN,
+      y: TOP_MARGIN
+    }
+
+    labelpoint = thisObject.container.frame.frameThisPoint(labelpoint)
+
+    let labelToPrint = strategy.name
+    labelToPrint = labelToPrint.toUpperCase()
+    labelToPrint = labelToPrint.substring(0, 30)
+    let opacity = 1
+    let fontSize = 15
+
+    printLabel(labelToPrint, labelpoint.x, labelpoint.y, opacity, fontSize)
+  }
+
+  function borders () {
+    let params = {
+      cornerRadious: 8,
+      lineWidth: 0.1,
+      opacity: 1,
+      container: thisObject.container,
+      borderColor: UI_COLOR.DARK,
+      backgroundColor: UI_COLOR.WHITE,
+      castShadow: true
+    }
+
+    roundedCornersBackground(params)
+  }
+
+  function arrow () {
+    const X_OFFSET = 400
+    const Y_OFFSET = 40
+    const HEIGHT = 12
+    const WIDTH = 6
+    const LINE_WIDTH = 2
+    const OPACITY = 0.6
+
+    point1 = {
+      x: X_OFFSET,
+      y: Y_OFFSET - HEIGHT / 2
+    }
+
+    point2 = {
+      x: X_OFFSET + WIDTH,
+      y: Y_OFFSET
+    }
+
+    point3 = {
+      x: X_OFFSET,
+      y: Y_OFFSET + HEIGHT / 2
+    }
+
+        /* Now the transformations. */
+
+    point1 = thisObject.container.frame.frameThisPoint(point1)
+    point2 = thisObject.container.frame.frameThisPoint(point2)
+    point3 = thisObject.container.frame.frameThisPoint(point3)
+
+    browserCanvasContext.setLineDash([0, 0])
+
+          /* The Arrow  */
+
+    browserCanvasContext.beginPath()
+
+    browserCanvasContext.moveTo(point1.x, point1.y)
+    browserCanvasContext.lineTo(point2.x, point2.y)
+    browserCanvasContext.lineTo(point3.x, point3.y)
+
+    browserCanvasContext.lineWidth = LINE_WIDTH
+    browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.DARK + ', ' + OPACITY + ')'
+    browserCanvasContext.stroke()
+  }
+
+  function icon () {
+    if (thisObject.icon === undefined) { return }
+
+    const X_OFFSET = 45
+    const Y_OFFSET = 40
+    const IMAGE_SIZE = 40
+
+    point1 = {
+      x: X_OFFSET,
+      y: Y_OFFSET
+    }
+
+        /* Now the transformations. */
+
+    point1 = thisObject.container.frame.frameThisPoint(point1)
+
+    browserCanvasContext.drawImage(thisObject.icon, point1.x - IMAGE_SIZE / 2, point1.y - IMAGE_SIZE / 2, IMAGE_SIZE, IMAGE_SIZE)
+  }
+}
+

TopSpace/Login.js

@@ -5,6 +5,7 @@ function newLogin () {
   const INTENSIVE_LOG = false
   const ERROR_LOG = true
   const logger = newWebDebugLog()
+  logger.fileName = MODULE_NAME
 
   let thisObject = {
     container: undefined,
@@ -100,7 +101,7 @@ function newLogin () {
                         resolve({ user: response.data.users_UserByAuthId})
                       })
                       .catch(error => {
-                        console.log('apolloClient error getting user query', error)
+                        console.log('apolloClient error getting user query', error.graphQLErrors, error.stack)
                         reject(error)
                       })
         })
@@ -170,7 +171,7 @@ function newLogin () {
                 resolve({ teams: response.data.teams_TeamsByOwner})
               })
               .catch(error => {
-                console.log('apolloClient error getting user teams', error)
+                console.log('apolloClient error getting user teams', error.graphQLErrors, error.stack)
                 reject(error)
               })
         })
@@ -233,7 +234,7 @@ function newLogin () {
                 resolve({ currentEvents: response.data.events_Events})
               })
               .catch(error => {
-                console.log('apolloClient error getting current events', error)
+                console.log('apolloClient error getting current events', error.graphQLErrors, error.stack)
                 reject(error)
               })
         })
@@ -320,7 +321,7 @@ function newLogin () {
                 resolve({ clones: response.data.operations_Clones})
               })
               .catch(error => {
-                console.log('apolloClient error getting user clones', error)
+                console.log('apolloClient error getting user clones', error.graphQLErrors, error.stack)
                 reject(error)
               })
         })

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
+    }
+  }
+}
+

Utilities.js

@@ -153,3 +153,31 @@ function removeTime (datetime) {
 
   return dateOnly
 }
+
+function loadEmoji (pPath) {
+  let newImage
+
+  newImage = new Image()
+  newImage.onload = onImageLoaded
+
+  function onImageLoaded () {
+    newImage.isLoaded = true
+  }
+
+  newImage.src = window.canvasApp.urlPrefix + 'Images/Emoji/' + pPath
+
+  return newImage
+}
+
+function printLabel (labelToPrint, x, y, opacity, fontSize) {
+  let labelPoint
+
+  browserCanvasContext.font = fontSize + 'px ' + UI_FONT.SECONDARY + ' Saira'
+
+  let label = '' + labelToPrint
+
+  let xOffset = label.length / 2 * fontSize * FONT_ASPECT_RATIO
+
+  browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK + ', ' + opacity + ')'
+  browserCanvasContext.fillText(label, x, y)
+}

Utilities/RoundedCornersBackground.js

@@ -0,0 +1,85 @@
+function roundedCornersBackground (params) {
+  borderPoint1 = {
+    x: params.cornerRadious,
+    y: params.cornerRadious
+  }
+
+  borderPoint2 = {
+    x: params.container.frame.width - params.cornerRadious,
+    y: params.cornerRadious
+  }
+
+  borderPoint3 = {
+    x: params.container.frame.width - params.cornerRadious,
+    y: params.container.frame.height - params.cornerRadious
+  }
+
+  borderPoint4 = {
+    x: params.cornerRadious,
+    y: params.container.frame.height - params.cornerRadious
+  }
+
+      /* Now the transformations. */
+
+  borderPoint1 = params.container.frame.frameThisPoint(borderPoint1)
+  borderPoint2 = params.container.frame.frameThisPoint(borderPoint2)
+  borderPoint3 = params.container.frame.frameThisPoint(borderPoint3)
+  borderPoint4 = params.container.frame.frameThisPoint(borderPoint4)
+
+  browserCanvasContext.setLineDash([0, 0])
+
+        /* Shadow  */
+
+  if (params.castShadow === true) {
+    let SHADOW_OFFSET = 2
+
+    browserCanvasContext.beginPath()
+
+    browserCanvasContext.arc(borderPoint1.x + SHADOW_OFFSET, borderPoint1.y + SHADOW_OFFSET, params.cornerRadious, 1.0 * Math.PI, 1.5 * Math.PI)
+    browserCanvasContext.lineTo(borderPoint2.x + SHADOW_OFFSET, borderPoint2.y - params.cornerRadious + SHADOW_OFFSET)
+    browserCanvasContext.arc(borderPoint2.x + SHADOW_OFFSET, borderPoint2.y + SHADOW_OFFSET, params.cornerRadious, 1.5 * Math.PI, 2.0 * Math.PI)
+    browserCanvasContext.lineTo(borderPoint3.x + params.cornerRadious + SHADOW_OFFSET, borderPoint3.y + SHADOW_OFFSET)
+    browserCanvasContext.arc(borderPoint3.x + SHADOW_OFFSET, borderPoint3.y + SHADOW_OFFSET, params.cornerRadious, 0 * Math.PI, 0.5 * Math.PI)
+    browserCanvasContext.lineTo(borderPoint4.x + SHADOW_OFFSET, borderPoint4.y + params.cornerRadious + SHADOW_OFFSET)
+    browserCanvasContext.arc(borderPoint4.x + SHADOW_OFFSET, borderPoint4.y + SHADOW_OFFSET, params.cornerRadious, 0.5 * Math.PI, 1.0 * Math.PI)
+    browserCanvasContext.lineTo(borderPoint1.x - params.cornerRadious + SHADOW_OFFSET, borderPoint1.y + SHADOW_OFFSET)
+
+    browserCanvasContext.closePath()
+
+    browserCanvasContext.lineWidth = 10
+    browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.BLACK + ', ' + 0.01 + ')'
+    browserCanvasContext.stroke()
+
+    browserCanvasContext.lineWidth = 5
+    browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.BLACK + ', ' + 0.01 + ')'
+    browserCanvasContext.stroke()
+
+    browserCanvasContext.lineWidth = 1
+    browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.BLACK + ', ' + 0.15 + ')'
+    browserCanvasContext.stroke()
+  }
+
+        /* Background  */
+
+  browserCanvasContext.beginPath()
+
+  browserCanvasContext.arc(borderPoint1.x, borderPoint1.y, params.cornerRadious, 1.0 * Math.PI, 1.5 * Math.PI)
+  browserCanvasContext.lineTo(borderPoint2.x, borderPoint2.y - params.cornerRadious)
+  browserCanvasContext.arc(borderPoint2.x, borderPoint2.y, params.cornerRadious, 1.5 * Math.PI, 2.0 * Math.PI)
+  browserCanvasContext.lineTo(borderPoint3.x + params.cornerRadious, borderPoint3.y)
+  browserCanvasContext.arc(borderPoint3.x, borderPoint3.y, params.cornerRadious, 0 * Math.PI, 0.5 * Math.PI)
+  browserCanvasContext.lineTo(borderPoint4.x, borderPoint4.y + params.cornerRadious)
+  browserCanvasContext.arc(borderPoint4.x, borderPoint4.y, params.cornerRadious, 0.5 * Math.PI, 1.0 * Math.PI)
+  browserCanvasContext.lineTo(borderPoint1.x - params.cornerRadious, borderPoint1.y)
+
+  browserCanvasContext.closePath()
+
+  browserCanvasContext.fillStyle = 'rgba(' + params.backgroundColor + ', ' + params.opacity + ')'
+
+  browserCanvasContext.fill()
+
+  browserCanvasContext.lineWidth = params.lineWidth
+  browserCanvasContext.strokeStyle = 'rgba(' + params.borderColor + ', ' + params.opacity + ')'
+  browserCanvasContext.stroke()
+}
+

VolumeBar.js

@@ -1,10 +0,0 @@
- function newVolumeBar () {
-   var volumeBar = {
-     amountBuy: 0,
-     amountSell: 0,
-     begin: undefined,
-     end: undefined
-   }
-
-   return volumeBar
- }

WebDebugLog.js

@@ -2,7 +2,7 @@
 function newWebDebugLog () {
   let thisObject = {
     write: write,
-    fileName: undefined
+    fileName: 'undefined'
   }
 
   return thisObject