Time Scale finished

ChartingSpace/TimeMachine.js

@@ -541,7 +541,7 @@ function newTimeMachine () {
     drawChartsBackground()
     if (thisObject.container.frame.isInViewPort()) {
       if (drawScales === true) {
-        // if (thisObject.timeScale !== undefined && thisObject.timeScale.isVisible === true) { thisObject.timeScale.drawBackground() }
+        if (thisObject.timeScale !== undefined && thisObject.timeScale.isVisible === true) { thisObject.timeScale.drawBackground() }
         if (thisObject.rateScale !== undefined && thisObject.rateScale.isVisible === true) { thisObject.rateScale.drawBackground() }
       }
 

ChartingSpace/TimelineChart.js

@@ -379,7 +379,6 @@ function newTimelineChart () {
   function drawBackground () {
     if (thisObject.container.frame.isInViewPort()) {
       if (drawScales === true) {
-        // if (thisObject.timeScale !== undefined && thisObject.timeScale.isVisible === true) { thisObject.timeScale.drawBackground() }
         if (thisObject.rateScale !== undefined && thisObject.rateScale.isVisible === true) { thisObject.rateScale.drawBackground() }
       }
       drawChartsBackground()

Scales/RateScale.js

@@ -448,7 +448,7 @@ function newRateScale () {
       }
       let ratePoint2 = {
         x: 0,
-        y: TOP_SPACE_HEIGHT + SEPARATION * (i + 1) - FONT_SIZE
+        y: TOP_SPACE_HEIGHT + SEPARATION * (i + 0)
       }
 
       let rate = getRateFromPointAtBrowserCanvas(ratePoint1, rateCalculationsContainer, coordinateSystem)
@@ -474,8 +474,7 @@ function newRateScale () {
     let icon2 = canvas.designSpace.iconByUiObjectType.get(thisObject.payload.node.type)
 
     let backgroundColor = UI_COLOR.BLACK
-    let rate = thisObject.rate
-    let labels = scaleLabels(rate)
+    let labels = scaleLabels(thisObject.rate)
 
     drawScaleDisplay(labels[0], labels[1], labels[2], 0, 0, 0, icon1, icon2, thisObject.container, backgroundColor)
   }

Scales/TimeScale.js

@@ -12,6 +12,7 @@ function newTimeScale () {
     onMouseOverSomeTimeMachineContainer: onMouseOverSomeTimeMachineContainer,
     physics: physics,
     draw: draw,
+    drawBackground: drawBackground,
     drawForeground: drawForeground,
     getContainer: getContainer,
     initialize: initialize,
@@ -290,6 +291,44 @@ function newTimeScale () {
     }
   }
 
+  function drawBackground () {
+    drawScale()
+  }
+
+  function drawScale () {
+    const SEPARATION = 150
+    const NUMBER_OF_LABELS = Math.trunc(canvas.chartingSpace.viewport.width / SEPARATION)
+    const FONT_SIZE = 15
+
+    for (let i = 0; i <= NUMBER_OF_LABELS; i++) {
+      let timePoint = {
+        x: SEPARATION * (i + 1),
+        y: 0
+      }
+
+      let time = getDateFromPointAtBrowserCanvas(timePoint, limitingContainer, coordinateSystem)
+      let labels = scaleLabels(time)
+      let labelDisplace = labels[1].length * FONT_SIZE * FONT_ASPECT_RATIO
+
+      let timePoint1 = {
+        x: SEPARATION * (i + 1) - labelDisplace,
+        y: 0
+      }
+      let timePoint2 = {
+        x: SEPARATION * (i + 1) + labelDisplace,
+        y: 0
+      }
+
+      let fitPoint1 = thisObject.fitFunction(timePoint1)
+      let fitPoint2 = thisObject.fitFunction(timePoint2)
+
+      if (fitPoint1.x === timePoint1.x && fitPoint2.x === timePoint2.x) {
+        drawLabel(labels[1], 1 / 2, 0, 0, 17, FONT_SIZE, thisObject.container, UI_COLOR.GREY, timePoint1.x, undefined)
+        drawLabel(labels[2], 1 / 2, 0, 20, 27, 9, thisObject.container, UI_COLOR.GREY, timePoint1.x, undefined)
+      }
+    }
+  }
+
   function draw () {
     drawScaleBox()
     autoScaleButton.draw()
@@ -308,17 +347,22 @@ function newTimeScale () {
   function drawScaleBox () {
     if (thisObject.date === undefined) { return }
 
-    let label = thisObject.date.toUTCString()
+    let icon1 = canvas.designSpace.iconByUiObjectType.get(thisObject.payload.node.payload.parentNode.type)
+    let icon2 = canvas.designSpace.iconByUiObjectType.get(thisObject.payload.node.type)
+
+    let backgroundColor = UI_COLOR.BLACK
+    let labels = scaleLabels(thisObject.date)
+
+    drawScaleDisplay(labels[0], labels[1], labels[2], 0, 0, 0, icon1, icon2, thisObject.container, backgroundColor)
+  }
+
+  function scaleLabels (date) {
+    let label = 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.designSpace.iconByUiObjectType.get(thisObject.payload.node.payload.parentNode.type)
-    let icon2 = canvas.designSpace.iconByUiObjectType.get(thisObject.payload.node.type)
-
-    let backgroundColor = UI_COLOR.BLACK
-
-    drawScaleDisplay(label1, label2, label3, 0, 0, 0, icon1, icon2, thisObject.container, backgroundColor)
+    return [label1, label2, label3]
   }
 }