diff --git a/Scales/TimeScale.js b/Scales/TimeScale.js index 57bc83243..1a4d6ca7f 100644 --- a/Scales/TimeScale.js +++ b/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) } } -