Finished with Product Panels hidding below bottom bar

Panels/PanelTabButton.js

@@ -1,8 +1,9 @@
 function newPanelTabButton () {
   let thisObject = {
     container: undefined,
-    draw: draw,
+    fitFunction: undefined,
     parentContainer: undefined,
+    draw: draw,
     getContainer: getContainer,     // returns the inner most container that holds the point received by parameter.
     initialize: initialize
   }
@@ -203,6 +204,12 @@ function newPanelTabButton () {
     point2 = thisObject.container.frame.frameThisPoint(point2)
     point3 = thisObject.container.frame.frameThisPoint(point3)
 
+    if (thisObject.fitFunction !== undefined) {
+      point1 = thisObject.fitFunction(point1)
+      point2 = thisObject.fitFunction(point2)
+      point3 = thisObject.fitFunction(point3)
+    }
+
         /* Lets start the drawing. */
 
     browserCanvasContext.beginPath()
@@ -220,4 +227,3 @@ function newPanelTabButton () {
     browserCanvasContext.fill()
   }
 }
-

Panels/ProductCard.js

@@ -16,15 +16,13 @@ function newProductCard () {
     bot: undefined,
     product: undefined,
     code: undefined,
-
+    fitFunction: undefined,
     setDatetime: setDatetime,
     setTimePeriod: setTimePeriod,
-
     onMarketFileLoaded: onMarketFileLoaded,
     onDailyFileLoaded: onDailyFileLoaded,
     onSingleFileLoaded: onSingleFileLoaded,
     onFileSequenceLoaded: onFileSequenceLoaded,
-
     getContainer: getContainer,     // returns the inner most container that holds the point received by parameter.
     initialize: initialize
   }
@@ -429,6 +427,11 @@ function newProductCard () {
 
        */
 
+    let fitImagePoint = {
+      x: 0,
+      y: 0
+    }
+
     const devTeamImageSize = 20
     const botImageSize = 20
     const plotterImageSize = {
@@ -448,6 +451,8 @@ function newProductCard () {
 
       teamImagePoint = thisObject.container.frame.frameThisPoint(teamImagePoint)
 
+      fitImagePoint = thisObject.fitFunction(teamImagePoint)
+
       let teamImage
 
       if (legacyTeamAvatarLoaded === true) {
@@ -458,7 +463,7 @@ function newProductCard () {
         teamImage = teamAvatar
       }
 
-      if (teamImage !== undefined) {
+      if (teamImage !== undefined && teamImagePoint.y === fitImagePoint.y) {
         if (teamImage.naturalHeight !== 0) {
          /* The image is rounded before being displayed. */
 
@@ -485,6 +490,7 @@ function newProductCard () {
         }
 
         botImagePoint = thisObject.container.frame.frameThisPoint(botImagePoint)
+        fitImagePoint = thisObject.fitFunction(botImagePoint)
 
         let imageId = thisObject.bot.devTeam + '.' + thisObject.bot.profilePicture
 
@@ -493,7 +499,7 @@ function newProductCard () {
 
         botImage = thisObject.bot.avatar
 
-        if (botImage !== undefined) {
+        if (botImage !== undefined && botImagePoint.y === fitImagePoint.y) {
           if (botImage.naturalHeight !== 0) {
              /* The image is rounded before being displayed. */
 
@@ -522,11 +528,17 @@ function newProductCard () {
       }
 
       plotterImagePoint = thisObject.container.frame.frameThisPoint(plotterImagePoint)
+      fitImagePoint = {
+        x: 0,
+        y: plotterImagePoint.y + plotterImageSize.height
+      }
+
+      fitImagePoint = thisObject.fitFunction(fitImagePoint)
 
       let imageId = thisObject.product.plotter.devTeam + '.' + thisObject.product.plotter.codeName + '.' + thisObject.product.plotter.moduleName + '.' + thisObject.product.plotter.profilePicture
       let plotterImage = legacyPlotterBanner
 
-      if (plotterImage !== undefined) {
+      if (plotterImage !== undefined && plotterImagePoint.y + plotterImageSize.height === fitImagePoint.y) {
         if (plotterImage.naturalHeight !== 0) {
           browserCanvasContext.drawImage(plotterImage, plotterImagePoint.x, plotterImagePoint.y, plotterImageSize.width, plotterImageSize.height)
         }
@@ -588,6 +600,11 @@ function newProductCard () {
       point3 = thisObject.container.frame.frameThisPoint(point3)
       point4 = thisObject.container.frame.frameThisPoint(point4)
 
+      point1 = thisObject.fitFunction(point1)
+      point2 = thisObject.fitFunction(point2)
+      point3 = thisObject.fitFunction(point3)
+      point4 = thisObject.fitFunction(point4)
+
       browserCanvasContext.beginPath()
       browserCanvasContext.moveTo(point1.x, point1.y)
       browserCanvasContext.lineTo(point2.x, point2.y)
@@ -609,7 +626,7 @@ function newProductCard () {
     let labelPoint
     let fontSize = 10
 
-    browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY  
+    browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
 
     let label
 
@@ -625,8 +642,9 @@ function newProductCard () {
       }
 
       labelPoint = thisObject.container.frame.frameThisPoint(labelPoint)
+      labelPoint = thisObject.fitFunction(labelPoint)
 
-      browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY  
+      browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
       browserCanvasContext.fillStyle = 'rgba(60, 60, 60, 0.50)'
       browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y)
 
@@ -641,8 +659,9 @@ function newProductCard () {
       }
 
       labelPoint = thisObject.container.frame.frameThisPoint(labelPoint)
+      labelPoint = thisObject.fitFunction(labelPoint)
 
-      browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY  
+      browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
       browserCanvasContext.fillStyle = 'rgba(60, 60, 60, 0.50)'
       browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y)
     }
@@ -664,8 +683,9 @@ function newProductCard () {
     }
 
     labelPoint = thisObject.container.frame.frameThisPoint(labelPoint)
+    labelPoint = thisObject.fitFunction(labelPoint)
 
-    browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY  
+    browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
     browserCanvasContext.fillStyle = 'rgba(60, 60, 60, 0.50)'
     browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y)
 
@@ -728,6 +748,11 @@ function newProductCard () {
     point3 = thisObject.container.frame.frameThisPoint(point3)
     point4 = thisObject.container.frame.frameThisPoint(point4)
 
+    point1 = thisObject.fitFunction(point1)
+    point2 = thisObject.fitFunction(point2)
+    point3 = thisObject.fitFunction(point3)
+    point4 = thisObject.fitFunction(point4)
+
     browserCanvasContext.beginPath()
     browserCanvasContext.moveTo(point1.x, point1.y)
     browserCanvasContext.lineTo(point2.x, point2.y)
@@ -790,6 +815,11 @@ function newProductCard () {
     point3 = thisObject.container.frame.frameThisPoint(point3)
     point4 = thisObject.container.frame.frameThisPoint(point4)
 
+    point1 = thisObject.fitFunction(point1)
+    point2 = thisObject.fitFunction(point2)
+    point3 = thisObject.fitFunction(point3)
+    point4 = thisObject.fitFunction(point4)
+
     browserCanvasContext.beginPath()
     browserCanvasContext.moveTo(point1.x, point1.y)
     browserCanvasContext.lineTo(point2.x, point2.y)
@@ -852,6 +882,11 @@ function newProductCard () {
     point3 = thisObject.container.frame.frameThisPoint(point3)
     point4 = thisObject.container.frame.frameThisPoint(point4)
 
+    point1 = thisObject.fitFunction(point1)
+    point2 = thisObject.fitFunction(point2)
+    point3 = thisObject.fitFunction(point3)
+    point4 = thisObject.fitFunction(point4)
+
     browserCanvasContext.beginPath()
     browserCanvasContext.moveTo(point1.x, point1.y)
     browserCanvasContext.lineTo(point2.x, point2.y)
@@ -914,6 +949,11 @@ function newProductCard () {
     point3 = thisObject.container.frame.frameThisPoint(point3)
     point4 = thisObject.container.frame.frameThisPoint(point4)
 
+    point1 = thisObject.fitFunction(point1)
+    point2 = thisObject.fitFunction(point2)
+    point3 = thisObject.fitFunction(point3)
+    point4 = thisObject.fitFunction(point4)
+
     browserCanvasContext.beginPath()
     browserCanvasContext.moveTo(point1.x, point1.y)
     browserCanvasContext.lineTo(point2.x, point2.y)
@@ -929,4 +969,3 @@ function newProductCard () {
     browserCanvasContext.stroke()
   }
 }
-

Panels/ProductsPanel.js

@@ -53,6 +53,7 @@
      panelTabButton = newPanelTabButton()
      panelTabButton.parentContainer = thisObject.container
      panelTabButton.container.frame.parentFrame = thisObject.container.frame
+     panelTabButton.fitFunction = canvas.chartSpace.fitIntoVisibleArea
      panelTabButton.initialize()
 
      /* Get the current teams of the logged in user. */
@@ -93,7 +94,7 @@
              productCard.devTeam = devTeam
              productCard.bot = bot
              productCard.product = product
-
+             productCard.fitFunction = canvas.chartSpace.fitIntoVisibleArea
              productCard.code = exchange + '-' + market.assetB + '/' + market.assetA + '-' + devTeam.codeName + '-' + bot.codeName + '-' + product.codeName
 
                         /* Initialize it */

Spaces/ChartSpace.js

@@ -86,23 +86,28 @@ function newChartSpace () {
   function fitIntoVisibleArea (point) {
        /* Here we check the boundaries of the resulting points, so they dont go out of the visible area. */
 
+    let returnPoint = {
+      x: point.x,
+      y: point.y
+    }
+
     if (point.x > browserCanvas.width) {
-      point.x = browserCanvas.width
+      returnPoint.x = browserCanvas.width
     }
 
     if (point.x < 0) {
-      point.x = 0
+      returnPoint.x = 0
     }
 
     if (point.y > BOTTOM_SPACE_POSITION + BOTTOM_SPACE_HEIGHT / 2) {
-      point.y = BOTTOM_SPACE_POSITION + BOTTOM_SPACE_HEIGHT / 2
+      returnPoint.y = BOTTOM_SPACE_POSITION + BOTTOM_SPACE_HEIGHT / 2
     }
 
     if (point.y < 0) {
-      point.y = 0
+      returnPoint.y = 0
     }
 
-    return point
+    return returnPoint
   }
 
   function physics () {