diff --git a/Scales/RightScale.js b/Scales/RightScale.js index c88b12ceb..3b28fa0e5 100644 --- a/Scales/RightScale.js +++ b/Scales/RightScale.js @@ -15,13 +15,13 @@ } const HEIGHT_PERCENTAGE_DEFAULT_VALUE = 50 - const RIGHT_MARGIN = 50 const STEP_SIZE = 5 + const MIN_WIDTH = 50 thisObject.container = newContainer() thisObject.container.initialize(MODULE_NAME) - thisObject.container.frame.width = RIGHT_MARGIN + thisObject.container.frame.width = viewPort.margins.RIGHT thisObject.container.frame.height = viewPort.visibleArea.bottomRight.y - viewPort.visibleArea.topRight.y thisObject.container.frame.position.x = viewPort.visibleArea.bottomRight.x @@ -38,9 +38,14 @@ } } + let visible = false + let timeLineCoordinateSystem + return thisObject - function initialize () { + function initialize (pTimeLineCoordinateSystem) { + timeLineCoordinateSystem = pTimeLineCoordinateSystem + thisObject.container.eventHandler.listenToEvent('Mouse Wheel', onMouseWheel) thisObject.heightPercentage = window.localStorage.getItem(MODULE_NAME) @@ -57,6 +62,12 @@ thisObject.container.eventHandler.listenToEvent('onMouseOver', function (event) { mouse.position.x = event.x mouse.position.y = event.y + + visible = true + }) + + thisObject.container.eventHandler.listenToEvent('onMouseNotOver', function (event) { + visible = false }) } @@ -75,12 +86,18 @@ window.localStorage.setItem(MODULE_NAME, thisObject.heightPercentage) } - function getContainer (point) { + function getContainer (pPoint) { let container - /* First we check if this point is inside this object UI. */ + /* In this case we manually frame this point since we do a very special treatment of the position of this scale. */ + let point = { + x: 0, + y: 0 + } + point.x = pPoint.x - thisObject.container.frame.position.x - viewPort.margins.RIGHT + point.y = pPoint.y - thisObject.container.frame.position.y - if (thisObject.container.frame.isThisPointHere(point, true) === true) { + if (thisObject.container.frame.isThisPointHere(point, undefined, true) === true) { return thisObject.container } else { /* This point does not belong to this space. */ @@ -90,20 +107,121 @@ } function draw () { - drawBackground() - drawLabel() + if (visible === false) { return } + + /* We need this scale to match the shape of its parent when the parent is inside the viewPort, when it is not, we need the scale still + to be visible at the top of the viewPort. */ + + let frame = thisObject.container.parentContainer.frame + let point1 + let point2 + let point3 + let point4 + + point1 = { + x: frame.width - frame.width / 10, + y: 0 + } + + point2 = { + x: frame.width, + y: 0 + } + + point3 = { + x: frame.width, + y: frame.height + } + + point4 = { + x: frame.width - frame.width / 10, + y: frame.height + } + + point5 = { + x: 0, + y: 0 + } + + /* 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 (point2.x - point1.x < MIN_WIDTH) { + point1.x = point2.x - MIN_WIDTH + point4.x = point2.x - MIN_WIDTH + } + + /* Lets start the drawing. */ + + browserCanvasContext.beginPath() + browserCanvasContext.moveTo(point1.x + viewPort.margins.RIGHT, point1.y) + browserCanvasContext.lineTo(point2.x + viewPort.margins.RIGHT, point2.y) + browserCanvasContext.lineTo(point3.x + viewPort.margins.RIGHT, point3.y) + browserCanvasContext.lineTo(point4.x + viewPort.margins.RIGHT, point4.y) + browserCanvasContext.lineTo(point1.x + viewPort.margins.RIGHT, point1.y) + browserCanvasContext.closePath() + + browserCanvasContext.strokeStyle = 'rgba(150, 150, 150, 1)' + browserCanvasContext.lineWidth = 1 + browserCanvasContext.stroke() + + 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: point5.x, + y: mouse.position.y + } + + let rate = getRateFromPoint(point, thisObject.container, timeLineCoordinateSystem) + + let label = rate.toFixed(2) + let fontSize = 10 + + let xOffset = label.length * fontSize * FONT_ASPECT_RATIO + + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY + 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, point1.x - xOffset / 2, point.y + fontSize + 2) + + browserCanvasContext.beginPath() + + browserCanvasContext.moveTo(point.x, point.y) + browserCanvasContext.lineTo(point.x, point.y) + + browserCanvasContext.closePath() + + browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.DARK + ', 0.5)' + browserCanvasContext.lineWidth = 0.2 + browserCanvasContext.setLineDash([1, 5]) + browserCanvasContext.stroke() } function drawBackground () { - const RIGHT_MARGIN = 50 - /* We will paint some transparent background here. */ let opacity = '0.95' browserCanvasContext.beginPath() - browserCanvasContext.rect(viewPort.visibleArea.topRight.x, viewPort.visibleArea.topRight.y, RIGHT_MARGIN, viewPort.visibleArea.bottomRight.y - viewPort.visibleArea.topRight.y) + browserCanvasContext.rect(viewPort.visibleArea.topRight.x, viewPort.visibleArea.topRight.y, viewPort.margins.RIGHT, viewPort.visibleArea.bottomRight.y - viewPort.visibleArea.topRight.y) browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + opacity + ')' browserCanvasContext.closePath() diff --git a/Scales/TimeScale.js b/Scales/TimeScale.js index 63b3ff335..42d4f65f1 100644 --- a/Scales/TimeScale.js +++ b/Scales/TimeScale.js @@ -17,7 +17,6 @@ function newTimeScale () { const LENGHT_PERCENTAGE_DEFAULT_VALUE = 50 const STEP_SIZE = 5 const MIN_HEIGHT = 50 - const TOP_MARGIN = 15 thisObject.container = newContainer() thisObject.container.initialize(MODULE_NAME) @@ -91,7 +90,7 @@ function newTimeScale () { y: 0 } point.x = pPoint.x - thisObject.container.frame.position.x - point.y = pPoint.y - thisObject.container.frame.position.y + TOP_MARGIN + point.y = pPoint.y - thisObject.container.frame.position.y + viewPort.margins.TOP if (thisObject.container.frame.isThisPointHere(point, undefined, true) === true) { return thisObject.container @@ -161,11 +160,11 @@ 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) - browserCanvasContext.lineTo(point3.x, point3.y - TOP_MARGIN) - browserCanvasContext.lineTo(point4.x, point4.y - TOP_MARGIN) - browserCanvasContext.lineTo(point1.x, point1.y - TOP_MARGIN) + browserCanvasContext.moveTo(point1.x, point1.y - viewPort.margins.TOP) + browserCanvasContext.lineTo(point2.x, point2.y - viewPort.margins.TOP) + browserCanvasContext.lineTo(point3.x, point3.y - viewPort.margins.TOP) + browserCanvasContext.lineTo(point4.x, point4.y - viewPort.margins.TOP) + browserCanvasContext.lineTo(point1.x, point1.y - viewPort.margins.TOP) browserCanvasContext.closePath() browserCanvasContext.strokeStyle = 'rgba(150, 150, 150, 1)' @@ -181,7 +180,7 @@ to be visible at the top of the viewPort. */ let point = { x: mouse.position.x, - y: point1.y - TOP_MARGIN + y: point1.y - viewPort.margins.TOP } let date = getDateFromPoint(point, thisObject.container, timeLineCoordinateSystem) diff --git a/TimeMachine.js b/TimeMachine.js index 2f5388997..efbc9df25 100644 --- a/TimeMachine.js +++ b/TimeMachine.js @@ -106,11 +106,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.frame.height = thisObject.container.frame.height / 10 -*/ 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) @@ -119,13 +115,13 @@ function newTimeMachine () { timeScale.initialize(timeLineCoordinateSystem) 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) }) - rigthScale.initialize() + rigthScale.initialize(timeLineCoordinateSystem) initializeTheRest() } diff --git a/ViewPort.js b/ViewPort.js index 2e0f5dcfa..3bde550d8 100644 --- a/ViewPort.js +++ b/ViewPort.js @@ -7,6 +7,12 @@ function newViewPort () { const BOTTOM_MARGIN = 15 + BOTTOM_SPACE_HEIGHT const LEFT_MARGIN = 50 const RIGHT_MARGIN = 50 + const MARGINS = { + TOP: TOP_MARGIN, + BOTTOM: BOTTOM_MARGIN, + LEFT: LEFT_MARGIN, + RIGHT: RIGHT_MARGIN + } let thisObject = { visibleArea: undefined, @@ -14,6 +20,7 @@ function newViewPort () { zoomTargetLevel: undefined, zoomLevel: undefined, mousePosition: undefined, + margins: MARGINS, getDisplacement: getDisplacement, newZoomLevel: newZoomLevel, applyZoom: applyZoom,