From e89769f0d9d2e0f05708428c9f59f37f86f0d67e Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Tue, 2 Apr 2019 23:31:08 +0200 Subject: [PATCH] drawBackground Imlemented --- Canvas.js | 1 + Spaces/ChartSpace.js | 10 ++++-- SplashScreen.js | 2 +- TimeMachine.js | 10 ++++-- TimelineChart.js | 73 +++++++++++++++++++++++++------------------- 5 files changed, 60 insertions(+), 36 deletions(-) diff --git a/Canvas.js b/Canvas.js index 0e720bd4a..4e6330e49 100644 --- a/Canvas.js +++ b/Canvas.js @@ -159,6 +159,7 @@ function newCanvas () { /* Here we add all the functions that will be called during the animation cycle. */ + animation.addCallBackFunction('Chart Space Background', thisObject.chartSpace.drawBackground, onFunctionAdded) animation.addCallBackFunction('Chart Space', thisObject.chartSpace.draw, onFunctionAdded) animation.addCallBackFunction('Floating Space', thisObject.floatingSpace.floatingLayer.physicsLoop, onFunctionAdded) animation.addCallBackFunction('Panels Space', thisObject.panelsSpace.draw, onFunctionAdded) diff --git a/Spaces/ChartSpace.js b/Spaces/ChartSpace.js index 06ecfe4e0..b047ad9ae 100644 --- a/Spaces/ChartSpace.js +++ b/Spaces/ChartSpace.js @@ -15,6 +15,7 @@ function newChartSpace () { var thisObject = { container: undefined, + drawBackground: drawBackground, draw: draw, timeMachines: [], getContainer: getContainer, // returns the inner most container that holds the point received by parameter. @@ -97,11 +98,16 @@ function newChartSpace () { } } + function drawBackground () { + for (var i = 0; i < thisObject.timeMachines.length; i++) { + var timeMachine = thisObject.timeMachines[i] + timeMachine.drawBackground() + } + } + function draw () { thisObject.container.frame.draw(false, false) - /* When we draw the chart space, that means we draw all the time machines in it. */ - for (var i = 0; i < thisObject.timeMachines.length; i++) { var timeMachine = thisObject.timeMachines[i] timeMachine.draw() diff --git a/SplashScreen.js b/SplashScreen.js index 78ea7d85a..0697ad560 100644 --- a/SplashScreen.js +++ b/SplashScreen.js @@ -100,7 +100,7 @@ function newSplashScreen () { /* Second the % of Advance. */ let label = '' + Math.trunc(stepsInitializationCounter) + ' %' - stepsInitializationCounter = stepsInitializationCounter + 0.5 + stepsInitializationCounter = stepsInitializationCounter + 0.1 if (stepsInitializationCounter > 99) { splashScreenNeeded = false diff --git a/TimeMachine.js b/TimeMachine.js index a13ccc5ac..29312f0b7 100644 --- a/TimeMachine.js +++ b/TimeMachine.js @@ -17,6 +17,7 @@ function newTimeMachine () { let thisObject = { container: undefined, + drawBackground: drawBackground, draw: draw, charts: [], getContainer: getContainer, // returns the inner most container that holds the point received by parameter. @@ -158,11 +159,16 @@ function newTimeMachine () { } } + function drawBackground () { + for (let i = 0; i < this.charts.length; i++) { + let chart = this.charts[i] + chart.drawBackground() + } + } + function draw () { this.container.frame.draw(false, false) - /* When we draw a time machine, that means also to draw all the charts in it. */ - for (let i = 0; i < this.charts.length; i++) { let chart = this.charts[i] chart.draw() diff --git a/TimelineChart.js b/TimelineChart.js index e9e028cd9..3058a650d 100644 --- a/TimelineChart.js +++ b/TimelineChart.js @@ -14,6 +14,7 @@ let thisObject = { setDatetime: setDatetime, container: undefined, + drawBackground: drawBackground, draw: draw, getContainer: getContainer, initialize: initialize, @@ -301,8 +302,8 @@ } } - function draw () { - if (INTENSIVE_LOG === true) { logger.write('[INFO] draw -> Entering function.') } + function drawBackground () { + if (INTENSIVE_LOG === true) { logger.write('[INFO] drawBackground -> Entering function.') } if (thisObject.container.frame.isInViewPort()) { if (window.CHART_ON_FOCUS === '') { @@ -310,8 +311,16 @@ this.container.frame.draw() - drawBackground() + drawChartsBackgroundImages() } + } + } + + function draw () { + if (INTENSIVE_LOG === true) { logger.write('[INFO] draw -> Entering function.') } + + if (thisObject.container.frame.isInViewPort()) { + drawChartsBackground() chartGrid.draw(thisObject.container, timeLineCoordinateSystem) @@ -321,8 +330,36 @@ } } - function drawBackground () { - if (INTENSIVE_LOG === true) { logger.write('[INFO] drawBackground -> Entering function.') } + function drawChartsBackground () { + /* We will paint some transparent background here. */ + + let opacity = '0.9' + + let fromPoint = { + x: 0, + y: 0 + } + + let toPoint = { + x: 0, + y: thisObject.container.frame.height + } + + fromPoint = transformThisPoint(fromPoint, thisObject.container) + toPoint = transformThisPoint(toPoint, thisObject.container) + + browserCanvasContext.beginPath() + + browserCanvasContext.rect(viewPort.visibleArea.topLeft.x, fromPoint.y, viewPort.visibleArea.topRight.x - viewPort.visibleArea.topLeft.x, toPoint.y - fromPoint.y) + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + opacity + ')' + + browserCanvasContext.closePath() + + browserCanvasContext.fill() + } + + function drawChartsBackgroundImages () { + if (INTENSIVE_LOG === true) { logger.write('[INFO] drawChartsBackground -> Entering function.') } if (canDrawLogoA === false || canDrawLogoB === false || canDrawLogoExchange === false || canDrawLogoAA === false) { return } @@ -431,32 +468,6 @@ browserCanvasContext.drawImage(logo, imagePoint.x + i * imageWidth * 2 + offSet, imagePoint.y + j * rowHight + Y_TOP_MARGIN, imageWidth, imageHeight) } } - - /* We will paint some transparent background here. */ - - let opacity = '0.9' - - let fromPoint = { - x: 0, - y: 0 - } - - let toPoint = { - x: 0, - y: thisObject.container.frame.height - } - - fromPoint = transformThisPoint(fromPoint, thisObject.container) - toPoint = transformThisPoint(toPoint, thisObject.container) - - browserCanvasContext.beginPath() - - browserCanvasContext.rect(viewPort.visibleArea.topLeft.x, fromPoint.y, viewPort.visibleArea.topRight.x - viewPort.visibleArea.topLeft.x, toPoint.y - fromPoint.y) - browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + opacity + ')' - - browserCanvasContext.closePath() - - browserCanvasContext.fill() } function moveViewPortToCurrentDatetime () {