showPanles functionality implemented

ChartsSpace/PlottersManager.js

@@ -219,6 +219,8 @@ function newPlottersManager () {
                     connector.plotter.onRecordChangeEventsSubscriptionId = connector.plotter.container.eventHandler.listenToEvent('Current Record Changed', plotterPanel.onRecordChange)
                     connector.panels.push(plotterPanelHandle)
                   }
+
+                  connector.layer.panels = connector.panels
                 }
 
                 connectors.push(connector)
@@ -237,7 +239,7 @@ function newPlottersManager () {
   }
 
   function onLayerStatusChanged (layer) {
-    if (layer.status === PRODUCT_CARD_STATUS.LOADING) {
+    if (layer.status === LAYER_STATUS.LOADING) {
             /* Lets see if we can find the Plotter of this card on our Active Plotters list, other wise we will initialize it */
       let found = false
       for (let i = 0; i < connectors.length; i++) {
@@ -253,7 +255,7 @@ function newPlottersManager () {
         }
       }
     }
-    if (layer.status === PRODUCT_CARD_STATUS.OFF) {
+    if (layer.status === LAYER_STATUS.OFF) {
             /* If the plotter of this card is not on our Active Plotters list, then we remove it. */
       for (let i = 0; i < connectors.length; i++) {
         let connector = connectors[i]

Globals.js

@@ -164,7 +164,7 @@ const BREAKPOINT_HEIGHT = 15;
 const SIDE_PANEL_WIDTH = 450
 let COCKPIT_SPACE_POSITION = browserCanvas.height - COCKPIT_SPACE_HEIGHT
 
-const PRODUCT_CARD_STATUS = {
+const LAYER_STATUS = {
     ON: 'on',
     LOADING: 'loading',
     OFF: 'off'

Panels/Layer.js

@@ -6,10 +6,11 @@ function newLayer () {
 
   let thisObject = {
     container: undefined,
-    status: PRODUCT_CARD_STATUS.OFF,
+    status: LAYER_STATUS.OFF,
     fitFunction: undefined,
     payload: undefined,
     definition: undefined,
+    panels: undefined,
     physics: physics,
     draw: draw,
     turnOff: turnOff,
@@ -73,6 +74,7 @@ function newLayer () {
   thisObject.eventHandler = newEventHandler()
   let imagesLoaded = 0
   let onMouseClickEventSuscriptionId
+  let panelsVisibleButton
 
   return thisObject
 
@@ -85,6 +87,7 @@ function newLayer () {
     thisObject.fitFunction = undefined
     thisObject.payload = undefined
     thisObject.definition = undefined
+    thisObject.panels = undefined
 
     timeFrame = undefined
     datetime = undefined
@@ -102,6 +105,8 @@ function newLayer () {
     singleFileProgressBar = undefined
     fileSequenceProgressBar = undefined
 
+    panelsVisibleButton = undefined
+
     thisObject.container.eventHandler.stopListening(onMouseClickEventSuscriptionId)
   }
 
@@ -114,7 +119,6 @@ function newLayer () {
       thisObject.container.isClickeable = true
 
        /* Lets set the basic dimensions of this thisObject. */
-
       let position = {
         x: 0,
         y: 0
@@ -173,6 +177,12 @@ function newLayer () {
   }
 
   function getContainer (point) {
+    if (panelsVisibleButton !== undefined) {
+      let container = panelsVisibleButton.getContainer(point)
+      if (container !== undefined) {
+        return container
+      }
+    }
     if (thisObject.container.frame.isThisPointHere(point, true) === true) {
       return thisObject.container
     }
@@ -242,31 +252,31 @@ function newLayer () {
   }
 
   function turnOff () {
-    if (thisObject.status !== PRODUCT_CARD_STATUS.OFF) {
+    if (thisObject.status !== LAYER_STATUS.OFF) {
       resetProgressBars()
-      changeStatusTo(PRODUCT_CARD_STATUS.OFF)
+      changeStatusTo(LAYER_STATUS.OFF)
     }
   }
 
   function turnOn () {
-    if (thisObject.status === PRODUCT_CARD_STATUS.OFF) {
+    if (thisObject.status === LAYER_STATUS.OFF) {
       resetProgressBars()
-      changeStatusTo(PRODUCT_CARD_STATUS.LOADING)
+      changeStatusTo(LAYER_STATUS.LOADING)
     }
   }
 
   function onMouseClick (event) {
     switch (thisObject.status) {
-      case PRODUCT_CARD_STATUS.ON:
+      case LAYER_STATUS.ON:
         resetProgressBars()
-        changeStatusTo(PRODUCT_CARD_STATUS.OFF)
+        changeStatusTo(LAYER_STATUS.OFF)
         break
-      case PRODUCT_CARD_STATUS.OFF:
+      case LAYER_STATUS.OFF:
         resetProgressBars()
-        changeStatusTo(PRODUCT_CARD_STATUS.LOADING)
+        changeStatusTo(LAYER_STATUS.LOADING)
         break
-      case PRODUCT_CARD_STATUS.LOADING:
-        changeStatusTo(PRODUCT_CARD_STATUS.OFF)
+      case LAYER_STATUS.LOADING:
+        changeStatusTo(LAYER_STATUS.OFF)
         break
     }
   }
@@ -294,6 +304,49 @@ function newLayer () {
   }
 
   function physics () {
+    statusPhysics()
+    childrenPhysics()
+  }
+
+  function childrenPhysics () {
+    /* Panels Visible Button Setup */
+    if (thisObject.status === LAYER_STATUS.ON) {
+      if (panelsVisibleButton === undefined) {
+        if (thisObject.panels !== undefined) {
+          if (thisObject.panels.length > 0) {
+            panelsVisibleButton = newPanelsVisibleButton()
+
+            try {
+              let code = JSON.parse(thisObject.payload.node.code)
+              if (code.showPanels !== undefined) {
+                if (code.showPanels === true || code.showPanels === false) {
+                  panelsVisibleButton.showPanels = code.showPanels
+                }
+              }
+
+              thisObject.payload.node.code = JSON.stringify(code)
+            } catch (err) {
+               // we ignore errors here since most likely they will be parsing errors.
+            }
+
+            panelsVisibleButton.initialize(thisObject.panels)
+            panelsVisibleButton.container.connectToParent(thisObject.container)
+          }
+        }
+      } else {
+        /* Saving the new status at the node config */
+        try {
+          let code = JSON.parse(thisObject.payload.node.code)
+          code.showPanels = panelsVisibleButton.showPanels
+          thisObject.payload.node.code = JSON.stringify(code)
+        } catch (err) {
+           // we ignore errors here since most likely they will be parsing errors.
+        }
+      }
+    }
+  }
+
+  function statusPhysics () {
   /* We retrieve the stored status at the config. */
     try {
       let code = JSON.parse(thisObject.payload.node.code)
@@ -301,18 +354,18 @@ function newLayer () {
 
       if (storedValue !== undefined) {
         if (storedValue !== thisObject.status) {
-          if (storedValue === PRODUCT_CARD_STATUS.ON) {
+          if (storedValue === LAYER_STATUS.ON) {
             resetProgressBars()
-            changeStatusTo(PRODUCT_CARD_STATUS.LOADING)
+            changeStatusTo(LAYER_STATUS.LOADING)
           }
-          if (storedValue === PRODUCT_CARD_STATUS.OFF) {
+          if (storedValue === LAYER_STATUS.OFF) {
             resetProgressBars()
-            changeStatusTo(PRODUCT_CARD_STATUS.OFF)
+            changeStatusTo(LAYER_STATUS.OFF)
           }
         }
       } else {
         resetProgressBars()
-        changeStatusTo(PRODUCT_CARD_STATUS.OFF)
+        changeStatusTo(LAYER_STATUS.OFF)
       }
     } catch (err) {
    // we ignore errors here since most likely they will be parsing errors.
@@ -320,11 +373,11 @@ function newLayer () {
 
     /* Check when the loading finishes */
     if (
-      thisObject.status === PRODUCT_CARD_STATUS.LOADING &&
+      thisObject.status === LAYER_STATUS.LOADING &&
       marketFileProgressBar.value === 100 &&
       dailyFileProgressBar.value === 100
     ) {
-      changeStatusTo(PRODUCT_CARD_STATUS.ON)
+      changeStatusTo(LAYER_STATUS.ON)
     }
   }
 
@@ -332,6 +385,14 @@ function newLayer () {
     if (thisObject.status !== newStatus) {
       thisObject.status = newStatus
 
+      if (thisObject.status === LAYER_STATUS.OFF) {
+        if (panelsVisibleButton !== undefined) {
+          panelsVisibleButton.finalize()
+          panelsVisibleButton = undefined
+        }
+      }
+
+      /* Saving the new status at the node config */
       try {
         let code = JSON.parse(thisObject.payload.node.code)
         code.status = thisObject.status
@@ -347,6 +408,9 @@ function newLayer () {
 
   function draw () {
     drawLayer()
+    if (panelsVisibleButton !== undefined) {
+      panelsVisibleButton.draw()
+    }
   }
 
   function drawLayer () {

Panels/LayersPanel.js

@@ -192,7 +192,7 @@ function newProductsPanel () {
     let onProducts = []
 
     for (let i = 0; i < thisObject.layers.length; i++) {
-      if (thisObject.layers[i].status === PRODUCT_CARD_STATUS.LOADING) {
+      if (thisObject.layers[i].status === LAYER_STATUS.LOADING) {
         onProducts.push(thisObject.layers[i])
       }
     }
@@ -409,4 +409,3 @@ function newProductsPanel () {
     }
   }
 }
-

Panels/PanelsVisibleButton.js

@@ -0,0 +1,83 @@
+function newPanelsVisibleButton () {
+  let thisObject = {
+    container: undefined,
+    fitFunction: undefined,
+    parentContainer: undefined,
+    panels: undefined,
+    showPanels: true,
+    draw: draw,
+    getContainer: getContainer,     // returns the inner most container that holds the point received by parameter.
+    initialize: initialize,
+    finalize: finalize
+  }
+
+   /* Cointainer stuff */
+  thisObject.container = newContainer()
+  thisObject.container.name = 'Panels Visible Button'
+  thisObject.container.initialize()
+  thisObject.container.isClickeable = true
+  thisObject.container.frame.containerName = 'Panels Visible Button'
+
+  let onMouseClickEventSuscriptionId
+  return thisObject
+
+  function finalize () {
+    thisObject.container.eventHandler.stopListening(onMouseClickEventSuscriptionId)
+    thisObject.container.finalize()
+    thisObject.container = undefined
+    thisObject.fitFunction = undefined
+    thisObject.parentContainer = undefined
+    thisObject.panels = undefined
+  }
+
+  function initialize (panels) {
+    thisObject.panels = panels
+    setPanelVisibility()
+
+    thisObject.container.frame.width = 25
+    thisObject.container.frame.height = 25
+
+    let position = {
+      x: thisObject.container.frame.width * 1 / 8,
+      y: 45
+    }
+
+    thisObject.container.frame.position = position
+
+    /* Lets listen to our own events to react when we have a Mouse Click */
+    onMouseClickEventSuscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick)
+  }
+
+  function onMouseClick (event) {
+    if (thisObject.showPanels === false) {
+      thisObject.showPanels = true
+    } else {
+      thisObject.showPanels = false
+    }
+    setPanelVisibility()
+  }
+
+  function setPanelVisibility () {
+    for (let i = 0; i < thisObject.panels.length; i++) {
+      panel = canvas.panelsSpace.getPanel(thisObject.panels[i])
+      panel.isVisible = thisObject.showPanels
+    }
+  }
+
+  function getContainer (point) {
+    if (thisObject.container.frame.isThisPointHere(point, true) === true) {
+      return thisObject.container
+    }
+  }
+
+  function draw () {
+    let icon
+    if (thisObject.showPanels === true) {
+      icon = canvas.designerSpace.iconCollection.get('plotter-panel')
+    } else {
+      icon = canvas.designerSpace.iconCollection.get('social-bot')
+    }
+
+    drawIcon(icon, 1 / 2, 1 / 2, 0, 0, 14, thisObject.container)
+  }
+}

Panels/PlotterPanel.js

@@ -9,6 +9,7 @@ function newPlotterPanel () {
   let thisObject = {
     fitFunction: undefined,
     container: undefined,
+    isVisible: true,
     onRecordChange: onRecordChange,
     draw: draw,
     getContainer: getContainer,
@@ -30,6 +31,7 @@ function newPlotterPanel () {
     thisObject.container.finalize()
     thisObject.container = undefined
     thisObject.fitFunction = undefined
+    thisObject.isVisible = undefined
 
     heightFactor = undefined
     currentRecord = undefined
@@ -56,6 +58,7 @@ function newPlotterPanel () {
   }
 
   function getContainer (point) {
+    if (thisObject.isVisible !== true) { return }
     let container
 
     container = panelTabButton.getContainer(point)
@@ -80,10 +83,10 @@ function newPlotterPanel () {
   }
 
   function draw () {
+    if (thisObject.isVisible !== true) { return }
+
     thisObject.container.frame.draw(false, false, true, thisObject.fitFunction)
-
     plotCurrentRecordData()
-
     panelTabButton.draw()
   }