Scales not visible grayed out

ChartsSpace/TimeMachine.js

@@ -24,8 +24,9 @@ function newTimeMachine () {
     payload: undefined,
     timelineCharts: [],
     physics: physics,
-    drawBackground: drawBackground,
     draw: draw,
+    drawBackground: drawBackground,
+    drawForeground: drawForeground,
     getContainer: getContainer,     // returns the inner most container that holds the point received by parameter.
     initialize: initialize,
     finalize: finalize
@@ -407,15 +408,6 @@ function newTimeMachine () {
     }
   }
 
-  function drawBackground () {
-    if (thisObject.container.frame.isInViewPort()) {
-      for (let i = 0; i < thisObject.timelineCharts.length; i++) {
-        let timelineChart = thisObject.timelineCharts[i]
-        timelineChart.drawBackground()
-      }
-    }
-  }
-
   function draw () {
     if (thisObject.container.frame.isInViewPort()) {
       for (let i = 0; i < thisObject.timelineCharts.length; i++) {
@@ -431,6 +423,28 @@ function newTimeMachine () {
     }
   }
 
+  function drawBackground () {
+    if (thisObject.container.frame.isInViewPort()) {
+      for (let i = 0; i < thisObject.timelineCharts.length; i++) {
+        let timelineChart = thisObject.timelineCharts[i]
+        timelineChart.drawBackground()
+      }
+    }
+  }
+
+  function drawForeground () {
+    if (thisObject.container.frame.isInViewPort()) {
+      for (let i = 0; i < thisObject.timelineCharts.length; i++) {
+        let timelineChart = thisObject.timelineCharts[i]
+        timelineChart.drawForeground()
+      }
+
+      if (thisObject.timeScale !== undefined) { thisObject.timeScale.drawForeground() }
+      if (thisObject.timeFrameScale !== undefined) { thisObject.timeFrameScale.drawForeground() }
+      if (thisObject.rateScale !== undefined) { thisObject.rateScale.drawForeground() }
+    }
+  }
+
   function recalculateCoordinateSystem () {
     let minValue = {
       x: MIN_PLOTABLE_DATE.valueOf(),

ChartsSpace/TimelineChart.js

@@ -18,8 +18,9 @@ function newTimelineChart () {
     plotterManager: undefined,
     upstreamTimeFrame: undefined,
     physics: physics,
-    drawBackground: drawBackground,
     draw: draw,
+    drawBackground: drawBackground,
+    drawForeground: drawForeground,
     getContainer: getContainer,
     initialize: initialize,
     finalize: finalize
@@ -358,6 +359,13 @@ function newTimelineChart () {
     }
   }
 
+  function draw () {
+    if (thisObject.container.frame.isInViewPort()) {
+      if (thisObject.timeFrameScale !== undefined) { thisObject.timeFrameScale.draw() }
+      if (thisObject.rateScale !== undefined) { thisObject.rateScale.draw() }
+    }
+  }
+
   function drawBackground () {
     if (thisObject.container.frame.isInViewPort()) {
       if (window.CHART_ON_FOCUS === '') {
@@ -368,10 +376,10 @@ function newTimelineChart () {
     }
   }
 
-  function draw () {
+  function drawForeground () {
     if (thisObject.container.frame.isInViewPort()) {
-      if (thisObject.timeFrameScale !== undefined) { thisObject.timeFrameScale.draw() }
-      if (thisObject.rateScale !== undefined) { thisObject.rateScale.draw() }
+      if (thisObject.timeFrameScale !== undefined) { thisObject.timeFrameScale.drawForeground() }
+      if (thisObject.rateScale !== undefined) { thisObject.rateScale.drawForeground() }
     }
   }
 

Scales/Commons.js

@@ -1,5 +1,5 @@
 
-function drawScaleDisplay (label1, label2, label3, xExtraOffSet1, xExtraOffSet2, xExtraOffSet3, icon1, icon2, container) {
+function drawScaleDisplay (label1, label2, label3, xExtraOffSet1, xExtraOffSet2, xExtraOffSet3, icon1, icon2, container, backgroundColor) {
   let fontSize1 = 10
   let fontSize2 = 20
   let fontSize3 = 10
@@ -8,12 +8,12 @@ function drawScaleDisplay (label1, label2, label3, xExtraOffSet1, xExtraOffSet2,
   const OPACITY = 1
 
   let params = {
-    cornerRadius: 5,
-    lineWidth: RED_LINE_HIGHT,
+    cornerRadius: 15,
+    lineWidth: 2,
     container: container,
     borderColor: UI_COLOR.RUSTED_RED,
     castShadow: false,
-    backgroundColor: UI_COLOR.BLACK,
+    backgroundColor: backgroundColor,
     opacity: OPACITY
   }
 
@@ -104,3 +104,17 @@ function drawScaleDisplay (label1, label2, label3, xExtraOffSet1, xExtraOffSet2,
     }
   }
 }
+
+function drawScaleDisplayCover (container) {
+  let params = {
+    cornerRadius: 15,
+    lineWidth: 2,
+    container: container,
+    borderColor: UI_COLOR.WHITE,
+    castShadow: false,
+    backgroundColor: UI_COLOR.WHITE,
+    opacity: '0.75'
+  }
+
+  roundedCornersBackground(params)
+}

Scales/RateScale.js

@@ -10,6 +10,7 @@ function newRateScale () {
     onMouseOverSomeTimeMachineContainer: onMouseOverSomeTimeMachineContainer,
     physics: physics,
     draw: draw,
+    drawForeground: drawForeground,
     getContainer: getContainer,
     initialize: initialize,
     finalize: finalize
@@ -204,12 +205,41 @@ function newRateScale () {
   }
 
   function draw () {
-    drawRate()
-    drawArrows()
+    drawScaleBox()
+    if (visible === false) {
+      drawScaleDisplayCover(thisObject.container)
+    }
+  }
+
+  function drawForeground () {
+    if (isMouseOver === true) {
+      drawScaleBox()
+      drawArrows()
+    }
+  }
+
+  function drawScaleBox () {
+    if (thisObject.rate === undefined) { return }
+
+    let label = (thisObject.rate - Math.trunc(thisObject.rate)).toFixed(2)
+    let labelArray = label.split('.')
+    let label1 = thisObject.payload.node.payload.parentNode.name
+    let label2 = (Math.trunc(thisObject.rate)).toLocaleString()
+    let label3 = labelArray[1]
+
+    let icon1 = canvas.designerSpace.iconByUiObjectType.get(thisObject.payload.node.payload.parentNode.type)
+    let icon2 = canvas.designerSpace.iconByUiObjectType.get(thisObject.payload.node.type)
+
+    let backgroundColor
+    if (visible === true) {
+      backgroundColor = UI_COLOR.BLACK
+    } else {
+      backgroundColor = UI_COLOR.DARK
+    }
+    drawScaleDisplay(label1, label2, label3, 0, 0, 0, icon1, icon2, thisObject.container, backgroundColor)
   }
 
   function drawArrows () {
-    if (isMouseOver !== true) { return }
     if (visible === false || thisObject.rate === undefined) { return }
 
     const X_OFFSET = thisObject.container.frame.width / 2
@@ -309,19 +339,4 @@ function newRateScale () {
       browserCanvasContext.stroke()
     }
   }
-
-  function drawRate () {
-    if (visible === false || thisObject.rate === undefined) { return }
-
-    let label = (thisObject.rate - Math.trunc(thisObject.rate)).toFixed(2)
-    let labelArray = label.split('.')
-    let label1 = thisObject.payload.node.payload.parentNode.name
-    let label2 = (Math.trunc(thisObject.rate)).toLocaleString()
-    let label3 = labelArray[1]
-
-    let icon1 = canvas.designerSpace.iconByUiObjectType.get(thisObject.payload.node.payload.parentNode.type)
-    let icon2 = canvas.designerSpace.iconByUiObjectType.get(thisObject.payload.node.type)
-
-    drawScaleDisplay(label1, label2, label3, 0, 0, 0, icon1, icon2, thisObject.container)
-  }
 }

Scales/TimeFrameScale.js

@@ -8,6 +8,7 @@ function newTimeFrameScale () {
     payload: undefined,
     onMouseOverSomeTimeMachineContainer: onMouseOverSomeTimeMachineContainer,
     draw: draw,
+    drawForeground: drawForeground,
     physics: physics,
     getContainer: getContainer,
     initialize: initialize,
@@ -19,6 +20,8 @@ function newTimeFrameScale () {
   const MIN_HEIGHT = 50
 
   let visible = true
+  let isMouseOver
+
   let objectStorage = {}
   let filePeriodIndex = FILES_PERIOD_DEFAULT_VALUE
   let timeFrameIndex = TIME_PERIOD_DEFAULT_VALUE
@@ -28,6 +31,7 @@ function newTimeFrameScale () {
   let onMouseWheelEventSubscriptionId
   let onZoomChangedEventSubscriptionId
   let onMouseOverEventSubscriptionId
+  let onMouseNotOverEventSubscriptionId
 
   let timeLineCoordinateSystem
   let limitingContainer
@@ -58,6 +62,7 @@ function newTimeFrameScale () {
     thisObject.container.eventHandler.stopListening(onMouseWheelEventSubscriptionId)
     viewPort.eventHandler.stopListening(onZoomChangedEventSubscriptionId)
     thisObject.container.eventHandler.stopListening(onMouseOverEventSubscriptionId)
+    thisObject.container.eventHandler.stopListening(onMouseNotOverEventSubscriptionId)
 
     objectStorage = undefined
 
@@ -77,11 +82,7 @@ function newTimeFrameScale () {
     onMouseWheelEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseWheel', onMouseWheel)
     onZoomChangedEventSubscriptionId = viewPort.eventHandler.listenToEvent('Zoom Changed', onZoomChanged)
     onMouseOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver)
-
-    function onMouseOver () {
-      event.containerId = thisObject.container.id
-      thisObject.container.eventHandler.raiseEvent('onMouseOverScale', event)
-    }
+    onMouseNotOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver)
   }
 
   function onMouseOverSomeTimeMachineContainer (event) {
@@ -103,6 +104,16 @@ function newTimeFrameScale () {
     }
   }
 
+  function onMouseOver () {
+    isMouseOver = true
+    event.containerId = thisObject.container.id
+    thisObject.container.eventHandler.raiseEvent('onMouseOverScale', event)
+  }
+
+  function onMouseNotOver () {
+    isMouseOver = false
+  }
+
   function physics () {
     /* Container Limits */
 
@@ -244,13 +255,20 @@ function newTimeFrameScale () {
   }
 
   function draw () {
-    if (visible === false) { return }
-
-    drawTimeFrame()
+    drawScaleBox()
+    if (visible === false) {
+      drawScaleDisplayCover(thisObject.container)
+    }
   }
 
-  function drawTimeFrame () {
-    if (visible === false || timeFrameLabel === undefined) { return }
+  function drawForeground () {
+    if (isMouseOver === true) {
+      drawScaleBox()
+    }
+  }
+
+  function drawScaleBox () {
+    if (timeFrameLabel === undefined) { return }
 
     let label = timeFrameLabel.split('-')
     let label1 = thisObject.payload.node.payload.parentNode.name
@@ -260,6 +278,12 @@ function newTimeFrameScale () {
     let icon1 = canvas.designerSpace.iconByUiObjectType.get(thisObject.payload.node.payload.parentNode.type)
     let icon2 = canvas.designerSpace.iconByUiObjectType.get(thisObject.payload.node.type)
 
-    drawScaleDisplay(label1, label2, label3, 0, 0, 0, icon1, icon2, thisObject.container)
+    let backgroundColor
+    if (visible === true) {
+      backgroundColor = UI_COLOR.BLACK
+    } else {
+      backgroundColor = UI_COLOR.DARK
+    }
+    drawScaleDisplay(label1, label2, label3, 0, 0, 0, icon1, icon2, thisObject.container, backgroundColor)
   }
 }

Scales/TimeScale.js

@@ -10,6 +10,7 @@ function newTimeScale () {
     onMouseOverSomeTimeMachineContainer: onMouseOverSomeTimeMachineContainer,
     physics: physics,
     draw: draw,
+    drawForeground: drawForeground,
     getContainer: getContainer,
     initialize: initialize,
     finalize: finalize
@@ -186,12 +187,41 @@ function newTimeScale () {
   }
 
   function draw () {
-    drawTime()
-    drawArrows()
+    drawScaleBox()
+    if (visible === false) {
+      drawScaleDisplayCover(thisObject.container)
+    }
+  }
+
+  function drawForeground () {
+    if (isMouseOver === true) {
+      drawScaleBox()
+      drawArrows()
+    }
+  }
+
+  function drawScaleBox () {
+    if (thisObject.date === undefined) { return }
+
+    let label = thisObject.date.toUTCString()
+    let labelArray = label.split(' ')
+    let label1 = thisObject.payload.node.payload.parentNode.name
+    let label2 = labelArray[1] + ' ' + labelArray[2] + ' ' + labelArray[3]
+    let label3 = labelArray[4]
+
+    let icon1 = canvas.designerSpace.iconByUiObjectType.get(thisObject.payload.node.payload.parentNode.type)
+    let icon2 = canvas.designerSpace.iconByUiObjectType.get(thisObject.payload.node.type)
+
+    let backgroundColor
+    if (visible === true) {
+      backgroundColor = UI_COLOR.BLACK
+    } else {
+      backgroundColor = UI_COLOR.DARK
+    }
+    drawScaleDisplay(label1, label2, label3, 0, 0, 0, icon1, icon2, thisObject.container, backgroundColor)
   }
 
   function drawArrows () {
-    if (isMouseOver !== true) { return }
     if (visible === false || thisObject.date === undefined) { return }
 
     const X_OFFSET = thisObject.container.frame.width / 2
@@ -291,19 +321,4 @@ function newTimeScale () {
       browserCanvasContext.stroke()
     }
   }
-
-  function drawTime () {
-    if (visible === false || thisObject.date === undefined) { return }
-
-    let label = thisObject.date.toUTCString()
-    let labelArray = label.split(' ')
-    let label1 = thisObject.payload.node.payload.parentNode.name
-    let label2 = labelArray[1] + ' ' + labelArray[2] + ' ' + labelArray[3]
-    let label3 = labelArray[4]
-
-    let icon1 = canvas.designerSpace.iconByUiObjectType.get(thisObject.payload.node.payload.parentNode.type)
-    let icon2 = canvas.designerSpace.iconByUiObjectType.get(thisObject.payload.node.type)
-
-    drawScaleDisplay(label1, label2, label3, 0, 0, 0, icon1, icon2, thisObject.container)
-  }
 }

Spaces/ChartSpace.js

@@ -294,6 +294,8 @@ function newChartSpace () {
       let timeMachine = thisObject.timeMachines[thisObject.timeMachines.length - i - 1]
       timeMachine.draw()
     }
+
+    drawForeground()
   }
 
   function drawBackground () {
@@ -304,6 +306,14 @@ function newChartSpace () {
       timeMachine.drawBackground()
     }
   }
+
+  function drawForeground () {
+    for (let i = 0; i < thisObject.timeMachines.length; i++) {
+      let timeMachine = thisObject.timeMachines[thisObject.timeMachines.length - i - 1]
+      timeMachine.drawForeground()
+    }
+  }
+
   function drawSpaceBackground () {
     let opacity = '1'
     let fromPoint = {