Mechanism to hide panels when Time Machine is out of Viewport

Animation.js

@@ -57,21 +57,14 @@ function newAnimation () {
   function animationLoop () {
     try {
       if (window.canvasApp.visible === true) {
-                /* We set the canvas to its normal width and height */
-
+        /* We set the canvas to its normal width and height */
         browserCanvas.width = window.innerWidth
         browserCanvas.height = window.innerHeight - CURRENT_TOP_MARGIN
 
-                /* First thing is to clear the actual canvas */
-
+        /* First thing is to clear the actual canvas */
         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. */
-
+        /* We loop through the callback functions collections and execute them all. */
         let performanceMap = new Map()
         let totalTimeConsumed = 0
         let totalElements = 0

ChartsSpace/PlottersManager.js

@@ -138,7 +138,10 @@ function newPlottersManager () {
 
       let baseAsset = layer.definition.referenceParent.parentNode.referenceParent.baseAsset.referenceParent.code.codeName
       let quotedAsset = layer.definition.referenceParent.parentNode.referenceParent.quotedAsset.referenceParent.code.codeName
-      let market = baseAsset + '/' + quotedAsset
+      let market = {
+        baseAsset: baseAsset,
+        quotedAsset: quotedAsset
+      }
       let product = layer.definition.referenceParent.referenceParent
       let bot = layer.definition.referenceParent.referenceParent.parentNode
       let dataMine = layer.definition.referenceParent.referenceParent.parentNode.parentNode
@@ -188,40 +191,22 @@ function newPlottersManager () {
                 /* Lets load now this plotter panels. */
                 connector.panels = []
 
-                /* Here is where we instantiate the legacy panels */
-                for (let i = 0; i < plotterModule.panels.length; i++) {
-                  let panelConfig = plotterModule.panels[i]
-
-                  let parameters = {
-                    dataMine: layer.product.plotter.dataMine,
-                    plotterCodeName: layer.product.plotter.codeName,
-                    moduleCodeName: layer.product.plotter.moduleName,
-                    panelCodeName: panelConfig.codeName
-                  }
-
-                  let plotterPanelHandle = canvas.panelsSpace.createNewPanel('Plotter Panel', parameters, layer.payload.node.id, layer.session)
-                  let plotterPanel = canvas.panelsSpace.getPanel(plotterPanelHandle, layer.payload.node.id)
-                        /* Connect Panel to the Plotter via an Event. */
-                  if (panelConfig.event !== undefined) {
-                    connector.plotter.onRecordChangeEventsSubscriptionId = connector.plotter.container.eventHandler.listenToEvent(panelConfig.event, plotterPanel.onEventRaised)
-                  }
-                  connector.panels.push(plotterPanelHandle)
-                }
-
-                /* Here we instantiate the UI Defined Panels. */
                 if (product !== undefined) {
-                  for (let i = 0; i < product.referenceParent.panels.length; i++) {
-                    let panel = product.referenceParent.panels[i]
+                  for (let i = 0; i < plotterModule.panels.length; i++) {
+                    let panel = plotterModule.panels[i]
 
                     let parameters = {
-                      dataMine: layer.product.plotter.dataMine,
-                      plotterCodeName: layer.product.plotter.codeName,
-                      moduleCodeName: layer.product.plotter.moduleName,
-                      panelCodeName: panel.id
+                      dataMine: dataMine.code.codeName,
+                      plotterCodeName: plotterModule.parentNode.code.codeName,
+                      moduleCodeName: plotterModule.code.codeName,
+                      panelCodeName: panel.code.codeName,
+                      panelId: panel.id,
+                      isLegacy: panel.code.isLegacy
                     }
 
-                    let plotterPanelHandle = canvas.panelsSpace.createNewPanel('Plotter Panel', parameters, layer.payload.node.id, layer.session, panel)
-                    let plotterPanel = canvas.panelsSpace.getPanel(plotterPanelHandle, layer.payload.node.id)
+                    let owner = thisObject.payload.node.payload.parentNode.payload.parentNode.id // Panels are owned by the time machine.
+                    let plotterPanelHandle = canvas.panelsSpace.createNewPanel('Plotter Panel', parameters, owner, layer.session)
+                    let plotterPanel = canvas.panelsSpace.getPanel(plotterPanelHandle)
 
                     /* Connect Panel to the Plotter via an Event. */
                     connector.plotter.onRecordChangeEventsSubscriptionId = connector.plotter.container.eventHandler.listenToEvent('Current Record Changed', plotterPanel.onRecordChange)

ChartsSpace/TimelineChart.js

@@ -140,8 +140,9 @@ function newTimelineChart () {
   }
 
   function initializeLayersManager () {
-    layersPanelHandle = canvas.panelsSpace.createNewPanel('Layers Panel', undefined, thisObject.payload.node.id)
-    thisObject.layersManager = canvas.panelsSpace.getPanel(layersPanelHandle, thisObject.payload.node.id)
+    let owner = thisObject.payload.node.payload.parentNode.id // The real owner is the Time Machine
+    layersPanelHandle = canvas.panelsSpace.createNewPanel('Layers Panel', undefined, owner)
+    thisObject.layersManager = canvas.panelsSpace.getPanel(layersPanelHandle)
     thisObject.layersManager.payload = thisObject.payload.node.layersManager.payload
     thisObject.layersManager.initialize()
 
@@ -376,9 +377,6 @@ function newTimelineChart () {
 
   function drawBackground () {
     if (thisObject.container.frame.isInViewPort()) {
-      if (window.CHART_ON_FOCUS === '') {
-        window.CHART_ON_FOCUS = thisObject.payload.node.id
-      }
       drawChartsBackground()
       if (thisObject.plotterManager !== undefined) {
         thisObject.plotterManager.draw()

Spaces/ChartSpace.js

@@ -15,6 +15,7 @@ function newChartSpace () {
   let thisObject = {
     visible: true,
     container: undefined,
+    inViewport: new Map(),
     timeMachines: [],
     oneScreenUp: oneScreenUp,
     oneScreenDown: oneScreenDown,
@@ -52,6 +53,7 @@ function newChartSpace () {
       timeMachine.finalize()
     }
 
+    thisObject.inViewport = undefined
     thisObject.timeMachines = undefined
     timeMachinesMap = undefined
 
@@ -280,7 +282,13 @@ function newChartSpace () {
   function childrenPhysics () {
     for (let i = 0; i < thisObject.timeMachines.length; i++) {
       let timeMachine = thisObject.timeMachines[i]
-      timeMachine.physics()
+
+      if (timeMachine.container.frame.isInViewPort()) {
+        timeMachine.physics()
+        thisObject.inViewport.set(timeMachine.payload.node.id, timeMachine)
+      } else {
+        thisObject.inViewport.delete(timeMachine.payload.node.id)
+      }
     }
   }
 

Spaces/PanelsSpace.js

@@ -25,7 +25,6 @@ function newPanelsSpace () {
 
   container.frame.containerName = 'Panels Space'
 
-  panelsMap = new Map()
   return thisObject
 
   function initialize () {
@@ -34,7 +33,7 @@ function newPanelsSpace () {
 
   }
 
-  function createNewPanel (pType, pParameters, pOwner, pSession, pPanelCode) {
+  function createNewPanel (pType, pParameters, pOwner, pSession) {
     let panel
 
     switch (pType) {
@@ -48,12 +47,12 @@ function newPanelsSpace () {
         }
       case 'Plotter Panel':
         {
-          if (pPanelCode !== undefined) {
+          if (pParameters.isLegacy !== true) {
             panel = newPlotterPanel()
             panel.fitFunction = canvas.chartSpace.fitFunction
             panel.container.isVisibleFunction = canvas.chartSpace.isThisPointVisible
             panel.session = pSession
-            panel.initialize(pPanelCode)
+            panel.initialize(pParameters.panelId)
           } else {
             panel = getNewPlotterPanel(pParameters.dataMine, pParameters.plotterCodeName, pParameters.moduleCodeName, pParameters.panelCodeName)
             panel.fitFunction = canvas.chartSpace.fitFunction
@@ -66,13 +65,8 @@ function newPanelsSpace () {
         }
     }
 
-    let panelArray = panelsMap.get(pOwner)
-    if (panelArray === undefined) {
-      panelArray = []
-      panelsMap.set(pOwner, panelArray)
-    }
-
-    panelArray.push(panel)
+    panel.owner = pOwner
+    thisObject.panels.push(panel)
 
     panel.handle = Math.floor((Math.random() * 10000000) + 1)
 
@@ -94,15 +88,12 @@ function newPanelsSpace () {
     }
   }
 
-  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]
+  function getPanel (pPanelHandle) {
+    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
       }
     }
   }
@@ -118,8 +109,11 @@ function newPanelsSpace () {
     if (thisObject.panels !== undefined) {
       for (let i = 0; i < thisObject.panels.length; i++) {
         let panel = thisObject.panels[i]
-        if (panel.physics !== undefined) {
-          panel.physics()
+        let owner = canvas.chartSpace.inViewport.get(panel.owner)
+        if (owner !== undefined) {
+          if (panel.physics !== undefined) {
+            panel.physics()
+          }
         }
       }
     }
@@ -309,18 +303,10 @@ function newPanelsSpace () {
 
     thisObject.container.frame.draw(false, false)
 
-    thisObject.panels = panelsMap.get('Global')
-    if (thisObject.panels !== undefined) {
-      for (let 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 (let i = 0; i < thisObject.panels.length; i++) {
-        let panel = thisObject.panels[i]
+    for (let i = 0; i < thisObject.panels.length; i++) {
+      let panel = thisObject.panels[i]
+      let owner = canvas.chartSpace.inViewport.get(panel.owner)
+      if (owner !== undefined) {
         panel.draw()
       }
     }
@@ -330,26 +316,20 @@ function newPanelsSpace () {
     if (thisObject.visible !== true) { return }
 
     let container
-
-        /*
-
-        We search for the container of panels in the oposite direction than we do it for drawing them,
-        so panels overlapping others are picked firt although they are drawn last.
-
-        */
-    if (thisObject.panels !== undefined) {
-      for (var i = thisObject.panels.length - 1; i >= 0; i--) {
-        container = thisObject.panels[i].getContainer(point)
-
-        if (container !== undefined) {
-              /* We found an inner container which has the point. We return it. */
-
-          return container
-        }
+      /*
+      We search for the container of panels in the oposite direction than we do it for drawing them,
+      so panels overlapping others are picked firt although they are drawn last.
+      */
+    for (let i = thisObject.panels.length - 1; i >= 0; i--) {
+      let panel = thisObject.panels[i]
+      let owner = canvas.chartSpace.inViewport.get(panel.owner)
+      if (owner !== undefined) {
+        container = panel.getContainer(point)
+      }
+      if (container !== undefined) {
+        return container
       }
     }
-        /* The point does not belong to any inner container, so we return the current container. */
-
     return thisObject.container
   }
 }