floating space apeearing

Globals.js

@@ -159,12 +159,11 @@ maxDate.setDate(maxDate.getDate() + 365 * 1);  // We might have charts that proj
 const MIN_PLOTABLE_DATE = new Date(2015, 0, 1, 0, 0, 0);
 const MAX_PLOTABLE_DATE = maxDate;
 
-const BOTTOM_SPACE_MIN_HEIGHT = 35;
-const BOTTOM_SPACE_MAX_HEIGHT = browserCanvas.height;
-let TOP_SPACE_HEIGHT = 5;
-let BOTTOM_SPACE_HEIGHT = 35;
-let BREAKPOINT_HEIGHT = 15;
-let SIDE_PANEL_WIDTH = 450
+const TOP_SPACE_HEIGHT = 5;
+const BOTTOM_SPACE_HEIGHT = 35;
+const BREAKPOINT_HEIGHT = 15;
+const SIDE_PANEL_WIDTH = 450
+let BOTTOM_SPACE_POSITION = browserCanvas.height - BOTTOM_SPACE_HEIGHT
   
 const PRODUCT_CARD_STATUS = {
     ON: 'on',

Spaces/BottomSpace.js

@@ -55,33 +55,29 @@
    }
 
    function physics () {
-     BOTTOM_SPACE_HEIGHT = browserCanvas.height - thisObject.container.frame.position.y
-
      /* Check the limits */
 
-     if (BOTTOM_SPACE_HEIGHT < BOTTOM_SPACE_MIN_HEIGHT) {
-       BOTTOM_SPACE_HEIGHT = BOTTOM_SPACE_MIN_HEIGHT
+     if (thisObject.container.frame.position.y > browserCanvas.height - BOTTOM_SPACE_HEIGHT) {
        thisObject.container.frame.position.y = browserCanvas.height - BOTTOM_SPACE_HEIGHT
        canvas.strategySpace.makeInvisible()
      }
-     if (BOTTOM_SPACE_HEIGHT > BOTTOM_SPACE_MAX_HEIGHT) {
-       BOTTOM_SPACE_HEIGHT = BOTTOM_SPACE_MAX_HEIGHT
-       thisObject.container.frame.position.y = browserCanvas.height - BOTTOM_SPACE_HEIGHT
+     if (thisObject.container.frame.position.y < BOTTOM_SPACE_HEIGHT) {
+       thisObject.container.frame.position.y = BOTTOM_SPACE_HEIGHT
        canvas.chartSpace.visible = false
        canvas.panelsSpace.visible = false
      }
 
-     if (BOTTOM_SPACE_HEIGHT > browserCanvas.height * 25 / 100) {
+     if (thisObject.container.frame.position.y < browserCanvas.height * 90 / 100) {
        canvas.strategySpace.makeVisible()
      }
 
-     if (BOTTOM_SPACE_HEIGHT < browserCanvas.height * 95 / 100) {
+     if (thisObject.container.frame.position.y < browserCanvas.height * 10 / 100) {
        canvas.chartSpace.visible = true
        canvas.panelsSpace.visible = true
      }
 
+     BOTTOM_SPACE_POSITION = thisObject.container.frame.position.y
      viewPort.resize()
-     thisObject.container.frame.height = BOTTOM_SPACE_HEIGHT
    }
 
    function createNewControl (pType, pDrawFunction, pOwner) {
@@ -186,19 +182,24 @@
        y: 0
      }
 
-     zeroPoint = thisObject.container.frame.frameThisPoint(zeroPoint)
-
-     let breakpointsHeight = 15
      const RED_LINE_HIGHT = 5
 
+     zeroPoint = thisObject.container.frame.frameThisPoint(zeroPoint)
+
      browserCanvasContext.beginPath()
-     browserCanvasContext.rect(zeroPoint.x, zeroPoint.y + breakpointsHeight, thisObject.container.frame.width, thisObject.container.frame.height)
-     browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK + ', ' + opacity + ')'
+     browserCanvasContext.rect(zeroPoint.x, zeroPoint.y, thisObject.container.frame.width, thisObject.container.frame.height)
+     browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.BLACK + ', ' + opacity + ')'
      browserCanvasContext.closePath()
      browserCanvasContext.fill()
 
      browserCanvasContext.beginPath()
-     browserCanvasContext.rect(zeroPoint.x, zeroPoint.y + breakpointsHeight, thisObject.container.frame.width, RED_LINE_HIGHT)
+     browserCanvasContext.rect(zeroPoint.x, zeroPoint.y, thisObject.container.frame.width, RED_LINE_HIGHT)
+     browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', ' + opacity + ')'
+     browserCanvasContext.closePath()
+     browserCanvasContext.fill()
+
+     browserCanvasContext.beginPath()
+     browserCanvasContext.rect(zeroPoint.x, zeroPoint.y + thisObject.container.frame.height - RED_LINE_HIGHT, thisObject.container.frame.width, RED_LINE_HIGHT)
      browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', ' + opacity + ')'
      browserCanvasContext.closePath()
      browserCanvasContext.fill()

Spaces/ChartSpace.js

@@ -1,4 +1,4 @@
- /*
+/*
 
 The chart space is where all the charts live. What this space contains is a type of object we call Time Machine. A Time Machine is a cointainer of
 charts objects. The idea is simple, all the chart objects are ploted according to the time of the Time Machine object. When the time of the Time Machine
@@ -16,6 +16,7 @@ function newChartSpace () {
   let thisObject = {
     visible: true,
     container: undefined,
+    fitIntoVisibleArea: fitIntoVisibleArea,
     drawBackground: drawBackground,
     draw: draw,
     timeMachines: [],
@@ -50,11 +51,11 @@ function newChartSpace () {
     let initializedCounter = 0
     let toInitialize = 1
 
-        /* We create the first of many possible time machines that could live at the Chart Space. */
+       /* We create the first of many possible time machines that could live at the Chart Space. */
 
     let timeMachine = newTimeMachine()
 
-        /* We make the time machine a little bit smaller than the current space. */
+       /* We make the time machine a little bit smaller than the current space. */
 
     timeMachine.container.frame.position.x = this.container.frame.width / 2 - timeMachine.container.frame.width / 2
     timeMachine.container.frame.position.y = this.container.frame.height / 2 - timeMachine.container.frame.height / 2
@@ -81,15 +82,58 @@ function newChartSpace () {
     }
   }
 
+  function fitIntoVisibleArea (point) {
+       /* Here we check the boundaries of the resulting points, so they dont go out of the visible area. */
+
+    if (point.x > browserCanvas.width) {
+      point.x = browserCanvas.width
+    }
+
+    if (point.x < 0) {
+      point.x = 0
+    }
+
+    if (point.y > BOTTOM_SPACE_POSITION + BOTTOM_SPACE_HEIGHT / 2) {
+      point.y = BOTTOM_SPACE_POSITION + BOTTOM_SPACE_HEIGHT / 2
+    }
+
+    if (point.y < 0) {
+      point.y = 0
+    }
+
+    return point
+  }
+
   function drawBackground () {
     if (thisObject.visible !== true) { return }
 
+    drawSpaceBackground()
+
     for (let i = 0; i < thisObject.timeMachines.length; i++) {
       let timeMachine = thisObject.timeMachines[i]
       timeMachine.drawBackground()
     }
   }
 
+  function drawSpaceBackground () {
+    let opacity = '1'
+    let fromPoint = {
+      x: 0,
+      y: 0
+    }
+
+    let toPoint = {
+      x: browserCanvas.width,
+      y: BOTTOM_SPACE_POSITION
+    }
+
+    browserCanvasContext.beginPath()
+    browserCanvasContext.rect(fromPoint.x, fromPoint.y, toPoint.x - fromPoint.x, toPoint.y - fromPoint.y)
+    browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + opacity + ')'
+    browserCanvasContext.closePath()
+    browserCanvasContext.fill()
+  }
+
   function draw () {
     if (thisObject.visible !== true) { return }
 
@@ -104,7 +148,7 @@ function newChartSpace () {
 
     let container
 
-        /* Now we see which is the inner most container that has it */
+       /* Now we see which is the inner most container that has it */
 
     for (let i = 0; i < this.timeMachines.length; i++) {
       container = this.timeMachines[i].getContainer(point, purpose)
@@ -117,3 +161,4 @@ function newChartSpace () {
     return this.container
   }
 }
+

TimelineChart.js

@@ -299,6 +299,9 @@
      fromPoint = transformThisPoint(fromPoint, thisObject.container)
      toPoint = transformThisPoint(toPoint, thisObject.container)
 
+     fromPoint = canvas.chartSpace.fitIntoVisibleArea(fromPoint)
+     toPoint = canvas.chartSpace.fitIntoVisibleArea(toPoint)
+
      browserCanvasContext.beginPath()
 
      browserCanvasContext.rect(fromPoint.x, fromPoint.y, toPoint.x - fromPoint.x, toPoint.y - fromPoint.y)
@@ -338,7 +341,7 @@
      let imageWidth = 150
 
      let MAX_COLUMNS = 16
-     let MAX_ROWS = 7
+     let MAX_ROWS = 5
      let Y_TOP_MARGIN = 30
 
      let point1 = {

ViewPort.js

@@ -84,7 +84,7 @@ function newViewPort () {
 
   function resize () {
     TOP_MARGIN = 15 + TOP_SPACE_HEIGHT
-    BOTTOM_MARGIN = 15 + BOTTOM_SPACE_HEIGHT
+    BOTTOM_MARGIN = 15 + browserCanvas.height - BOTTOM_SPACE_POSITION
     LEFT_MARGIN = 50
     RIGHT_MARGIN = 50
     MARGINS = {