diff --git a/Animation.js b/Animation.js index 56b4dd0c7..aec3a28ae 100644 --- a/Animation.js +++ b/Animation.js @@ -108,6 +108,10 @@ function newAnimation () { clearBrowserCanvas() + /* Let reset the current chart that is on focus */ + + window.CHART_ON_FOCUS = '' + /* We loop through the callback functions collections and execute them all. */ callBackFunctions.forEach(function (callBackFunction) { diff --git a/PlottersManager.js b/PlottersManager.js index 6519321f4..80f07e8ef 100644 --- a/PlottersManager.js +++ b/PlottersManager.js @@ -553,8 +553,9 @@ function newPlottersManager () { panelCodeName: panelConfig.codeName } - let plotterPanelHandle = canvas.panelsSpace.createNewPanel('Plotter Panel', parameters) - let plotterPanel = canvas.panelsSpace.getPanel(plotterPanelHandle) + let panelOwner = exchange + ' ' + market.assetB + '/' + market.assetA + let plotterPanelHandle = canvas.panelsSpace.createNewPanel('Plotter Panel', parameters, panelOwner) + let plotterPanel = canvas.panelsSpace.getPanel(plotterPanelHandle, panelOwner) /* Connect Panel to the Plotter via an Event. */ diff --git a/Spaces/PanelsSpace.js b/Spaces/PanelsSpace.js index 4c7e8d663..cd203c8ae 100644 --- a/Spaces/PanelsSpace.js +++ b/Spaces/PanelsSpace.js @@ -24,6 +24,7 @@ function newPanelsSpace () { container.displacement.containerName = 'Panels Space' container.frame.containerName = 'Panels Space' + panelsMap = new Map() return thisObject function initialize () { @@ -32,7 +33,7 @@ function newPanelsSpace () { } - function createNewPanel (pType, pParameters) { + function createNewPanel (pType, pParameters, pOwner) { let panel switch (pType) { @@ -57,7 +58,13 @@ function newPanelsSpace () { } } - thisObject.panels.push(panel) + let panelArray = panelsMap.get(pOwner) + if (panelArray === undefined) { + panelArray = [] + panelsMap.set(pOwner, panelArray) + } + + panelArray.push(panel) panel.handle = Math.floor((Math.random() * 10000000) + 1) @@ -75,12 +82,15 @@ function newPanelsSpace () { } } - function getPanel (pPanelHandle) { - for (let i = 0; i < thisObject.panels.length; i++) { - let panel = thisObject.panels[i] + function getPanel (pPanelHandle, pOwner) { + thisObject.panels = panelsMap.get(pOwner) + if (thisObject.panels != undefined) { + for (let i = 0; i < thisObject.panels.length; i++) { + let panel = thisObject.panels[i] - if (panel.handle === pPanelHandle) { - return panel + if (panel.handle === pPanelHandle) { + return panel + } } } } @@ -90,9 +100,20 @@ function newPanelsSpace () { /* When we draw a time machine, that means also to draw all the charts in it. */ - for (var i = 0; i < thisObject.panels.length; i++) { - let panel = thisObject.panels[i] - panel.draw() + thisObject.panels = panelsMap.get('Global') + if (thisObject.panels != undefined) { + for (var i = 0; i < thisObject.panels.length; i++) { + let panel = thisObject.panels[i] + panel.draw() + } + } + + thisObject.panels = panelsMap.get(window.CHART_ON_FOCUS) + if (thisObject.panels !== undefined) { + for (var i = 0; i < thisObject.panels.length; i++) { + let panel = thisObject.panels[i] + panel.draw() + } } } diff --git a/TimeMachine.js b/TimeMachine.js index 50ffd9a0c..a13ccc5ac 100644 --- a/TimeMachine.js +++ b/TimeMachine.js @@ -34,6 +34,7 @@ function newTimeMachine () { let controlPanelHandle // We need this to destroy the Panel when this object is itself destroyed or no longer needs it... // ... also to request a reference to the object for the cases we need it. + const SEPARATION_BETWEEN_TIMELINE_CHARTS = 1.5 return thisObject @@ -55,8 +56,9 @@ function newTimeMachine () { /* Each Time Machine has a Control Panel. */ - controlPanelHandle = canvas.panelsSpace.createNewPanel('Time Control Panel') - let controlPanel = canvas.panelsSpace.getPanel(controlPanelHandle) + let panelOwner = 'Global' + controlPanelHandle = canvas.panelsSpace.createNewPanel('Time Control Panel', undefined, panelOwner) + let controlPanel = canvas.panelsSpace.getPanel(controlPanelHandle, panelOwner) /* 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. */ @@ -73,7 +75,7 @@ function newTimeMachine () { timelineChart.container.frame.height = thisObject.container.frame.height * 1 * canvas.bottomSpace.chartAspectRatio.aspectRatio.y timelineChart.container.frame.position.x = thisObject.container.frame.width / 2 - timelineChart.container.frame.width / 2 - timelineChart.container.frame.position.y = timelineChart.container.frame.height * 1.1 * position + timelineChart.container.frame.position.y = timelineChart.container.frame.height * SEPARATION_BETWEEN_TIMELINE_CHARTS * position position++ @@ -132,7 +134,7 @@ function newTimeMachine () { timelineChart.container.frame.height = thisObject.container.frame.height * 1 * canvas.bottomSpace.chartAspectRatio.aspectRatio.y timelineChart.container.frame.position.x = thisObject.container.frame.width / 2 - timelineChart.container.frame.width / 2 - timelineChart.container.frame.position.y = timelineChart.container.frame.height * 1.1 * position + timelineChart.container.frame.position.y = timelineChart.container.frame.height * SEPARATION_BETWEEN_TIMELINE_CHARTS * position position++ diff --git a/TimelineChart.js b/TimelineChart.js index 52cca550d..e9e028cd9 100644 --- a/TimelineChart.js +++ b/TimelineChart.js @@ -70,8 +70,9 @@ exchange = pExchange market = pMarket - productsPanelHandle = canvas.panelsSpace.createNewPanel('Products Panel') - let productsPanel = canvas.panelsSpace.getPanel(productsPanelHandle) + let panelOwner = exchange + ' ' + market.assetB + '/' + market.assetA + productsPanelHandle = canvas.panelsSpace.createNewPanel('Products Panel', undefined, panelOwner) + let productsPanel = canvas.panelsSpace.getPanel(productsPanelHandle, panelOwner) productsPanel.initialize(exchange, market) logoA = new Image() @@ -304,9 +305,13 @@ if (INTENSIVE_LOG === true) { logger.write('[INFO] draw -> Entering function.') } if (thisObject.container.frame.isInViewPort()) { - this.container.frame.draw() + if (window.CHART_ON_FOCUS === '') { + window.CHART_ON_FOCUS = exchange + ' ' + market.assetB + '/' + market.assetA - drawBackground() + this.container.frame.draw() + + drawBackground() + } chartGrid.draw(thisObject.container, timeLineCoordinateSystem)