diff --git a/Scales/RightScale.js b/Scales/RightScale.js index de5e716b5..bd7ecc144 100644 --- a/Scales/RightScale.js +++ b/Scales/RightScale.js @@ -31,6 +31,13 @@ thisObject.container.isClickeable = false thisObject.container.isWheelable = true + let mouse = { + position: { + x: 0, + y: 0 + } + } + return thisObject function initialize () { @@ -45,6 +52,11 @@ event.heightPercentage = thisObject.heightPercentage thisObject.container.eventHandler.raiseEvent('Height Percentage Changed', event) + + thisObject.container.eventHandler.listenToEvent('onMouseOver', function (event) { + mouse.position.x = event.x + mouse.position.y = event.y + }) } function onMouseWheel (event) { @@ -78,6 +90,7 @@ function draw () { drawBackground() + drawLabel() } function drawBackground () { @@ -96,4 +109,35 @@ browserCanvasContext.fill() } + + function drawLabel () { + let label = '6000' + let fontSize = 10 + + let ratePoint = { + x: 0, + y: mouse.position.y + } + + // getRateFromPoint(ratePoint) + + let labelPoint = { + x: viewPort.visibleArea.topRight.x + 5, + y: mouse.position.y - fontSize / 2 + 1 + } + + let xOffset = 0// label.length / 2 * fontSize * FONT_ASPECT_RATIO + + browserCanvasContext.beginPath() + + browserCanvasContext.rect(labelPoint.x, labelPoint.y, xOffset * 2, fontSize) + 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, labelPoint.x, labelPoint.y) + } } diff --git a/TimeMachine.js b/TimeMachine.js index 75e11f84a..930f6177f 100644 --- a/TimeMachine.js +++ b/TimeMachine.js @@ -98,7 +98,7 @@ function newTimeMachine () { /* Each Time Machine has a Time Scale and a Right Scale. */ timeScale = newTimeScale() - + timeScale.container.connectToParent(thisObject.container, false, false) timeScale.container.eventHandler.listenToEvent('Lenght Percentage Changed', function (event) { thisObject.container.frame.width = TIME_MACHINE_WIDTH * event.lenghtPercentage / 100 thisObject.container.eventHandler.raiseEvent('Dimmensions Changed', event) @@ -107,7 +107,7 @@ function newTimeMachine () { timeScale.initialize() rigthScale = newRigthScale() - + rigthScale.container.connectToParent(thisObject.container, false, false) rigthScale.container.eventHandler.listenToEvent('Height Percentage Changed', function (event) { thisObject.container.frame.height = TIME_MACHINE_HEIGHT * event.heightPercentage / 100 thisObject.container.eventHandler.raiseEvent('Dimmensions Changed', event)