From 77fbf709fb56b5cc051f0f7e36d878f0440084b8 Mon Sep 17 00:00:00 2001
From: Luis Fernando Molina <Luis-Fernando-Molina@users.noreply.github.com>
Date: Thu, 18 Apr 2019 12:16:01 +0200
Subject: [PATCH] Time following the mouse

---
 Globals.js          |  2 +-
 Scales/TimeScale.js | 43 +++++++++++++++++++++++++++++++++++++++++--
 2 files changed, 42 insertions(+), 3 deletions(-)

diff --git a/Globals.js b/Globals.js
index 92245ec4d..d5c075ab4 100644
--- a/Globals.js
+++ b/Globals.js
@@ -35,7 +35,7 @@ UI_FONT = {
     SECONDARY: "Source Code Pro"
 };
 
-FONT_ASPECT_RATIO = 0.45;
+FONT_ASPECT_RATIO = 0.55;
 const MIN_ZOOM_LEVEL = -28.25
 
 const GET_CONTAINER_PURPOSE = {
diff --git a/Scales/TimeScale.js b/Scales/TimeScale.js
index 8c0087f2c..63ca86c28 100644
--- a/Scales/TimeScale.js
+++ b/Scales/TimeScale.js
@@ -26,6 +26,13 @@ function newTimeScale () {
   thisObject.container.isClickeable = false
   thisObject.container.isWheelable = true
 
+  let mouse = {
+    position: {
+      x: 0,
+      y: 0
+    }
+  }
+
   return thisObject
 
   function initialize () {
@@ -41,6 +48,11 @@ function newTimeScale () {
     let event = {}
     event.lenghtPercentage = thisObject.lenghtPercentage
     thisObject.container.eventHandler.raiseEvent('Lenght Percentage Changed', event)
+
+    thisObject.container.eventHandler.listenToEvent('onMouseOver', function (event) {
+      mouse.position.x = event.x
+      mouse.position.y = event.y
+    })
   }
 
   function onMouseWheel (event) {
@@ -127,7 +139,7 @@ to be visible at the top of the viewPort. */
     }
 
     /* Lets start the drawing. */
-/*
+
     browserCanvasContext.beginPath()
     browserCanvasContext.moveTo(point1.x, point1.y - TOP_MARGIN)
     browserCanvasContext.lineTo(point2.x, point2.y - TOP_MARGIN)
@@ -141,11 +153,38 @@ to be visible at the top of the viewPort. */
     browserCanvasContext.stroke()
 
     browserCanvasContext.closePath()
-*/
+
     thisObject.container.frame.position.x = point1.x
     thisObject.container.frame.position.y = point1.y
 
     thisObject.container.frame.width = point2.x - point1.x
     thisObject.container.frame.height = point3.y - point2.y
+
+    let point = {
+      x: mouse.position.x,
+      y: point1.y - TOP_MARGIN
+    }
+    drawLabel(point)
+  }
+
+  function drawLabel (point) {
+    let label = '2018-09-22 05:22:31'
+    let fontSize = 10
+
+    // getRateFromPoint(ratePoint)
+
+    let xOffset = label.length * fontSize * FONT_ASPECT_RATIO
+
+    browserCanvasContext.beginPath()
+
+    browserCanvasContext.rect(point.x - xOffset / 2, point.y, xOffset, fontSize + 2)
+    browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', 1)'
+    browserCanvasContext.fill()
+
+    browserCanvasContext.closePath()
+
+    browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
+    browserCanvasContext.fillStyle = 'rgba(60, 60, 60, 0.50)'
+    browserCanvasContext.fillText(label, point.x - xOffset / 2, point.y + fontSize + 2)
   }
 }