Try to put a border to the time machine

ChartsSpace/TimeMachine.js

@@ -229,9 +229,13 @@ function newTimeMachine () {
   }
 
   function drawBackground () {
-    for (let i = 0; i < this.charts.length; i++) {
-      let chart = this.charts[i]
-      chart.drawBackground()
+    thisBackground()
+
+    if (thisObject.container.frame.isInViewPort()) {
+      for (let i = 0; i < this.charts.length; i++) {
+        let chart = this.charts[i]
+        chart.drawBackground()
+      }
     }
   }
 
@@ -249,6 +253,21 @@ function newTimeMachine () {
     }
   }
 
+  function thisBackground () {
+    let params = {
+      cornerRadius: 15,
+      lineWidth: 5,
+      opacity: 1,
+      container: thisObject.container,
+      borderColor: UI_COLOR.RUSTED_RED,
+      backgroundColor: UI_COLOR.WHITE,
+      fitFunction: thisObject.fitFunction,
+      coordinateSystem: timeLineCoordinateSystem
+    }
+
+    roundedCornersBackground(params)
+  }
+
   function recalculateScale () {
     if (INFO_LOG === true) { logger.write('[INFO] recalculateScale -> Entering function.') }
 
@@ -270,4 +289,3 @@ function newTimeMachine () {
       )
   }
 }
-

Spaces/ChartSpace.js

@@ -8,7 +8,6 @@ changes, then all charts in it are replotted with the corresponging data.
 
 function newChartSpace () {
   const MODULE_NAME = 'Chart Space'
-  const INFO_LOG = false
   const ERROR_LOG = true
   const logger = newWebDebugLog()
   logger.fileName = MODULE_NAME
@@ -37,8 +36,6 @@ function newChartSpace () {
 
   function finalize () {
     try {
-      if (INFO_LOG === true) { logger.write('[INFO] finalize -> Entering function.') }
-
       for (let i = 0; i < thisObject.timeMachines.length; i++) {
         let timeMachine = thisObject.timeMachines[i]
         timeMachine.finalize()
@@ -49,8 +46,6 @@ function newChartSpace () {
   }
 
   function initialize (callBackFunction) {
-    if (INFO_LOG === true) { logger.write('[INFO] initialize -> Entering function.') }
-
     let initializedCounter = 0
     let toInitialize = 1
 
@@ -62,17 +57,13 @@ function newChartSpace () {
 
     timeMachine.container.frame.position.x = thisObject.container.frame.width / 2 - timeMachine.container.frame.width / 2
     timeMachine.container.frame.position.y = thisObject.container.frame.height / 2 - timeMachine.container.frame.height / 2
-
+    timeMachine.container.fitFunction = fitIntoVisibleArea
     timeMachine.initialize(onTimeMachineInitialized)
 
     function onTimeMachineInitialized (err) {
-      if (INFO_LOG === true) { logger.write('[INFO] initialize -> onTimeMachineInitialized -> Entering function.') }
-
       initializedCounter++
 
       if (err.result !== GLOBAL.DEFAULT_OK_RESPONSE.result) {
-        if (INFO_LOG === true) { logger.write('[INFO] initialize -> onTimeMachineInitialized -> Initialization of a Time Machine failed.') }
-
         callBackFunction(err)
         return
       }

Utilities/RoundedCornersBackground.js

@@ -21,10 +21,24 @@ function roundedCornersBackground (params) {
 
       /* 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)
+  if (params.coordinateSystem !== undefined) { // For instance Candles would use this
+    borderPoint1 = params.coordinateSystem.transformThisPoint(borderPoint1)
+    borderPoint2 = params.coordinateSystem.transformThisPoint(borderPoint2)
+    borderPoint3 = params.coordinateSystem.transformThisPoint(borderPoint3)
+    borderPoint4 = params.coordinateSystem.transformThisPoint(borderPoint4)
+  } else {
+    if (params.outsideViewPort === true) { // If the element is not affected by zoom
+      borderPoint1 = transformThisPoint(borderPoint1, params.container)
+      borderPoint2 = transformThisPoint(borderPoint2, params.container)
+      borderPoint3 = transformThisPoint(borderPoint3, params.container)
+      borderPoint4 = transformThisPoint(borderPoint4, params.container)
+    } else { // For instance Panels use this
+      borderPoint1 = params.container.frame.frameThisPoint(borderPoint1)
+      borderPoint2 = params.container.frame.frameThisPoint(borderPoint2)
+      borderPoint3 = params.container.frame.frameThisPoint(borderPoint3)
+      borderPoint4 = params.container.frame.frameThisPoint(borderPoint4)
+    }
+  }
 
   if (params.fitFunction !== undefined) {
     borderPoint1 = params.fitFunction(borderPoint1)
@@ -89,4 +103,3 @@ function roundedCornersBackground (params) {
   browserCanvasContext.strokeStyle = 'rgba(' + params.borderColor + ', ' + params.opacity + ')'
   browserCanvasContext.stroke()
 }
-