Formula almost working

Globals.js

@@ -172,8 +172,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);

PlottersManager.js

@@ -114,7 +114,7 @@ function newPlottersManager () {
       canvas.bottomSpace.chartAspectRatio.container.eventHandler.listenToEvent('Chart Aspect Ratio Changed', onAspectRatioChanged)
 
       function onAspectRatioChanged (pAspectRatio) {
-        thisObject.container.frame.height = CHART_SPACE_HEIGHT * pAspectRatio.y
+        thisObject.container.frame.height = TIME_MACHINE_HEIGHT * pAspectRatio.y
 
                 /* First the Product Plotters. */
 

Scales/TimeScale.js

@@ -38,7 +38,8 @@ function newTimeScale () {
       thisObject.lenghtPercentage = thisObject.lenghtPercentage + 10
       if (thisObject.lenghtPercentage > 100) { thisObject.lenghtPercentage = 100 }
     }
-    thisObject.container.eventHandler.raiseEvent('Lenght Percentage Changed', thisObject.lenghtPercentage)
+    event.lenghtPercentage = thisObject.lenghtPercentage
+    thisObject.container.eventHandler.raiseEvent('Lenght Percentage Changed', event)
   }
 
   function getContainer (point) {

Spaces/ChartSpace.js

@@ -25,13 +25,13 @@ function newChartSpace () {
 
   thisObject.container = newContainer()
   thisObject.container.initialize(MODULE_NAME)
-
-  thisObject.container.frame.width = CHART_SPACE_WIDTH
-  thisObject.container.frame.height = CHART_SPACE_HEIGHT * canvas.bottomSpace.chartAspectRatio.aspectRatio.y
+/*
+  thisObject.container.frame.width = TIME_MACHINE_WIDTH
+  thisObject.container.frame.height = TIME_MACHINE_HEIGHT * canvas.bottomSpace.chartAspectRatio.aspectRatio.y
 
   thisObject.container.frame.position.x = browserCanvas.width / 2 - thisObject.container.frame.width / 2
   thisObject.container.frame.position.y = browserCanvas.height / 2 - thisObject.container.frame.height / 2
-
+*/
   thisObject.container.isDraggeable = false
 
   return thisObject
@@ -59,7 +59,7 @@ function newChartSpace () {
 
     var timeMachine = newTimeMachine()
 
-    timeMachine.container.connectToParent(thisObject.container, true, true)
+    // timeMachine.container.connectToParent(thisObject.container, true, true)
 
         /* We make the time machine a little bit smaller than the current space. */
 

TimeMachine.js

@@ -29,6 +29,12 @@ function newTimeMachine () {
   thisObject.container.initialize(MODULE_NAME)
   thisObject.container.isDraggeable = false
 
+  thisObject.container.frame.width = TIME_MACHINE_WIDTH
+  thisObject.container.frame.height = TIME_MACHINE_HEIGHT * canvas.bottomSpace.chartAspectRatio.aspectRatio.y
+
+  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.
   const SEPARATION_BETWEEN_TIMELINE_CHARTS = 1.5
@@ -64,8 +70,18 @@ function newTimeMachine () {
     timeScale = newTimeScale()
     timeScale.initialize()
 
-    timeScale.container.eventHandler.listenToEvent('Lenght Percentage Changed', function (newPercentageLength) {
-      thisObject.container.frame.width = thisObject.container.parentContainer.frame.width * newPercentageLength / 100
+    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')
     })
 

TimelineChart.js

@@ -160,7 +160,7 @@
        canvas.bottomSpace.chartAspectRatio.container.eventHandler.listenToEvent('Chart Aspect Ratio Changed', onAspectRatioChanged)
 
        function onAspectRatioChanged (pAspectRatio) {
-         thisObject.container.frame.height = CHART_SPACE_HEIGHT * pAspectRatio.y
+         thisObject.container.frame.height = TIME_MACHINE_HEIGHT * pAspectRatio.y
          recalculateScale()
        }
      } catch (err) {

ViewPort.js

@@ -15,6 +15,7 @@ function newViewPort () {
     zoomTargetLevel: undefined,
     zoomLevel: undefined,
     mousePosition: undefined,
+    offset: undefined,
     newZoomLevel: newZoomLevel,
     applyZoom: applyZoom,
     isMinZoom: isMinZoom,
@@ -33,7 +34,7 @@ function newViewPort () {
 
   let increment = 0.035
 
-  var offset = {
+  let offset = {
     x: 0,
     y: 0
   }