diff --git a/Canvas.js b/Canvas.js index 8ef7e6bf9..761054077 100644 --- a/Canvas.js +++ b/Canvas.js @@ -159,13 +159,13 @@ function newCanvas () { /* Here we add all the functions that will be called during the animation cycle. */ + animation.addCallBackFunction('ViewPort Draw', viewPort.draw, onFunctionAdded) 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) animation.addCallBackFunction('Splash Screen', splashScreen.draw, onFunctionAdded) animation.addCallBackFunction('ViewPort Animate', viewPort.animate, onFunctionAdded) - animation.addCallBackFunction('ViewPort Draw', viewPort.draw, onFunctionAdded) animation.addCallBackFunction('Bottom Space', thisObject.bottomSpace.draw, onFunctionAdded) animation.addCallBackFunction('Top Space', thisObject.topSpace.draw, onFunctionAdded) animation.start(onStart) diff --git a/TimelineChart.js b/TimelineChart.js index 615a378d2..5b92a91b3 100644 --- a/TimelineChart.js +++ b/TimelineChart.js @@ -274,8 +274,6 @@ if (window.CHART_ON_FOCUS === '') { window.CHART_ON_FOCUS = exchange + ' ' + market.assetB + '/' + market.assetA - this.container.frame.draw() - drawChartsBackgroundImages() } } @@ -306,7 +304,7 @@ } let toPoint = { - x: 0, + x: thisObject.container.frame.width, y: thisObject.container.frame.height } @@ -315,7 +313,7 @@ browserCanvasContext.beginPath() - browserCanvasContext.rect(viewPort.visibleArea.topLeft.x, fromPoint.y, viewPort.visibleArea.topRight.x - viewPort.visibleArea.topLeft.x, toPoint.y - fromPoint.y) + browserCanvasContext.rect(fromPoint.x, fromPoint.y, toPoint.x - fromPoint.x, toPoint.y - fromPoint.y) browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + opacity + ')' browserCanvasContext.closePath() @@ -328,6 +326,23 @@ if (canDrawLogoA === false || canDrawLogoB === false || canDrawLogoExchange === false || canDrawLogoAA === false) { return } + /* Fist we calculate the corners of the current frame so as not to draw imaages ourside of it */ + + let fromPoint = { + x: 0, + y: 0 + } + + let toPoint = { + x: thisObject.container.frame.width, + y: thisObject.container.frame.height + } + + fromPoint = transformThisPoint(fromPoint, thisObject.container) + toPoint = transformThisPoint(toPoint, thisObject.container) + + /* Second we calculate the points for the images themselves */ + let backgroundLogoPoint1 let backgroundLogoPoint2 @@ -371,6 +386,10 @@ imagePoint = transformThisPoint(imagePoint, thisObject.container) let offSet = 0 + let imagePosition = { + x: 0, + y: 0 + } for (let j = 0; j < MAX_ROWS; j++) { if (offSet === -imageWidth * 8) { @@ -382,7 +401,17 @@ for (let i = 0; i < MAX_COLUMNS; i = i + 4) { let logo = logoA - browserCanvasContext.drawImage(logo, imagePoint.x + i * imageWidth * 2 + offSet, imagePoint.y + j * rowHight + Y_TOP_MARGIN, imageWidth, imageHeight) + imagePosition.x = imagePoint.x + i * imageWidth * 2 + offSet + imagePosition.y = imagePoint.y + j * rowHight + Y_TOP_MARGIN + + if ( + imagePosition.x > fromPoint.x && + imagePosition.x + imageWidth < toPoint.x && + imagePosition.y > fromPoint.y && + imagePosition.y + imageHeight < toPoint.y + ) { + browserCanvasContext.drawImage(logo, imagePosition.x, imagePosition.y, imageWidth, imageHeight) + } } } @@ -398,7 +427,17 @@ for (let i = 1; i < MAX_COLUMNS; i = i + 4) { let logo = logoB - browserCanvasContext.drawImage(logo, imagePoint.x + i * imageWidth * 2 + offSet, imagePoint.y + j * rowHight + Y_TOP_MARGIN, imageWidth, imageHeight) + imagePosition.x = imagePoint.x + i * imageWidth * 2 + offSet + imagePosition.y = imagePoint.y + j * rowHight + Y_TOP_MARGIN + + if ( + imagePosition.x > fromPoint.x && + imagePosition.x + imageWidth < toPoint.x && + imagePosition.y > fromPoint.y && + imagePosition.y + imageHeight < toPoint.y + ) { + browserCanvasContext.drawImage(logo, imagePosition.x, imagePosition.y, imageWidth, imageHeight) + } } } @@ -414,7 +453,17 @@ for (let i = 2; i < MAX_COLUMNS; i = i + 4) { let logo = logoExchange - browserCanvasContext.drawImage(logo, imagePoint.x + i * imageWidth * 2 + offSet, imagePoint.y + j * rowHight + Y_TOP_MARGIN, imageWidth, imageHeight) + imagePosition.x = imagePoint.x + i * imageWidth * 2 + offSet + imagePosition.y = imagePoint.y + j * rowHight + Y_TOP_MARGIN + + if ( + imagePosition.x > fromPoint.x && + imagePosition.x + imageWidth < toPoint.x && + imagePosition.y > fromPoint.y && + imagePosition.y + imageHeight < toPoint.y + ) { + browserCanvasContext.drawImage(logo, imagePosition.x, imagePosition.y, imageWidth, imageHeight) + } } } @@ -430,7 +479,17 @@ for (let i = 3; i < MAX_COLUMNS; i = i + 4) { let logo = logoAA - browserCanvasContext.drawImage(logo, imagePoint.x + i * imageWidth * 2 + offSet, imagePoint.y + j * rowHight + Y_TOP_MARGIN, imageWidth, imageHeight) + imagePosition.x = imagePoint.x + i * imageWidth * 2 + offSet + imagePosition.y = imagePoint.y + j * rowHight + Y_TOP_MARGIN + + if ( + imagePosition.x > fromPoint.x && + imagePosition.x + imageWidth < toPoint.x && + imagePosition.y > fromPoint.y && + imagePosition.y + imageHeight < toPoint.y + ) { + browserCanvasContext.drawImage(logo, imagePosition.x, imagePosition.y, imageWidth, imageHeight) + } } } } diff --git a/ViewPort.js b/ViewPort.js index e45fc54c8..5e11c1c65 100644 --- a/ViewPort.js +++ b/ViewPort.js @@ -332,22 +332,21 @@ function newViewPort () { } function draw () { -/* - drawGrid(10); - drawGrid(1); - drawGrid(0.1); -*/ + drawGrid(0.1) } function drawGrid (step) { + if (thisObject.zoomLevel > -17) { return } + let squareWidth = (thisObject.visibleArea.bottomRight.x - thisObject.visibleArea.bottomLeft.x) / step squareWidth = squareWidth + squareWidth * increment * thisObject.zoomLevel let startingX = offset.x - Math.trunc(offset.x / squareWidth) * squareWidth let startingY = offset.y - Math.trunc(offset.y / squareWidth) * squareWidth - let lineWidth = 10 / step + 10 / step * increment * thisObject.zoomLevel + let lineWidth = 0.4 + thisObject.zoomLevel / 100 + lineWidth = lineWidth.toFixed(2) - if (lineWidth < 0.5) { + if (lineWidth < 0.1) { return } @@ -357,39 +356,41 @@ function newViewPort () { browserCanvasContext.beginPath() + let CROSS_SIZE = 5 + for (var i = startingX; i < thisObject.visibleArea.bottomRight.x; i = i + squareWidth) { for (var j = startingY; j < thisObject.visibleArea.bottomRight.y; j = j + squareWidth) { let point1 = { - x: thisObject.visibleArea.bottomLeft.x, - y: j + x: Math.trunc(i - CROSS_SIZE), + y: Math.trunc(j) } let point2 = { - x: thisObject.visibleArea.bottomRight.x, - y: j + x: Math.trunc(i + CROSS_SIZE), + y: Math.trunc(j) } browserCanvasContext.moveTo(point1.x, point1.y) browserCanvasContext.lineTo(point2.x, point2.y) - } - let point3 = { - x: i, - y: thisObject.visibleArea.topLeft.y - } + let point3 = { + x: Math.trunc(i), + y: Math.trunc(j - CROSS_SIZE) + } - let point4 = { - x: i, - y: thisObject.visibleArea.bottomLeft.y - } + let point4 = { + x: Math.trunc(i), + y: Math.trunc(j + CROSS_SIZE) + } - browserCanvasContext.moveTo(point3.x, point3.y) - browserCanvasContext.lineTo(point4.x, point4.y) + browserCanvasContext.moveTo(point3.x, point3.y) + browserCanvasContext.lineTo(point4.x, point4.y) + } } browserCanvasContext.closePath() - browserCanvasContext.strokeStyle = 'rgba(150, 150, 150, 0.' + Math.trunc(lineWidth + 1) + ')' + browserCanvasContext.strokeStyle = 'rgba(150, 150, 150, 1)' - browserCanvasContext.lineWidth = lineWidth + browserCanvasContext.lineWidth = 1 browserCanvasContext.stroke() }