From b6623191a234d2be28af53d4b6a2e13d9fa3c1f0 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Thu, 16 May 2019 10:58:21 +0200 Subject: [PATCH] timeScale working again --- ChartsSpace/TimeMachine.js | 101 +++++++++++++++++++----- Scales/RateScale.js | 29 +++---- Scales/TimePeriodScale.js | 8 +- Scales/TimeScale.js | 157 ++++++------------------------------- Spaces/ChartSpace.js | 15 ++-- 5 files changed, 136 insertions(+), 174 deletions(-) diff --git a/ChartsSpace/TimeMachine.js b/ChartsSpace/TimeMachine.js index b511509aa..a46e5d0c6 100644 --- a/ChartsSpace/TimeMachine.js +++ b/ChartsSpace/TimeMachine.js @@ -16,6 +16,8 @@ function newTimeMachine () { let thisObject = { container: undefined, + timeScale: undefined, + rateScale: undefined, charts: [], physics: physics, drawBackground: drawBackground, @@ -40,11 +42,15 @@ function newTimeMachine () { // ... also to request a reference to the object for the cases we need it. const SEPARATION_BETWEEN_TIMELINE_CHARTS = 1.5 - let timeScale - let rateScale - let timeLineCoordinateSystem = newTimeLineCoordinateSystem() + let mouse = { + position: { + x: 0, + y: 0 + } + } + return thisObject function finalize () { @@ -52,6 +58,14 @@ function newTimeMachine () { let chart = thisObject.charts[i] chart.finalize() } + + thisObject.container.finalize() + thisObject.container = undefined + + thisObject.timeScale.finalize() + thisObject.timeScale = undefined + thisObject.rateScale.finalize() + thisObject.rateScale = undefined } function initialize (callBackFunction) { @@ -97,27 +111,39 @@ function newTimeMachine () { /* Each Time Machine has a Time Scale and a Right Scale. */ - timeScale = newTimeScale() - timeScale.container.connectToParent(thisObject.container, false, false, false, true, true, true) - timeScale.container.eventHandler.listenToEvent('Lenght Percentage Changed', function (event) { + thisObject.timeScale = newTimeScale() + + thisObject.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) }) - timeScale.initialize(timeLineCoordinateSystem) + thisObject.timeScale.initialize() - rateScale = newRateScale() - rateScale.container.connectToParent(thisObject.container, false, false, false, true, true, true) - rateScale.container.eventHandler.listenToEvent('Height Percentage Changed', function (event) { + thisObject.rateScale = newRateScale() + + thisObject.rateScale.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) }) - rateScale.initialize(timeLineCoordinateSystem) + thisObject.rateScale.initialize(timeLineCoordinateSystem) + + thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver) initializeTheRest() } + function onMouseOver (event) { + thisObject.timeScale.visible = true + thisObject.rateScale.visible = true + + mouse.position.x = event.x + mouse.position.y = event.y + + thisObject.rateScale.setMousePosition(event) + } + function initializeTheRest () { let leftToInitialize = SUPPORTED_EXCHANGES.length * SUPPORTED_MARKETS.length - 1 // The default exchange and market was already initialized. let alreadyInitialized = 0 @@ -175,8 +201,8 @@ function newTimeMachine () { function getContainer (point, purpose) { let container - if (timeScale !== undefined) { - container = timeScale.getContainer(point) + if (thisObject.timeScale !== undefined) { + container = thisObject.timeScale.getContainer(point) if (container !== undefined) { if (container.isForThisPurpose(purpose)) { return container @@ -184,8 +210,8 @@ function newTimeMachine () { } } - if (rateScale !== undefined) { - container = rateScale.getContainer(point) + if (thisObject.rateScale !== undefined) { + container = thisObject.rateScale.getContainer(point) if (container !== undefined) { if (container.isForThisPurpose(purpose)) { return container @@ -209,6 +235,8 @@ function newTimeMachine () { } else { if (purpose === GET_CONTAINER_PURPOSE.MOUSE_OVER) { thisObject.container.eventHandler.raiseEvent('onMouseNotOver') + thisObject.timeScale.visible = false + thisObject.rateScale.visible = false } return } @@ -220,16 +248,50 @@ 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 = { + x: 0, + y: 0 + } + + let cornerDate = getDateFromPoint(point, thisObject.container, timeLineCoordinateSystem) + cornerDate = new Date(cornerDate) + window.localStorage.setItem('Date @ Screen Corner', cornerDate.toUTCString()) } function childrenPhysics () { - timeScale.physics() - rateScale.physics() + thisObject.timeScale.physics() + thisObject.rateScale.physics() for (let i = 0; i < thisObject.charts.length; i++) { let chart = thisObject.charts[i] chart.physics() } + +/* timeScale Positioning */ + + thisObject.timeScale.container.frame.position.x = mouse.position.x - thisObject.timeScale.container.frame.width / 2 + + let point = { + x: 0, + y: thisObject.container.frame.height / 10 + } + + point = transformThisPoint(point, thisObject.container.frame.container) + point = viewPort.fitIntoVisibleArea(point) + + thisObject.timeScale.container.frame.position.y = point.y + 6 } function drawBackground () { @@ -250,8 +312,8 @@ function newTimeMachine () { chart.draw() } - if (timeScale !== undefined) { timeScale.draw() } - if (rateScale !== undefined) { rateScale.draw() } + if (thisObject.timeScale !== undefined) { thisObject.timeScale.draw() } + // if (thisObject.rateScale !== undefined) { thisObject.rateScale.draw() } // thisObject.container.frame.draw(false, true, false) } @@ -291,3 +353,4 @@ function newTimeMachine () { ) } } + diff --git a/Scales/RateScale.js b/Scales/RateScale.js index 4d5a08252..e57f9f746 100644 --- a/Scales/RateScale.js +++ b/Scales/RateScale.js @@ -4,10 +4,13 @@ function newRateScale () { let thisObject = { heightPercentage: 100, container: undefined, + visible: true, + setMousePosition: setMousePosition, physics: physics, draw: draw, getContainer: getContainer, - initialize: initialize + initialize: initialize, + finalize: finalize } const HEIGHT_PERCENTAGE_DEFAULT_VALUE = 50 @@ -34,11 +37,15 @@ function newRateScale () { } } - let visible = true let timeLineCoordinateSystem return thisObject + function finalize () { + thisObject.container.finalize() + thisObject.container = undefined + } + function initialize (pTimeLineCoordinateSystem) { timeLineCoordinateSystem = pTimeLineCoordinateSystem @@ -54,17 +61,11 @@ function newRateScale () { let event = {} 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 - - visible = true - }) - - thisObject.container.eventHandler.listenToEvent('onMouseNotOver', function (event) { - visible = false - }) + function setMousePosition (point) { + mouse.position.x = point.x + mouse.position.y = point.y } function onMouseWheel (event) { @@ -107,10 +108,10 @@ function newRateScale () { } function draw () { - if (visible === false) { return } + if (thisObject.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. */ +to be thisObject.visible at the top of the viewPort. */ let frame = thisObject.container.parentContainer.frame let point1 diff --git a/Scales/TimePeriodScale.js b/Scales/TimePeriodScale.js index 7ffce22f1..25d94cf15 100644 --- a/Scales/TimePeriodScale.js +++ b/Scales/TimePeriodScale.js @@ -2,11 +2,12 @@ function newTimePeriodScale () { const MODULE_NAME = 'Time Period Scale' let thisObject = { + timePeriod: undefined, container: undefined, draw: draw, getContainer: getContainer, initialize: initialize, - timePeriod: undefined + finalize: finalize } const FILES_PERIOD_DEFAULT_VALUE = 0 @@ -37,6 +38,11 @@ function newTimePeriodScale () { return thisObject + function finalize () { + thisObject.container.finalize() + thisObject.container = undefined + } + function initialize (pTimeLineCoordinateSystem) { timeLineCoordinateSystem = pTimeLineCoordinateSystem diff --git a/Scales/TimeScale.js b/Scales/TimeScale.js index 721fc4e10..57bc83243 100644 --- a/Scales/TimeScale.js +++ b/Scales/TimeScale.js @@ -4,10 +4,13 @@ function newTimeScale () { let thisObject = { lenghtPercentage: undefined, container: undefined, + date: undefined, + visible: true, physics: physics, draw: draw, getContainer: getContainer, - initialize: initialize + initialize: initialize, + finalize: finalize } const LENGHT_PERCENTAGE_DEFAULT_VALUE = 5 @@ -21,21 +24,17 @@ function newTimeScale () { thisObject.container.isClickeable = false thisObject.container.isWheelable = true - let mouse = { - position: { - x: 0, - y: 0 - } - } - - let visible = true - let timeLineCoordinateSystem + thisObject.container.frame.width = 190 + thisObject.container.frame.height = 25 return thisObject - function initialize (pTimeLineCoordinateSystem) { - timeLineCoordinateSystem = pTimeLineCoordinateSystem + function finalize () { + thisObject.container.finalize() + thisObject.container = undefined + } + function initialize () { thisObject.container.eventHandler.listenToEvent('onMouseWheel', onMouseWheel) thisObject.lenghtPercentage = window.localStorage.getItem(MODULE_NAME) @@ -47,18 +46,8 @@ function newTimeScale () { let event = {} event.lenghtPercentage = thisObject.lenghtPercentage + thisObject.container.eventHandler.raiseEvent('Lenght Percentage Changed', event) - - 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 - }) } function onMouseWheel (event) { @@ -77,108 +66,20 @@ function newTimeScale () { window.localStorage.setItem(MODULE_NAME, thisObject.lenghtPercentage) } - 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 - point.y = pPoint.y - thisObject.container.frame.position.y + viewPort.margins.TOP - - 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 } } function physics () { - let point = { - x: 0, - y: 0 - } - let date = getDateFromPoint(point, thisObject.container.parentContainer, timeLineCoordinateSystem) - date = new Date(date) - window.localStorage.setItem('Date @ Screen Corner', date.toUTCString()) } function draw () { - if (visible === false) { return } + if (thisObject.visible === false || thisObject.date === undefined) { 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: 0, - y: 0 - } - - point2 = { - x: frame.width, - y: 0 - } - - point3 = { - x: frame.width, - y: frame.height / 10 - } - - point4 = { - x: 0, - 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 - point4.y = point2.y + MIN_HEIGHT - } - - 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: mouse.position.x, - y: point1.y - viewPort.margins.TOP - } - - let date = getDateFromPoint(point, thisObject.container.parentContainer, timeLineCoordinateSystem) - date = new Date(date) - - let label = date.toUTCString() + let label = thisObject.date.toUTCString() let labelArray = label.split(' ') let label1 = labelArray[1] + ' ' + labelArray[2] + ' ' + labelArray[3] let label2 = labelArray[4] @@ -189,22 +90,10 @@ to be visible at the top of the viewPort. */ const RED_LINE_HIGHT = 5 const OPACITY = 1 - let centerPoint = { - x: mouse.position.x, - y: point1.y + viewPort.margins.BOTTOM - } - - let container = newContainer() - container.initialize('Visible Time Scale') - container.frame.width = 190 - container.frame.height = 25 - container.frame.position.x = centerPoint.x - container.frame.width / 2 - container.frame.position.y = centerPoint.y - container.frame.height / 2 - let params = { cornerRadius: 3, lineWidth: RED_LINE_HIGHT, - container: container, + container: thisObject.container, borderColor: UI_COLOR.RUSTED_RED, castShadow: false, backgroundColor: UI_COLOR.DARK, @@ -218,10 +107,12 @@ to be visible at the top of the viewPort. */ let xOffset1 = label1.length * fontSize1 * FONT_ASPECT_RATIO let labelPoint1 = { - x: mouse.position.x - xOffset1 + 15, - y: point1.y + viewPort.margins.BOTTOM + 6 + 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)' @@ -230,10 +121,12 @@ to be visible at the top of the viewPort. */ let xOffset2 = label2.length * fontSize2 * FONT_ASPECT_RATIO let labelPoint2 = { - x: mouse.position.x - xOffset2 / 2 - 3 + 70, - y: point1.y + viewPort.margins.BOTTOM + 6 + 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)' diff --git a/Spaces/ChartSpace.js b/Spaces/ChartSpace.js index 96aaa7bbc..e4242795a 100644 --- a/Spaces/ChartSpace.js +++ b/Spaces/ChartSpace.js @@ -15,12 +15,12 @@ function newChartSpace () { let thisObject = { visible: true, container: undefined, + timeMachines: [], fitIntoVisibleArea: fitIntoVisibleArea, isThisPointVisible: isThisPointVisible, physics: physics, drawBackground: drawBackground, draw: draw, - timeMachines: [], getContainer: getContainer, // returns the inner most container that holds the point received by parameter. initialize: initialize, finalize: finalize @@ -35,14 +35,13 @@ function newChartSpace () { return thisObject function finalize () { - try { - for (let i = 0; i < thisObject.timeMachines.length; i++) { - let timeMachine = thisObject.timeMachines[i] - timeMachine.finalize() - } - } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] finalize -> err = ' + err.stack) } + for (let i = 0; i < thisObject.timeMachines.length; i++) { + let timeMachine = thisObject.timeMachines[i] + timeMachine.finalize() } + + thisObject.container.finalize() + thisObject.container = undefined } function initialize (callBackFunction) {