ordering of panels improved

CanvasApp/Panels/LayersPanel.js

@@ -6,7 +6,8 @@ function newLayersPanel () {
     layers: [],
     payload: undefined,
     isVisible: true,
-    panelTabButton: undefined,
+    upDownButton: undefined,
+    leftRightButton: undefined,
     physics: physics,
     draw: draw,
     getContainer: getContainer,
@@ -38,13 +39,23 @@ function newLayersPanel () {
   let posiblePanelHeight = (layerHeight + LAYER_SEPARATION) * posibleVisibleLayers + headerHeight + footerHeight
 
   let onMouseWheelEventSuscriptionId
+  let onMouseOverEventSubscriptionId
+  let onMouseNotOverEventSubscriptionId
+
+  let isMouseOver
   return thisObject
 
   function finalize () {
     thisObject.container.eventHandler.stopListening(onMouseWheelEventSuscriptionId)
+    thisObject.container.eventHandler.stopListening(onMouseOverEventSubscriptionId)
+    thisObject.container.eventHandler.stopListening(onMouseNotOverEventSubscriptionId)
+
+    thisObject.upDownButton.finalize()
+    thisObject.upDownButton = undefined
+
+    thisObject.leftRightButton.finalize()
+    thisObject.leftRightButton = undefined
 
-    thisObject.panelTabButton.finalize()
-    thisObject.panelTabButton = undefined
     layersMap = undefined
     visibleLayers = undefined
 
@@ -69,25 +80,45 @@ function newLayersPanel () {
     thisObject.container.frame.position = position
     loadFrame(thisObject.payload, thisObject.container.frame)
 
-    thisObject.panelTabButton = newPanelTabButton()
-    thisObject.panelTabButton.parentContainer = thisObject.container
-    thisObject.panelTabButton.container.frame.parentFrame = thisObject.container.frame
-    thisObject.panelTabButton.fitFunction = thisObject.fitFunction
-    thisObject.panelTabButton.initialize()
+    thisObject.upDownButton = newUpDownButton()
+    thisObject.upDownButton.parentContainer = thisObject.container
+    thisObject.upDownButton.container.frame.parentFrame = thisObject.container.frame
+    thisObject.upDownButton.fitFunction = thisObject.fitFunction
+    thisObject.upDownButton.initialize()
+
+    thisObject.leftRightButton = newLeftRightButton()
+    thisObject.leftRightButton.parentContainer = thisObject.container
+    thisObject.leftRightButton.container.frame.parentFrame = thisObject.container.frame
+    thisObject.leftRightButton.fitFunction = thisObject.fitFunction
+    thisObject.leftRightButton.initialize()
 
     onMouseWheelEventSuscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseWheel', onMouseWheel)
+    onMouseOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver)
+    onMouseNotOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver)
 
     readObjectState()
 
     isInitialized = true
   }
 
+  function onMouseOver (event) {
+    isMouseOver = true
+  }
+
+  function onMouseNotOver () {
+    isMouseOver = false
+  }
+
   function saveObjectStateVisibleLayers () {
     savePropertyAtNodeConfig(thisObject.payload, 'visibleLayers', desiredVisibleLayers)
   }
 
   function saveObjectStatePanelLocation () {
-    savePropertyAtNodeConfig(thisObject.payload, 'panelLocation', thisObject.panelTabButton.status)
+    let panelLocation = {
+      upOrDown: thisObject.upDownButton.status,
+      leftOrRight: thisObject.leftRightButton.status
+    }
+    savePropertyAtNodeConfig(thisObject.payload, 'panelLocation', panelLocation)
   }
 
   function readObjectState () {
@@ -119,11 +150,16 @@ function newLayersPanel () {
       saveObjectStatePanelLocation() // this overrides any invalid value at the config.
       return
     } else {
-      if (storedValue !== 'up' && storedValue !== 'down') {
+      if (storedValue.upOrDown !== 'up' && storedValue.upOrDown !== 'down') {
         saveObjectStatePanelLocation() // this overrides any invalid value at the config.
         return
       }
-      thisObject.panelTabButton.setStatus(storedValue)
+      if (storedValue.leftOrRight !== 'left' && storedValue.leftOrRight !== 'right') {
+        saveObjectStatePanelLocation() // this overrides any invalid value at the config.
+        return
+      }
+      thisObject.upDownButton.setStatus(storedValue.upOrDown)
+      thisObject.leftRightButton.setStatus(storedValue.leftOrRight)
       saveObjectStatePanelLocation()
     }
   }
@@ -247,8 +283,13 @@ function newLayersPanel () {
     if (isInitialized === false || thisObject.visible === false || thisObject.isHidden === true) { return }
     let container
 
-    container = thisObject.panelTabButton.getContainer(point)
-    if (container !== undefined) { return container }
+    if (isMouseOver === true && purpose !== GET_CONTAINER_PURPOSE.MOUSE_OVER) {
+      container = thisObject.upDownButton.getContainer(point)
+      if (container !== undefined) { return container }
+
+      container = thisObject.leftRightButton.getContainer(point)
+      if (container !== undefined) { return container }
+    }
 
      /* First we check if thisObject point is inside thisObject space. */
     if (thisObject.container.frame.isThisPointHere(point, true) === true) {
@@ -301,7 +342,8 @@ function newLayersPanel () {
     if (isInitialized === false) { return }
     if (thisObject.payload.node === undefined) { return }
 
-    thisObject.panelTabButton.physics()
+    thisObject.upDownButton.physics()
+    thisObject.leftRightButton.physics()
     saveFrame(thisObject.payload, thisObject.container.frame)
     syncWithConfigPhysics()
 
@@ -387,7 +429,10 @@ function newLayersPanel () {
       visibleLayers[i].draw()
     }
     drawScrollBar()
-    thisObject.panelTabButton.draw()
+    if (isMouseOver === true) {
+      thisObject.upDownButton.draw()
+      thisObject.leftRightButton.draw()
+    }
   }
 
   function drawHeader () {

CanvasApp/Panels/LeftRightButton.js

@@ -0,0 +1,244 @@
+function newLeftRightButton () {
+  let thisObject = {
+    container: undefined,
+    fitFunction: undefined,
+    parentContainer: undefined,
+    status: undefined,
+    setStatus: setStatus,
+    physics: physics,
+    draw: draw,
+    getContainer: getContainer,     // returns the inner most container that holds the point received by parameter.
+    initialize: initialize,
+    finalize: finalize
+  }
+
+  let isInitialized = false
+   /* Cointainer stuff */
+
+  thisObject.container = newContainer()
+  thisObject.container.name = 'Left Right Button'
+  thisObject.container.initialize()
+  thisObject.container.isClickeable = true
+  thisObject.container.isDraggeable = false
+  thisObject.container.frame.containerName = 'Left Right Button'
+
+  thisObject.status = 'left'
+  let leftPosition = {}
+  let rightPosition = {}
+  let transitionPosition = {}
+
+  let onMouseClickEventSuscriptionId
+  return thisObject
+
+  function finalize () {
+    thisObject.container.eventHandler.stopListening(onMouseClickEventSuscriptionId)
+    thisObject.container.finalize()
+    thisObject.container = undefined
+    thisObject.fitFunction = undefined
+    thisObject.parentContainer = undefined
+
+    thisObject.status = undefined
+    leftPosition = undefined
+    rightPosition = undefined
+    transitionPosition = undefined
+  }
+
+  function initialize () {
+    thisObject.container.frame.width = 12
+    thisObject.container.frame.height = 12
+
+    let position = {
+      x: thisObject.container.frame.parentFrame.width * 2.25 / 8 - thisObject.container.frame.width / 2,
+      y: 40 * 4 / 8 - thisObject.container.frame.height / 2
+    }
+
+    thisObject.container.frame.position = position
+
+    leftPosition.x = thisObject.parentContainer.frame.position.x
+    leftPosition.y = thisObject.parentContainer.frame.position.y
+
+    rightPosition.x = thisObject.parentContainer.frame.position.x
+    rightPosition.y = canvas.chartingSpace.viewport.visibleArea.bottomRight.y
+
+    transitionPosition.x = leftPosition.x
+    transitionPosition.y = leftPosition.y
+
+    /* Lets listen to our own events to react when we have a Mouse Click */
+    onMouseClickEventSuscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick)
+
+    isInitialized = true
+  }
+
+  function setStatus (value) {
+    if (value === 'left' && thisObject.status === 'right') {
+      thisObject.status = 'going left'
+    }
+    if (value === 'right' && thisObject.status === 'left') {
+      thisObject.status = 'going right'
+    }
+  }
+
+  function onMouseClick (event) {
+    if (thisObject.status === 'left') {
+      transitionPosition.x = leftPosition.x
+      transitionPosition.y = leftPosition.y
+
+      thisObject.status = 'going right'
+    } else {
+      transitionPosition.x = rightPosition.x
+      transitionPosition.y = rightPosition.y
+
+      thisObject.status = 'going left'
+    }
+  }
+
+  function physics () {
+    if (isInitialized === false) { return }
+
+    leftPosition.x = canvas.chartingSpace.viewport.visibleArea.topLeft.x
+    leftPosition.y = thisObject.parentContainer.frame.position.y
+
+    rightPosition.x = canvas.chartingSpace.viewport.visibleArea.bottomRight.x
+    rightPosition.y = thisObject.parentContainer.frame.position.y
+
+    if (thisObject.status === 'going right') {
+      if (transitionPosition.x < rightPosition.x) {
+        transitionPosition.x = transitionPosition.x + 50
+        thisObject.parentContainer.frame.position.x = transitionPosition.x
+      } else {
+        thisObject.parentContainer.frame.position.x = rightPosition.x
+        thisObject.status = 'right'
+      }
+    }
+    if (thisObject.status === 'going left') {
+      if (transitionPosition.x > leftPosition.x) {
+        transitionPosition.x = transitionPosition.x - 50
+        thisObject.parentContainer.frame.position.x = transitionPosition.x
+      } else {
+        thisObject.parentContainer.frame.position.x = leftPosition.x
+        thisObject.status = 'left'
+      }
+    }
+  }
+
+  function draw () {
+    if (isInitialized === false) { return }
+
+    drawButton()
+  }
+
+  function getContainer (point, purpose) {
+    let container
+    if (thisObject.container.frame.isThisPointHere(point, true) === true) {
+      return thisObject.container
+    }
+  }
+
+  function drawButton () {
+    let point1
+    let point2
+    let point3
+
+    switch (thisObject.status) {
+      case 'left': {
+        point1 = {
+          x: 3,
+          y: 3
+        }
+
+        point2 = {
+          x: 3,
+          y: thisObject.container.frame.height - 3
+        }
+
+        point3 = {
+          x: thisObject.container.frame.width - 3,
+          y: thisObject.container.frame.height / 2
+        }
+        break
+      }
+
+      case 'going right': {
+        point1 = {
+          x: 4,
+          y: 4
+        }
+
+        point2 = {
+          x: 4,
+          y: thisObject.container.frame.height - 4
+        }
+
+        point3 = {
+          x: thisObject.container.frame.width - 4,
+          y: thisObject.container.frame.height / 2
+        }
+        break
+      }
+
+      case 'going left': {
+        point1 = {
+          x: thisObject.container.frame.width - 4,
+          y: 4
+        }
+
+        point2 = {
+          x: thisObject.container.frame.width - 4,
+          y: thisObject.container.frame.height - 4
+        }
+
+        point3 = {
+          x: 4,
+          y: thisObject.container.frame.height / 2
+        }
+        break
+      }
+
+      case 'right': {
+        point1 = {
+          x: thisObject.container.frame.width - 3,
+          y: 3
+        }
+
+        point2 = {
+          x: thisObject.container.frame.width - 3,
+          y: thisObject.container.frame.height - 3
+        }
+
+        point3 = {
+          x: 3,
+          y: thisObject.container.frame.height / 2
+        }
+        break
+      }
+    }
+
+        /* Now the transformations. */
+
+    point1 = thisObject.container.frame.frameThisPoint(point1)
+    point2 = thisObject.container.frame.frameThisPoint(point2)
+    point3 = thisObject.container.frame.frameThisPoint(point3)
+
+    if (thisObject.fitFunction !== undefined) {
+      point1 = thisObject.fitFunction(point1)
+      point2 = thisObject.fitFunction(point2)
+      point3 = thisObject.fitFunction(point3)
+    }
+
+        /* Lets start the drawing. */
+
+    browserCanvasContext.beginPath()
+    browserCanvasContext.moveTo(point1.x, point1.y)
+    browserCanvasContext.lineTo(point2.x, point2.y)
+    browserCanvasContext.lineTo(point3.x, point3.y)
+    browserCanvasContext.lineTo(point1.x, point1.y)
+    browserCanvasContext.closePath()
+
+    browserCanvasContext.strokeStyle = 'rgba(250, 250, 250, 1)'
+    browserCanvasContext.lineWidth = 1
+    browserCanvasContext.stroke()
+
+    browserCanvasContext.fillStyle = 'rgba(250, 250, 250, 1)'
+    browserCanvasContext.fill()
+  }
+}

CanvasApp/Panels/PlotterPanel.js

@@ -22,7 +22,7 @@ function newPlotterPanel () {
 
   let heightFactor = 1
   let currentRecord
-  let panelTabButton
+  let upDownButton
   let panelNode
 
   return thisObject
@@ -35,8 +35,8 @@ function newPlotterPanel () {
 
     heightFactor = undefined
     currentRecord = undefined
-    panelTabButton.finalize()
-    panelTabButton = undefined
+    upDownButton.finalize()
+    upDownButton = undefined
     panelNode = undefined
   }
 
@@ -50,18 +50,18 @@ function newPlotterPanel () {
     thisObject.container.frame.position.x = canvas.chartingSpace.viewport.visibleArea.topRight.x - thisObject.container.frame.width - thisObject.container.frame.width * Math.random() * 8
     thisObject.container.frame.position.y = canvas.chartingSpace.viewport.visibleArea.bottomLeft.y - thisObject.container.frame.height - thisObject.container.frame.height * Math.random() * 1.5
 
-    panelTabButton = newPanelTabButton()
-    panelTabButton.parentContainer = thisObject.container
-    panelTabButton.container.frame.parentFrame = thisObject.container.frame
-    panelTabButton.fitFunction = thisObject.fitFunction
-    panelTabButton.initialize()
+    upDownButton = newUpDownButton()
+    upDownButton.parentContainer = thisObject.container
+    upDownButton.container.frame.parentFrame = thisObject.container.frame
+    upDownButton.fitFunction = thisObject.fitFunction
+    upDownButton.initialize()
   }
 
   function getContainer (point) {
     if (thisObject.isVisible !== true) { return }
     let container
 
-    container = panelTabButton.getContainer(point)
+    container = upDownButton.getContainer(point)
     if (container !== undefined) { return container }
 
     if (thisObject.container.frame.isThisPointHere(point, true) === true) {
@@ -87,7 +87,7 @@ function newPlotterPanel () {
 
     thisObject.container.frame.draw(false, false, true, thisObject.fitFunction)
     plotCurrentRecordData()
-    panelTabButton.draw()
+    upDownButton.draw()
   }
 
   function plotCurrentRecordData () {

CanvasApp/Panels/UpDownButton.js

@@ -1,4 +1,4 @@
-function newPanelTabButton () {
+function newUpDownButton () {
   let thisObject = {
     container: undefined,
     fitFunction: undefined,
@@ -16,13 +16,12 @@ function newPanelTabButton () {
    /* Cointainer stuff */
 
   thisObject.container = newContainer()
-  thisObject.container.name = 'Panel Tab Button'
+  thisObject.container.name = 'Up Down Button'
   thisObject.container.initialize()
   thisObject.container.isClickeable = true
   thisObject.container.isDraggeable = false
-  thisObject.container.frame.containerName = 'Panel Tab Button'
+  thisObject.container.frame.containerName = 'Up Down Button'
 
-  /* Animation to hide the pannel */
   thisObject.status = 'up'
   let upPosition = {}
   let downPosition = {}
@@ -45,12 +44,12 @@ function newPanelTabButton () {
   }
 
   function initialize () {
-    thisObject.container.frame.width = 10
-    thisObject.container.frame.height = 10
+    thisObject.container.frame.width = 12
+    thisObject.container.frame.height = 12
 
-    var position = {
-      x: thisObject.parentContainer.frame.width - 14,
-      y: 1
+    let position = {
+      x: thisObject.container.frame.parentFrame.width * 5.75 / 8 - thisObject.container.frame.width / 2,
+      y: 40 * 4 / 8 - thisObject.container.frame.height / 2
     }
 
     thisObject.container.frame.position = position

CanvasApp/Spaces/PanelsSpace.js

@@ -165,18 +165,34 @@ function newPanelsSpace () {
         let verticalLine = (canvas.chartingSpace.viewport.visibleArea.topRight.x - canvas.chartingSpace.viewport.visibleArea.topLeft.x) / 2 + canvas.chartingSpace.viewport.visibleArea.topLeft.x
         let horizontalLine = (canvas.chartingSpace.viewport.visibleArea.bottomRight.y - canvas.chartingSpace.viewport.visibleArea.topRight.y) / 2 + canvas.chartingSpace.viewport.visibleArea.topRight.y
 
-        if (panel.panelTabButton !== undefined) {
-          if (panel.panelTabButton.status === 'up') {
-            if (centerPoint.x < verticalLine) {
-              panel.gravitatesTowards = 'topLeft'
+        if (panel.upDownButton !== undefined) {
+          if (panel.upDownButton.status === 'up') {
+            if (panel.leftRightButton !== undefined) {
+              if (panel.leftRightButton.status === 'left') {
+                panel.gravitatesTowards = 'topLeft'
+              } else {
+                panel.gravitatesTowards = 'topRight'
+              }
             } else {
-              panel.gravitatesTowards = 'topRight'
+              if (centerPoint.x < verticalLine) {
+                panel.gravitatesTowards = 'topLeft'
+              } else {
+                panel.gravitatesTowards = 'topRight'
+              }
             }
           } else {
-            if (centerPoint.x < verticalLine) {
-              panel.gravitatesTowards = 'bottomLeft'
+            if (panel.leftRightButton !== undefined) {
+              if (panel.leftRightButton.status === 'left') {
+                panel.gravitatesTowards = 'bottomLeft'
+              } else {
+                panel.gravitatesTowards = 'bottomRight'
+              }
             } else {
-              panel.gravitatesTowards = 'bottomRight'
+              if (centerPoint.x < verticalLine) {
+                panel.gravitatesTowards = 'bottomLeft'
+              } else {
+                panel.gravitatesTowards = 'bottomRight'
+              }
             }
           }
         } else {
@@ -197,6 +213,10 @@ function newPanelsSpace () {
         /* According to the quadrant we push the panels to the sides */
         if (panel.gravitatesTowards === 'topLeft' || panel.gravitatesTowards === 'bottomLeft') {
           panel.container.frame.position.x = panel.container.frame.position.x - panel.container.speed.x
+          if (panel.leftRightButton !== undefined) {
+            if (panel.leftRightButton.status === 'left' || panel.leftRightButton.status === 'right') { // we avoid pushing other panels while in transition
+            }
+          }
           isOverlapping(i, panel.container)
           if (panel.container.frame.position.x < 0) {
             panel.container.frame.position.x = 0
@@ -246,6 +266,11 @@ function newPanelsSpace () {
 
       for (let i = 0; i < currentIndex; i++) {
         let panel = thisObject.panels[i]
+        if (panel.leftRightButton !== undefined) {
+          if (panel.leftRightButton.status !== 'left' && panel.leftRightButton.status !== 'right') { // we avoid pushing other panels while in transition
+            continue
+          }
+        }
         if (panel.isVisible === true && panel.isHidden === false) {
           if (isThisPointInsideThisFrame(corner1, panel.container.frame) === true) {
             pushOut(currentContainer, panel.container, panel.gravitatesTowards)

Legacy-Code/Masters/plotters/Plotters-Bollinger-Bands/BollingerBandsPanel.js

@@ -17,7 +17,7 @@ function newMastersPlottersBollingerBandsBollingerBandsBollingerBandsPanel () {
     thisObject.container.frame.containerName = "Bollinger Band";
 
     let currentBand;
-    let panelTabButton
+    let upDownButton
 
     return thisObject;
 
@@ -28,8 +28,8 @@ function newMastersPlottersBollingerBandsBollingerBandsBollingerBandsPanel () {
         thisObject.isVisible = undefined
 
         currentBand = undefined
-        panelTabButton.finalize()
-        panelTabButton = undefined
+        upDownButton.finalize()
+        upDownButton = undefined
     }
 
     function initialize() {
@@ -40,18 +40,18 @@ function newMastersPlottersBollingerBandsBollingerBandsBollingerBandsPanel () {
         thisObject.container.frame.position.x = canvas.chartingSpace.viewport.visibleArea.topRight.x - thisObject.container.frame.width * 3;
         thisObject.container.frame.position.y = canvas.chartingSpace.viewport.visibleArea.bottomLeft.y - thisObject.container.frame.height;
 
-        panelTabButton = newPanelTabButton()
-        panelTabButton.parentContainer = thisObject.container
-        panelTabButton.container.frame.parentFrame = thisObject.container.frame
-        panelTabButton.fitFunction = thisObject.fitFunction
-        panelTabButton.initialize()
+        upDownButton = newUpDownButton()
+        upDownButton.parentContainer = thisObject.container
+        upDownButton.container.frame.parentFrame = thisObject.container.frame
+        upDownButton.fitFunction = thisObject.fitFunction
+        upDownButton.initialize()
     }
 
     function getContainer(point) {
         if (thisObject.isVisible !== true) { return }
         let container;
 
-        container = panelTabButton.getContainer(point)
+        container = upDownButton.getContainer(point)
         if (container !== undefined) { return container }
 
         if (thisObject.container.frame.isThisPointHere(point, true) === true) {
@@ -83,7 +83,7 @@ function newMastersPlottersBollingerBandsBollingerBandsBollingerBandsPanel () {
 
         plotCurrentBandInfo();
 
-        panelTabButton.draw()
+        upDownButton.draw()
     }
 
 

Legacy-Code/Masters/plotters/Plotters-Candles-Volumes/CandlePanel.js

@@ -17,7 +17,7 @@ function newMastersPlottersCandlesVolumesCandlesCandlePanel() {
     thisObject.container.frame.containerName = "Candle";
 
     let currentCandle;
-    let panelTabButton
+    let upDownButton
 
     return thisObject;
 
@@ -28,8 +28,8 @@ function newMastersPlottersCandlesVolumesCandlesCandlePanel() {
         thisObject.isVisible = undefined
 
         currentCandle = undefined
-        panelTabButton.finalize()
-        panelTabButton = undefined
+        upDownButton.finalize()
+        upDownButton = undefined
     }
 
     function initialize() {
@@ -40,18 +40,18 @@ function newMastersPlottersCandlesVolumesCandlesCandlePanel() {
         thisObject.container.frame.position.x = canvas.chartingSpace.viewport.visibleArea.topRight.x - thisObject.container.frame.width * 2;
         thisObject.container.frame.position.y = canvas.chartingSpace.viewport.visibleArea.bottomLeft.y - thisObject.container.frame.height;
 
-        panelTabButton = newPanelTabButton()
-        panelTabButton.parentContainer = thisObject.container
-        panelTabButton.container.frame.parentFrame = thisObject.container.frame
-        panelTabButton.fitFunction = thisObject.fitFunction
-        panelTabButton.initialize()
+        upDownButton = newUpDownButton()
+        upDownButton.parentContainer = thisObject.container
+        upDownButton.container.frame.parentFrame = thisObject.container.frame
+        upDownButton.fitFunction = thisObject.fitFunction
+        upDownButton.initialize()
     }
 
     function getContainer(point) {
         if (thisObject.isVisible !== true) { return }
         let container;
 
-        container = panelTabButton.getContainer(point)
+        container = upDownButton.getContainer(point)
         if (container !== undefined) { return container }
 
         if (thisObject.container.frame.isThisPointHere(point, true) === true) {
@@ -83,7 +83,7 @@ function newMastersPlottersCandlesVolumesCandlesCandlePanel() {
 
         plotCurrentCandleInfo();
 
-        panelTabButton.draw()
+        upDownButton.draw()
 
     }
 

Legacy-Code/Masters/plotters/Plotters-Candles-Volumes/VolumePanel.js

@@ -17,7 +17,7 @@ function newMastersPlottersCandlesVolumesVolumesVolumePanel() {
     thisObject.container.frame.containerName = "Volume";
 
     let currentVolume;
-    let panelTabButton
+    let upDownButton
 
     return thisObject;
 
@@ -28,8 +28,8 @@ function newMastersPlottersCandlesVolumesVolumesVolumePanel() {
         thisObject.isVisible = undefined
 
         currentVolume = undefined
-        panelTabButton.finalize()
-        panelTabButton = undefined
+        upDownButton.finalize()
+        upDownButton = undefined
     }
 
     function initialize() {
@@ -40,18 +40,18 @@ function newMastersPlottersCandlesVolumesVolumesVolumePanel() {
         thisObject.container.frame.position.x = canvas.chartingSpace.viewport.visibleArea.topRight.x - thisObject.container.frame.width;
         thisObject.container.frame.position.y = canvas.chartingSpace.viewport.visibleArea.bottomLeft.y - thisObject.container.frame.height;
 
-        panelTabButton = newPanelTabButton()
-        panelTabButton.parentContainer = thisObject.container
-        panelTabButton.container.frame.parentFrame = thisObject.container.frame
-        panelTabButton.fitFunction = thisObject.fitFunction
-        panelTabButton.initialize()
+        upDownButton = newUpDownButton()
+        upDownButton.parentContainer = thisObject.container
+        upDownButton.container.frame.parentFrame = thisObject.container.frame
+        upDownButton.fitFunction = thisObject.fitFunction
+        upDownButton.initialize()
     }
 
     function getContainer(point) {
         if (thisObject.isVisible !== true) { return }
         let container;
 
-        container = panelTabButton.getContainer(point)
+        container = upDownButton.getContainer(point)
         if (container !== undefined) { return container }
 
         if (thisObject.container.frame.isThisPointHere(point, true) === true) {
@@ -83,7 +83,7 @@ function newMastersPlottersCandlesVolumesVolumesVolumePanel() {
 
         plotCurrentVolumeInfo();
 
-        panelTabButton.draw()
+        upDownButton.draw()
     }
 
     function plotCurrentVolumeInfo() {

Legacy-Code/Masters/plotters/Plotters-Trading-Simulation/SimulationExecutionPanel.js

@@ -20,7 +20,7 @@ function newMastersPlottersTradingSimulationSimulationExecutionSimulationExecuti
     container.frame.containerName = "Trading Execution";
 
     let currentRecord;
-    let panelTabButton
+    let upDownButton
 
     return thisObject;
 
@@ -31,8 +31,8 @@ function newMastersPlottersTradingSimulationSimulationExecutionSimulationExecuti
         thisObject.isVisible = undefined
 
         currentRecord = undefined
-        panelTabButton.finalize()
-        panelTabButton = undefined
+        upDownButton.finalize()
+        upDownButton = undefined
     }
 
     function initialize() {
@@ -43,18 +43,18 @@ function newMastersPlottersTradingSimulationSimulationExecutionSimulationExecuti
         thisObject.container.frame.position.x = canvas.chartingSpace.viewport.visibleArea.topLeft.x + thisObject.container.frame.width * 4;
         thisObject.container.frame.position.y = canvas.chartingSpace.viewport.visibleArea.topRight.y;
 
-        panelTabButton = newPanelTabButton()
-        panelTabButton.parentContainer = thisObject.container
-        panelTabButton.container.frame.parentFrame = thisObject.container.frame
-        panelTabButton.fitFunction = thisObject.fitFunction
-        panelTabButton.initialize()
+        upDownButton = newUpDownButton()
+        upDownButton.parentContainer = thisObject.container
+        upDownButton.container.frame.parentFrame = thisObject.container.frame
+        upDownButton.fitFunction = thisObject.fitFunction
+        upDownButton.initialize()
     }
 
     function getContainer(point) {
         if (thisObject.isVisible !== true) { return }
         let container;
 
-        container = panelTabButton.getContainer(point)
+        container = upDownButton.getContainer(point)
         if (container !== undefined) { return container }
 
         if (thisObject.container.frame.isThisPointHere(point, true) === true) {
@@ -86,7 +86,7 @@ function newMastersPlottersTradingSimulationSimulationExecutionSimulationExecuti
 
         plot();
 
-        panelTabButton.draw()
+        upDownButton.draw()
 
     }
 

Legacy-Code/Masters/plotters/Plotters-Trading-Simulation/TradingSimulationPanel.js

@@ -21,7 +21,7 @@ function newMastersPlottersTradingSimulationTradingSimulationTradingSimulationPa
 
     let currentRecord;
     let lastRecord;
-    let panelTabButton
+    let upDownButton
 
 
     return thisObject;
@@ -34,11 +34,11 @@ function newMastersPlottersTradingSimulationTradingSimulationTradingSimulationPa
         thisObject.container.frame.position.x = canvas.chartingSpace.viewport.visibleArea.topRight.x - thisObject.container.frame.width * 1;
         thisObject.container.frame.position.y = canvas.chartingSpace.viewport.visibleArea.topRight.y;
 
-        panelTabButton = newPanelTabButton()
-        panelTabButton.parentContainer = thisObject.container
-        panelTabButton.container.frame.parentFrame = thisObject.container.frame
-        panelTabButton.fitFunction = thisObject.fitFunction
-        panelTabButton.initialize()
+        upDownButton = newUpDownButton()
+        upDownButton.parentContainer = thisObject.container
+        upDownButton.container.frame.parentFrame = thisObject.container.frame
+        upDownButton.fitFunction = thisObject.fitFunction
+        upDownButton.initialize()
 
     }
 
@@ -53,14 +53,14 @@ function newMastersPlottersTradingSimulationTradingSimulationTradingSimulationPa
 
         currentRecord = undefined
         lastRecord = undefined
-        panelTabButton = undefined
+        upDownButton = undefined
     }
 
     function getContainer(point) {
         if (thisObject.isVisible !== true) { return }
         let container;
 
-        container = panelTabButton.getContainer(point)
+        container = upDownButton.getContainer(point)
         if (container !== undefined) { return container }
 
         if (thisObject.container.frame.isThisPointHere(point, true) === true) {
@@ -93,7 +93,7 @@ function newMastersPlottersTradingSimulationTradingSimulationTradingSimulationPa
 
         plotCurrentRecordInfo();
 
-        panelTabButton.draw()
+        upDownButton.draw()
 
         /* Define panel name */
         if (thisObject.session !== undefined) {

WebServer/Scripts/AppLoader.js

@@ -55,7 +55,8 @@ function newAppLoader() {
                 'Utilities/RoundedCornersBackground.js',
 
                 'Panels/LayersPanel.js',
-                'Panels/PanelTabButton.js',
+                'Panels/UpDownButton.js',
+                'Panels/LeftRightButton.js',
                 'Panels/Layer.js',
                 'Panels/PlotterPanel.js',
                 'Panels/PanelsVisibleButton.js',