Merge remote-tracking branch 'upstream/develop'

Animation.js

@@ -34,7 +34,7 @@ function newAnimation () {
 
       thisObject.stop()
     } catch (err) {
-      if (ERROR_LOG === true) { logger.write('[ERROR] finalize -> err = ' + err) }
+      if (ERROR_LOG === true) { logger.write('[ERROR] finalize -> err = ' + err.stack) }
     }s
   }
 
@@ -45,7 +45,7 @@ function newAnimation () {
             /* Nothing to do here yet. */
       callBackFunction(GLOBAL.CUSTOM_OK_RESPONSE)
     } catch (err) {
-      if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err = ' + err) }
+      if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err = ' + err.stack) }
       callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE)
     }
   }
@@ -56,7 +56,7 @@ function newAnimation () {
 
       animationLoop()  // Inside this function the animation process is started, and at the same time it creates a loop.
     } catch (err) {
-      if (ERROR_LOG === true) { logger.write('[ERROR] start -> err = ' + err) }
+      if (ERROR_LOG === true) { logger.write('[ERROR] start -> err = ' + err.stack) }
       callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE)
     }
   }
@@ -67,7 +67,7 @@ function newAnimation () {
 
       window.cancelAnimationFrame(animationLoopHandle)
     } catch (err) {
-      if (ERROR_LOG === true) { logger.write('[ERROR] stop -> err = ' + err) }
+      if (ERROR_LOG === true) { logger.write('[ERROR] stop -> err = ' + err.stack) }
       callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE)
     }
   }
@@ -78,7 +78,7 @@ function newAnimation () {
 
       callBackFunctions.set(key, callBack)
     } catch (err) {
-      if (ERROR_LOG === true) { logger.write('[ERROR] addCallBackFunction -> err = ' + err) }
+      if (ERROR_LOG === true) { logger.write('[ERROR] addCallBackFunction -> err = ' + err.stack) }
       callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE)
     }
   }
@@ -89,7 +89,7 @@ function newAnimation () {
 
       callBackFunctions.delete(key)
     } catch (err) {
-      if (ERROR_LOG === true) { logger.write('[ERROR] removeCallBackFunction -> err = ' + err) }
+      if (ERROR_LOG === true) { logger.write('[ERROR] removeCallBackFunction -> err = ' + err.stack) }
       callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE)
     }
   }
@@ -126,7 +126,7 @@ function newAnimation () {
 
       animationLoopHandle = window.requestAnimationFrame(animationLoop)
     } catch (err) {
-      if (ERROR_LOG === true) { logger.write('[ERROR] animationLoop -> err = ' + err) }
+      if (ERROR_LOG === true) { logger.write('[ERROR] animationLoop -> err = ' + err.stack) }
     }
   }
 

BottomSpace/ChartAspectRatio.js

@@ -1,113 +0,0 @@
- function newChartAspectRatio () {
-   let thisObject = {
-     aspectRatio: undefined,
-     draw: draw,
-     getContainer: getContainer,
-     initialize: initialize
-   }
-
-   let container = newContainer()
-   container.initialize()
-   thisObject.container = container
-
-   thisObject.container.frame.width = 50
-   thisObject.container.frame.height = BOTTOM_SPACE_HEIGHT
-
-   resize()
-
-   container.isDraggeable = false
-   container.isClickeable = false
-   container.isWheeleable = true
-
-   thisObject.aspectRatio = {}
-
-   const INITIAL_Y_ASPECT_RATIO = 5 / 10
-   const MIN_Y_ASPECT_RATIO = 1 / 10
-   const MAX_Y_ASPECT_RATIO = 10 / 10
-
-   thisObject.aspectRatio.x = 1
-   thisObject.aspectRatio.y = INITIAL_Y_ASPECT_RATIO
-
-   canDrawIcon = false
-
-   return thisObject
-
-   function initialize () {
-     icon = new Image()
-
-     icon.onload = onImageLoad
-
-     function onImageLoad () {
-       canDrawIcon = true
-     }
-
-     icon.src = window.canvasApp.urlPrefix + 'Images/Icons/chart-scale.png'
-
-     thisObject.container.eventHandler.listenToEvent('Mouse Wheel', onMouseWheel)
-
-     window.canvasApp.eventHandler.listenToEvent('Browser Resized', resize)
-   }
-
-   function resize () {
-     container.frame.position.x = viewPort.visibleArea.topRight.x - thisObject.container.frame.width
-     container.frame.position.y = viewPort.visibleArea.bottomLeft.y
-   }
-
-   function onMouseWheel (pDelta) {
-     if (viewPort.isMinZoom() === false) { return } // We only make this button to work at the min zoom level.
-
-     if (pDelta < 0) {
-       pDelta = -0.1
-     } else {
-       pDelta = 0.1
-     }
-
-     thisObject.aspectRatio.y = thisObject.aspectRatio.y + pDelta
-     thisObject.aspectRatio.y = Math.round(thisObject.aspectRatio.y * 100) / 100
-
-     if (thisObject.aspectRatio.y < MIN_Y_ASPECT_RATIO) {
-       thisObject.aspectRatio.y = MIN_Y_ASPECT_RATIO
-     }
-
-     if (thisObject.aspectRatio.y > MAX_Y_ASPECT_RATIO) {
-       thisObject.aspectRatio.y = MAX_Y_ASPECT_RATIO
-     }
-
-     thisObject.container.eventHandler.raiseEvent('Chart Aspect Ratio Changed', thisObject.aspectRatio)
-   }
-
-   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 () {
-     thisObject.container.frame.draw(false, false)
-
-     if (canDrawIcon === false) { return }
-     if (viewPort.isMinZoom() === false) { return } // We only show this button at the min zoom level.
-
-     let breakpointsHeight = 15
-
-     let imageHeight = 15
-     let imageWidth = 15
-
-     let imagePoint = {
-       x: 10,
-       y: thisObject.container.frame.height / 2 - imageHeight / 2 + breakpointsHeight
-     }
-
-     imagePoint = thisObject.container.frame.frameThisPoint(imagePoint)
-
-     browserCanvasContext.drawImage(icon, imagePoint.x, imagePoint.y, imageWidth, imageHeight)
-   }
- }

Canvas.js

@@ -103,7 +103,7 @@ function newCanvas () {
            // IE 6/7/8
       else browserCanvas.detachEvent('onmousewheel', onMouseWheel)
     } catch (err) {
-      if (ERROR_LOG === true) { logger.write('[ERROR] finalize -> err = ' + err) }
+      if (ERROR_LOG === true) { logger.write('[ERROR] finalize -> err = ' + err.stack) }
     }
   }
 
@@ -138,7 +138,7 @@ function newCanvas () {
 
           viewPort.raiseEvents() // These events will impacts on objects just initialized.
         } catch (err) {
-          if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onCharSpaceInitialized -> err = ' + err) }
+          if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onCharSpaceInitialized -> err = ' + err.stack) }
           callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE)
         }
       }
@@ -182,7 +182,7 @@ function newCanvas () {
                                /* Display some Error Page here. */
               }
             } catch (err) {
-              if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onAnimationInitialized -> onFunctionAdded -> err = ' + err) }
+              if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onAnimationInitialized -> onFunctionAdded -> err = ' + err.stack) }
               callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE)
             }
           }
@@ -211,17 +211,17 @@ function newCanvas () {
                 }
               }
             } catch (err) {
-              if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onAnimationInitialized -> onStart -> err = ' + err) }
+              if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onAnimationInitialized -> onStart -> err = ' + err.stack) }
               callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE)
             }
           }
         } catch (err) {
-          if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onAnimationInitialized -> err = ' + err) }
+          if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onAnimationInitialized -> err = ' + err.stack) }
           callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE)
         }
       }
     } catch (err) {
-      if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err = ' + err) }
+      if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err = ' + err.stack) }
       callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE)
     }
   }
@@ -236,7 +236,7 @@ function newCanvas () {
 
       viewPort.initialize()
     } catch (err) {
-      if (ERROR_LOG === true) { logger.write('[ERROR] initializeBrowserCanvas -> err = ' + err) }
+      if (ERROR_LOG === true) { logger.write('[ERROR] initializeBrowserCanvas -> err = ' + err.stack) }
     }
   }
 
@@ -267,7 +267,7 @@ function newCanvas () {
         e.preventDefault()
       }
     } catch (err) {
-      if (ERROR_LOG === true) { logger.write('[ERROR] addCanvasEvents -> err = ' + err) }
+      if (ERROR_LOG === true) { logger.write('[ERROR] addCanvasEvents -> err = ' + err.stack) }
     }
   }
 
@@ -354,7 +354,7 @@ function newCanvas () {
 
       viewPortBeingDragged = true
     } catch (err) {
-      if (ERROR_LOG === true) { logger.write('[ERROR] onMouseDown -> err = ' + err) }
+      if (ERROR_LOG === true) { logger.write('[ERROR] onMouseDown -> err = ' + err.stack) }
     }
   }
 
@@ -420,7 +420,7 @@ function newCanvas () {
         return
       }
     } catch (err) {
-      if (ERROR_LOG === true) { logger.write('[ERROR] onMouseClick -> err = ' + err) }
+      if (ERROR_LOG === true) { logger.write('[ERROR] onMouseClick -> err = ' + err.stack) }
     }
   }
 
@@ -449,7 +449,7 @@ function newCanvas () {
 
       browserCanvas.style.cursor = 'auto'
     } catch (err) {
-      if (ERROR_LOG === true) { logger.write('[ERROR] onMouseUp -> err = ' + err) }
+      if (ERROR_LOG === true) { logger.write('[ERROR] onMouseUp -> err = ' + err.stack) }
     }
   }
 
@@ -485,7 +485,7 @@ function newCanvas () {
         onMouseOver(event)
       }
     } catch (err) {
-      if (ERROR_LOG === true) { logger.write('[ERROR] onMouseMove -> err = ' + err) }
+      if (ERROR_LOG === true) { logger.write('[ERROR] onMouseMove -> err = ' + err.stack) }
     }
   }
 
@@ -510,7 +510,7 @@ function newCanvas () {
 
       container = thisObject.topSpace.getContainer(point)
 
-      if (container !== undefined && container.isClickeable === true) {
+      if (container !== undefined && container.detectMouseOver === true) {
         container.eventHandler.raiseEvent('onMouseOver', point)
         return
       }
@@ -519,7 +519,7 @@ function newCanvas () {
 
       container = thisObject.bottomSpace.getContainer(point)
 
-      if (container !== undefined && container.isClickeable === true) {
+      if (container !== undefined && container.detectMouseOver === true) {
         container.eventHandler.raiseEvent('onMouseOver', point)
         return
       }
@@ -528,7 +528,7 @@ function newCanvas () {
 
       container = thisObject.panelsSpace.getContainer(point)
 
-      if (container !== undefined && container.isClickeable === true) {
+      if (container !== undefined && container.detectMouseOver === true) {
         container.eventHandler.raiseEvent('onMouseOver', point)
         return
       }
@@ -546,14 +546,14 @@ function newCanvas () {
 
            /* If it is not, then we check if it is over any of the existing containers at the Chart Space. */
 
-      container = thisObject.chartSpace.getContainer(point)
+      container = thisObject.chartSpace.getContainer(point, GET_CONTAINER_PURPOSE.MOUSE_OVER)
 
-      if (container !== undefined && container.isClickeable === true) {
+      if (container !== undefined && container.detectMouseOver === true) {
         container.eventHandler.raiseEvent('onMouseOver', point)
         return
       }
     } catch (err) {
-      if (ERROR_LOG === true) { logger.write('[ERROR] onMouseOver -> err = ' + err) }
+      if (ERROR_LOG === true) { logger.write('[ERROR] onMouseOver -> err = ' + err.stack) }
     }
   }
 
@@ -572,10 +572,12 @@ function newCanvas () {
         y: event.pageY - window.canvasApp.topMargin
       }
 
+      event.mousePosition = point
+
       let panelContainer = canvas.panelsSpace.getContainer({ x: point.x, y: point.y })
 
       if (panelContainer !== undefined && panelContainer.isWheelable === true) {
-        panelContainer.eventHandler.raiseEvent('Mouse Wheel', event.wheelDelta)
+        panelContainer.eventHandler.raiseEvent('Mouse Wheel', event)
         return false  // This instructs the browser not to take the event and scroll the page.
       }
 
@@ -592,17 +594,17 @@ function newCanvas () {
 
       let bottomContainer = canvas.bottomSpace.getContainer({ x: point.x, y: point.y })
 
-      if (bottomContainer !== undefined && bottomContainer.isWheeleable === true) {
-        bottomContainer.eventHandler.raiseEvent('Mouse Wheel', event.wheelDelta)
+      if (bottomContainer !== undefined && bottomContainer.isWheelable === true) {
+        bottomContainer.eventHandler.raiseEvent('Mouse Wheel', event)
         return false  // This instructs the browser not to take the event and scroll the page.
       }
 
            /* Finally we try the Chart Space. */
 
-      let chartContainer = canvas.chartSpace.getContainer({ x: point.x, y: point.y })
+      let chartContainer = canvas.chartSpace.getContainer({ x: point.x, y: point.y }, GET_CONTAINER_PURPOSE.MOUSE_WHEEL)
 
-      if (chartContainer !== undefined && chartContainer.isWheeleable === true) {
-        chartContainer.eventHandler.raiseEvent('Mouse Wheel', event.wheelDelta)
+      if (chartContainer !== undefined && chartContainer.isWheelable === true) {
+        chartContainer.eventHandler.raiseEvent('Mouse Wheel', event)
         return false  // This instructs the browser not to take the event and scroll the page.
       } else {
                /* If all the above fails, we fallback into applying zoom to the viewPort */
@@ -611,7 +613,7 @@ function newCanvas () {
         return false  // This instructs the browser not to take the event and scroll the page.
       }
     } catch (err) {
-      if (ERROR_LOG === true) { logger.write('[ERROR] onMouseWheel -> err = ' + err) }
+      if (ERROR_LOG === true) { logger.write('[ERROR] onMouseWheel -> err = ' + err.stack) }
     }
   }
 
@@ -678,7 +680,7 @@ function newCanvas () {
         dragVector.downY = dragVector.upY
       }
     } catch (err) {
-      if (ERROR_LOG === true) { logger.write('[ERROR] checkDrag -> err = ' + err) }
+      if (ERROR_LOG === true) { logger.write('[ERROR] checkDrag -> err = ' + err.stack) }
     }
   }
 }

CompetitionStorage.js

@@ -38,7 +38,7 @@ function newCompetitionStorage (pName) {
 
       thisObject.fileSequences = undefined
     } catch (err) {
-      if (ERROR_LOG === true) { logger.write('[ERROR] finalize -> err = ' + err) }
+      if (ERROR_LOG === true) { logger.write('[ERROR] finalize -> err = ' + err.stack) }
     }
   }
 
@@ -120,7 +120,7 @@ function newCompetitionStorage (pName) {
                 checkInitializeComplete()
               }
             } catch (err) {
-              if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onFileSequenceReady -> err = ' + err) }
+              if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onFileSequenceReady -> err = ' + err.stack) }
               callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE)
             }
           }
@@ -134,7 +134,7 @@ function newCompetitionStorage (pName) {
                 callBackFunction(GLOBAL.DEFAULT_OK_RESPONSE)
               }
             } catch (err) {
-              if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> checkInitializeComplete -> err = ' + err) }
+              if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> checkInitializeComplete -> err = ' + err.stack) }
               callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE)
             }
           }
@@ -147,7 +147,7 @@ function newCompetitionStorage (pName) {
         callBackFunction(GLOBAL.DEFAULT_OK_RESPONSE)
       }
     } catch (err) {
-      if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err = ' + err) }
+      if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err = ' + err.stack) }
       callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE)
     }
   }

Container.js

@@ -1,6 +1,6 @@
 
 function newContainer () {
-  var container = {
+  let thisObject = {
     frame: undefined,
     displacement: undefined,
     eventHandler: undefined,
@@ -9,24 +9,93 @@ function newContainer () {
     isClickeable: false,
     isWheelable: false,
     name: undefined,
-    initialize: initialize
+    initialize: initialize,
+    connectToParent: connectToParent,
+    isForThisPurpose: isForThisPurpose
   }
 
-  return container
+  let connectedToParentWidth = false
+  let connectedToParentHeight = false
 
-  function initialize () {
-    var frame = newFrame()
-    frame.initialize()
-    this.frame = frame
-    frame.container = container
+  return thisObject
 
-    var eventHandler = newEventHandler()
-    eventHandler.initialize()
-    eventHandler.name = container.name
-    this.eventHandler = eventHandler
+  function initialize (pName) {
+    thisObject.name = pName
 
-    var displacement = newDisplacement()
-    this.displacement = displacement
-    displacement.container = container
+    thisObject.frame = newFrame()
+    thisObject.frame.initialize()
+    thisObject.frame.containerName = pName
+    thisObject.frame.container = thisObject
+
+    thisObject.eventHandler = newEventHandler()
+    thisObject.eventHandler.initialize()
+    thisObject.eventHandler.name = pName
+
+    thisObject.displacement = newDisplacement()
+    thisObject.displacement.container = thisObject
+    thisObject.displacement.containerName = pName
+  }
+
+  function connectToParent (parentContainer, onWidth, onHeight) {
+    connectedToParentWidth = onWidth
+    connectedToParentHeight = onHeight
+
+    thisObject.displacement.parentDisplacement = parentContainer.displacement
+    thisObject.frame.parentFrame = parentContainer.frame
+    thisObject.parentContainer = parentContainer
+    thisObject.parentContainer.eventHandler.listenToEvent('Dimmensions Changed', onParentDimmensionsChanged)
+    thisObject.parentContainer.eventHandler.listenToEvent('onMouseOver', onMouseOver)
+
+    if (connectedToParentWidth) {
+      thisObject.frame.width = thisObject.parentContainer.frame.width
+    }
+    if (connectedToParentHeight) {
+      thisObject.frame.height = thisObject.parentContainer.frame.height
+    }
+  }
+
+  function onParentDimmensionsChanged (event) {
+    let dimmensionsChanged = false
+    if (connectedToParentWidth) {
+      thisObject.frame.width = thisObject.parentContainer.frame.width
+      dimmensionsChanged = true
+    }
+    if (connectedToParentHeight) {
+      thisObject.frame.height = thisObject.parentContainer.frame.height
+      dimmensionsChanged = true
+    }
+
+    if (dimmensionsChanged) {
+      thisObject.eventHandler.raiseEvent('Dimmensions Changed', event)
+    }
+  }
+
+  function onMouseOver (event) {
+    thisObject.eventHandler.raiseEvent('onMouseOver', event)
+  }
+
+  function isForThisPurpose (purpose) {
+    if (purpose !== undefined) {
+      switch (purpose) {
+        case GET_CONTAINER_PURPOSE.MOUSE_OVER:
+          if (thisObject.detectMouseOver === true) {
+            return true
+          }
+          break
+        case GET_CONTAINER_PURPOSE.MOUSE_WHEEL:
+          if (thisObject.isWheelable === true) {
+            return true
+          }
+          break
+        case GET_CONTAINER_PURPOSE.MOUSE_CLICK:
+          if (thisObject.isClickeable === true) {
+            return true
+          }
+          break
+        default: { return false }
+
+      }
+    }
+    return false
   }
 }

Dashboard.js

@@ -3,7 +3,7 @@ let canvas
 let markets
 let ecosystem = newEcosystem()
 let INITIAL_ZOOM_LEVEL = -26       // This is the zoom level at the view port in which the APP starts.
-let INITIAL_TIME_PERIOD = recalculatePeriod(INITIAL_ZOOM_LEVEL)  // This value will be overwritten at the viewPort.initialize if the user had a prevous session with this same browser.
+let INITIAL_TIME_PERIOD = recalculatePeriod(MIN_ZOOM_LEVEL)  // This value will be overwritten at the viewPort.initialize if the user had a prevous session with this same browser.
 let viewPort = newViewPort()
 
 function newDashboard () {
@@ -46,7 +46,7 @@ function newDashboard () {
         setTimeout(delayedStart, DEBUG_START_UP_DELAY)
       }
     } catch (err) {
-      if (ERROR_LOG === true) { logger.write('[ERROR] start -> err = ' + err) }
+      if (ERROR_LOG === true) { logger.write('[ERROR] start -> err = ' + err.stack) }
     }
   }
 
@@ -69,7 +69,7 @@ function newDashboard () {
       canvas = newCanvas()
       canvas.initialize()
     } catch (err) {
-      if (ERROR_LOG === true) { logger.write('[ERROR] delayedStart -> err = ' + err) }
+      if (ERROR_LOG === true) { logger.write('[ERROR] delayedStart -> err = ' + err.stack) }
     }
   }
 
@@ -79,7 +79,7 @@ function newDashboard () {
 
       canvas.topSpace.initialize()
     } catch (err) {
-      if (ERROR_LOG === true) { logger.write('[ERROR] userProfileChanged -> err = ' + err) }
+      if (ERROR_LOG === true) { logger.write('[ERROR] userProfileChanged -> err = ' + err.stack) }
     }
   }
 
@@ -94,7 +94,7 @@ function newDashboard () {
 
       viewPort.initialize()
     } catch (err) {
-      if (ERROR_LOG === true) { logger.write('[ERROR] browserResized -> err = ' + err) }
+      if (ERROR_LOG === true) { logger.write('[ERROR] browserResized -> err = ' + err.stack) }
     }
   }
 
@@ -227,7 +227,7 @@ function newDashboard () {
                         })
                         .catch(err => {
                           if (ERROR_LOG === true) { logger.write('[ERROR] loadImages -> getTeams -> Error fetching data from Teams Module.') }
-                          if (ERROR_LOG === true) { logger.write('[ERROR] loadImages -> getTeams -> err = ' + err) }
+                          if (ERROR_LOG === true) { logger.write('[ERROR] loadImages -> getTeams -> err = ' + err.stack) }
                           reject(err)
                         })
         })
@@ -261,10 +261,10 @@ function newDashboard () {
         callBack()
       }, err => {
         if (ERROR_LOG === true) { logger.write('[ERROR] loadImages -> Error fetching data from Teams Module.') }
-        if (ERROR_LOG === true) { logger.write('[ERROR] loadImages -> err = ' + err) }
+        if (ERROR_LOG === true) { logger.write('[ERROR] loadImages -> err = ' + err.stack) }
       })
     } catch (err) {
-      if (ERROR_LOG === true) { logger.write('[ERROR] loadImages -> err = ' + err) }
+      if (ERROR_LOG === true) { logger.write('[ERROR] loadImages -> err = ' + err.stack) }
     }
   }
 }

EventHandler.js

@@ -28,6 +28,10 @@ function newEventHandler () {
   }
 
   function stopListening (pEventType, pHandler) {
+    if (pHandler === undefined) {
+      pHandler = 'Anonymous Function'
+    }
+
     if (thisObject.name !== undefined && CONSOLE_LOG === true) {
       console.log('Event Handler named ' + thisObject.name + ' received a request to stop listening to an the event ' + pEventType + ' with this handler: ' + pHandler)
     }
@@ -37,14 +41,24 @@ function newEventHandler () {
       let eventType = record[0]
       let handler = record[1]
 
-      if (pEventType === eventType && pHandler.toString() === handler.toString()) {
-        eventHandlers.splice(i, 1)
+      if (pHandler === 'Anonymous Function') {
+        if (pEventType === eventType) {
+          eventHandlers.splice(i, 1)
 
-        if (thisObject.name !== undefined && CONSOLE_LOG === true) {
-          console.log('Evethandler found and deleted.')
+          if (thisObject.name !== undefined && CONSOLE_LOG === true) {
+            console.log('Evethandler found and deleted.')
+          }
+          return
         }
+      } else {
+        if (pEventType === eventType && pHandler.toString() === handler.toString()) {
+          eventHandlers.splice(i, 1)
 
-        return
+          if (thisObject.name !== undefined && CONSOLE_LOG === true) {
+            console.log('Evethandler found and deleted.')
+          }
+          return
+        }
       }
     }
   }

FloatingSpace/FloatingLayer.js

@@ -74,7 +74,7 @@ function newFloatingLayer () {
       visibleFloatingObjects = []
       dyingFloatingObjects = []
     } catch (err) {
-      if (ERROR_LOG === true) { logger.write('[ERROR] finalize -> err = ' + err) }
+      if (ERROR_LOG === true) { logger.write('[ERROR] finalize -> err = ' + err.stack) }
     }
   }
 

FloatingSpace/NoteSets.js

@@ -43,7 +43,7 @@ function newNoteSets () {
 
       callBackFunction(GLOBAL.CUSTOM_OK_RESPONSE)
     } catch (err) {
-      if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err = ' + err) }
+      if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err = ' + err.stack) }
       callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE)
     }
   }
@@ -296,11 +296,11 @@ function newNoteSets () {
 
           if (INFO_LOG === true) { logger.write('[INFO] createNoteSet -> onNotesChanged -> Add new Notes -> noteSet.floatingNotes.length = ' + noteSet.floatingNotes.length) }
         } catch (err) {
-          if (ERROR_LOG === true) { logger.write('[ERROR] createNoteSet -> onNotesChanged -> err = ' + err) }
+          if (ERROR_LOG === true) { logger.write('[ERROR] createNoteSet -> onNotesChanged -> err = ' + err.stack) }
         }
       }
     } catch (err) {
-      if (ERROR_LOG === true) { logger.write('[ERROR] createNoteSet -> err = ' + err) }
+      if (ERROR_LOG === true) { logger.write('[ERROR] createNoteSet -> err = ' + err.stack) }
       callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE)
     }
   }
@@ -330,7 +330,7 @@ function newNoteSets () {
         }
       }
     } catch (err) {
-      if (ERROR_LOG === true) { logger.write('[ERROR] destroyNoteSet -> err = ' + err) }
+      if (ERROR_LOG === true) { logger.write('[ERROR] destroyNoteSet -> err = ' + err.stack) }
     }
   }
 }

FloatingSpace/ProfileBalls.js

@@ -31,7 +31,7 @@ function newProfileBalls () {
 
       floatingLayer.finalize()
     } catch (err) {
-      if (ERROR_LOG === true) { logger.write('[ERROR] finalize -> err = ' + err) }
+      if (ERROR_LOG === true) { logger.write('[ERROR] finalize -> err = ' + err.stack) }
     }
   }
 
@@ -43,7 +43,7 @@ function newProfileBalls () {
 
       callBackFunction(GLOBAL.CUSTOM_OK_RESPONSE)
     } catch (err) {
-      if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err = ' + err) }
+      if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err = ' + err.stack) }
       callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE)
     }
   }

Frame.js

@@ -241,7 +241,7 @@ function newFrame () {
     return true
   }
 
-  function isThisPointHere (point, outsideViewPort) {
+  function isThisPointHere (point, outsideViewPort, dontTransform) {
   // The second parameter is usefull when you want to check a point that you already know is outside the viewport.
 
         /* We need not to modify the point received, so me make a copy of it. */
@@ -253,12 +253,13 @@ function newFrame () {
 
         /* The point received is on the screen coordinates system, which already has zoom and displacement applied. We need to remove the zoom and displacement
         in order to have the point on the containers coordinate system and be able to compare it with its dimmensions. */
-
-    if (outsideViewPort === true) {
-      checkPoint = this.container.displacement.undisplaceThisPoint(checkPoint)
-      checkPoint = this.container.frame.unframeThisPoint(checkPoint)
-    } else {
-      checkPoint = unTransformThisPoint(checkPoint, frame.container)
+    if (dontTransform === false || dontTransform === undefined) {
+      if (outsideViewPort === true) {
+        checkPoint = this.container.displacement.undisplaceThisPoint(checkPoint)
+        checkPoint = this.container.frame.unframeThisPoint(checkPoint)
+      } else {
+        checkPoint = unTransformThisPoint(checkPoint, frame.container)
+      }
     }
 
         /* Now we check if the resulting point is whin the current Frame. */

Globals.js

@@ -36,6 +36,13 @@ UI_FONT = {
 };
 
 FONT_ASPECT_RATIO = 0.45;
+const MIN_ZOOM_LEVEL = -28.25
+
+const GET_CONTAINER_PURPOSE = {
+  MOUSE_OVER: 1,
+  MOUSE_WHEEL: 2,
+  MOUSE_CLICK: 3
+}
 
 /* User Interface Panels */
 
@@ -43,7 +50,8 @@ UI_PANEL = {
     WIDTH: {
         SMALL: 100,
         NORMAL: 150,
-        LARGE: 350
+        LARGE: 250,
+        X_LARGE: 350
     },
     HEIGHT: {
         SMALL: 65,
@@ -171,8 +179,8 @@ const MAX_PLOTABLE_DATE = maxDate;
 We define here the size of the chartSpace. It has to bee enough big in order to accomodate all the charts we expect to display in this space.
 */
 
-const CHART_SPACE_WIDTH = browserCanvas.width * 1000;
-const CHART_SPACE_HEIGHT = browserCanvas.height * 100;
+const TIME_MACHINE_WIDTH = browserCanvas.width * 1000;
+const TIME_MACHINE_HEIGHT = browserCanvas.height * 100;
 
 function toRadians(angle) {
     return angle * (Math.PI / 180);

Panels/ProductsPanel.js

@@ -38,7 +38,7 @@
      exchange = pExchange
      market = pMarket
 
-     thisObject.container.name = exchange + ' ' + market.assetB + '/' + market.assetA + ' ' + 'Indicators'
+     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;
@@ -55,6 +55,16 @@
      panelTabButton.container.frame.parentFrame = thisObject.container.frame
      panelTabButton.initialize()
 
+     /* Get the current teams of the logged in user. */
+
+     let storedTeams = window.localStorage.getItem('userTeams')
+     let userTeams
+     let userTeam = {slug: ''}
+     if (storedTeams !== null && storedTeams !== undefined && storedTeams !== '') {
+       userTeams = JSON.parse(storedTeams)
+       userTeam = userTeams[0] // Currently we assume a user can be at only one team.
+     }
+
         /* First thing is to build the productCards array */
 
      let devTeams = ecosystem.getTeams()
@@ -66,6 +76,7 @@
          let bot = devTeam.bots[j]
 
          if (bot.type !== 'Indicator' && bot.cloneId === undefined) { continue }
+         if (bot.type === 'Indicator' && (devTeam.codeName !== 'AAMasters' && devTeam.codeName !== userTeam.slug)) { continue }
 
          if (bot.products !== undefined) {
            for (let k = 0; k < bot.products.length; k++) {
@@ -127,14 +138,15 @@
      isInitialized = true
    }
 
-   function onMouseWheel (pDelta) {
-     if (pDelta > 0) {
-       pDelta = -1
+   function onMouseWheel (event) {
+     delta = event.wheelDelta
+     if (delta > 0) {
+       delta = -1
      } else {
-       pDelta = 1
+       delta = 1
      }
 
-     firstVisibleCard = firstVisibleCard + pDelta
+     firstVisibleCard = firstVisibleCard + delta
 
      let availableSlots = visibleProductCards.length
 

PlottersManager.js

@@ -23,12 +23,8 @@ function newPlottersManager () {
     finalize: finalize
   }
 
-  let container = newContainer()
-  container.initialize()
-  thisObject.container = container
-
-  container.displacement.containerName = 'Plotter Manager'
-  container.frame.containerName = 'Plotter Manager'
+  thisObject.container = newContainer()
+  thisObject.container.initialize(MODULE_NAME)
 
   let initializationReady = false
 
@@ -94,7 +90,7 @@ function newPlottersManager () {
         competitionPlotters.splice(i, 1) // Delete item from array.
       }
     } catch (err) {
-      if (ERROR_LOG === true) { logger.write('[ERROR] finalize -> err = ' + err) }
+      if (ERROR_LOG === true) { logger.write('[ERROR] finalize -> err = ' + err.stack) }
       callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE)
     }
   }
@@ -115,36 +111,6 @@ function newPlottersManager () {
 
       initializeCompetitionPlotters(onCompetitionPlottersInitialized)
 
-      canvas.bottomSpace.chartAspectRatio.container.eventHandler.listenToEvent('Chart Aspect Ratio Changed', onAspectRatioChanged)
-
-      function onAspectRatioChanged (pAspectRatio) {
-        thisObject.container.frame.height = CHART_SPACE_HEIGHT * pAspectRatio.y
-
-                /* First the Product Plotters. */
-
-        for (let i = 0; i < productPlotters.length; i++) {
-          let productPlotter = productPlotters[i]
-          productPlotter.plotter.container.frame.width = thisObject.container.frame.width
-          productPlotter.plotter.container.frame.height = thisObject.container.frame.height
-
-          if (productPlotter.plotter.recalculateScale !== undefined) {
-            productPlotter.plotter.recalculateScale()
-          }
-        }
-
-                /* Then the competition plotters. */
-
-        for (let i = 0; i < competitionPlotters.length; i++) {
-          let competitionPlotter = competitionPlotters[i]
-          competitionPlotter.plotter.container.frame.width = thisObject.container.frame.width
-          competitionPlotter.plotter.container.frame.height = thisObject.container.frame.height
-
-          if (competitionPlotter.plotter.recalculateScale !== undefined) {
-            competitionPlotter.plotter.recalculateScale()
-          }
-        }
-      }
-
       function onCompetitionPlottersInitialized (err) {
         try {
           if (INFO_LOG === true) { logger.write('[INFO] initialize -> onCompetitionPlottersInitialized -> Entering function.') }
@@ -196,17 +162,17 @@ function newPlottersManager () {
                 }
               }
             } catch (err) {
-              if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onCompetitionPlottersInitialized -> onProductPlottersInitialized -> err = ' + err) }
+              if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onCompetitionPlottersInitialized -> onProductPlottersInitialized -> err = ' + err.stack) }
               callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE)
             }
           }
         } catch (err) {
-          if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onCompetitionPlottersInitialized -> err = ' + err) }
+          if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onCompetitionPlottersInitialized -> err = ' + err.stack) }
           callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE)
         }
       }
     } catch (err) {
-      if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err = ' + err) }
+      if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err = ' + err.stack) }
       callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE)
     }
   }
@@ -255,13 +221,7 @@ function newPlottersManager () {
 
           let plotter = getNewPlotter(competition.plotter.host, competition.plotter.codeName, competition.plotter.moduleName)
 
-          plotter.container.displacement.parentDisplacement = thisObject.container.displacement
-          plotter.container.frame.parentFrame = thisObject.container.frame
-
-          plotter.container.parentContainer = thisObject.container
-
-          plotter.container.frame.width = thisObject.container.frame.width * 1
-          plotter.container.frame.height = thisObject.container.frame.height * 1
+          plotter.container.connectToParent(thisObject.container, true, true)
 
           plotter.container.frame.position.x = thisObject.container.frame.width / 2 - plotter.container.frame.width / 2
           plotter.container.frame.position.y = thisObject.container.frame.height / 2 - plotter.container.frame.height / 2
@@ -339,17 +299,17 @@ function newPlottersManager () {
 
               callBack(GLOBAL.DEFAULT_OK_RESPONSE)
             } catch (err) {
-              if (ERROR_LOG === true) { logger.write('[ERROR] initializeCompetitionPlotters -> onCompetitionStorageInitialized -> onPlotterInizialized -> err = ' + err) }
+              if (ERROR_LOG === true) { logger.write('[ERROR] initializeCompetitionPlotters -> onCompetitionStorageInitialized -> onPlotterInizialized -> err = ' + err.stack) }
               callBack(GLOBAL.DEFAULT_FAIL_RESPONSE)
             }
           }
         } catch (err) {
-          if (ERROR_LOG === true) { logger.write('[ERROR] initializeCompetitionPlotters -> onCompetitionStorageInitialized -> err = ' + err) }
+          if (ERROR_LOG === true) { logger.write('[ERROR] initializeCompetitionPlotters -> onCompetitionStorageInitialized -> err = ' + err.stack) }
           callBack(GLOBAL.DEFAULT_FAIL_RESPONSE)
         }
       }
     } catch (err) {
-      if (ERROR_LOG === true) { logger.write('[ERROR] initializeCompetitionPlotters -> err = ' + err) }
+      if (ERROR_LOG === true) { logger.write('[ERROR] initializeCompetitionPlotters -> err = ' + err.stack) }
       callBack(GLOBAL.DEFAULT_FAIL_RESPONSE)
     }
   }
@@ -421,7 +381,7 @@ function newPlottersManager () {
         }
       }
     } catch (err) {
-      if (ERROR_LOG === true) { logger.write('[ERROR] initializeProductPlotters -> err = ' + err) }
+      if (ERROR_LOG === true) { logger.write('[ERROR] initializeProductPlotters -> err = ' + err.stack) }
       callBack(GLOBAL.DEFAULT_FAIL_RESPONSE)
     }
   }
@@ -503,13 +463,7 @@ function newPlottersManager () {
 
           let plotter = getNewPlotter(pProductCard.product.plotter.devTeam, pProductCard.product.plotter.codeName, pProductCard.product.plotter.moduleName)
 
-          plotter.container.displacement.parentDisplacement = thisObject.container.displacement
-          plotter.container.frame.parentFrame = thisObject.container.frame
-
-          plotter.container.parentContainer = thisObject.container
-
-          plotter.container.frame.width = thisObject.container.frame.width * 1
-          plotter.container.frame.height = thisObject.container.frame.height * 1
+          plotter.container.connectToParent(thisObject.container, true, true)
 
           plotter.container.frame.position.x = thisObject.container.frame.width / 2 - plotter.container.frame.width / 2
           plotter.container.frame.position.y = thisObject.container.frame.height / 2 - plotter.container.frame.height / 2
@@ -601,17 +555,17 @@ function newPlottersManager () {
 
               callBack(GLOBAL.DEFAULT_OK_RESPONSE)
             } catch (err) {
-              if (ERROR_LOG === true) { logger.write('[ERROR] initializeProductPlotter -> onProductStorageInitialized -> onPlotterInizialized -> err = ' + err) }
+              if (ERROR_LOG === true) { logger.write('[ERROR] initializeProductPlotter -> onProductStorageInitialized -> onPlotterInizialized -> err = ' + err.stack) }
               callBack(GLOBAL.DEFAULT_FAIL_RESPONSE)
             }
           }
         } catch (err) {
-          if (ERROR_LOG === true) { logger.write('[ERROR] initializeProductPlotter -> onProductStorageInitialized -> err = ' + err) }
+          if (ERROR_LOG === true) { logger.write('[ERROR] initializeProductPlotter -> onProductStorageInitialized -> err = ' + err.stack) }
           callBack(GLOBAL.DEFAULT_FAIL_RESPONSE)
         }
       }
     } catch (err) {
-      if (ERROR_LOG === true) { logger.write('[ERROR] initializeProductPlotter -> err = ' + err) }
+      if (ERROR_LOG === true) { logger.write('[ERROR] initializeProductPlotter -> err = ' + err.stack) }
       callBack(GLOBAL.DEFAULT_FAIL_RESPONSE)
     }
   }

ProductStorage.js

@@ -77,7 +77,7 @@ function newProductStorage (pName) {
 
       thisObject.fileSequences = undefined
     } catch (err) {
-      if (ERROR_LOG === true) { logger.write('[ERROR] finalize -> err = ' + err) }
+      if (ERROR_LOG === true) { logger.write('[ERROR] finalize -> err = ' + err.stack) }
     }
   }
 
@@ -202,7 +202,7 @@ function newProductStorage (pName) {
               checkInitializeComplete()
             }
           } catch (err) {
-            if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onMarketFileReady -> err = ' + err) }
+            if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onMarketFileReady -> err = ' + err.stack) }
             callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE)
           }
         }
@@ -257,7 +257,7 @@ function newProductStorage (pName) {
               checkInitializeComplete()
             }
           } catch (err) {
-            if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onDailyFileReady -> err = ' + err) }
+            if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onDailyFileReady -> err = ' + err.stack) }
             callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE)
           }
         }
@@ -309,7 +309,7 @@ function newProductStorage (pName) {
               checkInitializeComplete()
             }
           } catch (err) {
-            if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onSingleFileReady -> err = ' + err) }
+            if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onSingleFileReady -> err = ' + err.stack) }
             callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE)
           }
         }
@@ -361,7 +361,7 @@ function newProductStorage (pName) {
               checkInitializeComplete()
             }
           } catch (err) {
-            if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onFileSequenceReady -> err = ' + err) }
+            if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onFileSequenceReady -> err = ' + err.stack) }
             callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE)
           }
         }
@@ -378,13 +378,13 @@ function newProductStorage (pName) {
               callBackFunction(GLOBAL.DEFAULT_OK_RESPONSE)
             }
           } catch (err) {
-            if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> checkInitializeComplete -> err = ' + err) }
+            if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> checkInitializeComplete -> err = ' + err.stack) }
             callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE)
           }
         }
       }
     } catch (err) {
-      if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err = ' + err) }
+      if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err = ' + err.stack) }
       callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE)
     }
   }

Scales/ChartGrid.js

@@ -19,13 +19,10 @@
    container.isDraggeable = false
    container.isClickeable = true
 
-   let rigthScale
-
    return thisObject
 
    function initialize () {
-     rigthScale = newRigthScale()
-     rigthScale.initialize()
+
    }
 
    function getContainer (point) {
@@ -47,6 +44,8 @@
    }
 
    function draw (container, timeLineCoordinateSystem) {
+     return // not for now
+
      rightScaleBackground()
      leftScaleBackground()
 
@@ -56,7 +55,7 @@
 
      const basePeriod = {
        x: 8 * 60 * 60 * 1000,
-       y: timeLineCoordinateSystem.max.y / 1000 / canvas.bottomSpace.chartAspectRatio.aspectRatio.y
+       y: timeLineCoordinateSystem.max.y / 1000
      }
 
      let period = {
@@ -416,6 +415,8 @@
      }
 
      function plotGrid (period) {
+       return
+
        let periodWidth = period.x
        let periodHeight = period.y
 

Scales/RightScale.js

@@ -1,39 +1,78 @@
  function newRigthScale () {
+   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,
      draw: draw,
      getContainer: getContainer,
-     initialize: initialize
+     initialize: initialize,
+     heightPercentage: 100
    }
 
+   const HEIGHT_PERCENTAGE_DEFAULT_VALUE = 50
    const RIGHT_MARGIN = 50
+   const STEP_SIZE = 5
 
-   let container = newContainer()
-   container.initialize()
-   thisObject.container = container
+   thisObject.container = newContainer()
+   thisObject.container.initialize(MODULE_NAME)
 
    thisObject.container.frame.width = RIGHT_MARGIN
    thisObject.container.frame.height = viewPort.visibleArea.bottomRight.y - viewPort.visibleArea.topRight.y
 
-   container.frame.position.x = viewPort.visibleArea.bottomRight.x
-   container.frame.position.y = TOP_SPACE_HEIGHT
+   thisObject.container.frame.position.x = viewPort.visibleArea.bottomRight.x
+   thisObject.container.frame.position.y = TOP_SPACE_HEIGHT
 
-   container.isDraggeable = false
-   container.isClickeable = false
-   container.isWheeleable = true
+   thisObject.container.isDraggeable = false
+   thisObject.container.isClickeable = false
+   thisObject.container.isWheelable = true
+
+   let mouse = {
+     position: {
+       x: 0,
+       y: 0
+     }
+   }
 
    return thisObject
 
    function initialize () {
      thisObject.container.eventHandler.listenToEvent('Mouse Wheel', onMouseWheel)
+
+     thisObject.heightPercentage = window.localStorage.getItem(MODULE_NAME)
+     if (!thisObject.heightPercentage) {
+       thisObject.heightPercentage = HEIGHT_PERCENTAGE_DEFAULT_VALUE
+     } else {
+       thisObject.heightPercentage = JSON.parse(thisObject.heightPercentage)
+     }
+
+     let event = {}
+     event.heightPercentage = thisObject.heightPercentage
+     thisObject.container.eventHandler.raiseEvent('Height Percentage Changed', event)
+
+     thisObject.container.eventHandler.listenToEvent('onMouseOver', function (event) {
+       mouse.position.x = event.x
+       mouse.position.y = event.y
+     })
    }
 
-   function onMouseWheel (pDelta) {
-     if (pDelta < 0) {
-       pDelta = -0.1
+   function onMouseWheel (event) {
+     delta = event.wheelDelta
+     if (delta < 0) {
+       thisObject.heightPercentage = thisObject.heightPercentage - STEP_SIZE
+       if (thisObject.heightPercentage < STEP_SIZE) { thisObject.heightPercentage = STEP_SIZE }
      } else {
-       pDelta = 0.1
+       thisObject.heightPercentage = thisObject.heightPercentage + STEP_SIZE
+       if (thisObject.heightPercentage > 100) { thisObject.heightPercentage = 100 }
      }
+     event.heightPercentage = thisObject.heightPercentage
+     thisObject.container.eventHandler.raiseEvent('Height Percentage Changed', event)
+
+     window.localStorage.setItem(MODULE_NAME, thisObject.heightPercentage)
    }
 
    function getContainer (point) {
@@ -42,7 +81,7 @@
         /* First we check if this point is inside this object UI. */
 
      if (thisObject.container.frame.isThisPointHere(point, true) === true) {
-       return this.container
+       return thisObject.container
      } else {
             /* This point does not belong to this space. */
 
@@ -51,6 +90,55 @@
    }
 
    function draw () {
+     drawBackground()
+     drawLabel()
+   }
 
+   function drawBackground () {
+     const RIGHT_MARGIN = 50
+
+          /* We will paint some transparent background here. */
+
+     let opacity = '0.95'
+
+     browserCanvasContext.beginPath()
+
+     browserCanvasContext.rect(viewPort.visibleArea.topRight.x, viewPort.visibleArea.topRight.y, RIGHT_MARGIN, viewPort.visibleArea.bottomRight.y - viewPort.visibleArea.topRight.y)
+     browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + opacity + ')'
+
+     browserCanvasContext.closePath()
+
+     browserCanvasContext.fill()
+   }
+
+   function drawLabel () {
+     let label = '6000'
+     let fontSize = 10
+
+     let ratePoint = {
+       x: 0,
+       y: mouse.position.y
+     }
+
+     // getRateFromPoint(ratePoint)
+
+     let labelPoint = {
+       x: viewPort.visibleArea.topRight.x + 5,
+       y: mouse.position.y - fontSize / 2 + 1
+     }
+
+     let xOffset = 0// label.length / 2 * fontSize * FONT_ASPECT_RATIO
+
+     browserCanvasContext.beginPath()
+
+     browserCanvasContext.rect(labelPoint.x, labelPoint.y, xOffset * 2, fontSize)
+     browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', 1)'
+     browserCanvasContext.fill()
+
+     browserCanvasContext.closePath()
+
+     browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
+     browserCanvasContext.fillStyle = 'rgba(60, 60, 60, 0.50)'
+     browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y)
    }
  }

Scales/TimeScale.js

@@ -0,0 +1,84 @@
+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,
+    draw: draw,
+    getContainer: getContainer,
+    initialize: initialize,
+    lenghtPercentage: undefined
+  }
+
+  const LENGHT_PERCENTAGE_DEFAULT_VALUE = 50
+  const RIGHT_MARGIN = 50
+  const STEP_SIZE = 5
+
+  thisObject.container = newContainer()
+  thisObject.container.initialize(MODULE_NAME)
+
+  thisObject.container.frame.width = viewPort.visibleArea.bottomRight.x - viewPort.visibleArea.topLeft.x
+  thisObject.container.frame.height = 100
+
+  thisObject.container.frame.position.x = viewPort.visibleArea.bottomRight.x
+  thisObject.container.frame.position.y = TOP_SPACE_HEIGHT
+
+  thisObject.container.isDraggeable = false
+  thisObject.container.isClickeable = false
+  thisObject.container.isWheelable = true
+
+  return thisObject
+
+  function initialize () {
+    thisObject.container.eventHandler.listenToEvent('Mouse Wheel', onMouseWheel)
+
+    thisObject.lenghtPercentage = window.localStorage.getItem(MODULE_NAME)
+    if (!thisObject.lenghtPercentage) {
+      thisObject.lenghtPercentage = LENGHT_PERCENTAGE_DEFAULT_VALUE
+    } else {
+      thisObject.lenghtPercentage = JSON.parse(thisObject.lenghtPercentage)
+    }
+
+    let event = {}
+    event.lenghtPercentage = thisObject.lenghtPercentage
+    thisObject.container.eventHandler.raiseEvent('Lenght Percentage Changed', event)
+  }
+
+  function onMouseWheel (event) {
+    delta = event.wheelDelta
+    if (delta < 0) {
+      thisObject.lenghtPercentage = thisObject.lenghtPercentage - STEP_SIZE
+      if (thisObject.lenghtPercentage < STEP_SIZE) { thisObject.lenghtPercentage = STEP_SIZE }
+    } else {
+      thisObject.lenghtPercentage = thisObject.lenghtPercentage + STEP_SIZE
+      if (thisObject.lenghtPercentage > 100) { thisObject.lenghtPercentage = 100 }
+    }
+
+    event.lenghtPercentage = thisObject.lenghtPercentage
+    thisObject.container.eventHandler.raiseEvent('Lenght Percentage Changed', event)
+
+    window.localStorage.setItem(MODULE_NAME, thisObject.lenghtPercentage)
+  }
+
+  function getContainer (point) {
+    let container
+
+       /* First we check if this point is inside this object UI. */
+
+    if (thisObject.container.frame.isThisPointHere(point, undefined, true) === true) {
+      return thisObject.container
+    } else {
+           /* This point does not belong to this space. */
+
+      return undefined
+    }
+  }
+
+  function draw () {
+
+  }
+}

Scales/topScale.js

@@ -1,56 +0,0 @@
-function newRigthScale () {
-  let thisObject = {
-    container: undefined,
-    draw: draw,
-    getContainer: getContainer,
-    initialize: initialize
-  }
-
-  const RIGHT_MARGIN = 50
-
-  let container = newContainer()
-  container.initialize()
-  thisObject.container = container
-
-  thisObject.container.frame.width = RIGHT_MARGIN
-  thisObject.container.frame.height = viewPort.visibleArea.bottomRight.y - viewPort.visibleArea.topRight.y
-
-  container.frame.position.x = viewPort.visibleArea.bottomRight.x
-  container.frame.position.y = TOP_SPACE_HEIGHT
-
-  container.isDraggeable = false
-  container.isClickeable = false
-  container.isWheeleable = true
-
-  return thisObject
-
-  function initialize () {
-    thisObject.container.eventHandler.listenToEvent('Mouse Wheel', onMouseWheel)
-  }
-
-  function onMouseWheel (pDelta) {
-    if (pDelta < 0) {
-      pDelta = -0.1
-    } else {
-      pDelta = 0.1
-    }
-  }
-
-  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 () {
-
-  }
-}

Spaces/BottomSpace.js

@@ -2,7 +2,6 @@
 function newBottomSpace () {
   var thisObject = {
     deleteTradingHistory: undefined,
-    chartAspectRatio: undefined,
     container: undefined,
     draw: draw,
     getContainer: getContainer,     // returns the inner most container that holds the point received by parameter.
@@ -23,9 +22,6 @@ function newBottomSpace () {
     thisObject.deleteTradingHistory = newDeleteTradingHistory()
     thisObject.deleteTradingHistory.initialize()
 
-    thisObject.chartAspectRatio = newChartAspectRatio()
-    thisObject.chartAspectRatio.initialize()
-
     window.canvasApp.eventHandler.listenToEvent('Browser Resized', resize)
   }
 
@@ -43,11 +39,6 @@ function newBottomSpace () {
     container = thisObject.deleteTradingHistory.getContainer(point)
     if (container !== undefined) { return container }
 
-    container = thisObject.chartAspectRatio.getContainer(point)
-    if (container !== undefined) { return container }
-
-        /* The point does not belong to any inner container, so we return the current container. */
-
     return thisObject.container
   }
 
@@ -56,7 +47,6 @@ function newBottomSpace () {
 
     drawBackground()
     thisObject.deleteTradingHistory.draw()
-    thisObject.chartAspectRatio.draw()
   }
 
   function drawBackground () {

Spaces/ChartSpace.js

@@ -23,20 +23,10 @@ function newChartSpace () {
     finalize: finalize
   }
 
-  var container = newContainer()
-  container.initialize()
-  thisObject.container = container
+  thisObject.container = newContainer()
+  thisObject.container.initialize(MODULE_NAME)
 
-  thisObject.container.frame.width = CHART_SPACE_WIDTH
-  thisObject.container.frame.height = CHART_SPACE_HEIGHT
-
-  container.displacement.containerName = 'Chart Space'
-  container.frame.containerName = 'Chart Space'
-
-  container.frame.position.x = browserCanvas.width / 2 - thisObject.container.frame.width / 2
-  container.frame.position.y = browserCanvas.height / 2 - thisObject.container.frame.height / 2
-
-  container.isDraggeable = false
+  thisObject.container.isDraggeable = false
 
   return thisObject
 
@@ -49,7 +39,7 @@ function newChartSpace () {
         timeMachine.finalize()
       }
     } catch (err) {
-      if (ERROR_LOG === true) { logger.write('[ERROR] finalize -> err = ' + err) }
+      if (ERROR_LOG === true) { logger.write('[ERROR] finalize -> err = ' + err.stack) }
     }
   }
 
@@ -63,16 +53,10 @@ function newChartSpace () {
 
     var timeMachine = newTimeMachine()
 
-    timeMachine.container.displacement.parentDisplacement = this.container.displacement
-    timeMachine.container.frame.parentFrame = this.container.frame
-
-    timeMachine.container.parentContainer = this.container
+    // timeMachine.container.connectToParent(thisObject.container, true, true)
 
         /* We make the time machine a little bit smaller than the current space. */
 
-    timeMachine.container.frame.width = this.container.frame.width * 1
-    timeMachine.container.frame.height = this.container.frame.height * 1
-
     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
 
@@ -106,7 +90,7 @@ function newChartSpace () {
   }
 
   function draw () {
-    thisObject.container.frame.draw(false, false)
+    // thisObject.container.frame.draw(false, false)
 
     for (var i = 0; i < thisObject.timeMachines.length; i++) {
       var timeMachine = thisObject.timeMachines[i]
@@ -114,7 +98,7 @@ function newChartSpace () {
     }
   }
 
-  function getContainer (point) {
+  function getContainer (point, purpose) {
     if (INFO_LOG === true) { logger.write('[INFO] getContainer -> Entering function.') }
 
     let container
@@ -122,17 +106,13 @@ function newChartSpace () {
         /* Now we see which is the inner most container that has it */
 
     for (var i = 0; i < this.timeMachines.length; i++) {
-      container = this.timeMachines[i].getContainer(point)
-
+      container = this.timeMachines[i].getContainer(point, purpose)
       if (container !== undefined) {
-                /* We found an inner container which has the point. We return it. */
-
-        return container
+        if (container.isForThisPurpose(purpose)) {
+          return container
+        }
       }
     }
-
-        /* The point does not belong to any inner container, so we return the current container. */
-
     return this.container
   }
 }

Spaces/FloatingSpace.js

@@ -25,7 +25,7 @@ function newFloatingSpace () {
       thisObject.floatingLayer.finalize()
       thisObject.profileBalls.finalize()
     } catch (err) {
-      if (ERROR_LOG === true) { logger.write('[ERROR] finalize -> err = ' + err) }
+      if (ERROR_LOG === true) { logger.write('[ERROR] finalize -> err = ' + err.stack) }
     }
   }
 

Spaces/PanelsSpace.js

@@ -126,17 +126,17 @@ function newPanelsSpace () {
         so panels overlapping others are picked firt although they are drawn last.
 
         */
+    if (thisObject.panels !== undefined) {
+      for (var i = thisObject.panels.length - 1; i >= 0; i--) {
+        container = thisObject.panels[i].getContainer(point)
 
-    for (var i = thisObject.panels.length - 1; i >= 0; i--) {
-      container = thisObject.panels[i].getContainer(point)
+        if (container !== undefined) {
+              /* We found an inner container which has the point. We return it. */
 
-      if (container !== undefined) {
-                /* We found an inner container which has the point. We return it. */
-
-        return container
+          return container
+        }
       }
     }
-
         /* The point does not belong to any inner container, so we return the current container. */
 
     return thisObject.container

SplashScreen.js

@@ -100,7 +100,7 @@ function newSplashScreen () {
         /* Second the % of Advance. */
 
     let label = '' + Math.trunc(stepsInitializationCounter) + ' %'
-    stepsInitializationCounter = stepsInitializationCounter + 0.1
+    stepsInitializationCounter = stepsInitializationCounter + 0.5
 
     if (stepsInitializationCounter > 99) {
       splashScreenNeeded = false

TimeMachine.js

@@ -25,18 +25,24 @@ function newTimeMachine () {
     finalize: finalize
   }
 
-  let container = newContainer()
-  container.initialize()
-  thisObject.container = container
+  thisObject.container = newContainer()
+  thisObject.container.initialize(MODULE_NAME)
   thisObject.container.isDraggeable = false
+  thisObject.container.detectMouseOver = true
 
-  container.displacement.containerName = 'Time Machine'
-  container.frame.containerName = 'Time Machine'
+  thisObject.container.frame.width = TIME_MACHINE_WIDTH
+  thisObject.container.frame.height = TIME_MACHINE_HEIGHT
+
+  thisObject.container.frame.position.x = browserCanvas.width / 2 - TIME_MACHINE_WIDTH / 2
+  thisObject.container.frame.position.y = browserCanvas.height / 2 - TIME_MACHINE_HEIGHT / 2
 
   let controlPanelHandle             // We need this to destroy the Panel when this object is itself destroyed or no longer needs it...
-          // ... also to request a reference to the object for the cases we need it.
+                                    // ... also to request a reference to the object for the cases we need it.
   const SEPARATION_BETWEEN_TIMELINE_CHARTS = 1.5
 
+  let timeScale
+  let rigthScale
+
   return thisObject
 
   function finalize () {
@@ -48,32 +54,28 @@ function newTimeMachine () {
         chart.finalize()
       }
     } catch (err) {
-      if (ERROR_LOG === true) { logger.write('[ERROR] finalize -> err = ' + err) }
+      if (ERROR_LOG === true) { logger.write('[ERROR] finalize -> err = ' + err.stack) }
     }
   }
 
   function initialize (callBackFunction) {
     if (INFO_LOG === true) { logger.write('[INFO] initialize -> Entering function.') }
 
-        /* Each Time Machine has a Control Panel. */
+      /* Each Time Machine has a Control Panel. */
 
     let panelOwner = 'Global'
     controlPanelHandle = canvas.panelsSpace.createNewPanel('Time Control Panel', undefined, panelOwner)
     let controlPanel = canvas.panelsSpace.getPanel(controlPanelHandle, panelOwner)
 
-        /* First, we initialize the market that we are going to show first on screen. Later all the other markets will be initialized on the background. */
+      /* First, we initialize the market that we are going to show first on screen. Later all the other markets will be initialized on the background. */
 
     let position = 0 // This defines the position of each chart respect to each other.
 
     let timelineChart = newTimelineChart()
 
-    timelineChart.container.displacement.parentDisplacement = thisObject.container.displacement
-    timelineChart.container.frame.parentFrame = thisObject.container.frame
+    timelineChart.container.connectToParent(thisObject.container, true, true)
 
-    timelineChart.container.parentContainer = thisObject.container
-
-    timelineChart.container.frame.width = thisObject.container.frame.width * 1
-    timelineChart.container.frame.height = thisObject.container.frame.height * 1 * canvas.bottomSpace.chartAspectRatio.aspectRatio.y
+    timelineChart.container.frame.height = thisObject.container.frame.height
 
     timelineChart.container.frame.position.x = thisObject.container.frame.width / 2 - timelineChart.container.frame.width / 2
     timelineChart.container.frame.position.y = timelineChart.container.frame.height * SEPARATION_BETWEEN_TIMELINE_CHARTS * position
@@ -83,11 +85,7 @@ function newTimeMachine () {
     timelineChart.initialize(DEFAULT_EXCHANGE, DEFAULT_MARKET, onDefaultInitialized)
 
     function onDefaultInitialized (err) {
-      if (INFO_LOG === true) { logger.write('[INFO] initialize -> onDefaultInitialized -> Entering function.') }
-
       if (err.result !== GLOBAL.DEFAULT_OK_RESPONSE.result) {
-        if (INFO_LOG === true) { logger.write('[INFO] initialize -> onDefaultInitialized -> Initialization of the only market failed.') }
-
         callBackFunction(err)
         return
       }
@@ -97,6 +95,26 @@ function newTimeMachine () {
       controlPanel.container.eventHandler.listenToEvent('Datetime Changed', timelineChart.setDatetime, undefined)
       timelineChart.container.eventHandler.listenToEvent('Datetime Changed', controlPanel.setDatetime)
 
+      /* Each Time Machine has a Time Scale and a Right Scale. */
+
+      timeScale = newTimeScale()
+
+      timeScale.container.eventHandler.listenToEvent('Lenght Percentage Changed', function (event) {
+        thisObject.container.frame.width = TIME_MACHINE_WIDTH * event.lenghtPercentage / 100
+        thisObject.container.eventHandler.raiseEvent('Dimmensions Changed', event)
+      })
+
+      timeScale.initialize()
+
+      rigthScale = newRigthScale()
+
+      rigthScale.container.eventHandler.listenToEvent('Height Percentage Changed', function (event) {
+        thisObject.container.frame.height = TIME_MACHINE_HEIGHT * event.heightPercentage / 100
+        thisObject.container.eventHandler.raiseEvent('Dimmensions Changed', event)
+      })
+
+      rigthScale.initialize()
+
       initializeTheRest()
     }
 
@@ -131,13 +149,9 @@ function newTimeMachine () {
 
         let timelineChart = newTimelineChart()
 
-        timelineChart.container.displacement.parentDisplacement = thisObject.container.displacement
-        timelineChart.container.frame.parentFrame = thisObject.container.frame
+        timelineChart.container.connectToParent(thisObject.container, true, true)
 
-        timelineChart.container.parentContainer = thisObject.container
-
-        timelineChart.container.frame.width = thisObject.container.frame.width * 1
-        timelineChart.container.frame.height = thisObject.container.frame.height * 1 * canvas.bottomSpace.chartAspectRatio.aspectRatio.y
+        timelineChart.container.frame.height = thisObject.container.frame.height
 
         timelineChart.container.frame.position.x = thisObject.container.frame.width / 2 - timelineChart.container.frame.width / 2
         timelineChart.container.frame.position.y = timelineChart.container.frame.height * SEPARATION_BETWEEN_TIMELINE_CHARTS * position
@@ -172,33 +186,46 @@ function newTimeMachine () {
   }
 
   function draw () {
-    this.container.frame.draw(false, false)
+    // this.container.frame.draw(false, false)
 
     for (let i = 0; i < this.charts.length; i++) {
       let chart = this.charts[i]
       chart.draw()
     }
+
+    if (timeScale !== undefined) { timeScale.draw() }
+    if (rigthScale !== undefined) { rigthScale.draw() }
   }
 
-  function getContainer (point) {
-    if (INFO_LOG === true) { logger.write('[INFO] getContainer -> Entering function.') }
-
+  function getContainer (point, purpose) {
     let container
 
-        /* Now we see which is the inner most container that has it */
-
-    for (let i = 0; i < this.charts.length; i++) {
-      container = this.charts[i].getContainer(point)
-
+    if (timeScale !== undefined) {
+      container = timeScale.getContainer(point)
       if (container !== undefined) {
-                /* We found an inner container which has the point. We return it. */
-
-        return container
+        if (container.isForThisPurpose(purpose)) {
+          return container
+        }
       }
     }
 
-        /* The point does not belong to any inner container, so we return the current container. */
+    if (rigthScale !== undefined) {
+      container = rigthScale.getContainer(point)
+      if (container !== undefined) {
+        if (container.isForThisPurpose(purpose)) {
+          return container
+        }
+      }
+    }
 
+    for (let i = 0; i < this.charts.length; i++) {
+      container = this.charts[i].getContainer(point)
+      if (container !== undefined) {
+        if (container.isForThisPurpose(purpose)) {
+          return container
+        }
+      }
+    }
     return this.container
   }
 }

TimelineChart.js

@@ -21,14 +21,11 @@
      finalize: finalize
    }
 
-   let container = newContainer()
-   container.initialize()
-   thisObject.container = container
+   thisObject.container = newContainer()
+   thisObject.container.initialize(MODULE_NAME)
+   thisObject.container.detectMouseOver = true
 
-   container.displacement.containerName = 'Timeline Chart'
-   container.frame.containerName = 'Timeline Chart'
-
-   let chartGrid
+   // let chartGrid
    let breakpointsBar
 
    let initializationReady = false
@@ -59,7 +56,7 @@
 
        plotterManager.finalize()
      } catch (err) {
-       if (ERROR_LOG === true) { logger.write('[ERROR] finalize -> err = ' + err) }
+       if (ERROR_LOG === true) { logger.write('[ERROR] finalize -> err = ' + err.stack) }
      }
    }
 
@@ -67,6 +64,15 @@
      try {
        if (INFO_LOG === true) { logger.write('[INFO] initialize -> Entering function.') }
 
+       thisObject.container.eventHandler.listenToEvent('Dimmensions Changed', function (event) {
+         recalculateScale()
+         moveToUserPosition(thisObject.container, timeLineCoordinateSystem, false, false, event.mousePosition)
+       })
+
+       thisObject.container.eventHandler.listenToEvent('onMouseOver', function (event) {
+         saveUserPosition(thisObject.container, timeLineCoordinateSystem, event)
+       })
+
             /* We load the logow we will need for the background. */
        exchange = pExchange
        market = pMarket
@@ -110,16 +116,15 @@
        logoExchange.src = window.canvasApp.urlPrefix + 'Images/' + exchange + '-logo-background.png'
        logoAA.src = window.canvasApp.urlPrefix + 'Images/sa-logo-background.png'
 
-       chartGrid = newChartGrid()
-       chartGrid.initialize()
+       // chartGrid = newChartGrid()
+       // chartGrid.initialize()
 
        breakpointsBar = newBreakpointsBar()
-       breakpointsBar.initialize(container, timeLineCoordinateSystem)
+       breakpointsBar.initialize(thisObject.container, timeLineCoordinateSystem)
 
        recalculateScale()
 
-            // moveViewPortToCurrentDatetime();
-       moveToUserPosition(container, timeLineCoordinateSystem)
+       moveToUserPosition(thisObject.container, timeLineCoordinateSystem)
        timePeriod = INITIAL_TIME_PERIOD
        datetime = INITIAL_DATE
 
@@ -132,13 +137,7 @@
 
        plotterManager = newPlottersManager()
 
-       plotterManager.container.displacement.parentDisplacement = thisObject.container.displacement
-       plotterManager.container.frame.parentFrame = thisObject.container.frame
-
-       plotterManager.container.parentContainer = thisObject.container
-
-       plotterManager.container.frame.width = thisObject.container.frame.width
-       plotterManager.container.frame.height = thisObject.container.frame.height
+       plotterManager.container.connectToParent(thisObject.container, true, true)
 
        plotterManager.container.frame.position.x = 0
        plotterManager.container.frame.position.y = 0
@@ -160,15 +159,8 @@
          callBackFunction(GLOBAL.DEFAULT_OK_RESPONSE)
          return
        }
-
-       canvas.bottomSpace.chartAspectRatio.container.eventHandler.listenToEvent('Chart Aspect Ratio Changed', onAspectRatioChanged)
-
-       function onAspectRatioChanged (pAspectRatio) {
-         thisObject.container.frame.height = CHART_SPACE_HEIGHT * pAspectRatio.y
-         recalculateScale()
-       }
      } catch (err) {
-       if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err = ' + err) }
+       if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err = ' + err.stack) }
        callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE)
      }
    }
@@ -189,7 +181,7 @@
 
        recalculateCurrentDatetime()
 
-       saveUserPosition(thisObject.container, timeLineCoordinateSystem)
+       // saveUserPosition(thisObject.container, timeLineCoordinateSystem)
      }
    }
 
@@ -212,7 +204,7 @@
      if (initializationReady === true) {
        if (thisObject.container.frame.isInViewPort()) {
          recalculateCurrentDatetime()
-         saveUserPosition(thisObject.container, timeLineCoordinateSystem)
+         // saveUserPosition(thisObject.container, timeLineCoordinateSystem)
        }
      }
    }
@@ -252,7 +244,7 @@
 
      let container
 
-     container = chartGrid.getContainer(point)
+     // container = chartGrid.getContainer(point)
 
      if (container !== undefined) { return container }
 
@@ -322,7 +314,7 @@
      if (thisObject.container.frame.isInViewPort()) {
        drawChartsBackground()
 
-       chartGrid.draw(thisObject.container, timeLineCoordinateSystem)
+       // chartGrid.draw(thisObject.container, timeLineCoordinateSystem)
 
        plotterManager.draw()
 
@@ -469,34 +461,4 @@
        }
      }
    }
-
-   function moveViewPortToCurrentDatetime () {
-     if (INFO_LOG === true) { logger.write('[INFO] moveViewPortToCurrentDatetime -> Entering function.') }
-
-     let targetPoint = {
-       x: datetime.valueOf(),
-       y: 0  // we wont touch the y axis here.
-     }
-
-        /* Lets put this point in the coordinate system of the viewPort */
-
-     targetPoint = timeLineCoordinateSystem.transformThisPoint(targetPoint)
-     targetPoint = transformThisPoint(targetPoint, thisObject.container)
-
-        /* Lets get the point on the viewPort coordinate system of the center of the visible screen */
-
-     let center = {
-       x: (viewPort.visibleArea.bottomRight.x - viewPort.visibleArea.bottomLeft.x) / 2,
-       y: (viewPort.visibleArea.bottomRight.y - viewPort.visibleArea.topRight.y) / 2
-     }
-
-        /* Lets calculate the displace vector, from the point we want at the center, to the current center. */
-
-     let displaceVector = {
-       x: center.x - targetPoint.x,
-       y: 0
-     }
-
-     viewPort.displace(displaceVector)
-   }
  }

TopSpace/Login.js

@@ -1,5 +1,11 @@
 
 function newLogin () {
+  const MODULE_NAME = 'Login'
+  const INFO_LOG = false
+  const INTENSIVE_LOG = false
+  const ERROR_LOG = true
+  const logger = newWebDebugLog()
+
   let thisObject = {
     container: undefined,
     draw: draw,
@@ -27,337 +33,341 @@ function newLogin () {
   return thisObject
 
   async function initialize (pSharedStatus) {
-    const accessToken = window.localStorage.getItem('access_token')
-    let user = window.localStorage.getItem('user')
+    try {
+      const accessToken = window.localStorage.getItem('access_token')
+      let user = window.localStorage.getItem('user')
 
-    sharedStatus = pSharedStatus
+      sharedStatus = pSharedStatus
 
-    if (user === null) {
-            // if there is no user that means that we are logged off, which means it is time to clean the local storage of things from the last log in.
+      if (user === null) {
+              // if there is no user that means that we are logged off, which means it is time to clean the local storage of things from the last log in.
 
-      window.localStorage.removeItem('loggedInUser')
-      window.localStorage.removeItem('sessionToken')
-      return
-    }
+        window.localStorage.removeItem('loggedInUser')
+        window.localStorage.removeItem('sessionToken')
+        return
+      }
 
-    user = JSON.parse(user)
+      user = JSON.parse(user)
 
-    const authId = user.authId
+      const authId = user.authId
 
-    let sessionToken
+      let sessionToken
 
-    const apolloClient = new Apollo.lib.ApolloClient({
-      networkInterface: Apollo.lib.createNetworkInterface({
-        uri: window.canvasApp.graphQL.masterAppApiUrl,
-        transportBatching: true
-      }),
-      connectToDevTools: true
-    })
+      const apolloClient = new Apollo.lib.ApolloClient({
+        networkInterface: Apollo.lib.createNetworkInterface({
+          uri: window.canvasApp.graphQL.masterAppApiUrl,
+          transportBatching: true
+        }),
+        connectToDevTools: true
+      })
 
-    const USERS_QUERY = Apollo.gql`
-            query($authId: String){
-                users_UserByAuthId (authId: $authId){
-                    id
-                    referrerId
-                    alias
-                    firstName
-                    middleName
-                    lastName
-                    bio
-                    email
-                    emailVerified
-                    isDeveloper
-                    isDataAnalyst
-                    isTrader
-                    avatarHandle
-                    avatarChangeDate
-                    sessionToken
-                    role {
-                    id
-                    }
-                }
+      const USERS_QUERY = Apollo.gql`
+              query($authId: String){
+                  users_UserByAuthId (authId: $authId){
+                      id
+                      referrerId
+                      alias
+                      firstName
+                      middleName
+                      lastName
+                      bio
+                      email
+                      emailVerified
+                      isDeveloper
+                      isDataAnalyst
+                      isTrader
+                      avatarHandle
+                      avatarChangeDate
+                      sessionToken
+                      role {
+                      id
+                      }
+                  }
+              }
+              `
+      const getUser = () => {
+        return new Promise((resolve, reject) => {
+          apolloClient.query({
+            query: USERS_QUERY,
+            variables: {
+              authId: authId
             }
-            `
-    const getUser = () => {
-      return new Promise((resolve, reject) => {
-        apolloClient.query({
-          query: USERS_QUERY,
-          variables: {
-            authId: authId
+          })
+                      .then(response => {
+                        sessionToken = response.data.users_UserByAuthId.sessionToken
+
+                        window.localStorage.setItem('loggedInUser', JSON.stringify(response.data.users_UserByAuthId))
+                        resolve({ user: response.data.users_UserByAuthId})
+                      })
+                      .catch(error => {
+                        console.log('apolloClient error getting user query', error)
+                        reject(error)
+                      })
+        })
+      }
+
+      /* Getting all Teams */
+
+      const networkInterfaceTeams = Apollo.lib.createNetworkInterface({
+        uri: window.canvasApp.graphQL.masterAppApiUrl
+      })
+
+      networkInterfaceTeams.use([{
+        applyMiddleware (req, next) {
+          req.options.headers = {
+            authorization: `Bearer ${accessToken}`
           }
-        })
-                    .then(response => {
-                      sessionToken = response.data.users_UserByAuthId.sessionToken
-
-                      window.localStorage.setItem('loggedInUser', JSON.stringify(response.data.users_UserByAuthId))
-                      resolve({ user: response.data.users_UserByAuthId})
-                    })
-                    .catch(error => {
-                      console.log('apolloClient error getting user query', error)
-                      reject(error)
-                    })
-      })
-    }
-
-    /* Getting all Teams */
-
-    const networkInterfaceTeams = Apollo.lib.createNetworkInterface({
-      uri: window.canvasApp.graphQL.masterAppApiUrl
-    })
-
-    networkInterfaceTeams.use([{
-      applyMiddleware (req, next) {
-        req.options.headers = {
-          authorization: `Bearer ${accessToken}`
+          next()
         }
-        next()
-      }
-    }])
+      }])
 
-    const apolloClientTeams = new Apollo.lib.ApolloClient({
-      networkInterface: networkInterfaceTeams,
-      connectToDevTools: true
-    })
-
-    const TEAM_BY_OWNER_QUERY = Apollo.gql`
-            query teamsByOwnerQuery {
-                teams_TeamsByOwner {
-                    id
-                    name
-                    slug
-                    profile {
-                    avatar
-                    banner
-                    description
-                    motto
-                    updatedAt
-                    }
-                    members {
-                    member {
-                        alias
-                    }
-                    }
-                    fb {
-                    id
-                    name
-                    slug
-                    avatar
-                    kind
-                    status {
-                        status
-                        reason
-                        createdAt
-                    }
-                    }
-                }
-            }
-        `
-
-    const getTeamByOwner = () => {
-      return new Promise((resolve, reject) => {
-        apolloClientTeams.query({
-          query: TEAM_BY_OWNER_QUERY
-        })
-            .then(response => {
-              window.localStorage.setItem('userTeams', JSON.stringify(response.data.teams_TeamsByOwner))
-              resolve({ teams: response.data.teams_TeamsByOwner})
-            })
-            .catch(error => {
-              console.log('apolloClient error getting user teams', error)
-              reject(error)
-            })
+      const apolloClientTeams = new Apollo.lib.ApolloClient({
+        networkInterface: networkInterfaceTeams,
+        connectToDevTools: true
       })
-    }
 
-      /* Gettings All Events */
-
-    const networkInterfaceEvents = Apollo.lib.createNetworkInterface({
-      uri: window.canvasApp.graphQL.masterAppApiUrl
-    })
-
-    const apolloClientEvents = new Apollo.lib.ApolloClient({
-      networkInterface: networkInterfaceEvents,
-      connectToDevTools: true,
-      addTypename: false
-    })
-
-    const EVENTS_QUERY = Apollo.gql`
-        query events($maxStartDate: Int, $minEndDate: Int){
-            events_Events(maxStartDate: $maxStartDate, minEndDate: $minEndDate){
-                id
-                title
-                startDatetime
-                endDatetime
-                participants{
-                    clone{
-                        id
-                        team{
-                            slug
-                        }
-                        bot{
-                            slug
-                        }
-                    }
-                }
-            }
-        }
-    `
-
-    const getCurrentEvents = () => {
-      var d = new Date()
-      var nowSeconds = Math.round(d.getTime() / 1000)
-      var twoWeeksAgoSeconds = nowSeconds - 1209600
-      return new Promise((resolve, reject) => {
-        apolloClientEvents.query({
-          query: EVENTS_QUERY,
-          variables: { maxStartDate: nowSeconds, minEndDate: twoWeeksAgoSeconds }
-        })
-            .then(response => {
-              window.localStorage.setItem('currentEvents', JSON.stringify(response.data.events_Events))
-              currentEvent = window.localStorage.getItem('currentEventObject')
-              if (currentEvent === null || currentEvent === '[]' || currentEvent === '') {
-                sharedStatus.currentEventIndex = -1
-              } else {
-                currentEvent = JSON.parse(currentEvent)
-                sharedStatus.currentEventIndex = response.data.events_Events.findIndex(function (element) {
-                  return element.id == currentEvent.id
-                })
+      const TEAM_BY_OWNER_QUERY = Apollo.gql`
+              query teamsByOwnerQuery {
+                  teams_TeamsByOwner {
+                      id
+                      name
+                      slug
+                      profile {
+                      avatar
+                      banner
+                      description
+                      motto
+                      updatedAt
+                      }
+                      members {
+                      member {
+                          alias
+                      }
+                      }
+                      fb {
+                      id
+                      name
+                      slug
+                      avatar
+                      kind
+                      status {
+                          status
+                          reason
+                          createdAt
+                      }
+                      }
+                  }
               }
-              resolve({ currentEvents: response.data.events_Events})
-            })
-            .catch(error => {
-              console.log('apolloClient error getting current events', error)
-              reject(error)
-            })
-      })
-    }
+          `
 
-    /* Getting all Clones */
-
-    const networkInterfaceClones = Apollo.lib.createNetworkInterface({
-      uri: window.canvasApp.graphQL.masterAppApiUrl
-    })
-
-    networkInterfaceClones.use([{
-      applyMiddleware (req, next) {
-        req.options.headers = {
-          authorization: `Bearer ${accessToken}`
-        }
-        next()
+      const getTeamByOwner = () => {
+        return new Promise((resolve, reject) => {
+          apolloClientTeams.query({
+            query: TEAM_BY_OWNER_QUERY
+          })
+              .then(response => {
+                window.localStorage.setItem('userTeams', JSON.stringify(response.data.teams_TeamsByOwner))
+                resolve({ teams: response.data.teams_TeamsByOwner})
+              })
+              .catch(error => {
+                console.log('apolloClient error getting user teams', error)
+                reject(error)
+              })
+        })
       }
-    }])
 
-    const apolloClientClones = new Apollo.lib.ApolloClient({
-      networkInterface: networkInterfaceClones,
-      connectToDevTools: true
-    })
+        /* Gettings All Events */
 
-    const CLONES_QUERY = Apollo.gql`
-    query Operations_Clones{
-            operations_Clones {
+      const networkInterfaceEvents = Apollo.lib.createNetworkInterface({
+        uri: window.canvasApp.graphQL.masterAppApiUrl
+      })
+
+      const apolloClientEvents = new Apollo.lib.ApolloClient({
+        networkInterface: networkInterfaceEvents,
+        connectToDevTools: true,
+        addTypename: false
+      })
+
+      const EVENTS_QUERY = Apollo.gql`
+          query events($maxStartDate: Int, $minEndDate: Int){
+              events_Events(maxStartDate: $maxStartDate, minEndDate: $minEndDate){
                   id
-                  authId
-                  teamId
-                  botId
-                  mode
-                  resumeExecution
-                  beginDatetime
+                  title
+                  startDatetime
                   endDatetime
-                  waitTime
-                  state
-                  stateDatetime
-                  createDatetime
-                  lastLogs
-                  runAsTeam
-                  summaryDate
-                  buyAverage
-                  sellAverage
-                  marketRate
-                  combinedProfitsA
-                  combinedProfitsB
-                  assetA
-                  assetB
-                  botType
-                  teamName
-                  botName
-                  botAvatar
-                  teamAvatar
-                  processName
-                  keyId
-                  botSlug
+                  participants{
+                      clone{
+                          id
+                          team{
+                              slug
+                          }
+                          bot{
+                              slug
+                          }
+                      }
                   }
-                }
-        `
-
-    const getClones = () => {
-      return new Promise((resolve, reject) => {
-        apolloClientClones.query({
-          query: CLONES_QUERY
-        })
-            .then(response => {
-              window.localStorage.setItem('userClones', JSON.stringify(response.data.operations_Clones))
-              let clones = response.data.operations_Clones
-              for (let i = 0; i < clones.length; i++) {
-                let clone = clones[i]
-                if (clone.botType === 'Trading') {
-                  let teamSlug = clone.teamName.toLowerCase()
-                  teamSlug = teamSlug.replace(' ', '-')
-                  let devTeam = ecosystem.getTeam(teamSlug)
-                  let bot = ecosystem.getBot(devTeam, clone.botSlug)
-                  if (bot !== undefined) {
-                    bot.cloneId = clone.id
-                  }
-                }
               }
+          }
+      `
 
-              resolve({ clones: response.data.operations_Clones})
-            })
-            .catch(error => {
-              console.log('apolloClient error getting user clones', error)
-              reject(error)
-            })
-      })
-    }
-
-        // To avoid race conditions, add asynchronous fetches to array
-    let fetchDataPromises = []
-
-    fetchDataPromises.push(getUser(), getTeamByOwner(), getCurrentEvents(), getClones(), authenticateUser())
-
-        // 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)
-    })
-
-    thisObject.container.eventHandler.listenToEvent('onMouseClick', onClick)
-
-    async function authenticateUser () {
-      if (sessionToken === undefined) { sessionToken = '' }
-
-      let path = window.canvasApp.urlPrefix + 'AABrowserAPI/authenticateUser/' + sessionToken
-
-      return new Promise(
-                function (resolve, reject) {
-                  callServer(undefined, path, (result) => {
-                    let responseFromServer = JSON.parse(result)
-
-                    err = responseFromServer.err
-
-                    if (err.result !== GLOBAL.DEFAULT_OK_RESPONSE.result) {
-                      console.log('Please make sure you create a new team!')
-                      reject(err)
-                    }
-
-                    window.USER_PROFILE = responseFromServer.userProfile
-                    window.localStorage.setItem('sessionToken', sessionToken)
-
-                    currentLabel = 'Logged In'
-                    resolve()
+      const getCurrentEvents = () => {
+        var d = new Date()
+        var nowSeconds = Math.round(d.getTime() / 1000)
+        var twoWeeksAgoSeconds = nowSeconds - 1209600
+        return new Promise((resolve, reject) => {
+          apolloClientEvents.query({
+            query: EVENTS_QUERY,
+            variables: { maxStartDate: nowSeconds, minEndDate: twoWeeksAgoSeconds }
+          })
+              .then(response => {
+                window.localStorage.setItem('currentEvents', JSON.stringify(response.data.events_Events))
+                currentEvent = window.localStorage.getItem('currentEventObject')
+                if (currentEvent === null || currentEvent === '[]' || currentEvent === '') {
+                  sharedStatus.currentEventIndex = -1
+                } else {
+                  currentEvent = JSON.parse(currentEvent)
+                  sharedStatus.currentEventIndex = response.data.events_Events.findIndex(function (element) {
+                    return element.id == currentEvent.id
                   })
                 }
-              )
+                resolve({ currentEvents: response.data.events_Events})
+              })
+              .catch(error => {
+                console.log('apolloClient error getting current events', error)
+                reject(error)
+              })
+        })
+      }
+
+      /* Getting all Clones */
+
+      const networkInterfaceClones = Apollo.lib.createNetworkInterface({
+        uri: window.canvasApp.graphQL.masterAppApiUrl
+      })
+
+      networkInterfaceClones.use([{
+        applyMiddleware (req, next) {
+          req.options.headers = {
+            authorization: `Bearer ${accessToken}`
+          }
+          next()
+        }
+      }])
+
+      const apolloClientClones = new Apollo.lib.ApolloClient({
+        networkInterface: networkInterfaceClones,
+        connectToDevTools: true
+      })
+
+      const CLONES_QUERY = Apollo.gql`
+      query Operations_Clones{
+              operations_Clones {
+                    id
+                    authId
+                    teamId
+                    botId
+                    mode
+                    resumeExecution
+                    beginDatetime
+                    endDatetime
+                    waitTime
+                    state
+                    stateDatetime
+                    createDatetime
+                    lastLogs
+                    runAsTeam
+                    summaryDate
+                    buyAverage
+                    sellAverage
+                    marketRate
+                    combinedProfitsA
+                    combinedProfitsB
+                    assetA
+                    assetB
+                    botType
+                    teamName
+                    botName
+                    botAvatar
+                    teamAvatar
+                    processName
+                    keyId
+                    botSlug
+                    }
+                  }
+          `
+
+      const getClones = () => {
+        return new Promise((resolve, reject) => {
+          apolloClientClones.query({
+            query: CLONES_QUERY
+          })
+              .then(response => {
+                window.localStorage.setItem('userClones', JSON.stringify(response.data.operations_Clones))
+                let clones = response.data.operations_Clones
+                for (let i = 0; i < clones.length; i++) {
+                  let clone = clones[i]
+                  if (clone.botType === 'Trading') {
+                    let teamSlug = clone.teamName.toLowerCase()
+                    teamSlug = teamSlug.replace(' ', '-')
+                    let devTeam = ecosystem.getTeam(teamSlug)
+                    let bot = ecosystem.getBot(devTeam, clone.botSlug)
+                    if (bot !== undefined) {
+                      bot.cloneId = clone.id
+                    }
+                  }
+                }
+
+                resolve({ clones: response.data.operations_Clones})
+              })
+              .catch(error => {
+                console.log('apolloClient error getting user clones', error)
+                reject(error)
+              })
+        })
+      }
+
+          // To avoid race conditions, add asynchronous fetches to array
+      let fetchDataPromises = []
+
+      fetchDataPromises.push(getUser(), getTeamByOwner(), getCurrentEvents(), getClones(), authenticateUser())
+
+          // 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)
+      })
+
+      thisObject.container.eventHandler.listenToEvent('onMouseClick', onClick)
+
+      async function authenticateUser () {
+        if (sessionToken === undefined) { sessionToken = '' }
+
+        let path = window.canvasApp.urlPrefix + 'AABrowserAPI/authenticateUser/' + sessionToken
+
+        return new Promise(
+                  function (resolve, reject) {
+                    callServer(undefined, path, (result) => {
+                      let responseFromServer = JSON.parse(result)
+
+                      err = responseFromServer.err
+
+                      if (err.result !== GLOBAL.DEFAULT_OK_RESPONSE.result) {
+                        console.log('Please make sure you create a new team!')
+                        reject(err)
+                      }
+
+                      window.USER_PROFILE = responseFromServer.userProfile
+                      window.localStorage.setItem('sessionToken', sessionToken)
+
+                      currentLabel = 'Logged In'
+                      resolve()
+                    })
+                  }
+                )
+      }
+    } catch (err) {
+      if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err = ' + err.stack) }
     }
   }
 

Utilities.js

@@ -59,15 +59,17 @@ function getMilisecondsFromPoint (point, container, timeLineCoordinateSystem) {
   return point.x
 }
 
-function saveUserPosition (container, timeLineCoordinateSystem) {
-  let centerPoint = {
-    x: (viewPort.visibleArea.bottomRight.x - viewPort.visibleArea.topLeft.x) / 2,
-    y: (viewPort.visibleArea.bottomRight.y - viewPort.visibleArea.topLeft.y) / 2
+function saveUserPosition (container, timeLineCoordinateSystem, position) {
+  if (position === undefined) {
+    position = {
+      x: (viewPort.visibleArea.bottomRight.x - viewPort.visibleArea.topLeft.x) / 2,
+      y: (viewPort.visibleArea.bottomRight.y - viewPort.visibleArea.topLeft.y) / 2
+    }
   }
 
   let userPosition = {
-    date: getDateFromPoint(centerPoint, container, timeLineCoordinateSystem),
-    rate: getRateFromPoint(centerPoint, container, timeLineCoordinateSystem),
+    date: getDateFromPoint(position, container, timeLineCoordinateSystem),
+    rate: getRateFromPoint(position, container, timeLineCoordinateSystem),
     market: DEFAULT_MARKET,
     zoom: viewPort.zoomTargetLevel
   }
@@ -75,7 +77,7 @@ function saveUserPosition (container, timeLineCoordinateSystem) {
   window.localStorage.setItem('userPosition', JSON.stringify(userPosition))
 }
 
-function moveToUserPosition (container, timeLineCoordinateSystem) {
+function getUserPosition (timeLineCoordinateSystem) {
   let savedPosition = window.localStorage.getItem('userPosition')
   let userPosition
 
@@ -90,11 +92,17 @@ function moveToUserPosition (container, timeLineCoordinateSystem) {
     userPosition = JSON.parse(savedPosition)
   }
 
-  let centerPoint = {
-    x: (viewPort.visibleArea.bottomRight.x - viewPort.visibleArea.topLeft.x) / 2,
-    y: (viewPort.visibleArea.bottomRight.y - viewPort.visibleArea.topLeft.y) / 2
+  userPosition.point = {
+    x: (new Date(userPosition.date)).valueOf(),
+    y: userPosition.rate
   }
 
+  return userPosition
+}
+
+function moveToUserPosition (container, timeLineCoordinateSystem, ignoreX, ignoreY, center) {
+  let userPosition = getUserPosition(timeLineCoordinateSystem)
+
   viewPort.newZoomLevel(userPosition.zoom)
   INITIAL_TIME_PERIOD = recalculatePeriod(userPosition.zoom)
   INITIAL_DATE = new Date(userPosition.date)
@@ -104,11 +112,24 @@ function moveToUserPosition (container, timeLineCoordinateSystem) {
     y: userPosition.rate
   }
 
-    /* Put this point in the coordinate system of the viewPort */
+    /* Put this po int in the coordinate system of the viewPort */
 
   targetPoint = timeLineCoordinateSystem.transformThisPoint(targetPoint)
   targetPoint = transformThisPoint(targetPoint, container)
 
+  let centerPoint
+  if (center !== undefined) {
+    centerPoint = {
+      x: center.x,
+      y: center.y
+    }
+  } else {
+    centerPoint = {
+      x: (viewPort.visibleArea.bottomRight.x - viewPort.visibleArea.topLeft.x) / 2,
+      y: (viewPort.visibleArea.bottomRight.y - viewPort.visibleArea.topLeft.y) / 2
+    }
+  }
+
     /* Lets calculate the displace vector, from the point we want at the center, to the current center. */
 
   let displaceVector = {
@@ -116,6 +137,9 @@ function moveToUserPosition (container, timeLineCoordinateSystem) {
     y: centerPoint.y - targetPoint.y
   }
 
+  if (ignoreX) { displaceVector.x = 0 }
+  if (ignoreY) { displaceVector.y = 0 }
+
   viewPort.displace(displaceVector)
 }
 
@@ -126,3 +150,4 @@ function removeTime (datetime) {
 
   return dateOnly
 }
+

ViewPort.js

@@ -7,7 +7,6 @@ function newViewPort () {
   const BOTTOM_MARGIN = 15 + BOTTOM_SPACE_HEIGHT
   const LEFT_MARGIN = 50
   const RIGHT_MARGIN = 50
-  const MIN_ZOOM_LEVEL = -28.25
 
   let thisObject = {
     visibleArea: undefined,
@@ -15,6 +14,7 @@ function newViewPort () {
     zoomTargetLevel: undefined,
     zoomLevel: undefined,
     mousePosition: undefined,
+    getDisplacement: getDisplacement,
     newZoomLevel: newZoomLevel,
     applyZoom: applyZoom,
     isMinZoom: isMinZoom,
@@ -33,7 +33,7 @@ function newViewPort () {
 
   let increment = 0.035
 
-  var offset = {
+  let offset = {
     x: 0,
     y: 0
   }
@@ -66,6 +66,14 @@ function newViewPort () {
     }
   }
 
+  function getDisplacement () {
+    let displacement = {
+      x: offset.x,
+      y: offset.y
+    }
+    return displacement
+  }
+
   function raiseEvents () {
     let event = {
       newOffset: offset
@@ -386,4 +394,3 @@ function newViewPort () {
     browserCanvasContext.stroke()
   }
 }
-