relocation of the origin of datetime

ChartsSpace/TimeMachine.js

@@ -45,6 +45,8 @@ function newTimeMachine () {
   let syncWithDesignerLoop = 0
   let timelineChartsMap = new Map()
 
+  let onViewportPositionChangedEventSuscriptionId
+  let onViewportZoomChangedEventSuscriptionId
   let onMouseOverEventSuscriptionId
   let onMouseNotOverEventSuscriptionId
   let timeScaleValueEventSuscriptionId
@@ -70,6 +72,9 @@ function newTimeMachine () {
   }
 
   function finalize () {
+    canvas.chartSpace.viewport.eventHandler.stopListening(onViewportPositionChangedEventSuscriptionId)
+    canvas.chartSpace.viewport.eventHandler.stopListening(onViewportZoomChangedEventSuscriptionId)
+
     if (thisObject.timeScale !== undefined) {
       finalizeTimeScale()
     }
@@ -134,45 +139,48 @@ function newTimeMachine () {
     loadFrame(thisObject.payload, thisObject.container.frame)
 
     recalculateCoordinateSystem()
+    recalculateCurrentDatetime()
 
     onMouseOverEventSuscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver)
-
-    function onMouseOver (event) {
-      drawScales = true
-
-      mouse.position.x = event.x
-      mouse.position.y = event.y
-
-      if (thisObject.timeScale !== undefined) {
-        thisObject.timeScale.onMouseOverSomeTimeMachineContainer(event)
-      }
-      if (thisObject.rateScale !== undefined) {
-        thisObject.rateScale.onMouseOverSomeTimeMachineContainer(event)
-      }
-      if (thisObject.timeFrameScale !== undefined) {
-        thisObject.timeFrameScale.onMouseOverSomeTimeMachineContainer(event)
-      }
-    }
-
     onMouseNotOverEventSuscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver)
 
-    function onMouseNotOver (event) {
-      drawScales = false
-
-      if (thisObject.timeScale !== undefined) {
-        thisObject.timeScale.visible = false
-      }
-      if (thisObject.rateScale !== undefined) {
-        thisObject.rateScale.visible = false
-      }
-      if (thisObject.timeFrameScale !== undefined) {
-        thisObject.timeFrameScale.visible = false
-      }
-    }
+    onViewportPositionChangedEventSuscriptionId = canvas.chartSpace.viewport.eventHandler.listenToEvent('Position Changed', onViewportPositionChanged)
+    onViewportZoomChangedEventSuscriptionId = canvas.chartSpace.viewport.eventHandler.listenToEvent('Zoom Changed', onViewportZoomChanged)
 
     callBackFunction(GLOBAL.DEFAULT_OK_RESPONSE)
   }
 
+  function onMouseOver (event) {
+    drawScales = true
+
+    mouse.position.x = event.x
+    mouse.position.y = event.y
+
+    if (thisObject.timeScale !== undefined) {
+      thisObject.timeScale.onMouseOverSomeTimeMachineContainer(event)
+    }
+    if (thisObject.rateScale !== undefined) {
+      thisObject.rateScale.onMouseOverSomeTimeMachineContainer(event)
+    }
+    if (thisObject.timeFrameScale !== undefined) {
+      thisObject.timeFrameScale.onMouseOverSomeTimeMachineContainer(event)
+    }
+  }
+
+  function onMouseNotOver (event) {
+    drawScales = false
+
+    if (thisObject.timeScale !== undefined) {
+      thisObject.timeScale.visible = false
+    }
+    if (thisObject.rateScale !== undefined) {
+      thisObject.rateScale.visible = false
+    }
+    if (thisObject.timeFrameScale !== undefined) {
+      thisObject.timeFrameScale.visible = false
+    }
+  }
+
   function initializeTimeScale () {
     thisObject.timeScale = newTimeScale()
     thisObject.timeScale.fitFunction = thisObject.fitFunction
@@ -291,6 +299,39 @@ function newTimeMachine () {
     }
   }
 
+  function onViewportZoomChanged (event) {
+    if (thisObject.container.frame.isInViewPort()) {
+      recalculateCurrentDatetime()
+    }
+  }
+
+  function onViewportPositionChanged () {
+    if (thisObject.container.frame.isInViewPort()) {
+      recalculateCurrentDatetime()
+    }
+  }
+
+  function recalculateCurrentDatetime () {
+     /*
+     The view port was moved or the view port zoom level was changed and the center of the screen points to a different datetime that we
+     must calculate.
+     */
+    let center = {
+      x: (canvas.chartSpace.viewport.visibleArea.bottomRight.x - canvas.chartSpace.viewport.visibleArea.bottomLeft.x) / 2,
+      y: (canvas.chartSpace.viewport.visibleArea.bottomRight.y - canvas.chartSpace.viewport.visibleArea.topRight.y) / 2
+    }
+
+    center = unTransformThisPoint(center, thisObject.container)
+    center = timeMachineCoordinateSystem.unInverseTransform(center, thisObject.container.frame.height)
+
+    datetime = new Date(center.x)
+
+    for (let i = 0; i < thisObject.timelineCharts.length; i++) {
+      let timelineChart = thisObject.timelineCharts[i]
+      timelineChart.setDatetime(datetime)
+    }
+  }
+
   function fitFunction (point, fullVisible, margin, topMargin, bottomMargin) {
      /* We prevent a point to be out of the container AND out of the Chart Space in general */
 

ChartsSpace/TimelineChart.js

@@ -18,6 +18,7 @@ function newTimelineChart () {
     layersManager: undefined,
     plotterManager: undefined,
     upstreamTimeFrame: undefined,
+    setDatetime: setDatetime,
     setTimeFrame: setTimeFrame,
     physics: physics,
     draw: draw,
@@ -35,8 +36,6 @@ function newTimelineChart () {
   let layersPanel
   let layersPanelHandle
 
-  let onViewportPositionChangedEventSuscriptionId
-  let onViewportZoomChangedEventSuscriptionId
   let onMouseOverEventSuscriptionId
   let onMouseNotOverEventSuscriptionId
   let rateScaleValueEventSuscriptionId
@@ -77,8 +76,6 @@ function newTimelineChart () {
       finalizeTimeFrameScale()
     }
 
-    canvas.chartSpace.viewport.eventHandler.stopListening(onViewportPositionChangedEventSuscriptionId)
-    canvas.chartSpace.viewport.eventHandler.stopListening(onViewportZoomChangedEventSuscriptionId)
     thisObject.container.eventHandler.stopListening(onMouseOverEventSuscriptionId)
     thisObject.container.eventHandler.stopListening(onMouseNotOverEventSuscriptionId)
     thisObject.container.finalize()
@@ -145,11 +142,6 @@ function newTimelineChart () {
     coordinateSystem = timeMachineCoordinateSystem
 
     timeFrame = INITIAL_TIME_PERIOD
-    recalculateCurrentDatetime()
-
-     /* Event Subscriptions - we need this events to be fired first here and then in active Plotters. */
-    onViewportPositionChangedEventSuscriptionId = canvas.chartSpace.viewport.eventHandler.listenToEvent('Position Changed', onViewportPositionChanged)
-    onViewportZoomChangedEventSuscriptionId = canvas.chartSpace.viewport.eventHandler.listenToEvent('Zoom Changed', onViewportZoomChanged)
 
     onMouseOverEventSuscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver)
     onMouseNotOverEventSuscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver)
@@ -247,6 +239,13 @@ function newTimelineChart () {
     }
   }
 
+  function setDatetime (pDatetime) {
+    datetime = pDatetime
+    if (thisObject.plotterManager !== undefined) {
+      thisObject.plotterManager.setDatetime(datetime)
+    }
+  }
+
   function onMouseOver (event) {
     /* This event gets to the timelinechart container because it inherits it from the time machine container, which is the one raising Mouse Over and Mouse not Over Events to its children. */
     drawScales = true
@@ -277,43 +276,6 @@ function newTimelineChart () {
     }
   }
 
-  function onViewportZoomChanged (event) {
-    if (thisObject.container.frame.isInViewPort()) {
-      recalculateCurrentDatetime()
-    }
-  }
-
-  function onViewportPositionChanged () {
-    if (thisObject.container.frame.isInViewPort()) {
-      recalculateCurrentDatetime()
-    }
-  }
-
-  function recalculateCurrentDatetime () {
-       /*
-
-       The view port was moved or the view port zoom level was changed and the center of the screen points to a different datetime that we
-       must calculate.
-
-       */
-
-    let center = {
-      x: (canvas.chartSpace.viewport.visibleArea.bottomRight.x - canvas.chartSpace.viewport.visibleArea.bottomLeft.x) / 2,
-      y: (canvas.chartSpace.viewport.visibleArea.bottomRight.y - canvas.chartSpace.viewport.visibleArea.topRight.y) / 2
-    }
-
-    center = unTransformThisPoint(center, thisObject.container)
-    center = coordinateSystem.unInverseTransform(center, thisObject.container.frame.height)
-
-    let newDate = new Date(center.x)
-
-    datetime = newDate
-
-    if (thisObject.plotterManager !== undefined) {
-      thisObject.plotterManager.setDatetime(datetime)
-    }
-  }
-
   function getContainer (point, purpose) {
     let container