RateScale with its own physics

ChartsSpace/TimeMachine.js

@@ -118,9 +118,10 @@ function newTimeMachine () {
 
       if (thisObject.timeScale !== undefined) {
         thisObject.timeScale.visible = true
-        thisObject.timeScale.onMouseOverSomeInnerContainer(event)
+        thisObject.timeScale.onMouseOverSomeTimeMachineContainer(event)
       }
       if (thisObject.rateScale !== undefined) {
+        thisObject.rateScale.onMouseOverSomeTimeMachineContainer(event)
         thisObject.rateScale.visible = true
       }
     }
@@ -172,7 +173,7 @@ function newTimeMachine () {
       thisObject.container.eventHandler.raiseEvent('Dimmensions Changed', event)
     })
 
-    thisObject.rateScale.initialize()
+    thisObject.rateScale.initialize(timeLineCoordinateSystem, thisObject.container)
 
     rateScaleMouseOverEventSuscriptionId = thisObject.rateScale.container.eventHandler.listenToEvent('onMouseOver', rateScaleMouseOver)
 
@@ -336,54 +337,6 @@ function newTimeMachine () {
       let chart = thisObject.timelineCharts[i]
       chart.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)
-
-    /* Mouse Position Rate Calculation */
-    if (thisObject.rateScale !== undefined) {
-      let ratePoint = {
-        x: 0,
-        y: mouse.position.y
-      }
-
-      let mouseRate = getRateFromPoint(ratePoint, thisObject.container, timeLineCoordinateSystem)
-
-      thisObject.rateScale.rate = mouseRate
-    }
-
-    /* rateScale Positioning */
-    if (thisObject.rateScale !== undefined) {
-      ratePoint = {
-        x: thisObject.container.frame.width,
-        y: 0
-      }
-
-      ratePoint = transformThisPoint(ratePoint, thisObject.container.frame.container)
-      ratePoint.y = mouse.position.y - thisObject.rateScale.container.frame.height / 2 + thisObject.rateScale.container.frame.height
-      ratePoint = thisObject.container.fitFunction(ratePoint, true)
-
-    /* Checking against the container limits. */
-      if (ratePoint.x < upCorner.x) { ratePoint.x = upCorner.x }
-      if (ratePoint.x + thisObject.rateScale.container.frame.width > bottonCorner.x) { ratePoint.x = bottonCorner.x }
-      if (ratePoint.y < upCorner.y + thisObject.rateScale.container.frame.height) { ratePoint.y = upCorner.y + thisObject.rateScale.container.frame.height }
-      if (ratePoint.y > bottonCorner.y) { ratePoint.y = bottonCorner.y }
-
-      thisObject.rateScale.container.frame.position.y = ratePoint.y - thisObject.rateScale.container.frame.height
-      thisObject.rateScale.container.frame.position.x = ratePoint.x - thisObject.rateScale.container.frame.width
-    }
   }
 
   function drawBackground () {

Scales/RateScale.js

@@ -8,6 +8,7 @@ function newRateScale () {
     payload: undefined,
     visible: true,
     heightPercentage: 150,
+    onMouseOverSomeTimeMachineContainer: onMouseOverSomeTimeMachineContainer,
     physics: physics,
     draw: draw,
     getContainer: getContainer,
@@ -36,6 +37,15 @@ function newRateScale () {
   let onMouseOverEventSubscriptionId
   let onMouseNotOverEventSubscriptionId
 
+  let timeLineCoordinateSystem
+  let limitingContainer
+
+  let mouse = {
+    position: {
+      x: 0,
+      y: 0
+    }
+  }
   return thisObject
 
   function finalize () {
@@ -47,9 +57,16 @@ function newRateScale () {
     thisObject.container = undefined
     thisObject.fitFunction = undefined
     thisObject.payload = undefined
+
+    timeLineCoordinateSystem = undefined
+    limitingContainer = undefined
+    mouse = undefined
   }
 
-  function initialize () {
+  function initialize (pTimeLineCoordinateSystem, pLimitingContainer) {
+    timeLineCoordinateSystem = pTimeLineCoordinateSystem
+    limitingContainer = pLimitingContainer
+
     onMouseWheelEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseWheel', onMouseWheel)
     onMouseOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver)
     onMouseNotOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver)
@@ -66,6 +83,15 @@ function newRateScale () {
     thisObject.container.eventHandler.raiseEvent('Height Percentage Changed', event)
   }
 
+  function onMouseOverSomeTimeMachineContainer (event) {
+    mouse = {
+      position: {
+        x: event.x,
+        y: event.y
+      }
+    }
+  }
+
   function onMouseOver () {
     thisObject.visible = true
     isMouseOver = true
@@ -97,7 +123,49 @@ function newRateScale () {
   }
 
   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)
+
+    /* Mouse Position Rate Calculation */
+    let ratePoint = {
+      x: 0,
+      y: mouse.position.y
+    }
+
+    let mouseRate = getRateFromPoint(ratePoint, limitingContainer, timeLineCoordinateSystem)
+
+    thisObject.rate = mouseRate
+
+    /* rateScale Positioning */
+    ratePoint = {
+      x: limitingContainer.frame.width,
+      y: 0
+    }
+
+    ratePoint = transformThisPoint(ratePoint, limitingContainer.frame.container)
+    ratePoint.y = mouse.position.y - thisObject.container.frame.height / 2 + thisObject.container.frame.height
+    ratePoint = limitingContainer.fitFunction(ratePoint, true)
+
+    /* Checking against the container limits. */
+    if (ratePoint.x < upCorner.x) { ratePoint.x = upCorner.x }
+    if (ratePoint.x + thisObject.container.frame.width > bottonCorner.x) { ratePoint.x = bottonCorner.x }
+    if (ratePoint.y < upCorner.y + thisObject.container.frame.height) { ratePoint.y = upCorner.y + thisObject.container.frame.height }
+    if (ratePoint.y > bottonCorner.y) { ratePoint.y = bottonCorner.y }
+
+    thisObject.container.frame.position.y = ratePoint.y - thisObject.container.frame.height
+    thisObject.container.frame.position.x = ratePoint.x - thisObject.container.frame.width
   }
 
   function draw () {

Scales/TimeScale.js

@@ -8,7 +8,7 @@ function newTimeScale () {
     fitFunction: undefined,
     payload: undefined,
     visible: true,
-    onMouseOverSomeInnerContainer: onMouseOverSomeInnerContainer,
+    onMouseOverSomeTimeMachineContainer: onMouseOverSomeTimeMachineContainer,
     physics: physics,
     draw: draw,
     getContainer: getContainer,
@@ -82,7 +82,7 @@ function newTimeScale () {
     thisObject.container.eventHandler.raiseEvent('Lenght Percentage Changed', event)
   }
 
-  function onMouseOverSomeInnerContainer (event) {
+  function onMouseOverSomeTimeMachineContainer (event) {
     mouse = {
       position: {
         x: event.x,