From 6fde43db50754dd62a6cf52a4acdae36bea02ab8 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Fri, 10 May 2019 11:32:44 +0200 Subject: [PATCH] floating space apeearing --- Globals.js | 11 ++++----- Spaces/BottomSpace.js | 33 ++++++++++++++------------- Spaces/ChartSpace.js | 53 +++++++++++++++++++++++++++++++++++++++---- TimelineChart.js | 5 +++- ViewPort.js | 2 +- 5 files changed, 76 insertions(+), 28 deletions(-) diff --git a/Globals.js b/Globals.js index 6b3ed9d1d..e89a71204 100644 --- a/Globals.js +++ b/Globals.js @@ -159,12 +159,11 @@ maxDate.setDate(maxDate.getDate() + 365 * 1); // We might have charts that proj const MIN_PLOTABLE_DATE = new Date(2015, 0, 1, 0, 0, 0); const MAX_PLOTABLE_DATE = maxDate; -const BOTTOM_SPACE_MIN_HEIGHT = 35; -const BOTTOM_SPACE_MAX_HEIGHT = browserCanvas.height; -let TOP_SPACE_HEIGHT = 5; -let BOTTOM_SPACE_HEIGHT = 35; -let BREAKPOINT_HEIGHT = 15; -let SIDE_PANEL_WIDTH = 450 +const TOP_SPACE_HEIGHT = 5; +const BOTTOM_SPACE_HEIGHT = 35; +const BREAKPOINT_HEIGHT = 15; +const SIDE_PANEL_WIDTH = 450 +let BOTTOM_SPACE_POSITION = browserCanvas.height - BOTTOM_SPACE_HEIGHT const PRODUCT_CARD_STATUS = { ON: 'on', diff --git a/Spaces/BottomSpace.js b/Spaces/BottomSpace.js index 43664d3cd..519aae910 100644 --- a/Spaces/BottomSpace.js +++ b/Spaces/BottomSpace.js @@ -55,33 +55,29 @@ } function physics () { - BOTTOM_SPACE_HEIGHT = browserCanvas.height - thisObject.container.frame.position.y - /* Check the limits */ - if (BOTTOM_SPACE_HEIGHT < BOTTOM_SPACE_MIN_HEIGHT) { - BOTTOM_SPACE_HEIGHT = BOTTOM_SPACE_MIN_HEIGHT + if (thisObject.container.frame.position.y > browserCanvas.height - BOTTOM_SPACE_HEIGHT) { thisObject.container.frame.position.y = browserCanvas.height - BOTTOM_SPACE_HEIGHT canvas.strategySpace.makeInvisible() } - if (BOTTOM_SPACE_HEIGHT > BOTTOM_SPACE_MAX_HEIGHT) { - BOTTOM_SPACE_HEIGHT = BOTTOM_SPACE_MAX_HEIGHT - thisObject.container.frame.position.y = browserCanvas.height - BOTTOM_SPACE_HEIGHT + if (thisObject.container.frame.position.y < BOTTOM_SPACE_HEIGHT) { + thisObject.container.frame.position.y = BOTTOM_SPACE_HEIGHT canvas.chartSpace.visible = false canvas.panelsSpace.visible = false } - if (BOTTOM_SPACE_HEIGHT > browserCanvas.height * 25 / 100) { + if (thisObject.container.frame.position.y < browserCanvas.height * 90 / 100) { canvas.strategySpace.makeVisible() } - if (BOTTOM_SPACE_HEIGHT < browserCanvas.height * 95 / 100) { + if (thisObject.container.frame.position.y < browserCanvas.height * 10 / 100) { canvas.chartSpace.visible = true canvas.panelsSpace.visible = true } + BOTTOM_SPACE_POSITION = thisObject.container.frame.position.y viewPort.resize() - thisObject.container.frame.height = BOTTOM_SPACE_HEIGHT } function createNewControl (pType, pDrawFunction, pOwner) { @@ -186,19 +182,24 @@ y: 0 } - zeroPoint = thisObject.container.frame.frameThisPoint(zeroPoint) - - let breakpointsHeight = 15 const RED_LINE_HIGHT = 5 + zeroPoint = thisObject.container.frame.frameThisPoint(zeroPoint) + browserCanvasContext.beginPath() - browserCanvasContext.rect(zeroPoint.x, zeroPoint.y + breakpointsHeight, thisObject.container.frame.width, thisObject.container.frame.height) - browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK + ', ' + opacity + ')' + browserCanvasContext.rect(zeroPoint.x, zeroPoint.y, thisObject.container.frame.width, thisObject.container.frame.height) + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.BLACK + ', ' + opacity + ')' browserCanvasContext.closePath() browserCanvasContext.fill() browserCanvasContext.beginPath() - browserCanvasContext.rect(zeroPoint.x, zeroPoint.y + breakpointsHeight, thisObject.container.frame.width, RED_LINE_HIGHT) + browserCanvasContext.rect(zeroPoint.x, zeroPoint.y, thisObject.container.frame.width, RED_LINE_HIGHT) + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', ' + opacity + ')' + browserCanvasContext.closePath() + browserCanvasContext.fill() + + browserCanvasContext.beginPath() + browserCanvasContext.rect(zeroPoint.x, zeroPoint.y + thisObject.container.frame.height - RED_LINE_HIGHT, thisObject.container.frame.width, RED_LINE_HIGHT) browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', ' + opacity + ')' browserCanvasContext.closePath() browserCanvasContext.fill() diff --git a/Spaces/ChartSpace.js b/Spaces/ChartSpace.js index ca8f8226e..752188c91 100644 --- a/Spaces/ChartSpace.js +++ b/Spaces/ChartSpace.js @@ -1,4 +1,4 @@ - /* +/* The chart space is where all the charts live. What this space contains is a type of object we call Time Machine. A Time Machine is a cointainer of charts objects. The idea is simple, all the chart objects are ploted according to the time of the Time Machine object. When the time of the Time Machine @@ -16,6 +16,7 @@ function newChartSpace () { let thisObject = { visible: true, container: undefined, + fitIntoVisibleArea: fitIntoVisibleArea, drawBackground: drawBackground, draw: draw, timeMachines: [], @@ -50,11 +51,11 @@ function newChartSpace () { let initializedCounter = 0 let toInitialize = 1 - /* We create the first of many possible time machines that could live at the Chart Space. */ + /* We create the first of many possible time machines that could live at the Chart Space. */ let timeMachine = newTimeMachine() - /* We make the time machine a little bit smaller than the current space. */ + /* We make the time machine a little bit smaller than the current space. */ timeMachine.container.frame.position.x = this.container.frame.width / 2 - timeMachine.container.frame.width / 2 timeMachine.container.frame.position.y = this.container.frame.height / 2 - timeMachine.container.frame.height / 2 @@ -81,15 +82,58 @@ function newChartSpace () { } } + function fitIntoVisibleArea (point) { + /* Here we check the boundaries of the resulting points, so they dont go out of the visible area. */ + + if (point.x > browserCanvas.width) { + point.x = browserCanvas.width + } + + if (point.x < 0) { + point.x = 0 + } + + if (point.y > BOTTOM_SPACE_POSITION + BOTTOM_SPACE_HEIGHT / 2) { + point.y = BOTTOM_SPACE_POSITION + BOTTOM_SPACE_HEIGHT / 2 + } + + if (point.y < 0) { + point.y = 0 + } + + return point + } + function drawBackground () { if (thisObject.visible !== true) { return } + drawSpaceBackground() + for (let i = 0; i < thisObject.timeMachines.length; i++) { let timeMachine = thisObject.timeMachines[i] timeMachine.drawBackground() } } + function drawSpaceBackground () { + let opacity = '1' + let fromPoint = { + x: 0, + y: 0 + } + + let toPoint = { + x: browserCanvas.width, + y: BOTTOM_SPACE_POSITION + } + + browserCanvasContext.beginPath() + browserCanvasContext.rect(fromPoint.x, fromPoint.y, toPoint.x - fromPoint.x, toPoint.y - fromPoint.y) + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + opacity + ')' + browserCanvasContext.closePath() + browserCanvasContext.fill() + } + function draw () { if (thisObject.visible !== true) { return } @@ -104,7 +148,7 @@ function newChartSpace () { let container - /* Now we see which is the inner most container that has it */ + /* Now we see which is the inner most container that has it */ for (let i = 0; i < this.timeMachines.length; i++) { container = this.timeMachines[i].getContainer(point, purpose) @@ -117,3 +161,4 @@ function newChartSpace () { return this.container } } + diff --git a/TimelineChart.js b/TimelineChart.js index baf381f59..9cac52b13 100644 --- a/TimelineChart.js +++ b/TimelineChart.js @@ -299,6 +299,9 @@ fromPoint = transformThisPoint(fromPoint, thisObject.container) toPoint = transformThisPoint(toPoint, thisObject.container) + fromPoint = canvas.chartSpace.fitIntoVisibleArea(fromPoint) + toPoint = canvas.chartSpace.fitIntoVisibleArea(toPoint) + browserCanvasContext.beginPath() browserCanvasContext.rect(fromPoint.x, fromPoint.y, toPoint.x - fromPoint.x, toPoint.y - fromPoint.y) @@ -338,7 +341,7 @@ let imageWidth = 150 let MAX_COLUMNS = 16 - let MAX_ROWS = 7 + let MAX_ROWS = 5 let Y_TOP_MARGIN = 30 let point1 = { diff --git a/ViewPort.js b/ViewPort.js index dbfdbde98..c34100d5e 100644 --- a/ViewPort.js +++ b/ViewPort.js @@ -84,7 +84,7 @@ function newViewPort () { function resize () { TOP_MARGIN = 15 + TOP_SPACE_HEIGHT - BOTTOM_MARGIN = 15 + BOTTOM_SPACE_HEIGHT + BOTTOM_MARGIN = 15 + browserCanvas.height - BOTTOM_SPACE_POSITION LEFT_MARGIN = 50 RIGHT_MARGIN = 50 MARGINS = {