Limiting Scales when time machine cointainer gets small

ChartsSpace/TimeMachine.js

@@ -249,7 +249,7 @@ function newTimeMachine () {
   function getContainer (point, purpose) {
     let container
 
-    if (thisObject.rateScale !== undefined) {
+    if (thisObject.rateScale !== undefined && thisObject.rateScale.isVisible === true) {
       container = thisObject.rateScale.getContainer(point)
       if (container !== undefined) {
         if (container.isForThisPurpose(purpose)) {
@@ -258,7 +258,7 @@ function newTimeMachine () {
       }
     }
 
-    if (thisObject.timeScale !== undefined) {
+    if (thisObject.timeScale !== undefined && thisObject.timeScale.isVisible === true) {
       container = thisObject.timeScale.getContainer(point)
       if (container !== undefined) {
         if (container.isForThisPurpose(purpose)) {
@@ -267,7 +267,7 @@ function newTimeMachine () {
       }
     }
 
-    if (thisObject.timeFrameScale !== undefined) {
+    if (thisObject.timeFrameScale !== undefined && thisObject.rateScale.isVisible === true) {
       container = thisObject.timeFrameScale.getContainer(point)
       if (container !== undefined) {
         if (container.isForThisPurpose(purpose)) {
@@ -489,9 +489,9 @@ function newTimeMachine () {
       }
 
       if (drawScales === true) {
-        if (thisObject.timeScale !== undefined) { thisObject.timeScale.draw() }
-        if (thisObject.timeFrameScale !== undefined) { thisObject.timeFrameScale.draw() }
-        if (thisObject.rateScale !== undefined) { thisObject.rateScale.draw() }
+        if (thisObject.timeScale !== undefined && thisObject.timeScale.isVisible === true) { thisObject.timeScale.draw() }
+        if (thisObject.timeFrameScale !== undefined && thisObject.timeFrameScale.isVisible === true) { thisObject.timeFrameScale.draw() }
+        if (thisObject.rateScale !== undefined && thisObject.rateScale.isVisible === true) { thisObject.rateScale.draw() }
       }
     } else {
       let icon = canvas.designerSpace.iconByUiObjectType.get(thisObject.payload.node.type)
@@ -525,9 +525,9 @@ function newTimeMachine () {
       }
 
       if (drawScales === true) {
-        if (thisObject.timeScale !== undefined) { thisObject.timeScale.drawForeground() }
-        if (thisObject.timeFrameScale !== undefined) { thisObject.timeFrameScale.drawForeground() }
-        if (thisObject.rateScale !== undefined) { thisObject.rateScale.drawForeground() }
+        if (thisObject.timeScale !== undefined && thisObject.timeScale.isVisible === true) { thisObject.timeScale.drawForeground() }
+        if (thisObject.timeFrameScale !== undefined && thisObject.timeFrameScale.isVisible === true) { thisObject.timeFrameScale.drawForeground() }
+        if (thisObject.rateScale !== undefined && thisObject.rateScale.isVisible === true) { thisObject.rateScale.drawForeground() }
       }
 
       let style = {

ChartsSpace/TimelineChart.js

@@ -314,7 +314,7 @@ function newTimelineChart () {
   function getContainer (point, purpose) {
     let container
 
-    if (thisObject.rateScale !== undefined) {
+    if (thisObject.rateScale !== undefined && thisObject.rateScale.isVisible === true) {
       container = thisObject.rateScale.getContainer(point)
       if (container !== undefined) {
         if (container.isForThisPurpose(purpose)) {
@@ -323,7 +323,7 @@ function newTimelineChart () {
       }
     }
 
-    if (thisObject.timeFrameScale !== undefined) {
+    if (thisObject.timeFrameScale !== undefined && thisObject.timeFrameScale.isVisible === true) {
       container = thisObject.timeFrameScale.getContainer(point)
       if (container !== undefined) {
         if (container.isForThisPurpose(purpose)) {
@@ -401,8 +401,8 @@ function newTimelineChart () {
   function draw () {
     if (thisObject.container.frame.isInViewPort()) {
       if (drawScales === true) {
-        if (thisObject.timeFrameScale !== undefined) { thisObject.timeFrameScale.draw() }
-        if (thisObject.rateScale !== undefined) { thisObject.rateScale.draw() }
+        if (thisObject.timeFrameScale !== undefined && thisObject.timeFrameScale.isVisible === true) { thisObject.timeFrameScale.draw() }
+        if (thisObject.rateScale !== undefined && thisObject.rateScale.isVisible === true) { thisObject.rateScale.draw() }
       }
     }
   }
@@ -410,8 +410,8 @@ function newTimelineChart () {
   function drawForeground () {
     if (thisObject.container.frame.isInViewPort()) {
       if (drawScales === true) {
-        if (thisObject.timeFrameScale !== undefined) { thisObject.timeFrameScale.drawForeground() }
-        if (thisObject.rateScale !== undefined) { thisObject.rateScale.drawForeground() }
+        if (thisObject.timeFrameScale !== undefined && thisObject.timeFrameScale.isVisible === true) { thisObject.timeFrameScale.drawForeground() }
+        if (thisObject.rateScale !== undefined && thisObject.rateScale.isVisible === true) { thisObject.rateScale.drawForeground() }
       }
     }
   }

Scales/RateScale.js

@@ -10,6 +10,7 @@ function newRateScale () {
     offset: undefined,
     minValue: undefined,
     maxValue: undefined,
+    isVisible: true,
     setScale: setScale,
     onMouseOverSomeTimeMachineContainer: onMouseOverSomeTimeMachineContainer,
     physics: physics,
@@ -371,6 +372,14 @@ function newRateScale () {
 
     thisObject.container.frame.position.y = ratePoint.y - thisObject.container.frame.height
     thisObject.container.frame.position.x = ratePoint.x - thisObject.container.frame.width
+
+    thisObject.isVisible = true
+    if (thisObject.container.frame.position.y + thisObject.container.frame.height * 2 > bottonCorner.y ||
+        thisObject.container.frame.position.y - thisObject.container.frame.height * 1 < upCorner.y ||
+        thisObject.container.frame.position.x < upCorner.x
+      ) {
+      thisObject.isVisible = false
+    }
   }
 
   function draw () {

Scales/TimeFrameScale.js

@@ -6,6 +6,7 @@ function newTimeFrameScale () {
     container: undefined,
     fitFunction: undefined,
     payload: undefined,
+    isVisible: true,
     onMouseOverSomeTimeMachineContainer: onMouseOverSomeTimeMachineContainer,
     draw: draw,
     drawForeground: drawForeground,
@@ -175,6 +176,12 @@ function newTimeFrameScale () {
 
     thisObject.container.frame.position.x = timePoint.x
     thisObject.container.frame.position.y = timePoint.y - thisObject.container.frame.height
+
+    thisObject.isVisible = true
+    if (thisObject.container.frame.position.y + thisObject.container.frame.height > bottonCorner.y ||
+        thisObject.container.frame.position.y - thisObject.container.frame.height * 3 < upCorner.y) {
+      thisObject.isVisible = false
+    }
   }
 
   function onViewportZoomChanged (event) {

Scales/TimeScale.js

@@ -7,6 +7,7 @@ function newTimeScale () {
     date: undefined,
     fitFunction: undefined,
     payload: undefined,
+    isVisible: true,
     onMouseOverSomeTimeMachineContainer: onMouseOverSomeTimeMachineContainer,
     physics: physics,
     draw: draw,
@@ -244,6 +245,12 @@ function newTimeScale () {
 
     thisObject.container.frame.position.x = timePoint.x
     thisObject.container.frame.position.y = timePoint.y
+
+    thisObject.isVisible = true
+    if (thisObject.container.frame.position.y + thisObject.container.frame.height * 4 > bottonCorner.y ||
+        thisObject.container.frame.position.y < upCorner.y) {
+      thisObject.isVisible = false
+    }
   }
 
   function draw () {