diff --git a/Scales/TimeScale.js b/Scales/TimeScale.js index 509af1765..63b3ff335 100644 --- a/Scales/TimeScale.js +++ b/Scales/TimeScale.js @@ -34,10 +34,13 @@ function newTimeScale () { } let visible = false + let timeLineCoordinateSystem return thisObject - function initialize () { + function initialize (pTimeLineCoordinateSystem) { + timeLineCoordinateSystem = pTimeLineCoordinateSystem + thisObject.container.eventHandler.listenToEvent('Mouse Wheel', onMouseWheel) thisObject.lenghtPercentage = window.localStorage.getItem(MODULE_NAME) @@ -131,17 +134,24 @@ to be visible at the top of the viewPort. */ y: frame.height / 10 } + point5 = { + x: 0, + y: frame.height + } + /* Now the transformations. */ point1 = transformThisPoint(point1, frame.container) point2 = transformThisPoint(point2, frame.container) point3 = transformThisPoint(point3, frame.container) point4 = transformThisPoint(point4, frame.container) + point5 = transformThisPoint(point5, frame.container) point1 = viewPort.fitIntoVisibleArea(point1) point2 = viewPort.fitIntoVisibleArea(point2) point3 = viewPort.fitIntoVisibleArea(point3) point4 = viewPort.fitIntoVisibleArea(point4) + point5 = viewPort.fitIntoVisibleArea(point5) if (point3.y - point2.y < MIN_HEIGHT) { point3.y = point2.y + MIN_HEIGHT @@ -149,7 +159,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) @@ -161,8 +171,7 @@ to be visible at the top of the viewPort. */ browserCanvasContext.strokeStyle = 'rgba(150, 150, 150, 1)' browserCanvasContext.lineWidth = 1 browserCanvasContext.stroke() - - browserCanvasContext.closePath() +*/ thisObject.container.frame.position.x = point1.x thisObject.container.frame.position.y = point1.y @@ -175,27 +184,31 @@ to be visible at the top of the viewPort. */ y: point1.y - TOP_MARGIN } - let label = '2018-09-22 05:22:31' - let fontSize = 10 + let date = getDateFromPoint(point, thisObject.container, timeLineCoordinateSystem) + date = new Date(date) - // getRateFromPoint(ratePoint) + let label = date.toUTCString() + let fontSize = 10 let xOffset = label.length * fontSize * FONT_ASPECT_RATIO browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY - browserCanvasContext.fillStyle = 'rgba(60, 60, 60, 0.50)' + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK + ', 0.50)' if (point.x - xOffset / 2 < point1.x || point.x + xOffset / 2 > point2.x) { return } browserCanvasContext.fillText(label, point.x - xOffset / 2, point.y + fontSize + 2) -/* + browserCanvasContext.beginPath() - browserCanvasContext.rect(point.x - xOffset / 2, point.y, xOffset, fontSize + 2) - browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)' - browserCanvasContext.fill() + browserCanvasContext.moveTo(point.x, point1.y) + browserCanvasContext.lineTo(point.x, point5.y) browserCanvasContext.closePath() - */ + + browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.DARK + ', 0.5)' + browserCanvasContext.lineWidth = 0.2 + browserCanvasContext.setLineDash([1, 5]) + browserCanvasContext.stroke() } } diff --git a/TimeMachine.js b/TimeMachine.js index 20493e52f..2f5388997 100644 --- a/TimeMachine.js +++ b/TimeMachine.js @@ -116,7 +116,7 @@ function newTimeMachine () { thisObject.container.eventHandler.raiseEvent('Dimmensions Changed', event) }) - timeScale.initialize() + timeScale.initialize(timeLineCoordinateSystem) rigthScale = newRigthScale()