All working, from User Position ,that is currently the middle of the screen.

Container.js

@@ -52,7 +52,7 @@ function newContainer () {
     }
   }
 
-  function onParentDimmensionsChanged () {
+  function onParentDimmensionsChanged (event) {
     let dimmensionsChanged = false
     if (connectedToParentWidth) {
       thisObject.frame.width = thisObject.parentContainer.frame.width
@@ -64,7 +64,7 @@ function newContainer () {
     }
 
     if (dimmensionsChanged) {
-      thisObject.eventHandler.raiseEvent('Dimmensions Changed')
+      thisObject.eventHandler.raiseEvent('Dimmensions Changed', event)
       console.log(thisObject.name + ' new width = ' + thisObject.frame.width)
     }
   }

Scales/ChartGrid.js

@@ -416,6 +416,8 @@
      }
 
      function plotGrid (period) {
+       return
+
        let periodWidth = period.x
        let periodHeight = period.y
 

Scales/TimeScale.js

@@ -33,7 +33,7 @@ function newTimeScale () {
     delta = event.wheelDelta
     if (delta < 0) {
       thisObject.lenghtPercentage = thisObject.lenghtPercentage - 10
-      if (thisObject.lenghtPercentage < 50) { thisObject.lenghtPercentage = 50 }
+      if (thisObject.lenghtPercentage < 10) { thisObject.lenghtPercentage = 10 }
     } else {
       thisObject.lenghtPercentage = thisObject.lenghtPercentage + 10
       if (thisObject.lenghtPercentage > 100) { thisObject.lenghtPercentage = 100 }
@@ -57,6 +57,6 @@ function newTimeScale () {
   }
 
   function draw () {
-    thisObject.container.frame.draw(false, true)
+
   }
 }

Spaces/ChartSpace.js

@@ -96,7 +96,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]

TimeMachine.js

@@ -71,18 +71,8 @@ function newTimeMachine () {
     timeScale.initialize()
 
     timeScale.container.eventHandler.listenToEvent('Lenght Percentage Changed', function (event) {
-      newPercentageLength = event.lenghtPercentage
-
-      let a = event.mousePosition.x
-      let b = (browserCanvas.width / 2 - TIME_MACHINE_WIDTH / 2) * (-1)
-      let d = TIME_MACHINE_WIDTH
-      let f = TIME_MACHINE_WIDTH * newPercentageLength / 100
-      let g = viewPort.displacement.x
-      let c = (((a + b + g) / d) * f) - a - g
-
-      thisObject.container.frame.width = f
-      thisObject.container.frame.position.x = c * (-1)
-      thisObject.container.eventHandler.raiseEvent('Dimmensions Changed')
+      thisObject.container.frame.width = TIME_MACHINE_WIDTH * event.lenghtPercentage / 100
+      thisObject.container.eventHandler.raiseEvent('Dimmensions Changed', event)
     })
 
       /* 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. */
@@ -188,7 +178,7 @@ 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]

TimelineChart.js

@@ -65,8 +65,9 @@
 
        thisObject.container.eventHandler.listenToEvent('Dimmensions Changed', onContainerDimmensionsChanged)
 
-       function onContainerDimmensionsChanged () {
+       function onContainerDimmensionsChanged (event) {
          recalculateScale()
+         moveToUserPosition(thisObject.container, timeLineCoordinateSystem)
        }
 
             /* We load the logow we will need for the background. */
@@ -120,7 +121,6 @@
 
        recalculateScale()
 
-            // moveViewPortToCurrentDatetime();
        moveToUserPosition(thisObject.container, timeLineCoordinateSystem)
        timePeriod = INITIAL_TIME_PERIOD
        datetime = INITIAL_DATE
@@ -465,34 +465,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)
-   }
  }

ViewPort.js

@@ -15,7 +15,7 @@ function newViewPort () {
     zoomTargetLevel: undefined,
     zoomLevel: undefined,
     mousePosition: undefined,
-    offset: undefined,
+    getDisplacement: getDisplacement,
     newZoomLevel: newZoomLevel,
     applyZoom: applyZoom,
     isMinZoom: isMinZoom,
@@ -67,6 +67,14 @@ function newViewPort () {
     }
   }
 
+  function getDisplacement () {
+    let displacement = {
+      x: offset.x,
+      y: offset.y
+    }
+    return displacement
+  }
+
   function raiseEvents () {
     let event = {
       newOffset: offset
@@ -387,4 +395,3 @@ function newViewPort () {
     browserCanvasContext.stroke()
   }
 }
-