Only one set of panels is show now, depending on the owner

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) {

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. */
 

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()
+      }
     }
   }
 

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++
 

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)