Time Frame Scale with its own physics

ChartsSpace/TimelineChart.js

@@ -180,6 +180,7 @@ function newTimelineChart () {
         function onMouseOver (event) {
           if (thisObject.timeFrameScale !== undefined) {
             thisObject.timeFrameScale.visible = true
+            thisObject.timeFrameScale.onMouseOverSomeTimeMachineContainer(event)
           }
 
           mouse.position.x = event.x
@@ -219,7 +220,7 @@ function newTimelineChart () {
       }
     })
 
-    thisObject.timeFrameScale.initialize()
+    thisObject.timeFrameScale.initialize(timeLineCoordinateSystem, thisObject.container)
 
     timeFrameScaleMouseOverEventSuscriptionId = thisObject.timeFrameScale.container.eventHandler.listenToEvent('onMouseOver', timeFrameScaleMouseOver)
 
@@ -315,40 +316,6 @@ function newTimelineChart () {
     if (thisObject.timeFrameScale !== undefined) {
       thisObject.timeFrameScale.physics()
     }
-
-    /* Container Limits */
-
-    let upCorner = {
-      x: 0,
-      y: 0
-    }
-
-    let bottonCorner = {
-      x: thisObject.container.frame.width,
-      y: thisObject.container.frame.height
-    }
-
-    upCorner = transformThisPoint(upCorner, thisObject.container)
-    bottonCorner = transformThisPoint(bottonCorner, thisObject.container)
-
-    /* thisObject.timeFrameScale Positioning */
-    if (thisObject.timeFrameScale !== undefined) {
-      timePoint = {
-        x: 0,
-        y: thisObject.container.frame.height
-      }
-
-      timePoint = transformThisPoint(timePoint, thisObject.container.frame.container)
-      timePoint.x = mouse.position.x - thisObject.timeFrameScale.container.frame.width / 2
-      timePoint = thisObject.container.fitFunction(timePoint, true)
-
-    /* Checking against the container limits. */
-      if (timePoint.x < upCorner.x) { timePoint.x = upCorner.x }
-      if (timePoint.x + thisObject.timeFrameScale.container.frame.width > bottonCorner.x) { timePoint.x = bottonCorner.x - thisObject.timeFrameScale.container.frame.width }
-
-      thisObject.timeFrameScale.container.frame.position.x = timePoint.x
-      thisObject.timeFrameScale.container.frame.position.y = timePoint.y - thisObject.timeFrameScale.container.frame.height
-    }
   }
 
   function tooTiny () {

Scales/TimeFrameScale.js

@@ -6,6 +6,7 @@ function newTimeFrameScale () {
     container: undefined,
     fitFunction: undefined,
     payload: undefined,
+    onMouseOverSomeTimeMachineContainer: onMouseOverSomeTimeMachineContainer,
     draw: draw,
     physics: physics,
     getContainer: getContainer,
@@ -28,6 +29,15 @@ function newTimeFrameScale () {
   let onZoomChangedEventSubscriptionId
   let onMouseOverEventSubscriptionId
 
+  let timeLineCoordinateSystem
+  let limitingContainer
+
+  let mouse = {
+    position: {
+      x: 0,
+      y: 0
+    }
+  }
   setupContainer()
   return thisObject
 
@@ -57,7 +67,10 @@ function newTimeFrameScale () {
     thisObject.payload = undefined
   }
 
-  function initialize () {
+  function initialize (pTimeLineCoordinateSystem, pLimitingContainer) {
+    timeLineCoordinateSystem = pTimeLineCoordinateSystem
+    limitingContainer = pLimitingContainer
+
     readObjectState()
     newTimeFrame()
 
@@ -70,8 +83,47 @@ function newTimeFrameScale () {
     }
   }
 
-  function physics () {
+  function onMouseOverSomeTimeMachineContainer (event) {
+    mouse = {
+      position: {
+        x: event.x,
+        y: event.y
+      }
+    }
+  }
 
+  function physics () {
+    /* Container Limits */
+
+    let upCorner = {
+      x: 0,
+      y: 0
+    }
+
+    let bottonCorner = {
+      x: limitingContainer.frame.width,
+      y: limitingContainer.frame.height
+    }
+
+    upCorner = transformThisPoint(upCorner, limitingContainer)
+    bottonCorner = transformThisPoint(bottonCorner, limitingContainer)
+
+    /* Positioning */
+    timePoint = {
+      x: 0,
+      y: limitingContainer.frame.height
+    }
+
+    timePoint = transformThisPoint(timePoint, limitingContainer.frame.container)
+    timePoint.x = mouse.position.x - thisObject.container.frame.width / 2
+    timePoint = limitingContainer.fitFunction(timePoint, true)
+
+    /* Checking against the container limits. */
+    if (timePoint.x < upCorner.x) { timePoint.x = upCorner.x }
+    if (timePoint.x + thisObject.container.frame.width > bottonCorner.x) { timePoint.x = bottonCorner.x - thisObject.container.frame.width }
+
+    thisObject.container.frame.position.x = timePoint.x
+    thisObject.container.frame.position.y = timePoint.y - thisObject.container.frame.height
   }
 
   function onZoomChanged (event) {