From 5bf999829f9a3484f0a63fb4a7e25aa011b39f5a Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Wed, 17 Apr 2019 19:46:48 +0200 Subject: [PATCH 01/24] timeLineCoordinateSystem moved the time machine --- TimeMachine.js | 34 ++++++++++++++++++++++++++++++++-- TimelineChart.js | 41 +++++++---------------------------------- 2 files changed, 39 insertions(+), 36 deletions(-) diff --git a/TimeMachine.js b/TimeMachine.js index 75e11f84a..d046453af 100644 --- a/TimeMachine.js +++ b/TimeMachine.js @@ -43,6 +43,8 @@ function newTimeMachine () { let timeScale let rigthScale + let timeLineCoordinateSystem = newTimeLineCoordinateSystem() + return thisObject function finalize () { @@ -67,6 +69,13 @@ function newTimeMachine () { controlPanelHandle = canvas.panelsSpace.createNewPanel('Time Control Panel', undefined, panelOwner) let controlPanel = canvas.panelsSpace.getPanel(controlPanelHandle, panelOwner) + recalculateScale() + + thisObject.container.eventHandler.listenToEvent('Dimmensions Changed', function (event) { + recalculateScale() + moveToUserPosition(thisObject.container, timeLineCoordinateSystem, false, false, event.mousePosition) + }) + /* First, we initialize the market that we are going to show first on screen. Later all the other markets will be initialized on the background. */ let position = 0 // This defines the position of each chart respect to each other. @@ -82,7 +91,7 @@ function newTimeMachine () { position++ - timelineChart.initialize(DEFAULT_EXCHANGE, DEFAULT_MARKET, onDefaultInitialized) + timelineChart.initialize(DEFAULT_EXCHANGE, DEFAULT_MARKET, timeLineCoordinateSystem, onDefaultInitialized) function onDefaultInitialized (err) { if (err.result !== GLOBAL.DEFAULT_OK_RESPONSE.result) { @@ -158,7 +167,7 @@ function newTimeMachine () { position++ - timelineChart.initialize(exchange, market, finalSteps) + timelineChart.initialize(exchange, market, timeLineCoordinateSystem, finalSteps) function finalSteps () { if (INFO_LOG === true) { logger.write('[INFO] initialize -> initializeTheRest -> initializeTimelineChart -> finalSteps -> Entering function.') } @@ -228,4 +237,25 @@ function newTimeMachine () { } return this.container } + + function recalculateScale () { + if (INFO_LOG === true) { logger.write('[INFO] recalculateScale -> Entering function.') } + + let minValue = { + x: EARLIEST_DATE.valueOf(), + y: 0 + } + + let maxValue = { + x: MAX_PLOTABLE_DATE.valueOf(), + y: nextPorwerOf10(USDT_BTC_HTH) / 4 + } + + timeLineCoordinateSystem.initialize( + minValue, + maxValue, + thisObject.container.frame.width, + thisObject.container.frame.height + ) + } } diff --git a/TimelineChart.js b/TimelineChart.js index da21b21be..551d1f2a5 100644 --- a/TimelineChart.js +++ b/TimelineChart.js @@ -6,7 +6,7 @@ const logger = newWebDebugLog() logger.fileName = MODULE_NAME - let timeLineCoordinateSystem = newTimeLineCoordinateSystem() + let timeLineCoordinateSystem let timePeriod = INITIAL_TIME_PERIOD let datetime = INITIAL_DATE @@ -60,22 +60,18 @@ } } - function initialize (pExchange, pMarket, callBackFunction) { + function initialize (pExchange, pMarket, pTimeLineCoordinateSystem, callBackFunction) { try { if (INFO_LOG === true) { logger.write('[INFO] initialize -> Entering function.') } - thisObject.container.eventHandler.listenToEvent('Dimmensions Changed', function (event) { - recalculateScale() - moveToUserPosition(thisObject.container, timeLineCoordinateSystem, false, false, event.mousePosition) - }) - - thisObject.container.eventHandler.listenToEvent('onMouseOver', function (event) { - saveUserPosition(thisObject.container, timeLineCoordinateSystem, event) - }) - /* We load the logow we will need for the background. */ exchange = pExchange market = pMarket + timeLineCoordinateSystem = pTimeLineCoordinateSystem + + thisObject.container.eventHandler.listenToEvent('onMouseOver', function (event) { + saveUserPosition(thisObject.container, timeLineCoordinateSystem, event) + }) let panelOwner = exchange + ' ' + market.assetB + '/' + market.assetA productsPanelHandle = canvas.panelsSpace.createNewPanel('Products Panel', undefined, panelOwner) @@ -122,8 +118,6 @@ breakpointsBar = newBreakpointsBar() breakpointsBar.initialize(thisObject.container, timeLineCoordinateSystem) - recalculateScale() - moveToUserPosition(thisObject.container, timeLineCoordinateSystem) timePeriod = INITIAL_TIME_PERIOD datetime = INITIAL_DATE @@ -253,27 +247,6 @@ return container } - function recalculateScale () { - if (INFO_LOG === true) { logger.write('[INFO] recalculateScale -> Entering function.') } - - let minValue = { - x: EARLIEST_DATE.valueOf(), - y: 0 - } - - let maxValue = { - x: MAX_PLOTABLE_DATE.valueOf(), - y: nextPorwerOf10(USDT_BTC_HTH) / 4 - } - - timeLineCoordinateSystem.initialize( - minValue, - maxValue, - thisObject.container.frame.width, - thisObject.container.frame.height - ) - } - function tooTiny () { if (INTENSIVE_LOG === true) { logger.write('[INFO] tooTiny -> Entering function.') } From 7e96c2bc49bbc86d2a0615173cb8a695ff508d1a Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Wed, 17 Apr 2019 20:40:03 +0200 Subject: [PATCH 02/24] Variable Name Standarization --- Globals.js | 15 +++++++++------ Panels/TimeControlPanel.js | 2 +- PlottersManager.js | 4 ++-- ProductCard.js | 2 +- TimeMachine.js | 4 +++- TimelineChart.js | 4 ++-- Utilities.js | 3 +-- 7 files changed, 19 insertions(+), 15 deletions(-) diff --git a/Globals.js b/Globals.js index 61cd669b2..44cb0d68b 100644 --- a/Globals.js +++ b/Globals.js @@ -143,7 +143,14 @@ const _3_MINUTES_IN_MILISECONDS = 3 * 60 * 1000; const _2_MINUTES_IN_MILISECONDS = 2 * 60 * 1000; const _1_MINUTE_IN_MILISECONDS = 1 * 60 * 1000; -const EARLIEST_DATE = new Date(2014, 0, 18, 4, 26, 8); +let NEW_SESSION_INITIAL_DATE = new Date(); // This value will be overwritten at the viewPort.initialize if the user had a prevous session with this same browser. + +let maxDate = new Date(); +maxDate.setMilliseconds(0); +maxDate.setDate(maxDate.getDate() + 365 * 4); // We might have charts that projects data into the future. + +const MIN_PLOTABLE_DATE = new Date(2015, 0, 1, 0, 0, 0); +const MAX_PLOTABLE_DATE = maxDate; const TOP_SPACE_HEIGHT = 5; const BOTTOM_SPACE_HEIGHT = 35; @@ -167,13 +174,9 @@ const PERIOD_10_MIN = "10-min"; const PERIOD_05_MIN = "05-min"; const PERIOD_01_MIN = "01-min"; -let INITIAL_DATE = new Date(); // This value will be overwritten at the viewPort.initialize if the user had a prevous session with this same browser. -var maxDate = new Date(); -maxDate.setMilliseconds(0); -maxDate.setDate(maxDate.getDate() + 10); -const MAX_PLOTABLE_DATE = maxDate; + /* We define here the size of the chartSpace. It has to bee enough big in order to accomodate all the charts we expect to display in this space. diff --git a/Panels/TimeControlPanel.js b/Panels/TimeControlPanel.js index 2a1448e4e..b56759dc3 100644 --- a/Panels/TimeControlPanel.js +++ b/Panels/TimeControlPanel.js @@ -37,7 +37,7 @@ function newTimeControlPanel () { panelTabButton.container.frame.parentFrame = thisObject.container.frame panelTabButton.initialize() - let datetime = INITIAL_DATE + let datetime = NEW_SESSION_INITIAL_DATE let datetimeDisplay = { currentDatetime: datetime, diff --git a/PlottersManager.js b/PlottersManager.js index b73fbc704..f868af859 100644 --- a/PlottersManager.js +++ b/PlottersManager.js @@ -10,7 +10,7 @@ function newPlottersManager () { let competitionPlotters = [] let timePeriod = INITIAL_TIME_PERIOD - let datetime = INITIAL_DATE + let datetime = NEW_SESSION_INITIAL_DATE let thisObject = { setDatetime: setDatetime, @@ -476,7 +476,7 @@ function newPlottersManager () { if (INFO_LOG === true) { logger.write('[INFO] initializeProductPlotter -> onProductStorageInitialized -> onPlotterInizialized -> key = ' + pProductCard.product.plotter.devTeam + '-' + pProductCard.product.plotter.codeName + '-' + pProductCard.product.plotter.moduleName) } try { - // plotter.positionAtDatetime(INITIAL_DATE); + // plotter.positionAtDatetime(NEW_SESSION_INITIAL_DATE); } catch (err) { // If the plotter does not implement this function its ok. } diff --git a/ProductCard.js b/ProductCard.js index 0dcdbd59c..15bdff06a 100644 --- a/ProductCard.js +++ b/ProductCard.js @@ -70,7 +70,7 @@ function newProductCard () { } let timePeriod = INITIAL_TIME_PERIOD - let datetime = INITIAL_DATE + let datetime = NEW_SESSION_INITIAL_DATE /* TODO We are in a transition period in which bots and teams images might be located at different places. What we are going to do then is to try to load them from both places and use the variable that finally gets an diff --git a/TimeMachine.js b/TimeMachine.js index d046453af..ccc32f14f 100644 --- a/TimeMachine.js +++ b/TimeMachine.js @@ -204,6 +204,8 @@ function newTimeMachine () { if (timeScale !== undefined) { timeScale.draw() } if (rigthScale !== undefined) { rigthScale.draw() } + + thisObject.container.frame.draw(false, true, false) } function getContainer (point, purpose) { @@ -242,7 +244,7 @@ function newTimeMachine () { if (INFO_LOG === true) { logger.write('[INFO] recalculateScale -> Entering function.') } let minValue = { - x: EARLIEST_DATE.valueOf(), + x: MIN_PLOTABLE_DATE.valueOf(), y: 0 } diff --git a/TimelineChart.js b/TimelineChart.js index 551d1f2a5..615a378d2 100644 --- a/TimelineChart.js +++ b/TimelineChart.js @@ -9,7 +9,7 @@ let timeLineCoordinateSystem let timePeriod = INITIAL_TIME_PERIOD - let datetime = INITIAL_DATE + let datetime = NEW_SESSION_INITIAL_DATE let thisObject = { setDatetime: setDatetime, @@ -120,7 +120,7 @@ moveToUserPosition(thisObject.container, timeLineCoordinateSystem) timePeriod = INITIAL_TIME_PERIOD - datetime = INITIAL_DATE + datetime = NEW_SESSION_INITIAL_DATE /* Event Subscriptions - we need this events to be fired first here and then in active Plotters. */ diff --git a/Utilities.js b/Utilities.js index 2ea30bde1..64156b30b 100644 --- a/Utilities.js +++ b/Utilities.js @@ -105,7 +105,7 @@ function moveToUserPosition (container, timeLineCoordinateSystem, ignoreX, ignor viewPort.newZoomLevel(userPosition.zoom) INITIAL_TIME_PERIOD = recalculatePeriod(userPosition.zoom) - INITIAL_DATE = new Date(userPosition.date) + NEW_SESSION_INITIAL_DATE = new Date(userPosition.date) let targetPoint = { x: (new Date(userPosition.date)).valueOf(), @@ -150,4 +150,3 @@ function removeTime (datetime) { return dateOnly } - From b33d35d7617d46ff66590315b6f121031b37dece Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Thu, 18 Apr 2019 09:05:47 +0200 Subject: [PATCH 03/24] Small crosses at viewport --- Canvas.js | 2 +- TimelineChart.js | 75 ++++++++++++++++++++++++++++++++++++++++++------ ViewPort.js | 49 +++++++++++++++---------------- 3 files changed, 93 insertions(+), 33 deletions(-) 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() } From f5fbb6e591fe5af9538fc62421ef1ede386e429b Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Thu, 18 Apr 2019 09:18:58 +0200 Subject: [PATCH 04/24] Final adjustments to viewport changes --- Globals.js | 2 +- TimeMachine.js | 2 +- ViewPort.js | 6 +++--- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/Globals.js b/Globals.js index 44cb0d68b..92245ec4d 100644 --- a/Globals.js +++ b/Globals.js @@ -147,7 +147,7 @@ let NEW_SESSION_INITIAL_DATE = new Date(); // This value will be overwritten at let maxDate = new Date(); maxDate.setMilliseconds(0); -maxDate.setDate(maxDate.getDate() + 365 * 4); // We might have charts that projects data into the future. +maxDate.setDate(maxDate.getDate() + 365 * 1); // We might have charts that projects data into the future. const MIN_PLOTABLE_DATE = new Date(2015, 0, 1, 0, 0, 0); const MAX_PLOTABLE_DATE = maxDate; diff --git a/TimeMachine.js b/TimeMachine.js index ccc32f14f..edbd0e756 100644 --- a/TimeMachine.js +++ b/TimeMachine.js @@ -205,7 +205,7 @@ function newTimeMachine () { if (timeScale !== undefined) { timeScale.draw() } if (rigthScale !== undefined) { rigthScale.draw() } - thisObject.container.frame.draw(false, true, false) + // thisObject.container.frame.draw(false, true, false) } function getContainer (point, purpose) { diff --git a/ViewPort.js b/ViewPort.js index 5e11c1c65..0497ddbaf 100644 --- a/ViewPort.js +++ b/ViewPort.js @@ -358,8 +358,8 @@ function newViewPort () { 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) { + for (var i = startingX; i < thisObject.visibleArea.bottomRight.x + RIGHT_MARGIN; i = i + squareWidth) { + for (var j = startingY; j < thisObject.visibleArea.bottomRight.y + BOTTOM_MARGIN; j = j + squareWidth) { let point1 = { x: Math.trunc(i - CROSS_SIZE), y: Math.trunc(j) @@ -388,7 +388,7 @@ function newViewPort () { } } browserCanvasContext.closePath() - browserCanvasContext.strokeStyle = 'rgba(150, 150, 150, 1)' + browserCanvasContext.strokeStyle = 'rgba(150, 150, 150, 0.5)' browserCanvasContext.lineWidth = 1 From 36fb489ac9026dc746d5a91f3ef7b48096432d7f Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Thu, 18 Apr 2019 11:32:21 +0200 Subject: [PATCH 05/24] Positioning of TimeScale working --- Frame.js | 5 +++ Scales/TimeScale.js | 85 ++++++++++++++++++++++++++++++++++++++++----- TimeMachine.js | 23 ++++++------ ViewPort.js | 2 +- 4 files changed, 95 insertions(+), 20 deletions(-) diff --git a/Frame.js b/Frame.js index 93a4627e0..a2a541bef 100644 --- a/Frame.js +++ b/Frame.js @@ -397,6 +397,11 @@ function newFrame () { function borders () { /* Lest get the important points of the drawing so as to apply the needed transformations. */ + let point1 + let point2 + let point3 + let point4 + point1 = { x: 0, y: 0 diff --git a/Scales/TimeScale.js b/Scales/TimeScale.js index 5e8dba0f1..8c0087f2c 100644 --- a/Scales/TimeScale.js +++ b/Scales/TimeScale.js @@ -15,18 +15,13 @@ function newTimeScale () { } const LENGHT_PERCENTAGE_DEFAULT_VALUE = 50 - const RIGHT_MARGIN = 50 const STEP_SIZE = 5 + const MIN_HEIGHT = 50 + const TOP_MARGIN = 15 thisObject.container = newContainer() thisObject.container.initialize(MODULE_NAME) - thisObject.container.frame.width = viewPort.visibleArea.bottomRight.x - viewPort.visibleArea.topLeft.x - thisObject.container.frame.height = 100 - - 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 @@ -64,10 +59,16 @@ function newTimeScale () { window.localStorage.setItem(MODULE_NAME, thisObject.lenghtPercentage) } - function getContainer (point) { + function getContainer (pPoint) { let container - /* First we check if this point is inside this object UI. */ +/* 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 + TOP_MARGIN if (thisObject.container.frame.isThisPointHere(point, undefined, true) === true) { return thisObject.container @@ -79,6 +80,72 @@ function newTimeScale () { } function draw () { +/* 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 + } + + /* Now the transformations. */ + + point1 = transformThisPoint(point1, frame.container) + point2 = transformThisPoint(point2, frame.container) + point3 = transformThisPoint(point3, frame.container) + point4 = transformThisPoint(point4, frame.container) + + point1 = viewPort.fitIntoVisibleArea(point1) + point2 = viewPort.fitIntoVisibleArea(point2) + point3 = viewPort.fitIntoVisibleArea(point3) + point4 = viewPort.fitIntoVisibleArea(point4) + + if (point3.y - point2.y < MIN_HEIGHT) { + point3.y = point2.y + MIN_HEIGHT + point4.y = point2.y + MIN_HEIGHT + } + + /* Lets start the drawing. */ +/* + browserCanvasContext.beginPath() + browserCanvasContext.moveTo(point1.x, point1.y - TOP_MARGIN) + browserCanvasContext.lineTo(point2.x, point2.y - TOP_MARGIN) + browserCanvasContext.lineTo(point3.x, point3.y - TOP_MARGIN) + browserCanvasContext.lineTo(point4.x, point4.y - TOP_MARGIN) + browserCanvasContext.lineTo(point1.x, point1.y - TOP_MARGIN) + browserCanvasContext.closePath() + + browserCanvasContext.strokeStyle = 'rgba(150, 150, 150, 1)' + browserCanvasContext.lineWidth = 1 + browserCanvasContext.stroke() + + browserCanvasContext.closePath() +*/ + 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 } } diff --git a/TimeMachine.js b/TimeMachine.js index edbd0e756..d270ac491 100644 --- a/TimeMachine.js +++ b/TimeMachine.js @@ -83,7 +83,6 @@ function newTimeMachine () { let timelineChart = newTimelineChart() timelineChart.container.connectToParent(thisObject.container, true, true) - timelineChart.container.frame.height = thisObject.container.frame.height timelineChart.container.frame.position.x = thisObject.container.frame.width / 2 - timelineChart.container.frame.width / 2 @@ -108,6 +107,10 @@ function newTimeMachine () { timeScale = newTimeScale() + timeScale.container.connectToParent(thisObject.container, false, false) + /* + timeScale.container.frame.height = thisObject.container.frame.height / 10 +*/ 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) @@ -195,17 +198,17 @@ function newTimeMachine () { } function draw () { - // this.container.frame.draw(false, false) + if (thisObject.container.frame.isInViewPort()) { + for (let i = 0; i < this.charts.length; i++) { + let chart = this.charts[i] + chart.draw() + } - for (let i = 0; i < this.charts.length; i++) { - let chart = this.charts[i] - chart.draw() + if (timeScale !== undefined) { timeScale.draw() } + if (rigthScale !== undefined) { rigthScale.draw() } + + // thisObject.container.frame.draw(false, true, false) } - - if (timeScale !== undefined) { timeScale.draw() } - if (rigthScale !== undefined) { rigthScale.draw() } - - // thisObject.container.frame.draw(false, true, false) } function getContainer (point, purpose) { diff --git a/ViewPort.js b/ViewPort.js index 0497ddbaf..2e0f5dcfa 100644 --- a/ViewPort.js +++ b/ViewPort.js @@ -356,7 +356,7 @@ function newViewPort () { browserCanvasContext.beginPath() - let CROSS_SIZE = 5 + let CROSS_SIZE = 4 for (var i = startingX; i < thisObject.visibleArea.bottomRight.x + RIGHT_MARGIN; i = i + squareWidth) { for (var j = startingY; j < thisObject.visibleArea.bottomRight.y + BOTTOM_MARGIN; j = j + squareWidth) { From 77fbf709fb56b5cc051f0f7e36d878f0440084b8 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Thu, 18 Apr 2019 12:16:01 +0200 Subject: [PATCH 06/24] Time following the mouse --- Globals.js | 2 +- Scales/TimeScale.js | 43 +++++++++++++++++++++++++++++++++++++++++-- 2 files changed, 42 insertions(+), 3 deletions(-) diff --git a/Globals.js b/Globals.js index 92245ec4d..d5c075ab4 100644 --- a/Globals.js +++ b/Globals.js @@ -35,7 +35,7 @@ UI_FONT = { SECONDARY: "Source Code Pro" }; -FONT_ASPECT_RATIO = 0.45; +FONT_ASPECT_RATIO = 0.55; const MIN_ZOOM_LEVEL = -28.25 const GET_CONTAINER_PURPOSE = { diff --git a/Scales/TimeScale.js b/Scales/TimeScale.js index 8c0087f2c..63ca86c28 100644 --- a/Scales/TimeScale.js +++ b/Scales/TimeScale.js @@ -26,6 +26,13 @@ function newTimeScale () { thisObject.container.isClickeable = false thisObject.container.isWheelable = true + let mouse = { + position: { + x: 0, + y: 0 + } + } + return thisObject function initialize () { @@ -41,6 +48,11 @@ 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 + }) } function onMouseWheel (event) { @@ -127,7 +139,7 @@ to be visible at the top of the viewPort. */ } /* Lets start the drawing. */ -/* + browserCanvasContext.beginPath() browserCanvasContext.moveTo(point1.x, point1.y - TOP_MARGIN) browserCanvasContext.lineTo(point2.x, point2.y - TOP_MARGIN) @@ -141,11 +153,38 @@ to be visible at the top of the viewPort. */ browserCanvasContext.stroke() browserCanvasContext.closePath() -*/ + 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 - TOP_MARGIN + } + drawLabel(point) + } + + function drawLabel (point) { + let label = '2018-09-22 05:22:31' + let fontSize = 10 + + // getRateFromPoint(ratePoint) + + let xOffset = label.length * fontSize * FONT_ASPECT_RATIO + + browserCanvasContext.beginPath() + + browserCanvasContext.rect(point.x - xOffset / 2, point.y, xOffset, fontSize + 2) + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', 1)' + browserCanvasContext.fill() + + browserCanvasContext.closePath() + + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY + browserCanvasContext.fillStyle = 'rgba(60, 60, 60, 0.50)' + browserCanvasContext.fillText(label, point.x - xOffset / 2, point.y + fontSize + 2) } } From 2ecf8bd621ec0fc4f54885c7fead0501c3fb99db Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Thu, 18 Apr 2019 16:03:29 +0200 Subject: [PATCH 07/24] Contrained to the Time Machine --- TimeMachine.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/TimeMachine.js b/TimeMachine.js index d270ac491..4a3cbf44c 100644 --- a/TimeMachine.js +++ b/TimeMachine.js @@ -240,7 +240,12 @@ function newTimeMachine () { } } } - return this.container + + if (thisObject.container.frame.isThisPointHere(point) === true) { + return thisObject.container + } else { + return + } } function recalculateScale () { From 17aa314ffb1909e4c635a632da48b85f23aba7dc Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Thu, 18 Apr 2019 16:22:05 +0200 Subject: [PATCH 08/24] onMouseNotOver --- Container.js | 5 +++++ Scales/TimeScale.js | 27 +++++++++++++++++++-------- TimeMachine.js | 3 +++ 3 files changed, 27 insertions(+), 8 deletions(-) diff --git a/Container.js b/Container.js index 442957f08..8ea75ce14 100644 --- a/Container.js +++ b/Container.js @@ -45,6 +45,7 @@ function newContainer () { thisObject.parentContainer = parentContainer thisObject.parentContainer.eventHandler.listenToEvent('Dimmensions Changed', onParentDimmensionsChanged) thisObject.parentContainer.eventHandler.listenToEvent('onMouseOver', onMouseOver) + thisObject.parentContainer.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver) if (connectedToParentWidth) { thisObject.frame.width = thisObject.parentContainer.frame.width @@ -74,6 +75,10 @@ function newContainer () { thisObject.eventHandler.raiseEvent('onMouseOver', event) } + function onMouseNotOver (event) { + thisObject.eventHandler.raiseEvent('onMouseNotOver', event) + } + function isForThisPurpose (purpose) { if (purpose !== undefined) { switch (purpose) { diff --git a/Scales/TimeScale.js b/Scales/TimeScale.js index 63ca86c28..9b5c2b8fb 100644 --- a/Scales/TimeScale.js +++ b/Scales/TimeScale.js @@ -33,6 +33,8 @@ function newTimeScale () { } } + let visible = false + return thisObject function initialize () { @@ -52,6 +54,12 @@ function newTimeScale () { 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 }) } @@ -92,6 +100,8 @@ function newTimeScale () { } function draw () { + if (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. */ @@ -175,16 +185,17 @@ to be visible at the top of the viewPort. */ let xOffset = label.length * fontSize * FONT_ASPECT_RATIO - browserCanvasContext.beginPath() - - browserCanvasContext.rect(point.x - xOffset / 2, point.y, xOffset, fontSize + 2) - browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', 1)' - browserCanvasContext.fill() - - browserCanvasContext.closePath() - browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY browserCanvasContext.fillStyle = 'rgba(60, 60, 60, 0.50)' browserCanvasContext.fillText(label, point.x - xOffset / 2, point.y + fontSize + 2) +/* + browserCanvasContext.beginPath() + + browserCanvasContext.rect(point.x - xOffset / 2, point.y, xOffset, fontSize + 2) + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)' + browserCanvasContext.fill() + + browserCanvasContext.closePath() + */ } } diff --git a/TimeMachine.js b/TimeMachine.js index 4a3cbf44c..20493e52f 100644 --- a/TimeMachine.js +++ b/TimeMachine.js @@ -244,6 +244,9 @@ function newTimeMachine () { if (thisObject.container.frame.isThisPointHere(point) === true) { return thisObject.container } else { + if (purpose === GET_CONTAINER_PURPOSE.MOUSE_OVER) { + thisObject.container.eventHandler.raiseEvent('onMouseNotOver') + } return } } From e6528276116c5c5627994d7895395b184be580b1 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Thu, 18 Apr 2019 16:28:00 +0200 Subject: [PATCH 09/24] Within limits --- Scales/TimeScale.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/Scales/TimeScale.js b/Scales/TimeScale.js index 9b5c2b8fb..509af1765 100644 --- a/Scales/TimeScale.js +++ b/Scales/TimeScale.js @@ -174,10 +174,7 @@ to be visible at the top of the viewPort. */ x: mouse.position.x, y: point1.y - TOP_MARGIN } - drawLabel(point) - } - function drawLabel (point) { let label = '2018-09-22 05:22:31' let fontSize = 10 @@ -187,6 +184,9 @@ to be visible at the top of the viewPort. */ browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY browserCanvasContext.fillStyle = 'rgba(60, 60, 60, 0.50)' + + if (point.x - xOffset / 2 < point1.x || point.x + xOffset / 2 > point2.x) { return } + browserCanvasContext.fillText(label, point.x - xOffset / 2, point.y + fontSize + 2) /* browserCanvasContext.beginPath() From 3de4587f0f58e6dc992a4aa8c20ee60b43e68892 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Thu, 18 Apr 2019 16:54:32 +0200 Subject: [PATCH 10/24] Time Scale ready --- Scales/TimeScale.js | 39 ++++++++++++++++++++++++++------------- TimeMachine.js | 2 +- 2 files changed, 27 insertions(+), 14 deletions(-) diff --git a/Scales/TimeScale.js b/Scales/TimeScale.js index 509af1765..63b3ff335 100644 --- a/Scales/TimeScale.js +++ b/Scales/TimeScale.js @@ -34,10 +34,13 @@ function newTimeScale () { } let visible = false + let timeLineCoordinateSystem return thisObject - function initialize () { + function initialize (pTimeLineCoordinateSystem) { + timeLineCoordinateSystem = pTimeLineCoordinateSystem + thisObject.container.eventHandler.listenToEvent('Mouse Wheel', onMouseWheel) thisObject.lenghtPercentage = window.localStorage.getItem(MODULE_NAME) @@ -131,17 +134,24 @@ to be visible at the top of the viewPort. */ 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 @@ -149,7 +159,7 @@ to be visible at the top of the viewPort. */ } /* Lets start the drawing. */ - +/* browserCanvasContext.beginPath() browserCanvasContext.moveTo(point1.x, point1.y - TOP_MARGIN) browserCanvasContext.lineTo(point2.x, point2.y - TOP_MARGIN) @@ -161,8 +171,7 @@ to be visible at the top of the viewPort. */ browserCanvasContext.strokeStyle = 'rgba(150, 150, 150, 1)' browserCanvasContext.lineWidth = 1 browserCanvasContext.stroke() - - browserCanvasContext.closePath() +*/ thisObject.container.frame.position.x = point1.x thisObject.container.frame.position.y = point1.y @@ -175,27 +184,31 @@ to be visible at the top of the viewPort. */ y: point1.y - TOP_MARGIN } - let label = '2018-09-22 05:22:31' - let fontSize = 10 + let date = getDateFromPoint(point, thisObject.container, timeLineCoordinateSystem) + date = new Date(date) - // getRateFromPoint(ratePoint) + let label = date.toUTCString() + let fontSize = 10 let xOffset = label.length * fontSize * FONT_ASPECT_RATIO browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY - browserCanvasContext.fillStyle = 'rgba(60, 60, 60, 0.50)' + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK + ', 0.50)' if (point.x - xOffset / 2 < point1.x || point.x + xOffset / 2 > point2.x) { return } browserCanvasContext.fillText(label, point.x - xOffset / 2, point.y + fontSize + 2) -/* + browserCanvasContext.beginPath() - browserCanvasContext.rect(point.x - xOffset / 2, point.y, xOffset, fontSize + 2) - browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)' - browserCanvasContext.fill() + browserCanvasContext.moveTo(point.x, point1.y) + browserCanvasContext.lineTo(point.x, point5.y) browserCanvasContext.closePath() - */ + + browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.DARK + ', 0.5)' + browserCanvasContext.lineWidth = 0.2 + browserCanvasContext.setLineDash([1, 5]) + browserCanvasContext.stroke() } } diff --git a/TimeMachine.js b/TimeMachine.js index 20493e52f..2f5388997 100644 --- a/TimeMachine.js +++ b/TimeMachine.js @@ -116,7 +116,7 @@ function newTimeMachine () { thisObject.container.eventHandler.raiseEvent('Dimmensions Changed', event) }) - timeScale.initialize() + timeScale.initialize(timeLineCoordinateSystem) rigthScale = newRigthScale() From 0d513918f18c723ab4fc02ce8983bf963be7d414 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Fri, 19 Apr 2019 12:37:40 +0200 Subject: [PATCH 11/24] Rigth scale visible --- Scales/RightScale.js | 140 +++++++++++++++++++++++++++++++++++++++---- Scales/TimeScale.js | 15 +++-- TimeMachine.js | 8 +-- ViewPort.js | 7 +++ 4 files changed, 145 insertions(+), 25 deletions(-) diff --git a/Scales/RightScale.js b/Scales/RightScale.js index c88b12ceb..3b28fa0e5 100644 --- a/Scales/RightScale.js +++ b/Scales/RightScale.js @@ -15,13 +15,13 @@ } const HEIGHT_PERCENTAGE_DEFAULT_VALUE = 50 - const RIGHT_MARGIN = 50 const STEP_SIZE = 5 + const MIN_WIDTH = 50 thisObject.container = newContainer() thisObject.container.initialize(MODULE_NAME) - thisObject.container.frame.width = RIGHT_MARGIN + 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 @@ -38,9 +38,14 @@ } } + let visible = false + let timeLineCoordinateSystem + return thisObject - function initialize () { + function initialize (pTimeLineCoordinateSystem) { + timeLineCoordinateSystem = pTimeLineCoordinateSystem + thisObject.container.eventHandler.listenToEvent('Mouse Wheel', onMouseWheel) thisObject.heightPercentage = window.localStorage.getItem(MODULE_NAME) @@ -57,6 +62,12 @@ 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 }) } @@ -75,12 +86,18 @@ window.localStorage.setItem(MODULE_NAME, thisObject.heightPercentage) } - function getContainer (point) { + function getContainer (pPoint) { let container - /* First we check if this point is inside this object UI. */ + /* 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, true) === true) { + if (thisObject.container.frame.isThisPointHere(point, undefined, true) === true) { return thisObject.container } else { /* This point does not belong to this space. */ @@ -90,20 +107,121 @@ } function draw () { - drawBackground() - drawLabel() + if (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. */ + + let frame = thisObject.container.parentContainer.frame + let point1 + let point2 + let point3 + let point4 + + point1 = { + x: frame.width - frame.width / 10, + y: 0 + } + + point2 = { + x: frame.width, + y: 0 + } + + point3 = { + x: frame.width, + y: frame.height + } + + 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 + viewPort.margins.RIGHT, point1.y) + browserCanvasContext.lineTo(point2.x + viewPort.margins.RIGHT, point2.y) + browserCanvasContext.lineTo(point3.x + viewPort.margins.RIGHT, point3.y) + browserCanvasContext.lineTo(point4.x + viewPort.margins.RIGHT, point4.y) + browserCanvasContext.lineTo(point1.x + viewPort.margins.RIGHT, 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, + y: mouse.position.y + } + + let rate = getRateFromPoint(point, thisObject.container, timeLineCoordinateSystem) + + let label = rate.toFixed(2) + let fontSize = 10 + + let xOffset = label.length * fontSize * FONT_ASPECT_RATIO + + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK + ', 0.50)' + + if (point.x - xOffset / 2 < point1.x || point.x + xOffset / 2 > point2.x) { return } + + browserCanvasContext.fillText(label, point1.x - xOffset / 2, point.y + fontSize + 2) + + browserCanvasContext.beginPath() + + browserCanvasContext.moveTo(point.x, point.y) + browserCanvasContext.lineTo(point.x, point.y) + + browserCanvasContext.closePath() + + browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.DARK + ', 0.5)' + browserCanvasContext.lineWidth = 0.2 + browserCanvasContext.setLineDash([1, 5]) + browserCanvasContext.stroke() } function drawBackground () { - const RIGHT_MARGIN = 50 - /* We will paint some transparent background here. */ let opacity = '0.95' browserCanvasContext.beginPath() - browserCanvasContext.rect(viewPort.visibleArea.topRight.x, viewPort.visibleArea.topRight.y, RIGHT_MARGIN, viewPort.visibleArea.bottomRight.y - viewPort.visibleArea.topRight.y) + browserCanvasContext.rect(viewPort.visibleArea.topRight.x, viewPort.visibleArea.topRight.y, viewPort.margins.RIGHT, viewPort.visibleArea.bottomRight.y - viewPort.visibleArea.topRight.y) browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + opacity + ')' browserCanvasContext.closePath() diff --git a/Scales/TimeScale.js b/Scales/TimeScale.js index 63b3ff335..42d4f65f1 100644 --- a/Scales/TimeScale.js +++ b/Scales/TimeScale.js @@ -17,7 +17,6 @@ function newTimeScale () { const LENGHT_PERCENTAGE_DEFAULT_VALUE = 50 const STEP_SIZE = 5 const MIN_HEIGHT = 50 - const TOP_MARGIN = 15 thisObject.container = newContainer() thisObject.container.initialize(MODULE_NAME) @@ -91,7 +90,7 @@ function newTimeScale () { y: 0 } point.x = pPoint.x - thisObject.container.frame.position.x - point.y = pPoint.y - thisObject.container.frame.position.y + TOP_MARGIN + point.y = pPoint.y - thisObject.container.frame.position.y + viewPort.margins.TOP if (thisObject.container.frame.isThisPointHere(point, undefined, true) === true) { return thisObject.container @@ -161,11 +160,11 @@ to be visible at the top of the viewPort. */ /* Lets start the drawing. */ /* browserCanvasContext.beginPath() - browserCanvasContext.moveTo(point1.x, point1.y - TOP_MARGIN) - browserCanvasContext.lineTo(point2.x, point2.y - TOP_MARGIN) - browserCanvasContext.lineTo(point3.x, point3.y - TOP_MARGIN) - browserCanvasContext.lineTo(point4.x, point4.y - TOP_MARGIN) - browserCanvasContext.lineTo(point1.x, point1.y - TOP_MARGIN) + browserCanvasContext.moveTo(point1.x, point1.y - viewPort.margins.TOP) + browserCanvasContext.lineTo(point2.x, point2.y - viewPort.margins.TOP) + browserCanvasContext.lineTo(point3.x, point3.y - viewPort.margins.TOP) + browserCanvasContext.lineTo(point4.x, point4.y - viewPort.margins.TOP) + browserCanvasContext.lineTo(point1.x, point1.y - viewPort.margins.TOP) browserCanvasContext.closePath() browserCanvasContext.strokeStyle = 'rgba(150, 150, 150, 1)' @@ -181,7 +180,7 @@ to be visible at the top of the viewPort. */ let point = { x: mouse.position.x, - y: point1.y - TOP_MARGIN + y: point1.y - viewPort.margins.TOP } let date = getDateFromPoint(point, thisObject.container, timeLineCoordinateSystem) diff --git a/TimeMachine.js b/TimeMachine.js index 2f5388997..efbc9df25 100644 --- a/TimeMachine.js +++ b/TimeMachine.js @@ -106,11 +106,7 @@ function newTimeMachine () { /* Each Time Machine has a Time Scale and a Right Scale. */ timeScale = newTimeScale() - timeScale.container.connectToParent(thisObject.container, false, false) - /* - timeScale.container.frame.height = thisObject.container.frame.height / 10 -*/ 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) @@ -119,13 +115,13 @@ function newTimeMachine () { timeScale.initialize(timeLineCoordinateSystem) rigthScale = newRigthScale() - + rigthScale.container.connectToParent(thisObject.container, false, false) rigthScale.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) }) - rigthScale.initialize() + rigthScale.initialize(timeLineCoordinateSystem) initializeTheRest() } diff --git a/ViewPort.js b/ViewPort.js index 2e0f5dcfa..3bde550d8 100644 --- a/ViewPort.js +++ b/ViewPort.js @@ -7,6 +7,12 @@ function newViewPort () { const BOTTOM_MARGIN = 15 + BOTTOM_SPACE_HEIGHT const LEFT_MARGIN = 50 const RIGHT_MARGIN = 50 + const MARGINS = { + TOP: TOP_MARGIN, + BOTTOM: BOTTOM_MARGIN, + LEFT: LEFT_MARGIN, + RIGHT: RIGHT_MARGIN + } let thisObject = { visibleArea: undefined, @@ -14,6 +20,7 @@ function newViewPort () { zoomTargetLevel: undefined, zoomLevel: undefined, mousePosition: undefined, + margins: MARGINS, getDisplacement: getDisplacement, newZoomLevel: newZoomLevel, applyZoom: applyZoom, From be8dcac0fab19cb3d08d2e5a024455f96fa593f6 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Fri, 19 Apr 2019 13:19:41 +0200 Subject: [PATCH 12/24] Scales working, only negatives numbers --- Scales/RightScale.js | 473 ++++++++++++++++++++----------------------- Scales/TimeScale.js | 2 +- 2 files changed, 215 insertions(+), 260 deletions(-) diff --git a/Scales/RightScale.js b/Scales/RightScale.js index 3b28fa0e5..a3f865f68 100644 --- a/Scales/RightScale.js +++ b/Scales/RightScale.js @@ -1,262 +1,217 @@ - function newRigthScale () { - const MODULE_NAME = 'Right Scale' - const INFO_LOG = false - const INTENSIVE_LOG = false - const ERROR_LOG = true - const logger = newWebDebugLog() - logger.fileName = MODULE_NAME - - let thisObject = { - container: undefined, - draw: draw, - getContainer: getContainer, - initialize: initialize, - heightPercentage: 100 - } - - const HEIGHT_PERCENTAGE_DEFAULT_VALUE = 50 - const STEP_SIZE = 5 - const MIN_WIDTH = 50 - - 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 - - let mouse = { - position: { - x: 0, - y: 0 - } - } - - let visible = false - let timeLineCoordinateSystem - - return thisObject - - function initialize (pTimeLineCoordinateSystem) { - timeLineCoordinateSystem = pTimeLineCoordinateSystem - - thisObject.container.eventHandler.listenToEvent('Mouse Wheel', onMouseWheel) - - thisObject.heightPercentage = window.localStorage.getItem(MODULE_NAME) - if (!thisObject.heightPercentage) { - thisObject.heightPercentage = HEIGHT_PERCENTAGE_DEFAULT_VALUE - } else { - thisObject.heightPercentage = JSON.parse(thisObject.heightPercentage) - } - - 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 onMouseWheel (event) { - delta = event.wheelDelta - if (delta < 0) { - thisObject.heightPercentage = thisObject.heightPercentage - STEP_SIZE - if (thisObject.heightPercentage < STEP_SIZE) { thisObject.heightPercentage = STEP_SIZE } - } else { - thisObject.heightPercentage = thisObject.heightPercentage + STEP_SIZE - if (thisObject.heightPercentage > 100) { thisObject.heightPercentage = 100 } - } - event.heightPercentage = thisObject.heightPercentage - thisObject.container.eventHandler.raiseEvent('Height Percentage Changed', event) - - 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) { - return thisObject.container - } else { - /* This point does not belong to this space. */ - - return undefined - } - } - - function draw () { - if (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. */ - - let frame = thisObject.container.parentContainer.frame - let point1 - let point2 - let point3 - let point4 +function newRigthScale () { + const MODULE_NAME = 'Right Scale' + const INFO_LOG = false + const INTENSIVE_LOG = false + const ERROR_LOG = true + const logger = newWebDebugLog() + logger.fileName = MODULE_NAME + + let thisObject = { + container: undefined, + draw: draw, + getContainer: getContainer, + initialize: initialize, + heightPercentage: 100 + } + + const HEIGHT_PERCENTAGE_DEFAULT_VALUE = 50 + const STEP_SIZE = 5 + const MIN_WIDTH = 50 + + 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 + + let mouse = { + position: { + x: 0, + y: 0 + } + } + + let visible = false + let timeLineCoordinateSystem + + return thisObject + + function initialize (pTimeLineCoordinateSystem) { + timeLineCoordinateSystem = pTimeLineCoordinateSystem + + thisObject.container.eventHandler.listenToEvent('Mouse Wheel', onMouseWheel) + + thisObject.heightPercentage = window.localStorage.getItem(MODULE_NAME) + if (!thisObject.heightPercentage) { + thisObject.heightPercentage = HEIGHT_PERCENTAGE_DEFAULT_VALUE + } else { + thisObject.heightPercentage = JSON.parse(thisObject.heightPercentage) + } + + 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 onMouseWheel (event) { + delta = event.wheelDelta + if (delta < 0) { + thisObject.heightPercentage = thisObject.heightPercentage - STEP_SIZE + if (thisObject.heightPercentage < STEP_SIZE) { thisObject.heightPercentage = STEP_SIZE } + } else { + thisObject.heightPercentage = thisObject.heightPercentage + STEP_SIZE + if (thisObject.heightPercentage > 100) { thisObject.heightPercentage = 100 } + } + event.heightPercentage = thisObject.heightPercentage + thisObject.container.eventHandler.raiseEvent('Height Percentage Changed', event) + + 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) { + return thisObject.container + } else { + /* This point does not belong to this space. */ + + return undefined + } + } + + function draw () { + if (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. */ + + let frame = thisObject.container.parentContainer.frame + let point1 + let point2 + let point3 + let point4 + + point1 = { + x: frame.width - frame.width / 10, + y: 0 + } + + point2 = { + x: frame.width, + y: 0 + } + + point3 = { + x: frame.width, + y: frame.height + } + + 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, 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) - point1 = { - x: frame.width - frame.width / 10, - y: 0 - } + browserCanvasContext.beginPath() + + browserCanvasContext.moveTo(point.x, point.y) + browserCanvasContext.lineTo(point1.x + viewPort.margins.RIGHT, point.y) - point2 = { - x: frame.width, - y: 0 - } + browserCanvasContext.closePath() + + browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.DARK + ', 0.5)' + browserCanvasContext.lineWidth = 0.2 + browserCanvasContext.setLineDash([1, 5]) + browserCanvasContext.stroke() + } +} - point3 = { - x: frame.width, - y: frame.height - } - - 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 + viewPort.margins.RIGHT, point1.y) - browserCanvasContext.lineTo(point2.x + viewPort.margins.RIGHT, point2.y) - browserCanvasContext.lineTo(point3.x + viewPort.margins.RIGHT, point3.y) - browserCanvasContext.lineTo(point4.x + viewPort.margins.RIGHT, point4.y) - browserCanvasContext.lineTo(point1.x + viewPort.margins.RIGHT, 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, - y: mouse.position.y - } - - let rate = getRateFromPoint(point, thisObject.container, timeLineCoordinateSystem) - - let label = rate.toFixed(2) - let fontSize = 10 - - let xOffset = label.length * fontSize * FONT_ASPECT_RATIO - - browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY - browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK + ', 0.50)' - - if (point.x - xOffset / 2 < point1.x || point.x + xOffset / 2 > point2.x) { return } - - browserCanvasContext.fillText(label, point1.x - xOffset / 2, point.y + fontSize + 2) - - browserCanvasContext.beginPath() - - browserCanvasContext.moveTo(point.x, point.y) - browserCanvasContext.lineTo(point.x, point.y) - - browserCanvasContext.closePath() - - browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.DARK + ', 0.5)' - browserCanvasContext.lineWidth = 0.2 - browserCanvasContext.setLineDash([1, 5]) - browserCanvasContext.stroke() - } - - function drawBackground () { - /* We will paint some transparent background here. */ - - let opacity = '0.95' - - browserCanvasContext.beginPath() - - browserCanvasContext.rect(viewPort.visibleArea.topRight.x, viewPort.visibleArea.topRight.y, viewPort.margins.RIGHT, viewPort.visibleArea.bottomRight.y - viewPort.visibleArea.topRight.y) - browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + opacity + ')' - - browserCanvasContext.closePath() - - browserCanvasContext.fill() - } - - function drawLabel () { - let label = '6000' - let fontSize = 10 - - let ratePoint = { - x: 0, - y: mouse.position.y - } - - // getRateFromPoint(ratePoint) - - let labelPoint = { - x: viewPort.visibleArea.topRight.x + 5, - y: mouse.position.y - fontSize / 2 + 1 - } - - let xOffset = 0// label.length / 2 * fontSize * FONT_ASPECT_RATIO - - browserCanvasContext.beginPath() - - browserCanvasContext.rect(labelPoint.x, labelPoint.y, xOffset * 2, fontSize) - browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', 1)' - browserCanvasContext.fill() - - browserCanvasContext.closePath() - - browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY - browserCanvasContext.fillStyle = 'rgba(60, 60, 60, 0.50)' - browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) - } - } diff --git a/Scales/TimeScale.js b/Scales/TimeScale.js index 42d4f65f1..aad7e229b 100644 --- a/Scales/TimeScale.js +++ b/Scales/TimeScale.js @@ -196,7 +196,7 @@ to be visible at the top of the viewPort. */ if (point.x - xOffset / 2 < point1.x || point.x + xOffset / 2 > point2.x) { return } - browserCanvasContext.fillText(label, point.x - xOffset / 2, point.y + fontSize + 2) + browserCanvasContext.fillText(label, point.x - xOffset / 2, point.y + fontSize + 7) browserCanvasContext.beginPath() From 501e62012f5548f043e3530d45b537a4a15846c3 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Fri, 19 Apr 2019 13:30:39 +0200 Subject: [PATCH 13/24] Rate now is fixed --- Scales/RightScale.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Scales/RightScale.js b/Scales/RightScale.js index a3f865f68..2edb711f1 100644 --- a/Scales/RightScale.js +++ b/Scales/RightScale.js @@ -187,7 +187,7 @@ to be visible at the top of the viewPort. */ y: mouse.position.y } - let rate = getRateFromPoint(point, thisObject.container, timeLineCoordinateSystem) + let rate = getRateFromPoint(point, thisObject.container.parentContainer, timeLineCoordinateSystem) let label = rate.toFixed(2) let fontSize = 10 From 1a0518196873bbe36253cf7dc78410b8eba9594f Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Fri, 19 Apr 2019 15:56:36 +0200 Subject: [PATCH 14/24] BUG of horizontal scaling fixed --- TimelineChart.js | 2 +- Utilities.js | 7 +++++-- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/TimelineChart.js b/TimelineChart.js index 5b92a91b3..c34ff1916 100644 --- a/TimelineChart.js +++ b/TimelineChart.js @@ -118,7 +118,7 @@ breakpointsBar = newBreakpointsBar() breakpointsBar.initialize(thisObject.container, timeLineCoordinateSystem) - moveToUserPosition(thisObject.container, timeLineCoordinateSystem) + moveToUserPosition(thisObject.container, timeLineCoordinateSystem, undefined, undefined, undefined, true) timePeriod = INITIAL_TIME_PERIOD datetime = NEW_SESSION_INITIAL_DATE diff --git a/Utilities.js b/Utilities.js index 64156b30b..cffc22713 100644 --- a/Utilities.js +++ b/Utilities.js @@ -100,10 +100,13 @@ function getUserPosition (timeLineCoordinateSystem) { return userPosition } -function moveToUserPosition (container, timeLineCoordinateSystem, ignoreX, ignoreY, center) { +function moveToUserPosition (container, timeLineCoordinateSystem, ignoreX, ignoreY, center, considerZoom) { let userPosition = getUserPosition(timeLineCoordinateSystem) - viewPort.newZoomLevel(userPosition.zoom) + if (considerZoom === true) { + viewPort.newZoomLevel(userPosition.zoom) + } + INITIAL_TIME_PERIOD = recalculatePeriod(userPosition.zoom) NEW_SESSION_INITIAL_DATE = new Date(userPosition.date) From 349a9432225869a4d7b77859b5c637719667d6cb Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Fri, 19 Apr 2019 18:57:58 +0200 Subject: [PATCH 15/24] Obect State at Viewport --- Dashboard.js | 2 -- Globals.js | 4 ++++ ViewPort.js | 45 ++++++++++++++++++++++++++++++++++----------- 3 files changed, 38 insertions(+), 13 deletions(-) diff --git a/Dashboard.js b/Dashboard.js index 1adcdea84..dcc28e5c4 100644 --- a/Dashboard.js +++ b/Dashboard.js @@ -2,8 +2,6 @@ let canvas let markets let ecosystem = newEcosystem() -let INITIAL_ZOOM_LEVEL = -26 // This is the zoom level at the view port in which the APP starts. -let INITIAL_TIME_PERIOD = recalculatePeriod(MIN_ZOOM_LEVEL) // This value will be overwritten at the viewPort.initialize if the user had a prevous session with this same browser. let viewPort = newViewPort() function newDashboard () { diff --git a/Globals.js b/Globals.js index d5c075ab4..5bed76f40 100644 --- a/Globals.js +++ b/Globals.js @@ -117,6 +117,8 @@ function convertTimePeriodToName(pTimePeriod) { window.AT_BREAKPOINT = false; + + const USDT_BTC_HTH = 19900; // This is needed to know the scale of the market time line. const WIDHTER_VOLUME_BAR_BASE_FACTOR = 2.5; @@ -144,6 +146,8 @@ const _2_MINUTES_IN_MILISECONDS = 2 * 60 * 1000; const _1_MINUTE_IN_MILISECONDS = 1 * 60 * 1000; let NEW_SESSION_INITIAL_DATE = new Date(); // This value will be overwritten at the viewPort.initialize if the user had a prevous session with this same browser. +let INITIAL_ZOOM_LEVEL = -28.25 // This is the zoom level at the view port in which the APP starts. +let INITIAL_TIME_PERIOD = ONE_DAY_IN_MILISECONDS // This value will be overwritten at the viewPort.initialize if the user had a prevous session with this same browser. let maxDate = new Date(); maxDate.setMilliseconds(0); diff --git a/ViewPort.js b/ViewPort.js index 3bde550d8..92dc7ac63 100644 --- a/ViewPort.js +++ b/ViewPort.js @@ -1,5 +1,12 @@  function newViewPort () { + const MODULE_NAME = 'Viewport' + const INFO_LOG = false + const INTENSIVE_LOG = false + const ERROR_LOG = true + const logger = newWebDebugLog() + logger.fileName = MODULE_NAME + const CONSOLE_LOG = true let ANIMATION_INCREMENT = 0.25 @@ -62,6 +69,8 @@ function newViewPort () { thisObject.eventHandler = newEventHandler() + let objectStorage = {} + return thisObject function initialize () { @@ -71,6 +80,8 @@ function newViewPort () { bottomRight: { x: browserCanvas.width - RIGHT_MARGIN, y: browserCanvas.height - BOTTOM_MARGIN}, bottomLeft: { x: LEFT_MARGIN, y: browserCanvas.height - BOTTOM_MARGIN} } + + readObjectState() } function getDisplacement () { @@ -106,17 +117,6 @@ function newViewPort () { changeZoom(thisObject.zoomLevel + ANIMATION_INCREMENT, thisObject.zoomLevel) } - /* - if (offsetIncrement.x !== 0) { - - if (Math.trunc(Math.abs(targetOffset.x - offset.x) * 1000) >= Math.trunc(Math.abs(offsetIncrement.x) * 1000)) { - offset.x = offset.x + offsetIncrement.x; - } else { - offsetIncrement.x = 0; - } - } -*/ - if (offsetIncrement.y !== 0) { if (Math.trunc(Math.abs(targetOffset.y - offset.y) * 1000) >= Math.trunc(Math.abs(offsetIncrement.y) * 1000)) { offset.y = offset.y + offsetIncrement.y @@ -132,6 +132,8 @@ function newViewPort () { offset.x = offset.x + displaceVector.x offset.y = offset.y + displaceVector.y + saveObjectState() + let event = { newOffset: offset } @@ -157,6 +159,8 @@ function newViewPort () { thisObject.zoomTargetLevel = level thisObject.zoomLevel = level + saveObjectState() + ANIMATION_INCREMENT = Math.abs(thisObject.zoomTargetLevel - thisObject.zoomLevel) / 3 let event = { @@ -251,6 +255,8 @@ function newViewPort () { offset.x = offset.x - newMouse.x + thisObject.mousePosition.x offset.y = offset.y - newMouse.y + thisObject.mousePosition.y + saveObjectState() + targetOffset.x = offset.x targetOffset.y = offset.y @@ -401,4 +407,21 @@ function newViewPort () { browserCanvasContext.stroke() } + + function saveObjectState () { + objectStorage.offset = offset + objectStorage.zoomLevel = thisObject.zoomLevel + window.localStorage.setItem(MODULE_NAME, JSON.stringify(objectStorage)) + } + + function readObjectState () { + let objectStorageString = window.localStorage.getItem(MODULE_NAME) + if (objectStorageString !== null && objectStorageString !== '') { + objectStorage = JSON.parse(objectStorageString) + offset = objectStorage.offset + thisObject.zoomLevel = objectStorage.zoomLevel + + INITIAL_TIME_PERIOD = recalculatePeriod(thisObject.zoomLevel) + } + } } From 566c13ba9d1798157f767e53f703e07edec3252d Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Fri, 19 Apr 2019 20:01:14 +0200 Subject: [PATCH 16/24] Deleting local storage works, almost --- ChartUtilities.js | 1 + Globals.js | 2 +- Scales/TimeScale.js | 2 +- TimelineChart.js | 2 +- ViewPort.js | 9 ++++++++- 5 files changed, 12 insertions(+), 4 deletions(-) diff --git a/ChartUtilities.js b/ChartUtilities.js index 6a2c91389..e7d29bd8a 100644 --- a/ChartUtilities.js +++ b/ChartUtilities.js @@ -139,4 +139,5 @@ function recalculatePeriod (zoomLevel) { if (zoomLevel <= -28) { return ONE_DAY_IN_MILISECONDS } + return ONE_DAY_IN_MILISECONDS } diff --git a/Globals.js b/Globals.js index 5bed76f40..30c706c36 100644 --- a/Globals.js +++ b/Globals.js @@ -35,7 +35,7 @@ UI_FONT = { SECONDARY: "Source Code Pro" }; -FONT_ASPECT_RATIO = 0.55; +FONT_ASPECT_RATIO = 0.45; const MIN_ZOOM_LEVEL = -28.25 const GET_CONTAINER_PURPOSE = { diff --git a/Scales/TimeScale.js b/Scales/TimeScale.js index aad7e229b..d994e99bc 100644 --- a/Scales/TimeScale.js +++ b/Scales/TimeScale.js @@ -14,7 +14,7 @@ function newTimeScale () { lenghtPercentage: undefined } - const LENGHT_PERCENTAGE_DEFAULT_VALUE = 50 + const LENGHT_PERCENTAGE_DEFAULT_VALUE = 5 const STEP_SIZE = 5 const MIN_HEIGHT = 50 diff --git a/TimelineChart.js b/TimelineChart.js index c34ff1916..bc42bb917 100644 --- a/TimelineChart.js +++ b/TimelineChart.js @@ -118,7 +118,7 @@ breakpointsBar = newBreakpointsBar() breakpointsBar.initialize(thisObject.container, timeLineCoordinateSystem) - moveToUserPosition(thisObject.container, timeLineCoordinateSystem, undefined, undefined, undefined, true) + // moveToUserPosition(thisObject.container, timeLineCoordinateSystem, undefined, undefined, undefined, true) timePeriod = INITIAL_TIME_PERIOD datetime = NEW_SESSION_INITIAL_DATE diff --git a/ViewPort.js b/ViewPort.js index 92dc7ac63..70d4aeae1 100644 --- a/ViewPort.js +++ b/ViewPort.js @@ -420,8 +420,15 @@ function newViewPort () { objectStorage = JSON.parse(objectStorageString) offset = objectStorage.offset thisObject.zoomLevel = objectStorage.zoomLevel - + thisObject.zoomTargetLevel = objectStorage.zoomLevel INITIAL_TIME_PERIOD = recalculatePeriod(thisObject.zoomLevel) + } else { // Setting default values for first session + offset = { + x: 0, + y: 0 + } + thisObject.zoomLevel = MIN_ZOOM_LEVEL + thisObject.zoomTargetLevel = MIN_ZOOM_LEVEL } } } From de2a8f80347ae724724263069c15fd25a20560a9 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sun, 21 Apr 2019 10:19:15 +0200 Subject: [PATCH 17/24] Refactoring RateScale --- Scales/ChartGrid.js | 4 ++-- Scales/{RightScale.js => RateScale.js} | 3 +-- TimeMachine.js | 2 +- 3 files changed, 4 insertions(+), 5 deletions(-) rename Scales/{RightScale.js => RateScale.js} (99%) diff --git a/Scales/ChartGrid.js b/Scales/ChartGrid.js index 3ceb3bd35..a0ea51d17 100644 --- a/Scales/ChartGrid.js +++ b/Scales/ChartGrid.js @@ -510,10 +510,10 @@ /* Now we put the scale on the right side of the chart */ - drawRigthScale() + drawRateScale() drawLeftScale() - function drawRigthScale () { + function drawRateScale () { /* And now the scale. */ let fontSize = 10 diff --git a/Scales/RightScale.js b/Scales/RateScale.js similarity index 99% rename from Scales/RightScale.js rename to Scales/RateScale.js index 2edb711f1..670128339 100644 --- a/Scales/RightScale.js +++ b/Scales/RateScale.js @@ -1,4 +1,4 @@ -function newRigthScale () { +function newRateScale () { const MODULE_NAME = 'Right Scale' const INFO_LOG = false const INTENSIVE_LOG = false @@ -214,4 +214,3 @@ to be visible at the top of the viewPort. */ browserCanvasContext.stroke() } } - diff --git a/TimeMachine.js b/TimeMachine.js index efbc9df25..d25a9aaa1 100644 --- a/TimeMachine.js +++ b/TimeMachine.js @@ -114,7 +114,7 @@ function newTimeMachine () { timeScale.initialize(timeLineCoordinateSystem) - rigthScale = newRigthScale() + rigthScale = newRateScale() rigthScale.container.connectToParent(thisObject.container, false, false) rigthScale.container.eventHandler.listenToEvent('Height Percentage Changed', function (event) { thisObject.container.frame.height = TIME_MACHINE_HEIGHT * event.heightPercentage / 100 From 4563353238891bd734cc4aceb2ef78dca09bf3e5 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sun, 21 Apr 2019 10:22:03 +0200 Subject: [PATCH 18/24] Got rid of this --- Scales/ChartGrid.js | 713 -------------------------------------------- TimelineChart.js | 3 - 2 files changed, 716 deletions(-) delete mode 100644 Scales/ChartGrid.js diff --git a/Scales/ChartGrid.js b/Scales/ChartGrid.js deleted file mode 100644 index a0ea51d17..000000000 --- a/Scales/ChartGrid.js +++ /dev/null @@ -1,713 +0,0 @@ - function newChartGrid () { - let thisObject = { - container: undefined, - draw: draw, - getContainer: getContainer, - initialize: initialize - } - - let container = newContainer() - container.initialize() - thisObject.container = container - - thisObject.container.frame.width = 0 - thisObject.container.frame.height = 0 - - container.frame.position.x = 0 - container.frame.position.y = 0 - - container.isDraggeable = false - container.isClickeable = true - - return thisObject - - function initialize () { - - } - - function getContainer (point) { - let container - - container = rigthScale.getContainer(point) - - if (container !== undefined) { - return container - } - - if (thisObject.container.frame.isThisPointHere(point, true) === true) { - return this.container - } else { - /* This point does not belong to this space. */ - - return undefined - } - } - - function draw (container, timeLineCoordinateSystem) { - return // not for now - - rightScaleBackground() - leftScaleBackground() - - let periods = [] - let boxes = [] - let labels = [] - - const basePeriod = { - x: 8 * 60 * 60 * 1000, - y: timeLineCoordinateSystem.max.y / 1000 - } - - let period = { - x: basePeriod.x, - y: basePeriod.y - } - - calculateTimeLabels() - printLabels(1000, 10000) - - function calculateTimeLabels () { - periods.push(period) // 0 - - period = { - x: basePeriod.x / 8, - y: basePeriod.y / 10 - } - - periods.push(period) // 1 - - period = { - x: basePeriod.x / 8 / 6, - y: basePeriod.y / 100 - } - - periods.push(period) // 2 - - period = { - x: basePeriod.x * 3, - y: basePeriod.y * 10 - } - - periods.push(period) // 3 - - period = { - x: basePeriod.x * 3 * 7, - y: basePeriod.y * 100 - } - - periods.push(period) // 4 - - /* Period #2 Plotting */ - - boxes = [] - plotGrid(periods[2]) - labels = [] - - /* Label Calculation */ - - for (let i = 0; i < boxes.length; i++) { - const UPPER_PERIOD = 1 - - let box = boxes[i] - let currentValue = box.topLeft - - currentValue = unTransformThisPoint(currentValue, container) - currentValue = timeLineCoordinateSystem.unInverseTransform(currentValue, container.frame.height) - - /* We must compare the current value on the current period, against the next period, to know which cell we are in. */ - - let distanceToNextPeriod = Math.trunc((currentValue.x / periods[UPPER_PERIOD].x - Math.trunc(currentValue.x / periods[UPPER_PERIOD].x)) * 1000) - - switch (distanceToNextPeriod) { - case 0: { - labels.push('0') - break - } - case Math.trunc(1 / 6 * 1000): { - - } - labels.push('10') - break - case Math.trunc(2 / 6 * 1000): { - - } - labels.push('20') - break - - case Math.trunc(3 / 6 * 1000): { - - } - labels.push('30') - break - - case Math.trunc(4 / 6 * 1000): { - - } - labels.push('40') - break - - case Math.trunc(5 / 6 * 1000): { - - } - labels.push('50') - break - - } - } - - printLabels(1, 150) - - /* Period #1 Plotting */ - - boxes = [] - plotGrid(periods[1]) - labels = [] - - /* Label Calculation */ - - for (let i = 0; i < boxes.length; i++) { - const UPPER_PERIOD = 3 - - let box = boxes[i] - let currentValue = box.topLeft - - currentValue = unTransformThisPoint(currentValue, container) - currentValue = timeLineCoordinateSystem.unInverseTransform(currentValue, container.frame.height) - - /* We must compare the current value on the current period, against the next period, to know which cell we are in. */ - - let distanceToNextPeriod = Math.trunc((currentValue.x / periods[UPPER_PERIOD].x - Math.trunc(currentValue.x / periods[UPPER_PERIOD].x)) * 1000) - - switch (distanceToNextPeriod) { - case 0: { - labels.push('0 Hs') - break - } - case Math.trunc(1 / 24 * 1000): { - - } - labels.push('1 Hs') - break - case Math.trunc(2 / 24 * 1000): { - - } - labels.push('2 Hs') - break - - case Math.trunc(3 / 24 * 1000): { - - } - labels.push('3 Hs') - break - - case Math.trunc(4 / 24 * 1000): { - - } - labels.push('4 Hs') - break - - case Math.trunc(5 / 24 * 1000): { - - } - labels.push('5 Hs') - break - - case Math.trunc(6 / 24 * 1000): { - - } - labels.push('6 Hs') - break - - case Math.trunc(7 / 24 * 1000): { - - } - labels.push('7 Hs') - break - - case Math.trunc(8 / 24 * 1000): { - - } - labels.push('8 Hs') - break - - case Math.trunc(9 / 24 * 1000): { - - } - labels.push('9 Hs') - break - - case Math.trunc(10 / 24 * 1000): { - - } - labels.push('10 Hs') - break - - case Math.trunc(11 / 24 * 1000): { - - } - labels.push('11 Hs') - break - - case Math.trunc(12 / 24 * 1000): { - - } - labels.push('12 Hs') - break - - case Math.trunc(13 / 24 * 1000): { - - } - labels.push('13 Hs') - break - - case Math.trunc(14 / 24 * 1000): { - - } - labels.push('14 Hs') - break - - case Math.trunc(15 / 24 * 1000): { - - } - labels.push('15 Hs') - break - - case Math.trunc(16 / 24 * 1000): { - - } - labels.push('16 Hs') - break - - case Math.trunc(17 / 24 * 1000): { - - } - labels.push('17 Hs') - break - - case Math.trunc(18 / 24 * 1000): { - - } - labels.push('18 Hs') - break - - case Math.trunc(19 / 24 * 1000): { - - } - labels.push('19 Hs') - break - - case Math.trunc(20 / 24 * 1000): { - - } - labels.push('20 Hs') - break - - case Math.trunc(21 / 24 * 1000): { - - } - labels.push('21 Hs') - break - - case Math.trunc(22 / 24 * 1000): { - - } - labels.push('22 Hs') - break - - case Math.trunc(23 / 24 * 1000): { - - } - labels.push('23 Hs') - break - } - } - - printLabels(5, 250) - - /* Period #0 Plotting */ - - boxes = [] - plotGrid(periods[0]) - labels = [] - - /* Label Calculation */ - - for (let i = 0; i < boxes.length; i++) { - const UPPER_PERIOD = 3 - - let box = boxes[i] - let currentValue = box.topLeft - - currentValue = unTransformThisPoint(currentValue, container) - currentValue = timeLineCoordinateSystem.unInverseTransform(currentValue, container.frame.height) - - /* We must compare the current value on the current period, against the next period, to know which cell we are in. */ - - let distanceToNextPeriod = Math.trunc((currentValue.x / periods[UPPER_PERIOD].x - Math.trunc(currentValue.x / periods[UPPER_PERIOD].x)) * 1000) - - switch (distanceToNextPeriod) { - case 0: { - labels.push('Morning') - break - } - case Math.trunc(1 / 3 * 1000): { - - } - labels.push('Afternoon') - break - case Math.trunc(2 / 3 * 1000): { - - } - labels.push('Evening') - break - } - } - - printLabels(15, 50) - - /* Period #3 Plotting */ - - boxes = [] - plotGrid(periods[3]) - labels = [] - - /* Label Calculation */ - - for (let i = 0; i < boxes.length; i++) { - const UPPER_PERIOD = 1 - - let box = boxes[i] - let currentValue = box.topLeft - - currentValue = unTransformThisPoint(currentValue, container) - currentValue = timeLineCoordinateSystem.unInverseTransform(currentValue, container.frame.height) - - let date = new Date(currentValue.x) - - labels.push(date.toDateString()) - } - - printLabels(100, 2250) - - /* Period #4 Plotting */ - - boxes = [] - plotGrid(periods[4]) - labels = [] - - /* Label Calculation */ - - for (let i = 0; i < boxes.length; i++) { - const UPPER_PERIOD = 1 - - let box = boxes[i] - let currentValue = box.topLeft - - currentValue = unTransformThisPoint(currentValue, container) - currentValue = timeLineCoordinateSystem.unInverseTransform(currentValue, container.frame.height) - - let date = new Date(currentValue.x) - - var monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] - - labels.push(monthNames[date.getMonth()] + ' ' + date.getFullYear()) - } - } - - function plotGrid (period) { - return - - let periodWidth = period.x - let periodHeight = period.y - - let visiblePoint1 = { - x: viewPort.visibleArea.topLeft.x, - y: viewPort.visibleArea.bottomLeft.y - } - - visiblePoint1 = unTransformThisPoint(visiblePoint1, container) - visiblePoint1 = timeLineCoordinateSystem.unInverseTransform(visiblePoint1, container.frame.height) - - let visiblePoint2 = { - x: viewPort.visibleArea.bottomRight.x, - y: viewPort.visibleArea.topRight.y - } - - visiblePoint2 = unTransformThisPoint(visiblePoint2, container) - visiblePoint2 = timeLineCoordinateSystem.unInverseTransform(visiblePoint2, container.frame.height) - - startingPoint = { - x: Math.trunc(visiblePoint1.x / periodWidth) * periodWidth, - y: Math.round(Math.trunc(visiblePoint1.y / periodHeight) * periodHeight * 100000) / 100000 - } - - endingPoint = { - x: Math.trunc(visiblePoint2.x / periodWidth) * periodWidth, - y: Math.trunc(visiblePoint2.y / periodHeight) * periodHeight - } - - let lineWidth - - if (viewPort.zoomLevel > 0) { - lineWidth = period.x / basePeriod.x + period.x / basePeriod.x * viewPort.zoomLevel / 20 - } else { - lineWidth = period.x / basePeriod.x + period.x / basePeriod.x * viewPort.zoomLevel / 80 - } - - if (lineWidth < 0.7) { - return - } - - if (lineWidth > 1.4) { - lineWidth = 1.4 - } - - browserCanvasContext.beginPath() - - let y1 - let y2 - - let lastRightLabelPosition = { - x: 0, - y: 0 - } - - let lastLeftLabelPosition = { - x: 0, - y: 0 - } - - for (var j = startingPoint.y; j <= endingPoint.y + periodHeight; j = j + periodHeight) { - if (j >= 0 && j <= timeLineCoordinateSystem.max.y) { - let point1 = { - x: visiblePoint1.x, - y: j - } - - let point2 = { - x: visiblePoint2.x, - y: j - } - - point1 = timeLineCoordinateSystem.transformThisPoint(point1) - point2 = timeLineCoordinateSystem.transformThisPoint(point2) - - point1 = transformThisPoint(point1, container) - point2 = transformThisPoint(point2, container) - - if (point1.y >= viewPort.visibleArea.topLeft.y) { - /* Here we keep the last two positive valued of y */ - - y2 = y1 - y1 = point1.y - } - - point1 = viewPort.fitIntoVisibleArea(point1) - point2 = viewPort.fitIntoVisibleArea(point2) - - browserCanvasContext.moveTo(point1.x, point1.y) - browserCanvasContext.lineTo(point2.x, point2.y) - - /* Now we put the scale on the right side of the chart */ - - drawRateScale() - drawLeftScale() - - function drawRateScale () { - /* And now the scale. */ - - let fontSize = 10 - - let label = ' ' + Math.round(j * 1) / 1 - label = Number(label).toLocaleString() - - let labelPoint = { - x: viewPort.visibleArea.bottomRight.x + 5, - y: point1.y + fontSize / 2 * FONT_ASPECT_RATIO - } - - if (Math.abs(lastRightLabelPosition.y - labelPoint.y > fontSize || lastRightLabelPosition.y === 0)) { - if (labelPoint.y > viewPort.visibleArea.topLeft.y + fontSize && labelPoint.y < viewPort.visibleArea.bottomRight.y - fontSize) { - browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY - browserCanvasContext.fillStyle = 'rgba(60, 60, 60, 0.50)' - browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) - } - } - - lastRightLabelPosition.x = labelPoint.x - lastRightLabelPosition.y = labelPoint.y - } - - function drawLeftScale () { - let fontSize = 10 - - /* - j is a value between 0 and the max y on the scale of the products. - If we want to convert j to the scale of profits we need to apply the following formula: - */ - - let labelValue = (j - timeLineCoordinateSystem.max.y / 2) * 200 / timeLineCoordinateSystem.max.y - labelValue = Math.round(labelValue * 100) / 100 - if (labelValue > 0) { labelValue = '+' + labelValue } - if (parseInt(labelValue) > -10 && parseInt(labelValue) < 10) { labelValue = ' ' + labelValue } - if (parseInt(labelValue) === 0) { labelValue = ' ' + labelValue } - let label = ' ' + pad(labelValue, 3) + '%' - - let labelPoint = { - x: 0, - y: point1.y + fontSize / 2 * FONT_ASPECT_RATIO - } - - if (Math.abs(lastLeftLabelPosition.y - labelPoint.y > fontSize || lastLeftLabelPosition.y === 0)) { - if (labelPoint.y > viewPort.visibleArea.topLeft.y + fontSize && labelPoint.y < viewPort.visibleArea.bottomRight.y - fontSize) { - browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY - browserCanvasContext.fillStyle = 'rgba(60, 60, 60, 0.50)' - browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) - } - } - - lastLeftLabelPosition.x = labelPoint.x - lastLeftLabelPosition.y = labelPoint.y - } - } - } - - let x1 - let x2 - - for (var i = startingPoint.x; i <= endingPoint.x + periodWidth; i = i + periodWidth) { - let point3 = { - x: i, - y: 0 - } - - let point4 = { - x: i, - y: timeLineCoordinateSystem.max.y - } - - point3 = timeLineCoordinateSystem.transformThisPoint(point3) - point4 = timeLineCoordinateSystem.transformThisPoint(point4) - - point3 = transformThisPoint(point3, container) - point4 = transformThisPoint(point4, container) - - /* Here we keep the last two positive valued of y */ - - x2 = x1 - x1 = point3.x - - if (x2 !== undefined) { - let topLeft = { - x: x2, - y: y1 - } - - let bottomRight = { - x: x1, - y: y2 - } - - let box = { - topLeft: topLeft, - bottomRight: bottomRight - } - boxes.push(box) - } - - /* Painting the lines */ - - point3 = viewPort.fitIntoVisibleArea(point3) - point4 = viewPort.fitIntoVisibleArea(point4) - - browserCanvasContext.moveTo(point3.x, point3.y) - browserCanvasContext.lineTo(point4.x, point4.y) - } - - browserCanvasContext.closePath() - browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.DARK + ', 0.05' + Math.trunc(lineWidth + 1) + ')' - - browserCanvasContext.lineWidth = lineWidth - - browserCanvasContext.stroke() - } - - function printLabels (baseZoomFilter, maxZoom) { - let zoomFilter = viewPort.zoomFontSize(baseZoomFilter) - - if (zoomFilter < 7 || zoomFilter > maxZoom) { - return - } - - for (let i = 0; i < boxes.length; i++) { - let label = labels[i] - - if (label === undefined) { - label = 'undefined' - } - - let fontSize = 10 - - let labelPoint = { - x: boxes[i].topLeft.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO, - y: viewPort.visibleArea.topLeft.y - fontSize / 2 + 1 - } - - let xOffset = label.length / 2 * fontSize * FONT_ASPECT_RATIO - - browserCanvasContext.beginPath() - - browserCanvasContext.rect(labelPoint.x, labelPoint.y - fontSize, xOffset * 2, fontSize) - browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)' - browserCanvasContext.fill() - - browserCanvasContext.closePath() - - browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY - browserCanvasContext.fillStyle = 'rgba(60, 60, 60, 0.50)' - browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) - } - - browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)' - browserCanvasContext.beginPath() - browserCanvasContext.rect(0, TOP_SPACE_HEIGHT, viewPort.visibleArea.topLeft.x, viewPort.visibleArea.topLeft.y - TOP_SPACE_HEIGHT) - browserCanvasContext.rect(viewPort.visibleArea.topRight.x, TOP_SPACE_HEIGHT, 500, viewPort.visibleArea.topLeft.y - TOP_SPACE_HEIGHT) - browserCanvasContext.closePath() - browserCanvasContext.fill() - } - - function rightScaleBackground () { - const RIGHT_MARGIN = 50 - - /* We will paint some transparent background here. */ - - let opacity = '0.95' - - browserCanvasContext.beginPath() - - browserCanvasContext.rect(viewPort.visibleArea.topRight.x, viewPort.visibleArea.topRight.y, RIGHT_MARGIN, viewPort.visibleArea.bottomRight.y - viewPort.visibleArea.topRight.y) - browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + opacity + ')' - - browserCanvasContext.closePath() - - browserCanvasContext.fill() - } - - function leftScaleBackground () { - const LEFT_MARGIN = 50 - - /* We will paint some transparent background here. */ - - let opacity = '0.95' - - browserCanvasContext.beginPath() - - browserCanvasContext.rect(0, viewPort.visibleArea.topRight.y, LEFT_MARGIN, viewPort.visibleArea.bottomRight.y - viewPort.visibleArea.topRight.y) - browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + opacity + ')' - - browserCanvasContext.closePath() - - browserCanvasContext.fill() - } - } - } diff --git a/TimelineChart.js b/TimelineChart.js index bc42bb917..61b98b01a 100644 --- a/TimelineChart.js +++ b/TimelineChart.js @@ -112,9 +112,6 @@ logoExchange.src = window.canvasApp.urlPrefix + 'Images/' + exchange + '-logo-background.png' logoAA.src = window.canvasApp.urlPrefix + 'Images/sa-logo-background.png' - // chartGrid = newChartGrid() - // chartGrid.initialize() - breakpointsBar = newBreakpointsBar() breakpointsBar.initialize(thisObject.container, timeLineCoordinateSystem) From 4afcf7acd29ead4b14b35597ccb23c31deab0b28 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sun, 21 Apr 2019 11:45:23 +0200 Subject: [PATCH 19/24] Time Period Scale Added --- Scales/TimePeriodScale.js | 216 ++++++++++++++++++++++++++++++++++++++ TimelineChart.js | 18 +++- 2 files changed, 232 insertions(+), 2 deletions(-) create mode 100644 Scales/TimePeriodScale.js diff --git a/Scales/TimePeriodScale.js b/Scales/TimePeriodScale.js new file mode 100644 index 000000000..fe76982fb --- /dev/null +++ b/Scales/TimePeriodScale.js @@ -0,0 +1,216 @@ +function newTimePeriodScale () { + const MODULE_NAME = 'Time Period Scale' + const INFO_LOG = false + const INTENSIVE_LOG = false + const ERROR_LOG = true + const logger = newWebDebugLog() + logger.fileName = MODULE_NAME + + let thisObject = { + container: undefined, + draw: draw, + getContainer: getContainer, + initialize: initialize, + timePeriod: undefined + } + + const TIME_PERIOD_DEFAULT_VALUE = 5 + const STEP_SIZE = 5 + const MIN_HEIGHT = 50 + + thisObject.container = newContainer() + thisObject.container.initialize(MODULE_NAME) + + thisObject.container.isDraggeable = false + thisObject.container.isClickeable = false + thisObject.container.isWheelable = true + + let mouse = { + position: { + x: 0, + y: 0 + } + } + + let visible = false + let timeLineCoordinateSystem + + return thisObject + + function initialize (pTimeLineCoordinateSystem) { + timeLineCoordinateSystem = pTimeLineCoordinateSystem + + thisObject.container.eventHandler.listenToEvent('Mouse Wheel', onMouseWheel) + + thisObject.timePeriod = window.localStorage.getItem(MODULE_NAME) + if (!thisObject.timePeriod) { + thisObject.timePeriod = TIME_PERIOD_DEFAULT_VALUE + } else { + thisObject.timePeriod = JSON.parse(thisObject.timePeriod) + } + + let event = {} + event.timePeriod = thisObject.timePeriod + thisObject.container.eventHandler.raiseEvent('Time Period 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) { + delta = event.wheelDelta + if (delta < 0) { + thisObject.timePeriod = thisObject.timePeriod - STEP_SIZE + if (thisObject.timePeriod < STEP_SIZE) { thisObject.timePeriod = STEP_SIZE } + } else { + thisObject.timePeriod = thisObject.timePeriod + STEP_SIZE + if (thisObject.timePeriod > 100) { thisObject.timePeriod = 100 } + } + + event.timePeriod = thisObject.timePeriod + thisObject.container.eventHandler.raiseEvent('Lenght Percentage Changed', event) + + window.localStorage.setItem(MODULE_NAME, thisObject.timePeriod) + } + + 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 + + if (thisObject.container.frame.isThisPointHere(point, undefined, true) === true) { + return thisObject.container + } else { + /* This point does not belong to this space. */ + + return undefined + } + } + + function draw () { + if (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. */ + + let frame = thisObject.container.parentContainer.frame + let point1 + let point2 + let point3 + let point4 + + point1 = { + x: 0, + y: frame.height - frame.height / 10 + } + + point2 = { + x: frame.width, + y: frame.height - frame.height / 10 + } + + point3 = { + x: frame.width, + y: frame.height + } + + point4 = { + x: 0, + 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 (point3.y - point2.y < MIN_HEIGHT) { + point1.y = point3.y - MIN_HEIGHT + point2.y = point3.y - MIN_HEIGHT + } + + /* Lets start the drawing. */ + + let displacement = viewPort.margins.BOTTOM - BOTTOM_SPACE_HEIGHT + browserCanvasContext.beginPath() + browserCanvasContext.moveTo(point1.x, point1.y + displacement) + browserCanvasContext.lineTo(point2.x, point2.y + displacement) + browserCanvasContext.lineTo(point3.x, point3.y + displacement) + browserCanvasContext.lineTo(point4.x, point4.y + displacement) + browserCanvasContext.lineTo(point1.x, point1.y + displacement) + 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 + displacement + + 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.BOTTOM + } + + let date = getDateFromPoint(point, thisObject.container, timeLineCoordinateSystem) + date = new Date(date) + + let label = '24 hs' + let fontSize = 10 + + let xOffset = label.length * fontSize * FONT_ASPECT_RATIO + + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK + ', 0.50)' + + if (point.x - xOffset / 2 < point1.x || point.x + xOffset / 2 > point2.x) { return } + + browserCanvasContext.fillText(label, point.x - xOffset / 2, point.y + fontSize + 1) +/* + browserCanvasContext.beginPath() + + browserCanvasContext.moveTo(point.x, point1.y) + browserCanvasContext.lineTo(point.x, point5.y) + + browserCanvasContext.closePath() + + browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.DARK + ', 0.5)' + browserCanvasContext.lineWidth = 0.2 + browserCanvasContext.setLineDash([1, 5]) + browserCanvasContext.stroke() +*/ + } +} + diff --git a/TimelineChart.js b/TimelineChart.js index 61b98b01a..ce8cc9965 100644 --- a/TimelineChart.js +++ b/TimelineChart.js @@ -47,6 +47,7 @@ let market let productsPanelHandle + let timePeriodScale return thisObject @@ -69,6 +70,19 @@ market = pMarket timeLineCoordinateSystem = pTimeLineCoordinateSystem + timePeriodScale = newTimePeriodScale() + timePeriodScale.container.connectToParent(thisObject.container, false, false) + timePeriodScale.container.eventHandler.listenToEvent('Time Period Changed', function (event) { + return // Ignore events from this scale + let currentTimePeriod = timePeriod + timePeriod = event.timePeriod + if (timePeriod !== currentTimePeriod) { + plotterManager.setTimePeriod(timePeriod) + } + }) + + timePeriodScale.initialize(timeLineCoordinateSystem) + thisObject.container.eventHandler.listenToEvent('onMouseOver', function (event) { saveUserPosition(thisObject.container, timeLineCoordinateSystem, event) }) @@ -235,7 +249,7 @@ let container - // container = chartGrid.getContainer(point) + container = timePeriodScale.getContainer(point) if (container !== undefined) { return container } @@ -284,8 +298,8 @@ // chartGrid.draw(thisObject.container, timeLineCoordinateSystem) + timePeriodScale.draw() plotterManager.draw() - breakpointsBar.draw() } } From c1a80892e5073acb32364fc256db169f7d0dee7f Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sun, 21 Apr 2019 12:29:44 +0200 Subject: [PATCH 20/24] Scale changing working --- Scales/TimePeriodScale.js | 85 +++++++++++++++++++++++++++------------ 1 file changed, 60 insertions(+), 25 deletions(-) diff --git a/Scales/TimePeriodScale.js b/Scales/TimePeriodScale.js index fe76982fb..70e725e55 100644 --- a/Scales/TimePeriodScale.js +++ b/Scales/TimePeriodScale.js @@ -14,8 +14,8 @@ function newTimePeriodScale () { timePeriod: undefined } - const TIME_PERIOD_DEFAULT_VALUE = 5 - const STEP_SIZE = 5 + const FILES_PERIOD_DEFAULT_VALUE = 0 + const TIME_PERIOD_DEFAULT_VALUE = 0 const MIN_HEIGHT = 50 thisObject.container = newContainer() @@ -34,6 +34,11 @@ function newTimePeriodScale () { let visible = false let timeLineCoordinateSystem + let objectStorage = {} + let filePeriodIndex = FILES_PERIOD_DEFAULT_VALUE + let timePeriodIndex = TIME_PERIOD_DEFAULT_VALUE + let timePeriodsMasterArray = [marketFilesPeriods, dailyFilePeriods] + let timePeriodLabel = '' return thisObject @@ -42,16 +47,8 @@ function newTimePeriodScale () { thisObject.container.eventHandler.listenToEvent('Mouse Wheel', onMouseWheel) - thisObject.timePeriod = window.localStorage.getItem(MODULE_NAME) - if (!thisObject.timePeriod) { - thisObject.timePeriod = TIME_PERIOD_DEFAULT_VALUE - } else { - thisObject.timePeriod = JSON.parse(thisObject.timePeriod) - } - - let event = {} - event.timePeriod = thisObject.timePeriod - thisObject.container.eventHandler.raiseEvent('Time Period Changed', event) + readObjectState() + newTimePeriod() thisObject.container.eventHandler.listenToEvent('onMouseOver', function (event) { mouse.position.x = event.x @@ -68,17 +65,31 @@ function newTimePeriodScale () { function onMouseWheel (event) { delta = event.wheelDelta if (delta < 0) { - thisObject.timePeriod = thisObject.timePeriod - STEP_SIZE - if (thisObject.timePeriod < STEP_SIZE) { thisObject.timePeriod = STEP_SIZE } + timePeriodIndex-- + if (timePeriodIndex < 0) { + filePeriodIndex-- + if (filePeriodIndex < 0) { + filePeriodIndex = 0 + timePeriodIndex = 0 + } else { + timePeriodIndex = timePeriodsMasterArray[filePeriodIndex].length - 1 + } + } } else { - thisObject.timePeriod = thisObject.timePeriod + STEP_SIZE - if (thisObject.timePeriod > 100) { thisObject.timePeriod = 100 } + timePeriodIndex++ + if (timePeriodIndex > timePeriodsMasterArray[filePeriodIndex].length - 1) { + filePeriodIndex++ + if (filePeriodIndex > timePeriodsMasterArray.length - 1) { + filePeriodIndex = timePeriodsMasterArray.length - 1 + timePeriodIndex = timePeriodsMasterArray[filePeriodIndex].length - 1 + } else { + timePeriodIndex = 0 + } + } } - event.timePeriod = thisObject.timePeriod - thisObject.container.eventHandler.raiseEvent('Lenght Percentage Changed', event) - - window.localStorage.setItem(MODULE_NAME, thisObject.timePeriod) + saveObjectState() + newTimePeriod() } function getContainer (pPoint) { @@ -161,6 +172,8 @@ to be visible at the top of the viewPort. */ /* Lets start the drawing. */ let displacement = viewPort.margins.BOTTOM - BOTTOM_SPACE_HEIGHT + + /* browserCanvasContext.beginPath() browserCanvasContext.moveTo(point1.x, point1.y + displacement) browserCanvasContext.lineTo(point2.x, point2.y + displacement) @@ -172,6 +185,7 @@ to be visible at the top of the viewPort. */ 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 + displacement @@ -184,10 +198,7 @@ to be visible at the top of the viewPort. */ y: point1.y + viewPort.margins.BOTTOM } - let date = getDateFromPoint(point, thisObject.container, timeLineCoordinateSystem) - date = new Date(date) - - let label = '24 hs' + let label = timePeriodLabel let fontSize = 10 let xOffset = label.length * fontSize * FONT_ASPECT_RATIO @@ -212,5 +223,29 @@ to be visible at the top of the viewPort. */ browserCanvasContext.stroke() */ } -} + function saveObjectState () { + objectStorage.filePeriodIndex = filePeriodIndex + objectStorage.timePeriodIndex = timePeriodIndex + window.localStorage.setItem(MODULE_NAME, JSON.stringify(objectStorage)) + } + + function readObjectState () { + let objectStorageString = window.localStorage.getItem(MODULE_NAME) + if (objectStorageString !== null && objectStorageString !== '') { + objectStorage = JSON.parse(objectStorageString) + filePeriodIndex = objectStorage.filePeriodIndex + timePeriodIndex = objectStorage.timePeriodIndex + } + } + + function newTimePeriod () { + let timePeriodArray = timePeriodsMasterArray[filePeriodIndex] + thisObject.timePeriod = timePeriodArray[timePeriodIndex][0] + timePeriodLabel = timePeriodArray[timePeriodIndex][1] + + let event = {} + event.timePeriod = thisObject.timePeriod + thisObject.container.eventHandler.raiseEvent('Time Period Changed', event) + } +} From f507486165575b784a815f94f9adcd700a906c77 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sun, 21 Apr 2019 13:03:11 +0200 Subject: [PATCH 21/24] Working Time Period Scale --- Scales/TimePeriodScale.js | 20 ++++++++++++++++++++ TimelineChart.js | 35 ++++++++++++----------------------- 2 files changed, 32 insertions(+), 23 deletions(-) diff --git a/Scales/TimePeriodScale.js b/Scales/TimePeriodScale.js index 70e725e55..cb836d04e 100644 --- a/Scales/TimePeriodScale.js +++ b/Scales/TimePeriodScale.js @@ -60,6 +60,26 @@ function newTimePeriodScale () { thisObject.container.eventHandler.listenToEvent('onMouseNotOver', function (event) { visible = false }) + + viewPort.eventHandler.listenToEvent('Zoom Changed', onZoomChanged) + } + + function onZoomChanged (event) { + let currentTimePeriod = thisObject.timePeriod + let timePeriod = recalculatePeriod(event.newLevel) + if (timePeriod !== currentTimePeriod) { + for (let i = 0; i < timePeriodsMasterArray.length; i++) { + let timePeriodArray = timePeriodsMasterArray[i] + for (let j = 0; j < timePeriodArray.length; j++) { + let record = timePeriodArray[j] + if (timePeriod === record[0]) { + filePeriodIndex = i + timePeriodIndex = j + } + } + } + newTimePeriod() + } } function onMouseWheel (event) { diff --git a/TimelineChart.js b/TimelineChart.js index ce8cc9965..34e41ec8c 100644 --- a/TimelineChart.js +++ b/TimelineChart.js @@ -70,19 +70,6 @@ market = pMarket timeLineCoordinateSystem = pTimeLineCoordinateSystem - timePeriodScale = newTimePeriodScale() - timePeriodScale.container.connectToParent(thisObject.container, false, false) - timePeriodScale.container.eventHandler.listenToEvent('Time Period Changed', function (event) { - return // Ignore events from this scale - let currentTimePeriod = timePeriod - timePeriod = event.timePeriod - if (timePeriod !== currentTimePeriod) { - plotterManager.setTimePeriod(timePeriod) - } - }) - - timePeriodScale.initialize(timeLineCoordinateSystem) - thisObject.container.eventHandler.listenToEvent('onMouseOver', function (event) { saveUserPosition(thisObject.container, timeLineCoordinateSystem, event) }) @@ -160,6 +147,18 @@ return } + timePeriodScale = newTimePeriodScale() + timePeriodScale.container.connectToParent(thisObject.container, false, false) + timePeriodScale.container.eventHandler.listenToEvent('Time Period Changed', function (event) { + let currentTimePeriod = timePeriod + timePeriod = event.timePeriod + if (timePeriod !== currentTimePeriod) { + plotterManager.setTimePeriod(timePeriod) + } + }) + + timePeriodScale.initialize(timeLineCoordinateSystem) + initializationReady = true callBackFunction(GLOBAL.DEFAULT_OK_RESPONSE) return @@ -174,16 +173,6 @@ if (INFO_LOG === true) { logger.write('[INFO] onZoomChanged -> Entering function.') } if (initializationReady === true) { - let currentTimePeriod = timePeriod - - timePeriod = recalculatePeriod(event.newLevel) - - /* If the period changes, we need to spread the word in cascade towards all the depending objects. */ - - if (timePeriod !== currentTimePeriod) { - plotterManager.setTimePeriod(timePeriod) - } - recalculateCurrentDatetime() // saveUserPosition(thisObject.container, timeLineCoordinateSystem) From 3e371e7ff809500a2346e699afb4efad3e1b9645 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sun, 21 Apr 2019 13:13:48 +0200 Subject: [PATCH 22/24] Time Control Panels not drawn --- Panels/TimeControlPanel.js | 1 + Spaces/PanelsSpace.js | 2 -- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/Panels/TimeControlPanel.js b/Panels/TimeControlPanel.js index b56759dc3..7a1b51e8e 100644 --- a/Panels/TimeControlPanel.js +++ b/Panels/TimeControlPanel.js @@ -92,6 +92,7 @@ function newTimeControlPanel () { } function draw () { + return thisObject.container.frame.draw(false, false, true) thisObject.datetimeDisplay.draw() panelTabButton.draw() diff --git a/Spaces/PanelsSpace.js b/Spaces/PanelsSpace.js index 5378671d2..ecd4793a2 100644 --- a/Spaces/PanelsSpace.js +++ b/Spaces/PanelsSpace.js @@ -98,8 +98,6 @@ function newPanelsSpace () { function draw () { thisObject.container.frame.draw(false, false) - /* When we draw a time machine, that means also to draw all the charts in it. */ - thisObject.panels = panelsMap.get('Global') if (thisObject.panels != undefined) { for (var i = 0; i < thisObject.panels.length; i++) { From d33a79955daf22155a7587aef6a9c1404fd6447a Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sun, 21 Apr 2019 17:56:46 +0200 Subject: [PATCH 23/24] Only indicators shared with the Public are available, plus your own --- Panels/ProductsPanel.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Panels/ProductsPanel.js b/Panels/ProductsPanel.js index a6c97f8a5..08822bb7c 100644 --- a/Panels/ProductsPanel.js +++ b/Panels/ProductsPanel.js @@ -81,7 +81,7 @@ if (bot.products !== undefined) { for (let k = 0; k < bot.products.length; k++) { let product = bot.products[k] - + if (product.shareWith !== 'Public' && devTeam.codeName !== userTeam.slug) { continue } /* Now we create Product objects */ let productCard = newProductCard() From 97f5885a13831a95407704e0f02a6d3aac5e805d Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sun, 21 Apr 2019 19:05:59 +0200 Subject: [PATCH 24/24] If a file is missing, wont halt initialization --- ProductStorage.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/ProductStorage.js b/ProductStorage.js index 93bc938fd..66c3ea939 100644 --- a/ProductStorage.js +++ b/ProductStorage.js @@ -186,7 +186,8 @@ function newProductStorage (pName) { let event = { totalValue: pCaller.getExpectedFiles(), - currentValue: pCaller.getFilesLoaded() + currentValue: pCaller.getFilesLoaded(), + filesNotLoaded: pCaller.getFilesNotLoaded() } thisObject.eventHandler.raiseEvent('Market File Loaded', event) @@ -194,7 +195,7 @@ function newProductStorage (pName) { if (INFO_LOG === true) { logger.write('[INFO] initialize -> onMarketFileReady -> event.currentValue = ' + event.currentValue) } if (INFO_LOG === true) { logger.write('[INFO] initialize -> onMarketFileReady -> event.totalValue = ' + event.totalValue) } - if (event.currentValue === event.totalValue) { + if (event.currentValue + event.filesNotLoaded === event.totalValue) { dataSetsLoaded++ if (INFO_LOG === true) { logger.write('[INFO] initialize -> onMarketFileReady -> dataSetsLoaded = ' + dataSetsLoaded) } @@ -424,4 +425,3 @@ function newProductStorage (pName) { } } } -