Zoom out changes the time frame automatically

ChartsSpace/TimeMachine.js

@@ -391,7 +391,7 @@ function newTimeMachine () {
   }
 
   function panelPhysics () {
-    if (thisObject.container.frame.isInViewPort() && canvas.chartSpace.viewport.zoomTargetLevel > 10) {
+    if (thisObject.container.frame.isInViewPort() && canvas.chartSpace.viewport.zoomTargetLevel > ZOOM_OUT_THRESHOLD) {
       canvas.panelsSpace.makeVisible(thisObject.payload.node.id, 'Layers Panel')
     } else {
       canvas.panelsSpace.makeInvisible(thisObject.payload.node.id, 'Layers Panel')

Globals.js

@@ -41,6 +41,7 @@ UI_FONT = {
     SECONDARY: "Source Code Pro"
 };
 
+const ZOOM_OUT_THRESHOLD = 10 // This regulates some behavious changes that happens when the user zoom out below this level.
 let FONT_ASPECT_RATIO = 0.32;
 
 

Scales/TimeFrameScale.js

@@ -21,7 +21,8 @@ function newTimeFrameScale () {
   const TIME_PERIOD_DEFAULT_VALUE = 0
   const MIN_HEIGHT = 50
 
-  let visible = true
+  let previousIsVisible = true
+  let greyOutCoverLayer = false
   let isMouseOver
 
   let filePeriodIndex = FILES_PERIOD_DEFAULT_VALUE
@@ -88,12 +89,12 @@ function newTimeFrameScale () {
   function onMouseOverSomeTimeMachineContainer (event) {
     if (event.containerId === undefined) {
       /* This happens when the mouse over was not at the instance of a certain scale, but anywhere else. */
-      visible = true
+      greyOutCoverLayer = false
     } else {
       if (event.containerId === thisObject.container.id) {
-        visible = true
+        greyOutCoverLayer = false
       } else {
-        visible = false
+        greyOutCoverLayer = true
         turnOnCounter = 0
       }
     }
@@ -118,6 +119,22 @@ function newTimeFrameScale () {
   function physics () {
     readObjectState()
     positioningPhysics()
+    zoomOutPhysics()
+  }
+
+  function zoomOutPhysics () {
+    if (thisObject.isVisible === true && previousIsVisible === false) {
+      let event = {}
+      event.timeFrame = thisObject.timeFrame
+      thisObject.container.eventHandler.raiseEvent('Time Frame Value Changed', event)
+      previousIsVisible = true
+    }
+    if (thisObject.isVisible === false && previousIsVisible === true) {
+      let event = {}
+      event.timeFrame = ONE_DAY_IN_MILISECONDS
+      thisObject.container.eventHandler.raiseEvent('Time Frame Value Changed', event)
+      previousIsVisible = false
+    }
   }
 
   function positioningPhysics () {
@@ -303,7 +320,7 @@ function newTimeFrameScale () {
 
   function draw () {
     drawScaleBox()
-    if (visible === false) {
+    if (greyOutCoverLayer === true) {
       drawScaleDisplayCover(thisObject.container)
     }
   }