Reorg inside Timeline Chart, Layers Manager and Plotter Manager

ChartsSpace/PlottersManager.js

@@ -65,7 +65,7 @@ function newPlottersManager () {
     setupContainer()
   }
 
-  function initialize (pProductsPanel, pExchange, pMarket, callBackFunction) {
+  function initialize (pProductsPanel, pExchange, pMarket) {
     try {
             /* Remember the Products Panel */
       productsPanel = pProductsPanel
@@ -76,51 +76,14 @@ function newPlottersManager () {
 
       /* Lets get all the cards that needs to be loaded. */
 
-      let initializationCounter = 0
       let loadingProductCards = productsPanel.getLoadingProductCards()
-      let okCounter = 0
-      let failCounter = 0
 
-      if (loadingProductCards.length === 0) {
-        callBackFunction(GLOBAL.DEFAULT_OK_RESPONSE)
-        return
-      }
       for (let i = 0; i < loadingProductCards.length; i++) {
           /* For each one, we will initialize the associated plotter. */
-        initializeProductPlotter(loadingProductCards[i], onProductPlotterInitialized)
-
-        function onProductPlotterInitialized (err) {
-          initializationCounter++
-
-          switch (err.result) {
-            case GLOBAL.DEFAULT_OK_RESPONSE.result: {
-              okCounter++
-              break
-            }
-            case GLOBAL.DEFAULT_FAIL_RESPONSE.result: {
-              failCounter++
-              break
-            }
-            default: {
-              failCounter++
-              break
-            }
-          }
-          if (initializationCounter === loadingProductCards.length) {
-      // This was the last one.
-      /* If less than 50% of plotters are initialized then we return FAIL. */
-            if (okCounter >= 1) {
-              initializationReady = true
-              callBackFunction(GLOBAL.DEFAULT_OK_RESPONSE)
-            } else {
-              callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE)
-            }
-          }
-        }
+        initializeProductPlotter(loadingProductCards[i])
       }
     } catch (err) {
       if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err = ' + err.stack) }
-      callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE)
     }
   }
 
@@ -162,119 +125,104 @@ function newPlottersManager () {
 
       function onProductStorageInitialized (err) {
         try {
-          switch (err.result) {
-            case GLOBAL.DEFAULT_OK_RESPONSE.result: {
-              break
+          if (err.result === GLOBAL.DEFAULT_OK_RESPONSE.result) {
+            /* Now we have all the initial data loaded and ready to be delivered to the new instance of the plotter. */
+            let plotter
+            let productDefinition
+
+            if (pProductCard.product.plotter.legacy === false) {
+              plotter = newPlotter()
+
+              /* We take a snapwhot of the current product definition to be used by the plotter. */
+              let functionLibraryProtocolNode = newProtocolNode()
+              let lightingPath = '->Product Definition->' +
+                                'Record Definition->Record Property->Formula->' +
+                                'Data Building Procedure->Procedure Loop->Javascript Code->Procedure Initialization->Javascript Code->' +
+                                'Calculations Procedure->Procedure Loop->Javascript Code->Procedure Initialization->Javascript Code->' +
+                                'Plotter Module->Shapes->' +
+                                'Chart Points->Point->Point Formula->' +
+                                'Polygon->Polygon Body->Style->Style Condition->Style->' +
+                                'Polygon Border->Style->Style Condition->Style->' +
+                                'Polygon Vertex->Point->' +
+                                'Plotter Panel->Javascript Code->Panel Data->Data Formula->'
+              productDefinition = functionLibraryProtocolNode.getProtocolNode(pProductCard.product.node, false, true, true, false, false, lightingPath)
+            } else {
+              plotter = getNewPlotter(pProductCard.product.plotter.dataMine, pProductCard.product.plotter.codeName, pProductCard.product.plotter.moduleName)
             }
-            case GLOBAL.DEFAULT_FAIL_RESPONSE.result: {
-              callBack(GLOBAL.DEFAULT_FAIL_RESPONSE)
-              return
-            }
-            default: {
-              callBack(GLOBAL.DEFAULT_FAIL_RESPONSE)
-              return
-            }
-          }
-                    /* Now we have all the initial data loaded and ready to be delivered to the new instance of the plotter. */
-          let plotter
-          let productDefinition
 
-          if (pProductCard.product.plotter.legacy === false) {
-            plotter = newPlotter()
+            plotter.container.connectToParent(thisObject.container, true, true, false, true, true, true, false, false, true)
+            plotter.container.frame.position.x = thisObject.container.frame.width / 2 - plotter.container.frame.width / 2
+            plotter.container.frame.position.y = thisObject.container.frame.height / 2 - plotter.container.frame.height / 2
+            plotter.fitFunction = thisObject.fitFunction
+            plotter.initialize(storage, exchange, market, datetime, timeFrame, onPlotterInizialized, productDefinition)
 
-            /* We take a snapwhot of the current product definition to be used by the plotter. */
-            let functionLibraryProtocolNode = newProtocolNode()
-            let lightingPath = '->Product Definition->' +
-            'Record Definition->Record Property->Formula->' +
-            'Data Building Procedure->Procedure Loop->Javascript Code->Procedure Initialization->Javascript Code->' +
-            'Calculations Procedure->Procedure Loop->Javascript Code->Procedure Initialization->Javascript Code->' +
-            'Plotter Module->Shapes->' +
-            'Chart Points->Point->Point Formula->' +
-            'Polygon->Polygon Body->Style->Style Condition->Style->' +
-            'Polygon Border->Style->Style Condition->Style->' +
-            'Polygon Vertex->Point->' +
-            'Plotter Panel->Javascript Code->Panel Data->Data Formula->'
-            productDefinition = functionLibraryProtocolNode.getProtocolNode(pProductCard.product.node, false, true, true, false, false, lightingPath)
-          } else {
-            plotter = getNewPlotter(pProductCard.product.plotter.dataMine, pProductCard.product.plotter.codeName, pProductCard.product.plotter.moduleName)
-          }
-
-          plotter.container.connectToParent(thisObject.container, true, true, false, true, true, true, false, false, true)
-          plotter.container.frame.position.x = thisObject.container.frame.width / 2 - plotter.container.frame.width / 2
-          plotter.container.frame.position.y = thisObject.container.frame.height / 2 - plotter.container.frame.height / 2
-          plotter.fitFunction = thisObject.fitFunction
-          plotter.initialize(storage, exchange, market, datetime, timeFrame, onPlotterInizialized, productDefinition)
-
-          function onPlotterInizialized () {
-            try {
-              let productPlotter = {
-                productCard: pProductCard,
-                plotter: plotter,
-                storage: storage,
-                profile: undefined,
-                notes: undefined
-              }
-                            /* Let the Plotter listen to the event of Cursor Files loaded, so that it can react recalculating if needed. */
-              storage.eventHandler.listenToEvent('Daily File Loaded', plotter.onDailyFileLoaded)
-                            /* Lets load now this plotter panels. */
-              productPlotter.panels = []
-
-              /* Here is where we instantiate the legacy panels */
-              for (let i = 0; i < pProductCard.product.plotter.module.panels.length; i++) {
-                let panelConfig = pProductCard.product.plotter.module.panels[i]
-
-                let parameters = {
-                  dataMine: pProductCard.product.plotter.dataMine,
-                  plotterCodeName: pProductCard.product.plotter.codeName,
-                  moduleCodeName: pProductCard.product.plotter.moduleName,
-                  panelCodeName: panelConfig.codeName
+            function onPlotterInizialized () {
+              try {
+                let productPlotter = {
+                  productCard: pProductCard,
+                  plotter: plotter,
+                  storage: storage,
+                  profile: undefined,
+                  notes: undefined
                 }
-                let panelOwner = exchange + ' ' + market.quotedAsset + '/' + market.baseAsset
-                let plotterPanelHandle = canvas.panelsSpace.createNewPanel('Plotter Panel', parameters, panelOwner, pProductCard.session)
-                let plotterPanel = canvas.panelsSpace.getPanel(plotterPanelHandle, panelOwner)
-                                /* Connect Panel to the Plotter via an Event. */
-                if (panelConfig.event !== undefined) {
-                  productPlotter.plotter.container.eventHandler.listenToEvent(panelConfig.event, plotterPanel.onEventRaised)
-                }
-                productPlotter.panels.push(plotterPanelHandle)
-              }
+                    /* Let the Plotter listen to the event of Cursor Files loaded, so that it can react recalculating if needed. */
+                storage.eventHandler.listenToEvent('Daily File Loaded', plotter.onDailyFileLoaded)
+                    /* Lets load now this plotter panels. */
+                productPlotter.panels = []
 
-              /* Here we instantiate the UI Defined Panels. */
-              if (productDefinition !== undefined) {
-                for (let i = 0; i < productDefinition.referenceParent.panels.length; i++) {
-                  let panel = productDefinition.referenceParent.panels[i]
+                /* Here is where we instantiate the legacy panels */
+                for (let i = 0; i < pProductCard.product.plotter.module.panels.length; i++) {
+                  let panelConfig = pProductCard.product.plotter.module.panels[i]
 
                   let parameters = {
                     dataMine: pProductCard.product.plotter.dataMine,
                     plotterCodeName: pProductCard.product.plotter.codeName,
                     moduleCodeName: pProductCard.product.plotter.moduleName,
-                    panelCodeName: panel.id
+                    panelCodeName: panelConfig.codeName
                   }
                   let panelOwner = exchange + ' ' + market.quotedAsset + '/' + market.baseAsset
-                  let plotterPanelHandle = canvas.panelsSpace.createNewPanel('Plotter Panel', parameters, panelOwner, pProductCard.session, panel)
+                  let plotterPanelHandle = canvas.panelsSpace.createNewPanel('Plotter Panel', parameters, panelOwner, pProductCard.session)
                   let plotterPanel = canvas.panelsSpace.getPanel(plotterPanelHandle, panelOwner)
-
-                  /* Connect Panel to the Plotter via an Event. */
-                  productPlotter.plotter.container.eventHandler.listenToEvent('Current Record Changed', plotterPanel.onRecordChange)
+                        /* Connect Panel to the Plotter via an Event. */
+                  if (panelConfig.event !== undefined) {
+                    productPlotter.plotter.container.eventHandler.listenToEvent(panelConfig.event, plotterPanel.onEventRaised)
+                  }
                   productPlotter.panels.push(plotterPanelHandle)
                 }
-              }
 
-              productPlotters.push(productPlotter)
-              callBack(GLOBAL.DEFAULT_OK_RESPONSE)
-            } catch (err) {
-              if (ERROR_LOG === true) { logger.write('[ERROR] initializeProductPlotter -> onProductStorageInitialized -> onPlotterInizialized -> err = ' + err.stack) }
-              callBack(GLOBAL.DEFAULT_FAIL_RESPONSE)
+                /* Here we instantiate the UI Defined Panels. */
+                if (productDefinition !== undefined) {
+                  for (let i = 0; i < productDefinition.referenceParent.panels.length; i++) {
+                    let panel = productDefinition.referenceParent.panels[i]
+
+                    let parameters = {
+                      dataMine: pProductCard.product.plotter.dataMine,
+                      plotterCodeName: pProductCard.product.plotter.codeName,
+                      moduleCodeName: pProductCard.product.plotter.moduleName,
+                      panelCodeName: panel.id
+                    }
+                    let panelOwner = exchange + ' ' + market.quotedAsset + '/' + market.baseAsset
+                    let plotterPanelHandle = canvas.panelsSpace.createNewPanel('Plotter Panel', parameters, panelOwner, pProductCard.session, panel)
+                    let plotterPanel = canvas.panelsSpace.getPanel(plotterPanelHandle, panelOwner)
+
+                    /* Connect Panel to the Plotter via an Event. */
+                    productPlotter.plotter.container.eventHandler.listenToEvent('Current Record Changed', plotterPanel.onRecordChange)
+                    productPlotter.panels.push(plotterPanelHandle)
+                  }
+                }
+
+                productPlotters.push(productPlotter)
+              } catch (err) {
+                if (ERROR_LOG === true) { logger.write('[ERROR] initializeProductPlotter -> onProductStorageInitialized -> onPlotterInizialized -> err = ' + err.stack) }
+              }
             }
           }
         } catch (err) {
           if (ERROR_LOG === true) { logger.write('[ERROR] initializeProductPlotter -> onProductStorageInitialized -> err = ' + err.stack) }
-          callBack(GLOBAL.DEFAULT_FAIL_RESPONSE)
         }
       }
     } catch (err) {
       if (ERROR_LOG === true) { logger.write('[ERROR] initializeProductPlotter -> err = ' + err.stack) }
-      callBack(GLOBAL.DEFAULT_FAIL_RESPONSE)
     }
   }
 

ChartsSpace/TimeMachine.js

@@ -227,7 +227,7 @@ function newTimeMachine () {
           let timelineChart = thisObject.timelineCharts[i]
           timelineChart.upstreamTimeFrame = timeFrame
           if (timelineChart.timeFrameScale === undefined) {
-            timelineChart.plotterManager.setTimeFrame(timeFrame)
+            timelineChart.setTimeFrame(timeFrame)
           }
         }
       }
@@ -406,24 +406,17 @@ function newTimeMachine () {
       timelineChart.container.frame.height = thisObject.container.frame.height
       timelineChart.container.frame.position.x = thisObject.container.frame.width / 2 - timelineChart.container.frame.width / 2
       timelineChart.container.frame.position.y = 0
-      timelineChart.initialize(DEFAULT_EXCHANGE, DEFAULT_MARKET, timeMachineCoordinateSystem, onTimelineChartInitialized)
+      timelineChart.initialize(timeMachineCoordinateSystem)
 
       /* we will store the event suscription id as a property of the timelineChart, to avoid keeping it an a separate array */
       timelineChart.onChildrenMouseOverEventSuscriptionId = timelineChart.container.eventHandler.listenToEvent('onChildrenMouseOver', onChildrenMouseOver)
 
+      thisObject.timelineCharts.push(timelineChart)
+      timelineChart.payload.uiObject.setValue('')
+
       function onChildrenMouseOver (event) {
         thisObject.container.eventHandler.raiseEvent('onMouseOver', event)
       }
-
-      function onTimelineChartInitialized (err) {
-        if (err.result !== GLOBAL.DEFAULT_OK_RESPONSE.result) {
-          if (ERROR_LOG === true) { logger.write('[ERROR] syncWithDesigner -> initializeTimelineChart -> Initialization Failed. -> Err ' + err.message) }
-          return
-        }
-
-        thisObject.timelineCharts.push(timelineChart)
-        timelineChart.payload.uiObject.setValue('')
-      }
     }
   }
 

ChartsSpace/TimelineChart.js

@@ -17,6 +17,7 @@ function newTimelineChart () {
     payload: undefined,
     plotterManager: undefined,
     upstreamTimeFrame: undefined,
+    setTimeFrame: setTimeFrame,
     physics: physics,
     draw: draw,
     drawBackground: drawBackground,
@@ -29,12 +30,10 @@ function newTimelineChart () {
   let timeMachineCoordinateSystem
   let timelineChartCoordinateSystem = newCoordinateSystem()
 
-  let initializationReady = false
-
   let productsPanel
 
-  let exchange
-  let market
+  let exchange = DEFAULT_EXCHANGE
+  let market = DEFAULT_MARKET
 
   let productsPanelHandle
 
@@ -63,6 +62,10 @@ function newTimelineChart () {
   }
 
   function finalize () {
+    if (thisObject.layersManager !== undefined) {
+      finalizeLayersManager()
+    }
+
     if (thisObject.rateScale !== undefined) {
       finalizeRateScale()
     }
@@ -76,11 +79,6 @@ function newTimelineChart () {
     thisObject.container.eventHandler.stopListening(onMouseOverEventSuscriptionId)
     thisObject.container.eventHandler.stopListening(onMouseNotOverEventSuscriptionId)
 
-    thisObject.plotterManager.finalize()
-    thisObject.plotterManager = undefined
-
-    canvas.panelsSpace.destroyPanel(productsPanelHandle)
-
     thisObject.container.finalize()
     thisObject.container = undefined
 
@@ -88,6 +86,16 @@ function newTimelineChart () {
     mouse = undefined
   }
 
+  function finalizeLayersManager () {
+    if (thisObject.plotterManager !== undefined) {
+      thisObject.plotterManager.finalize()
+    }
+    thisObject.plotterManager = undefined
+    thisObject.layersManager = undefined
+
+    canvas.panelsSpace.destroyPanel(productsPanelHandle)
+  }
+
   function finalizeTimeFrameScale () {
     if (thisObject.timeFrameScale === undefined) { return }
 
@@ -97,7 +105,9 @@ function newTimelineChart () {
     thisObject.timeFrameScale = undefined
     if (thisObject.upstreamTimeFrame !== undefined) {
       timeFrame = thisObject.upstreamTimeFrame
-      thisObject.plotterManager.setTimeFrame(timeFrame)
+      if (thisObject.plotterManager !== undefined) {
+        thisObject.plotterManager.setTimeFrame(timeFrame)
+      }
     }
   }
 
@@ -114,87 +124,40 @@ function newTimelineChart () {
     thisObject.container.frame.position.height = thisObject.container.parentContainer.frame.height
   }
 
-  function initialize (pExchange, pMarket, pTimeMachineCoordinateSystem, callBackFunction) {
-    try {
-       /* We load the logow we will need for the background. */
-      exchange = pExchange
-      market = pMarket
-      timeMachineCoordinateSystem = pTimeMachineCoordinateSystem
+  function initialize (pTimeMachineCoordinateSystem) {
+     /* We load the logow we will need for the background. */
 
-      let panelOwner = exchange + ' ' + market.quotedAsset + '/' + market.baseAsset
-      productsPanelHandle = canvas.panelsSpace.createNewPanel('Products Panel', undefined, panelOwner)
-      let productsPanel = canvas.panelsSpace.getPanel(productsPanelHandle, panelOwner)
-      productsPanel.initialize(exchange, market)
+    timeMachineCoordinateSystem = pTimeMachineCoordinateSystem
 
-      timeFrame = INITIAL_TIME_PERIOD
-      datetime = NEW_SESSION_INITIAL_DATE
+    timeFrame = INITIAL_TIME_PERIOD
+    datetime = NEW_SESSION_INITIAL_DATE
 
-       /* Event Subscriptions - we need this events to be fired first here and then in active Plotters. */
-      onOffsetChangedEventSuscriptionId = viewPort.eventHandler.listenToEvent('Offset Changed', onOffsetChanged)
-      onZoomChangedEventSuscriptionId = viewPort.eventHandler.listenToEvent('Zoom Changed', onZoomChanged)
+     /* Event Subscriptions - we need this events to be fired first here and then in active Plotters. */
+    onOffsetChangedEventSuscriptionId = viewPort.eventHandler.listenToEvent('Offset Changed', onOffsetChanged)
+    onZoomChangedEventSuscriptionId = viewPort.eventHandler.listenToEvent('Zoom Changed', onZoomChanged)
 
-       /* Initialize the Plotter Manager */
-      thisObject.plotterManager = newPlottersManager()
+    onMouseOverEventSuscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver)
+    onMouseNotOverEventSuscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver)
+  }
 
-      thisObject.plotterManager.container.connectToParent(thisObject.container, true, true, false, true, true, true, false, false, true)
+  function initializeLayersManager () {
+    let panelOwner = exchange + ' ' + market.quotedAsset + '/' + market.baseAsset
+    productsPanelHandle = canvas.panelsSpace.createNewPanel('Products Panel', undefined, panelOwner)
+    thisObject.layersManager = canvas.panelsSpace.getPanel(productsPanelHandle, panelOwner)
+    thisObject.layersManager.initialize(exchange, market)
+    thisObject.layersManager.payload = thisObject.payload.node.layersManager.payload
 
-      thisObject.plotterManager.container.frame.position.x = 0
-      thisObject.plotterManager.container.frame.position.y = 0
+    /* Initialize the Plotter Manager */
+    thisObject.plotterManager = newPlottersManager()
 
-      thisObject.plotterManager.fitFunction = thisObject.fitFunction
-      thisObject.plotterManager.initialize(productsPanel, pExchange, pMarket, onPlotterManagerReady)
+    thisObject.plotterManager.container.connectToParent(thisObject.container, true, true, false, true, true, true, false, false, true)
 
-      function onPlotterManagerReady (err) {
-        if (err.result !== GLOBAL.DEFAULT_OK_RESPONSE.result) {
-          if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onPlotterManagerReady -> Plotter Manager Initialization Failed. ') }
-          if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onPlotterManagerReady -> err= ' + err.stack) }
+    thisObject.plotterManager.container.frame.position.x = 0
+    thisObject.plotterManager.container.frame.position.y = 0
 
-          callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE)
-          return
-        }
-
-        onMouseOverEventSuscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver)
-
-        function onMouseOver (event) {
-          /* This event gets to the timelinechart container because it inherits it from the time machine container, which is the one raising Mouse Over and Mouse not Over Events to its children. */
-          drawScales = true
-
-          if (thisObject.rateScale !== undefined) {
-            thisObject.rateScale.onMouseOverSomeTimeMachineContainer(event)
-          }
-
-          if (thisObject.timeFrameScale !== undefined) {
-            thisObject.timeFrameScale.onMouseOverSomeTimeMachineContainer(event)
-          }
-
-          mouse.position.x = event.x
-          mouse.position.y = event.y
-
-          saveUserPosition(thisObject.container, timeMachineCoordinateSystem, event)
-        }
-
-        onMouseNotOverEventSuscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver)
-
-        function onMouseNotOver (event) {
-          /* This event is inherited from the Time Machine */
-          drawScales = false
-
-          if (thisObject.rateScale !== undefined) {
-            thisObject.rateScale.visible = false
-          }
-          if (thisObject.timeFrameScale !== undefined) {
-            thisObject.timeFrameScale.visible = false
-          }
-        }
-
-        initializationReady = true
-        callBackFunction(GLOBAL.DEFAULT_OK_RESPONSE)
-        return
-      }
-    } catch (err) {
-      if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err = ' + err.stack) }
-      callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE)
-    }
+    thisObject.plotterManager.fitFunction = thisObject.fitFunction
+    thisObject.plotterManager.initialize(thisObject.layersManager, DEFAULT_EXCHANGE, DEFAULT_MARKET)
+    thisObject.plotterManager.setTimeFrame(timeFrame)
   }
 
   function initializeRateScale () {
@@ -227,7 +190,9 @@ function newTimelineChart () {
       let currentTimeFrame = timeFrame
       timeFrame = event.timeFrame
       if (timeFrame !== currentTimeFrame) {
-        thisObject.plotterManager.setTimeFrame(timeFrame)
+        if (thisObject.plotterManager !== undefined) {
+          thisObject.plotterManager.setTimeFrame(timeFrame)
+        }
       }
     })
 
@@ -242,20 +207,50 @@ function newTimelineChart () {
     }
   }
 
-  function onZoomChanged (event) {
-    if (initializationReady === true) {
-      recalculateCurrentDatetime()
-
-      // saveUserPosition(thisObject.container, timeMachineCoordinateSystem)
+  function setTimeFrame (pTimeFrame) {
+    timeFrame = pTimeFrame
+    if (thisObject.plotterManager !== undefined) {
+      thisObject.plotterManager.setTimeFrame(timeFrame)
     }
   }
 
+  function onMouseOver (event) {
+    /* This event gets to the timelinechart container because it inherits it from the time machine container, which is the one raising Mouse Over and Mouse not Over Events to its children. */
+    drawScales = true
+
+    if (thisObject.rateScale !== undefined) {
+      thisObject.rateScale.onMouseOverSomeTimeMachineContainer(event)
+    }
+
+    if (thisObject.timeFrameScale !== undefined) {
+      thisObject.timeFrameScale.onMouseOverSomeTimeMachineContainer(event)
+    }
+
+    mouse.position.x = event.x
+    mouse.position.y = event.y
+
+    saveUserPosition(thisObject.container, timeMachineCoordinateSystem, event)
+  }
+
+  function onMouseNotOver (event) {
+    /* This event is inherited from the Time Machine */
+    drawScales = false
+
+    if (thisObject.rateScale !== undefined) {
+      thisObject.rateScale.visible = false
+    }
+    if (thisObject.timeFrameScale !== undefined) {
+      thisObject.timeFrameScale.visible = false
+    }
+  }
+
+  function onZoomChanged (event) {
+    recalculateCurrentDatetime()
+  }
+
   function onOffsetChanged () {
-    if (initializationReady === true) {
-      if (thisObject.container.frame.isInViewPort()) {
-        recalculateCurrentDatetime()
-        // saveUserPosition(thisObject.container, timeMachineCoordinateSystem)
-      }
+    if (thisObject.container.frame.isInViewPort()) {
+      recalculateCurrentDatetime()
     }
   }
 
@@ -315,12 +310,27 @@ function newTimelineChart () {
     thisObjectPhysics()
     childrenPhysics()
     syncWithDesignerScales()
+    syncWithDesignerLayersManager()
   }
 
   function thisObjectPhysics () {
 
   }
 
+  function syncWithDesignerLayersManager () {
+    if (thisObject.payload.node === undefined) {
+      finalizeLayersManager()
+      return
+    }
+
+    if (thisObject.payload.node.layersManager === undefined && thisObject.layersManager !== undefined) {
+      finalizeLayersManager()
+    }
+    if (thisObject.payload.node.layersManager !== undefined && thisObject.layersManager === undefined) {
+      initializeLayersManager()
+    }
+  }
+
   function syncWithDesignerScales () {
     if (thisObject.payload.node === undefined) {
       finalizeRateScale()
@@ -372,7 +382,9 @@ function newTimelineChart () {
         window.CHART_ON_FOCUS = exchange + ' ' + market.quotedAsset + '/' + market.baseAsset
       }
       drawChartsBackground()
-      thisObject.plotterManager.draw()
+      if (thisObject.plotterManager !== undefined) {
+        thisObject.plotterManager.draw()
+      }
     }
   }