Time Scale with arrows finished

Scales/TimeScale.js

@@ -23,10 +23,12 @@ function newTimeScale () {
   thisObject.container.isDraggeable = false
   thisObject.container.isClickeable = false
   thisObject.container.isWheelable = true
+  thisObject.container.detectMouseOver = true
 
   thisObject.container.frame.width = 190
   thisObject.container.frame.height = 25
 
+  let isMouseOver
   return thisObject
 
   function finalize () {
@@ -36,6 +38,8 @@ function newTimeScale () {
 
   function initialize () {
     thisObject.container.eventHandler.listenToEvent('onMouseWheel', onMouseWheel)
+    thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver)
+    thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver)
 
     thisObject.lenghtPercentage = window.localStorage.getItem(MODULE_NAME)
     if (!thisObject.lenghtPercentage) {
@@ -50,6 +54,14 @@ function newTimeScale () {
     thisObject.container.eventHandler.raiseEvent('Lenght Percentage Changed', event)
   }
 
+  function onMouseOver () {
+    isMouseOver = true
+  }
+
+  function onMouseNotOver () {
+    isMouseOver = false
+  }
+
   function onMouseWheel (event) {
     delta = event.wheelDelta
     if (delta < 0) {
@@ -77,6 +89,111 @@ function newTimeScale () {
   }
 
   function draw () {
+    drawTime()
+    drawArrows()
+  }
+
+  function drawArrows () {
+    if (isMouseOver !== true) { return }
+
+    const X_OFFSET = thisObject.container.frame.width / 2
+    const Y_OFFSET = thisObject.container.frame.height / 2 - 10
+    const HEIGHT = 18
+    const WIDTH = 6
+    const LINE_WIDTH = 3
+    const OPACITY = 0.2
+    const MIN_DISTANCE_FROM_CENTER = 110
+    const CURRENT_VALUE_DISTANCE = MIN_DISTANCE_FROM_CENTER + thisObject.lenghtPercentage
+    const MAX_DISTANCE_FROM_CENTER = MIN_DISTANCE_FROM_CENTER + 100
+    let DISTANCE_BETWEEN_ARROWS = 9
+    let ARROW_DIRECTION = 0
+
+    ARROW_DIRECTION = -1
+    drawTwoArrows()
+    ARROW_DIRECTION = 1
+    drawTwoArrows()
+
+    function drawTwoArrows () {
+      point1 = {
+        x: X_OFFSET - WIDTH / 2 * ARROW_DIRECTION + DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + CURRENT_VALUE_DISTANCE * ARROW_DIRECTION,
+        y: Y_OFFSET - 0
+      }
+
+      point2 = {
+        x: X_OFFSET + WIDTH / 2 * ARROW_DIRECTION + DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + CURRENT_VALUE_DISTANCE * ARROW_DIRECTION,
+        y: Y_OFFSET + HEIGHT / 2
+      }
+
+      point3 = {
+        x: X_OFFSET - WIDTH / 2 * ARROW_DIRECTION + DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + CURRENT_VALUE_DISTANCE * ARROW_DIRECTION,
+        y: Y_OFFSET + HEIGHT
+      }
+
+      point1 = thisObject.container.frame.frameThisPoint(point1)
+      point2 = thisObject.container.frame.frameThisPoint(point2)
+      point3 = thisObject.container.frame.frameThisPoint(point3)
+
+      point4 = {
+        x: X_OFFSET - WIDTH / 2 * ARROW_DIRECTION - DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + CURRENT_VALUE_DISTANCE * ARROW_DIRECTION,
+        y: Y_OFFSET - 0
+      }
+
+      point5 = {
+        x: X_OFFSET + WIDTH / 2 * ARROW_DIRECTION - DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + CURRENT_VALUE_DISTANCE * ARROW_DIRECTION,
+        y: Y_OFFSET + HEIGHT / 2
+      }
+
+      point6 = {
+        x: X_OFFSET - WIDTH / 2 * ARROW_DIRECTION - DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + CURRENT_VALUE_DISTANCE * ARROW_DIRECTION,
+        y: Y_OFFSET + HEIGHT
+      }
+
+      point4 = thisObject.container.frame.frameThisPoint(point4)
+      point5 = thisObject.container.frame.frameThisPoint(point5)
+      point6 = thisObject.container.frame.frameThisPoint(point6)
+
+      point7 = {
+        x: X_OFFSET + WIDTH / 2 * ARROW_DIRECTION + DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + MAX_DISTANCE_FROM_CENTER * ARROW_DIRECTION,
+        y: Y_OFFSET - 0
+      }
+
+      point8 = {
+        x: X_OFFSET - WIDTH / 2 * ARROW_DIRECTION + DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + MAX_DISTANCE_FROM_CENTER * ARROW_DIRECTION,
+        y: Y_OFFSET + HEIGHT / 2
+      }
+
+      point9 = {
+        x: X_OFFSET + WIDTH / 2 * ARROW_DIRECTION + DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + MAX_DISTANCE_FROM_CENTER * ARROW_DIRECTION,
+        y: Y_OFFSET + HEIGHT
+      }
+
+      point7 = thisObject.container.frame.frameThisPoint(point7)
+      point8 = thisObject.container.frame.frameThisPoint(point8)
+      point9 = thisObject.container.frame.frameThisPoint(point9)
+
+      browserCanvasContext.setLineDash([0, 0])
+
+      browserCanvasContext.beginPath()
+
+      browserCanvasContext.moveTo(point1.x, point1.y)
+      browserCanvasContext.lineTo(point2.x, point2.y)
+      browserCanvasContext.lineTo(point3.x, point3.y)
+
+      browserCanvasContext.moveTo(point4.x, point4.y)
+      browserCanvasContext.lineTo(point5.x, point5.y)
+      browserCanvasContext.lineTo(point6.x, point6.y)
+
+      browserCanvasContext.moveTo(point7.x, point7.y)
+      browserCanvasContext.lineTo(point8.x, point8.y)
+      browserCanvasContext.lineTo(point9.x, point9.y)
+
+      browserCanvasContext.lineWidth = LINE_WIDTH
+      browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.DARK + ', ' + OPACITY + ')'
+      browserCanvasContext.stroke()
+    }
+  }
+
+  function drawTime () {
     if (thisObject.visible === false || thisObject.date === undefined) { return }
 
     let label = thisObject.date.toUTCString()
@@ -133,4 +250,3 @@ function newTimeScale () {
     browserCanvasContext.fillText(label2, labelPoint2.x, labelPoint2.y)
   }
 }
-