timeScale working again

ChartsSpace/TimeMachine.js

@@ -16,6 +16,8 @@ function newTimeMachine () {
 
   let thisObject = {
     container: undefined,
+    timeScale: undefined,
+    rateScale: undefined,
     charts: [],
     physics: physics,
     drawBackground: drawBackground,
@@ -40,11 +42,15 @@ function newTimeMachine () {
                                    // ... also to request a reference to the object for the cases we need it.
   const SEPARATION_BETWEEN_TIMELINE_CHARTS = 1.5
 
-  let timeScale
-  let rateScale
-
   let timeLineCoordinateSystem = newTimeLineCoordinateSystem()
 
+  let mouse = {
+    position: {
+      x: 0,
+      y: 0
+    }
+  }
+
   return thisObject
 
   function finalize () {
@@ -52,6 +58,14 @@ function newTimeMachine () {
       let chart = thisObject.charts[i]
       chart.finalize()
     }
+
+    thisObject.container.finalize()
+    thisObject.container = undefined
+
+    thisObject.timeScale.finalize()
+    thisObject.timeScale = undefined
+    thisObject.rateScale.finalize()
+    thisObject.rateScale = undefined
   }
 
   function initialize (callBackFunction) {
@@ -97,27 +111,39 @@ function newTimeMachine () {
 
      /* Each Time Machine has a Time Scale and a Right Scale. */
 
-      timeScale = newTimeScale()
-      timeScale.container.connectToParent(thisObject.container, false, false, false, true, true, true)
-      timeScale.container.eventHandler.listenToEvent('Lenght Percentage Changed', function (event) {
+      thisObject.timeScale = newTimeScale()
+
+      thisObject.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(timeLineCoordinateSystem)
+      thisObject.timeScale.initialize()
 
-      rateScale = newRateScale()
-      rateScale.container.connectToParent(thisObject.container, false, false, false, true, true, true)
-      rateScale.container.eventHandler.listenToEvent('Height Percentage Changed', function (event) {
+      thisObject.rateScale = newRateScale()
+
+      thisObject.rateScale.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)
       })
 
-      rateScale.initialize(timeLineCoordinateSystem)
+      thisObject.rateScale.initialize(timeLineCoordinateSystem)
+
+      thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver)
 
       initializeTheRest()
     }
 
+    function onMouseOver (event) {
+      thisObject.timeScale.visible = true
+      thisObject.rateScale.visible = true
+
+      mouse.position.x = event.x
+      mouse.position.y = event.y
+
+      thisObject.rateScale.setMousePosition(event)
+    }
+
     function initializeTheRest () {
       let leftToInitialize = SUPPORTED_EXCHANGES.length * SUPPORTED_MARKETS.length - 1 // The default exchange and market was already initialized.
       let alreadyInitialized = 0
@@ -175,8 +201,8 @@ function newTimeMachine () {
   function getContainer (point, purpose) {
     let container
 
-    if (timeScale !== undefined) {
-      container = timeScale.getContainer(point)
+    if (thisObject.timeScale !== undefined) {
+      container = thisObject.timeScale.getContainer(point)
       if (container !== undefined) {
         if (container.isForThisPurpose(purpose)) {
           return container
@@ -184,8 +210,8 @@ function newTimeMachine () {
       }
     }
 
-    if (rateScale !== undefined) {
-      container = rateScale.getContainer(point)
+    if (thisObject.rateScale !== undefined) {
+      container = thisObject.rateScale.getContainer(point)
       if (container !== undefined) {
         if (container.isForThisPurpose(purpose)) {
           return container
@@ -209,6 +235,8 @@ function newTimeMachine () {
     } else {
       if (purpose === GET_CONTAINER_PURPOSE.MOUSE_OVER) {
         thisObject.container.eventHandler.raiseEvent('onMouseNotOver')
+        thisObject.timeScale.visible = false
+        thisObject.rateScale.visible = false
       }
       return
     }
@@ -220,16 +248,50 @@ function newTimeMachine () {
   }
 
   function thisObjectPhysics () {
+    /* Mouse Position Date Calculation */
 
+    let datePoint = {
+      x: mouse.position.x,
+      y: 0
+    }
+
+    let mouseDate = getDateFromPoint(datePoint, thisObject.container, timeLineCoordinateSystem)
+
+    thisObject.timeScale.date = new Date(mouseDate)
+
+    /* Screen Corner Date Calculation */
+
+    let point = {
+      x: 0,
+      y: 0
+    }
+
+    let cornerDate = getDateFromPoint(point, thisObject.container, timeLineCoordinateSystem)
+    cornerDate = new Date(cornerDate)
+    window.localStorage.setItem('Date @ Screen Corner', cornerDate.toUTCString())
   }
 
   function childrenPhysics () {
-    timeScale.physics()
-    rateScale.physics()
+    thisObject.timeScale.physics()
+    thisObject.rateScale.physics()
     for (let i = 0; i < thisObject.charts.length; i++) {
       let chart = thisObject.charts[i]
       chart.physics()
     }
+
+/* timeScale Positioning */
+
+    thisObject.timeScale.container.frame.position.x = mouse.position.x - thisObject.timeScale.container.frame.width / 2
+
+    let point = {
+      x: 0,
+      y: thisObject.container.frame.height / 10
+    }
+
+    point = transformThisPoint(point, thisObject.container.frame.container)
+    point = viewPort.fitIntoVisibleArea(point)
+
+    thisObject.timeScale.container.frame.position.y = point.y + 6
   }
 
   function drawBackground () {
@@ -250,8 +312,8 @@ function newTimeMachine () {
         chart.draw()
       }
 
-      if (timeScale !== undefined) { timeScale.draw() }
-      if (rateScale !== undefined) { rateScale.draw() }
+      if (thisObject.timeScale !== undefined) { thisObject.timeScale.draw() }
+      // if (thisObject.rateScale !== undefined) { thisObject.rateScale.draw() }
 
      // thisObject.container.frame.draw(false, true, false)
     }
@@ -291,3 +353,4 @@ function newTimeMachine () {
       )
   }
 }
+

Scales/RateScale.js

@@ -4,10 +4,13 @@ function newRateScale () {
   let thisObject = {
     heightPercentage: 100,
     container: undefined,
+    visible: true,
+    setMousePosition: setMousePosition,
     physics: physics,
     draw: draw,
     getContainer: getContainer,
-    initialize: initialize
+    initialize: initialize,
+    finalize: finalize
   }
 
   const HEIGHT_PERCENTAGE_DEFAULT_VALUE = 50
@@ -34,11 +37,15 @@ function newRateScale () {
     }
   }
 
-  let visible = true
   let timeLineCoordinateSystem
 
   return thisObject
 
+  function finalize () {
+    thisObject.container.finalize()
+    thisObject.container = undefined
+  }
+
   function initialize (pTimeLineCoordinateSystem) {
     timeLineCoordinateSystem = pTimeLineCoordinateSystem
 
@@ -54,17 +61,11 @@ function newRateScale () {
     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
-
-      visible = true
-    })
-
-    thisObject.container.eventHandler.listenToEvent('onMouseNotOver', function (event) {
-      visible = false
-    })
+  function setMousePosition (point) {
+    mouse.position.x = point.x
+    mouse.position.y = point.y
   }
 
   function onMouseWheel (event) {
@@ -107,10 +108,10 @@ function newRateScale () {
   }
 
   function draw () {
-    if (visible === false) { return }
+    if (thisObject.visible === false) { return }
 
 /* We need this scale to match the shape of its parent when the parent is inside the viewPort, when it is not, we need the scale still
-to be visible at the top of the viewPort. */
+to be thisObject.visible at the top of the viewPort. */
 
     let frame = thisObject.container.parentContainer.frame
     let point1

Scales/TimePeriodScale.js

@@ -2,11 +2,12 @@ function newTimePeriodScale () {
   const MODULE_NAME = 'Time Period Scale'
 
   let thisObject = {
+    timePeriod: undefined,
     container: undefined,
     draw: draw,
     getContainer: getContainer,
     initialize: initialize,
-    timePeriod: undefined
+    finalize: finalize
   }
 
   const FILES_PERIOD_DEFAULT_VALUE = 0
@@ -37,6 +38,11 @@ function newTimePeriodScale () {
 
   return thisObject
 
+  function finalize () {
+    thisObject.container.finalize()
+    thisObject.container = undefined
+  }
+
   function initialize (pTimeLineCoordinateSystem) {
     timeLineCoordinateSystem = pTimeLineCoordinateSystem
 

Scales/TimeScale.js

@@ -4,10 +4,13 @@ function newTimeScale () {
   let thisObject = {
     lenghtPercentage: undefined,
     container: undefined,
+    date: undefined,
+    visible: true,
     physics: physics,
     draw: draw,
     getContainer: getContainer,
-    initialize: initialize
+    initialize: initialize,
+    finalize: finalize
   }
 
   const LENGHT_PERCENTAGE_DEFAULT_VALUE = 5
@@ -21,21 +24,17 @@ function newTimeScale () {
   thisObject.container.isClickeable = false
   thisObject.container.isWheelable = true
 
-  let mouse = {
-    position: {
-      x: 0,
-      y: 0
-    }
-  }
-
-  let visible = true
-  let timeLineCoordinateSystem
+  thisObject.container.frame.width = 190
+  thisObject.container.frame.height = 25
 
   return thisObject
 
-  function initialize (pTimeLineCoordinateSystem) {
-    timeLineCoordinateSystem = pTimeLineCoordinateSystem
+  function finalize () {
+    thisObject.container.finalize()
+    thisObject.container = undefined
+  }
 
+  function initialize () {
     thisObject.container.eventHandler.listenToEvent('onMouseWheel', onMouseWheel)
 
     thisObject.lenghtPercentage = window.localStorage.getItem(MODULE_NAME)
@@ -47,18 +46,8 @@ function newTimeScale () {
 
     let event = {}
     event.lenghtPercentage = thisObject.lenghtPercentage
+
     thisObject.container.eventHandler.raiseEvent('Lenght Percentage Changed', event)
-
-    thisObject.container.eventHandler.listenToEvent('onMouseOver', function (event) {
-      mouse.position.x = event.x
-      mouse.position.y = event.y
-
-      visible = true
-    })
-
-    thisObject.container.eventHandler.listenToEvent('onMouseNotOver', function (event) {
-      visible = false
-    })
   }
 
   function onMouseWheel (event) {
@@ -77,108 +66,20 @@ function newTimeScale () {
     window.localStorage.setItem(MODULE_NAME, thisObject.lenghtPercentage)
   }
 
-  function getContainer (pPoint) {
-    let container
-
-/* In this case we manually frame this point since we do a very special treatment of the position of this scale. */
-    let point = {
-      x: 0,
-      y: 0
-    }
-    point.x = pPoint.x - thisObject.container.frame.position.x
-    point.y = pPoint.y - thisObject.container.frame.position.y + viewPort.margins.TOP
-
-    if (thisObject.container.frame.isThisPointHere(point, undefined, true) === true) {
+  function getContainer (point) {
+    if (thisObject.container.frame.isThisPointHere(point, true) === true) {
       return thisObject.container
-    } else {
-           /* This point does not belong to this space. */
-
-      return undefined
     }
   }
 
   function physics () {
-    let point = {
-      x: 0,
-      y: 0
-    }
 
-    let date = getDateFromPoint(point, thisObject.container.parentContainer, timeLineCoordinateSystem)
-    date = new Date(date)
-    window.localStorage.setItem('Date @ Screen Corner', date.toUTCString())
   }
 
   function draw () {
-    if (visible === false) { return }
+    if (thisObject.visible === false || thisObject.date === undefined) { return }
 
-/* We need this scale to match the shape of its parent when the parent is inside the viewPort, when it is not, we need the scale still
-to be visible at the top of the viewPort. */
-
-    let frame = thisObject.container.parentContainer.frame
-    let point1
-    let point2
-    let point3
-    let point4
-
-    point1 = {
-      x: 0,
-      y: 0
-    }
-
-    point2 = {
-      x: frame.width,
-      y: 0
-    }
-
-    point3 = {
-      x: frame.width,
-      y: frame.height / 10
-    }
-
-    point4 = {
-      x: 0,
-      y: frame.height / 10
-    }
-
-    point5 = {
-      x: 0,
-      y: frame.height
-    }
-
-        /* Now the transformations. */
-
-    point1 = transformThisPoint(point1, frame.container)
-    point2 = transformThisPoint(point2, frame.container)
-    point3 = transformThisPoint(point3, frame.container)
-    point4 = transformThisPoint(point4, frame.container)
-    point5 = transformThisPoint(point5, frame.container)
-
-    point1 = viewPort.fitIntoVisibleArea(point1)
-    point2 = viewPort.fitIntoVisibleArea(point2)
-    point3 = viewPort.fitIntoVisibleArea(point3)
-    point4 = viewPort.fitIntoVisibleArea(point4)
-    point5 = viewPort.fitIntoVisibleArea(point5)
-
-    if (point3.y - point2.y < MIN_HEIGHT) {
-      point3.y = point2.y + MIN_HEIGHT
-      point4.y = point2.y + MIN_HEIGHT
-    }
-
-    thisObject.container.frame.position.x = point1.x
-    thisObject.container.frame.position.y = point1.y
-
-    thisObject.container.frame.width = point2.x - point1.x
-    thisObject.container.frame.height = point3.y - point2.y
-
-    let point = {
-      x: mouse.position.x,
-      y: point1.y - viewPort.margins.TOP
-    }
-
-    let date = getDateFromPoint(point, thisObject.container.parentContainer, timeLineCoordinateSystem)
-    date = new Date(date)
-
-    let label = date.toUTCString()
+    let label = thisObject.date.toUTCString()
     let labelArray = label.split(' ')
     let label1 = labelArray[1] + ' ' + labelArray[2] + ' ' + labelArray[3]
     let label2 = labelArray[4]
@@ -189,22 +90,10 @@ to be visible at the top of the viewPort. */
     const RED_LINE_HIGHT = 5
     const OPACITY = 1
 
-    let centerPoint = {
-      x: mouse.position.x,
-      y: point1.y + viewPort.margins.BOTTOM
-    }
-
-    let container = newContainer()
-    container.initialize('Visible Time Scale')
-    container.frame.width = 190
-    container.frame.height = 25
-    container.frame.position.x = centerPoint.x - container.frame.width / 2
-    container.frame.position.y = centerPoint.y - container.frame.height / 2
-
     let params = {
       cornerRadius: 3,
       lineWidth: RED_LINE_HIGHT,
-      container: container,
+      container: thisObject.container,
       borderColor: UI_COLOR.RUSTED_RED,
       castShadow: false,
       backgroundColor: UI_COLOR.DARK,
@@ -218,10 +107,12 @@ to be visible at the top of the viewPort. */
     let xOffset1 = label1.length * fontSize1 * FONT_ASPECT_RATIO
 
     let labelPoint1 = {
-      x: mouse.position.x - xOffset1 + 15,
-      y: point1.y + viewPort.margins.BOTTOM + 6
+      x: thisObject.container.frame.width / 2 - xOffset1 + 15,
+      y: thisObject.container.frame.height / 2 + 6
     }
 
+    labelPoint1 = thisObject.container.frame.frameThisPoint(labelPoint1)
+
     browserCanvasContext.font = fontSize1 + 'px ' + UI_FONT.PRIMARY
     browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)'
 
@@ -230,10 +121,12 @@ to be visible at the top of the viewPort. */
     let xOffset2 = label2.length * fontSize2 * FONT_ASPECT_RATIO
 
     let labelPoint2 = {
-      x: mouse.position.x - xOffset2 / 2 - 3 + 70,
-      y: point1.y + viewPort.margins.BOTTOM + 6
+      x: thisObject.container.frame.width / 2 - xOffset2 / 2 - 3 + 60,
+      y: thisObject.container.frame.height / 2 + 6
     }
 
+    labelPoint2 = thisObject.container.frame.frameThisPoint(labelPoint2)
+
     browserCanvasContext.font = fontSize2 + 'px ' + UI_FONT.PRIMARY
     browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)'
 

Spaces/ChartSpace.js

@@ -15,12 +15,12 @@ function newChartSpace () {
   let thisObject = {
     visible: true,
     container: undefined,
+    timeMachines: [],
     fitIntoVisibleArea: fitIntoVisibleArea,
     isThisPointVisible: isThisPointVisible,
     physics: physics,
     drawBackground: drawBackground,
     draw: draw,
-    timeMachines: [],
     getContainer: getContainer,     // returns the inner most container that holds the point received by parameter.
     initialize: initialize,
     finalize: finalize
@@ -35,14 +35,13 @@ function newChartSpace () {
   return thisObject
 
   function finalize () {
-    try {
-      for (let i = 0; i < thisObject.timeMachines.length; i++) {
-        let timeMachine = thisObject.timeMachines[i]
-        timeMachine.finalize()
-      }
-    } catch (err) {
-      if (ERROR_LOG === true) { logger.write('[ERROR] finalize -> err = ' + err.stack) }
+    for (let i = 0; i < thisObject.timeMachines.length; i++) {
+      let timeMachine = thisObject.timeMachines[i]
+      timeMachine.finalize()
     }
+
+    thisObject.container.finalize()
+    thisObject.container = undefined
   }
 
   function initialize (callBackFunction) {