From 74d58f8dcba5d22bf7ba76106981c7b77f7682ca Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Thu, 16 May 2019 14:51:04 +0200 Subject: [PATCH] rateScale redesigned --- ChartsSpace/TimeMachine.js | 64 ++++++--- Scales/Commons.js | 50 +++++++ Scales/RateScale.js | 260 ++++++++++++++++++------------------- Scales/TimeScale.js | 49 +------ 4 files changed, 220 insertions(+), 203 deletions(-) create mode 100644 Scales/Commons.js diff --git a/ChartsSpace/TimeMachine.js b/ChartsSpace/TimeMachine.js index 322147780..4ef15162d 100644 --- a/ChartsSpace/TimeMachine.js +++ b/ChartsSpace/TimeMachine.js @@ -125,7 +125,7 @@ function newTimeMachine () { thisObject.container.eventHandler.raiseEvent('Dimmensions Changed', event) }) - thisObject.rateScale.initialize(timeLineCoordinateSystem) + thisObject.rateScale.initialize() thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver) @@ -138,8 +138,6 @@ function newTimeMachine () { mouse.position.x = event.x mouse.position.y = event.y - - thisObject.rateScale.setMousePosition(event) } function initializeTheRest () { @@ -246,17 +244,6 @@ function newTimeMachine () { } function thisObjectPhysics () { - /* Mouse Position Date Calculation */ - - let datePoint = { - x: mouse.position.x, - y: 0 - } - - let mouseDate = getDateFromPoint(datePoint, thisObject.container, timeLineCoordinateSystem) - - thisObject.timeScale.date = new Date(mouseDate) - /* Screen Corner Date Calculation */ let point = { @@ -272,24 +259,61 @@ function newTimeMachine () { function childrenPhysics () { thisObject.timeScale.physics() thisObject.rateScale.physics() + for (let i = 0; i < thisObject.charts.length; i++) { let chart = thisObject.charts[i] chart.physics() } -/* timeScale Positioning */ + /* Mouse Position Date Calculation */ + + let timePoint = { + x: mouse.position.x, + y: 0 + } + + let mouseDate = getDateFromPoint(timePoint, thisObject.container, timeLineCoordinateSystem) + + thisObject.timeScale.date = new Date(mouseDate) + + /* Mouse Position Rate Calculation */ + + let ratePoint = { + x: 0, + y: mouse.position.y + } + + let mouseRate = getRateFromPoint(ratePoint, thisObject.container, timeLineCoordinateSystem) + + thisObject.rateScale.rate = mouseRate + + /* timeScale Positioning */ thisObject.timeScale.container.frame.position.x = mouse.position.x - thisObject.timeScale.container.frame.width / 2 - let point = { + timePoint = { x: 0, y: 0 } - point = transformThisPoint(point, thisObject.container.frame.container) - point = thisObject.container.fitFunction(point) + timePoint = transformThisPoint(timePoint, thisObject.container.frame.container) + timePoint = thisObject.container.fitFunction(timePoint) - thisObject.timeScale.container.frame.position.y = point.y + thisObject.timeScale.container.frame.position.y = timePoint.y + + /* rateScale Positioning */ + + thisObject.rateScale.container.frame.position.y = mouse.position.y - thisObject.rateScale.container.frame.height / 2 + + ratePoint = { + x: 10000000000000, + y: 0 + } + + ratePoint = transformThisPoint(ratePoint, thisObject.container.frame.container) + ratePoint = thisObject.container.fitFunction(ratePoint) + + thisObject.rateScale.container.frame.position.x = ratePoint.x - thisObject.rateScale.container.frame.width } function drawBackground () { @@ -311,7 +335,7 @@ function newTimeMachine () { } if (thisObject.timeScale !== undefined) { thisObject.timeScale.draw() } - // if (thisObject.rateScale !== undefined) { thisObject.rateScale.draw() } + if (thisObject.rateScale !== undefined) { thisObject.rateScale.draw() } // thisObject.container.frame.draw(false, true, false) } diff --git a/Scales/Commons.js b/Scales/Commons.js new file mode 100644 index 000000000..b8497ca08 --- /dev/null +++ b/Scales/Commons.js @@ -0,0 +1,50 @@ + +function drawScaleDisplay (label1, label2, xExtraOffSet1, xExtraOffSet2, container) { + let fontSize1 = 20 + let fontSize2 = 10 + + const RED_LINE_HIGHT = 5 + const OPACITY = 1 + + let params = { + cornerRadius: 3, + lineWidth: RED_LINE_HIGHT, + container: container, + borderColor: UI_COLOR.RUSTED_RED, + castShadow: false, + backgroundColor: UI_COLOR.DARK, + opacity: OPACITY + } + + roundedCornersBackground(params) + + /* Place the Text */ + + let xOffset1 = label1.length * fontSize1 * FONT_ASPECT_RATIO + + let labelPoint1 = { + x: container.frame.width / 2 - xOffset1 + xExtraOffSet1, + y: container.frame.height / 2 + 6 + } + + labelPoint1 = container.frame.frameThisPoint(labelPoint1) + + browserCanvasContext.font = fontSize1 + 'px ' + UI_FONT.PRIMARY + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)' + + browserCanvasContext.fillText(label1, labelPoint1.x, labelPoint1.y) + + let xOffset2 = label2.length * fontSize2 * FONT_ASPECT_RATIO + + let labelPoint2 = { + x: container.frame.width / 2 - xOffset2 / 2 - 3 + xExtraOffSet2, + y: container.frame.height / 2 + 6 + } + + labelPoint2 = container.frame.frameThisPoint(labelPoint2) + + browserCanvasContext.font = fontSize2 + 'px ' + UI_FONT.PRIMARY + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)' + + browserCanvasContext.fillText(label2, labelPoint2.x, labelPoint2.y) +} diff --git a/Scales/RateScale.js b/Scales/RateScale.js index e57f9f746..10b6c14e1 100644 --- a/Scales/RateScale.js +++ b/Scales/RateScale.js @@ -4,8 +4,8 @@ function newRateScale () { let thisObject = { heightPercentage: 100, container: undefined, + rate: undefined, visible: true, - setMousePosition: setMousePosition, physics: physics, draw: draw, getContainer: getContainer, @@ -20,25 +20,15 @@ function newRateScale () { thisObject.container = newContainer() thisObject.container.initialize(MODULE_NAME) - 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 - thisObject.container.frame.position.y = TOP_SPACE_HEIGHT - thisObject.container.isDraggeable = false thisObject.container.isClickeable = false thisObject.container.isWheelable = true + thisObject.container.detectMouseOver = true - let mouse = { - position: { - x: 0, - y: 0 - } - } - - let timeLineCoordinateSystem + thisObject.container.frame.width = 110 + thisObject.container.frame.height = 25 + let isMouseOver return thisObject function finalize () { @@ -46,10 +36,10 @@ function newRateScale () { thisObject.container = undefined } - function initialize (pTimeLineCoordinateSystem) { - timeLineCoordinateSystem = pTimeLineCoordinateSystem - + function initialize () { thisObject.container.eventHandler.listenToEvent('onMouseWheel', onMouseWheel) + thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver) + thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver) thisObject.heightPercentage = window.localStorage.getItem(MODULE_NAME) if (!thisObject.heightPercentage) { @@ -63,9 +53,12 @@ function newRateScale () { thisObject.container.eventHandler.raiseEvent('Height Percentage Changed', event) } - function setMousePosition (point) { - mouse.position.x = point.x - mouse.position.y = point.y + function onMouseOver () { + isMouseOver = true + } + + function onMouseNotOver () { + isMouseOver = false } function onMouseWheel (event) { @@ -83,23 +76,9 @@ function newRateScale () { window.localStorage.setItem(MODULE_NAME, thisObject.heightPercentage) } - function getContainer (pPoint) { - let container - -/* 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, undefined, true) === true) { + function getContainer (point) { + if (thisObject.container.frame.isThisPointHere(point, true) === true) { return thisObject.container - } else { - /* This point does not belong to this space. */ - - return undefined } } @@ -108,110 +87,121 @@ function newRateScale () { } function draw () { - if (thisObject.visible === false) { return } + drawRate() + drawArrows() + } -/* 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 thisObject.visible at the top of the viewPort. */ + function drawArrows () { + if (isMouseOver !== true) { return } + if (thisObject.visible === false || thisObject.rate === undefined) { return } - let frame = thisObject.container.parentContainer.frame - let point1 - let point2 - let point3 - let point4 + const X_OFFSET = thisObject.container.frame.width / 2 + const Y_OFFSET = thisObject.container.frame.height / 2 + const HEIGHT = 6 + const WIDTH = 18 + const LINE_WIDTH = 3 + const OPACITY = 0.2 + const DISTANCE_BETWEEN_ARROWS = 10 + const MIN_DISTANCE_FROM_CENTER = 30 + const CURRENT_VALUE_DISTANCE = MIN_DISTANCE_FROM_CENTER + thisObject.heightPercentage + const MAX_DISTANCE_FROM_CENTER = MIN_DISTANCE_FROM_CENTER + 115 + DISTANCE_BETWEEN_ARROWS - point1 = { - x: frame.width - frame.width / 10, - y: 0 + let ARROW_DIRECTION = 0 + + ARROW_DIRECTION = -1 + drawTwoArrows() + ARROW_DIRECTION = 1 + drawTwoArrows() + + function drawTwoArrows () { + point1 = { + x: X_OFFSET - WIDTH / 2, + y: Y_OFFSET + DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + CURRENT_VALUE_DISTANCE * ARROW_DIRECTION + } + + point2 = { + x: X_OFFSET, + y: Y_OFFSET + HEIGHT * ARROW_DIRECTION + DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + CURRENT_VALUE_DISTANCE * ARROW_DIRECTION + } + + point3 = { + x: X_OFFSET + WIDTH / 2, + y: Y_OFFSET + DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + CURRENT_VALUE_DISTANCE * ARROW_DIRECTION + } + + point1 = thisObject.container.frame.frameThisPoint(point1) + point2 = thisObject.container.frame.frameThisPoint(point2) + point3 = thisObject.container.frame.frameThisPoint(point3) + + point4 = { + x: X_OFFSET - WIDTH / 2, + y: Y_OFFSET - DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + CURRENT_VALUE_DISTANCE * ARROW_DIRECTION + } + + point5 = { + x: X_OFFSET, + y: Y_OFFSET + HEIGHT * ARROW_DIRECTION - DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + CURRENT_VALUE_DISTANCE * ARROW_DIRECTION + } + + point6 = { + x: X_OFFSET + WIDTH / 2, + y: Y_OFFSET - DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + CURRENT_VALUE_DISTANCE * ARROW_DIRECTION + } + + point4 = thisObject.container.frame.frameThisPoint(point4) + point5 = thisObject.container.frame.frameThisPoint(point5) + point6 = thisObject.container.frame.frameThisPoint(point6) + + point7 = { + x: X_OFFSET - WIDTH / 2, + y: Y_OFFSET - DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + MAX_DISTANCE_FROM_CENTER * ARROW_DIRECTION + } + + point8 = { + x: X_OFFSET, + y: Y_OFFSET - HEIGHT * ARROW_DIRECTION - DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + MAX_DISTANCE_FROM_CENTER * ARROW_DIRECTION + } + + point9 = { + x: X_OFFSET + WIDTH / 2, + y: Y_OFFSET - DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + MAX_DISTANCE_FROM_CENTER * ARROW_DIRECTION + } + + 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() } + } - point2 = { - x: frame.width, - y: 0 - } + function drawRate () { + if (thisObject.visible === false || thisObject.rate === undefined) { return } - point3 = { - x: frame.width, - y: frame.height - } + let label = (thisObject.rate - Math.trunc(thisObject.rate)).toFixed(2) + let labelArray = label.split('.') + let label1 = (Math.trunc(thisObject.rate)).toLocaleString() + let label2 = labelArray[1] - 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, point1.y) - browserCanvasContext.lineTo(point2.x + viewPort.margins.RIGHT, point2.y) - browserCanvasContext.lineTo(point3.x + viewPort.margins.RIGHT, point3.y) - browserCanvasContext.lineTo(point4.x, point4.y) - browserCanvasContext.lineTo(point1.x, 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 + viewPort.margins.RIGHT, - y: mouse.position.y - } - - let rate = getRateFromPoint(point, thisObject.container.parentContainer, timeLineCoordinateSystem) - - let label = rate.toFixed(2) - let fontSize = 10 - - let xOffset = label.length * fontSize * FONT_ASPECT_RATIO - - if (point.y + fontSize / 2 > point3.y || point.y - fontSize / 2 < point1.y) { return } - - browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY - browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK + ', 0.50)' - - browserCanvasContext.fillText(label, point1.x + viewPort.margins.RIGHT, point.y + fontSize / 2) - - browserCanvasContext.beginPath() - - browserCanvasContext.moveTo(point.x, point.y) - browserCanvasContext.lineTo(point1.x + viewPort.margins.RIGHT, point.y) - - browserCanvasContext.closePath() - - browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.DARK + ', 0.5)' - browserCanvasContext.lineWidth = 0.2 - browserCanvasContext.setLineDash([1, 5]) - browserCanvasContext.stroke() + drawScaleDisplay(label1, label2, 10, 40, thisObject.container) } } + diff --git a/Scales/TimeScale.js b/Scales/TimeScale.js index 14b85566a..fc0a5c2bd 100644 --- a/Scales/TimeScale.js +++ b/Scales/TimeScale.js @@ -50,7 +50,6 @@ function newTimeScale () { let event = {} event.lenghtPercentage = thisObject.lenghtPercentage - thisObject.container.eventHandler.raiseEvent('Lenght Percentage Changed', event) } @@ -203,53 +202,7 @@ function newTimeScale () { let label1 = labelArray[1] + ' ' + labelArray[2] + ' ' + labelArray[3] let label2 = labelArray[4] - let fontSize1 = 20 - let fontSize2 = 10 - - const RED_LINE_HIGHT = 5 - const OPACITY = 1 - - let params = { - cornerRadius: 3, - lineWidth: RED_LINE_HIGHT, - container: thisObject.container, - borderColor: UI_COLOR.RUSTED_RED, - castShadow: false, - backgroundColor: UI_COLOR.DARK, - opacity: OPACITY - } - - roundedCornersBackground(params) - - /* Place the Text */ - - let xOffset1 = label1.length * fontSize1 * FONT_ASPECT_RATIO - - let labelPoint1 = { - x: thisObject.container.frame.width / 2 - xOffset1 + 15, - y: thisObject.container.frame.height / 2 + 6 - } - - labelPoint1 = thisObject.container.frame.frameThisPoint(labelPoint1) - - browserCanvasContext.font = fontSize1 + 'px ' + UI_FONT.PRIMARY - browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)' - - browserCanvasContext.fillText(label1, labelPoint1.x, labelPoint1.y) - - let xOffset2 = label2.length * fontSize2 * FONT_ASPECT_RATIO - - let labelPoint2 = { - x: thisObject.container.frame.width / 2 - xOffset2 / 2 - 3 + 60, - y: thisObject.container.frame.height / 2 + 6 - } - - labelPoint2 = thisObject.container.frame.frameThisPoint(labelPoint2) - - browserCanvasContext.font = fontSize2 + 'px ' + UI_FONT.PRIMARY - browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)' - - browserCanvasContext.fillText(label2, labelPoint2.x, labelPoint2.y) + drawScaleDisplay(label1, label2, 10, 60, thisObject.container) } }