layers panels remembering if location

Panels/LayersPanel.js

@@ -6,6 +6,7 @@ function newLayersPanel () {
     layers: [],
     payload: undefined,
     isVisible: true,
+    panelTabButton: undefined,
     physics: physics,
     draw: draw,
     getContainer: getContainer,
@@ -25,7 +26,6 @@ function newLayersPanel () {
   let firstVisibleLayer = 1
 
   const LAYER_SEPARATION = 0
-  let panelTabButton
 
   let visible = true
   let headerHeight = 40
@@ -42,8 +42,8 @@ function newLayersPanel () {
   function finalize () {
     thisObject.container.eventHandler.stopListening(onMouseWheelEventSuscriptionId)
 
-    panelTabButton.finalize()
-    panelTabButton = undefined
+    thisObject.panelTabButton.finalize()
+    thisObject.panelTabButton = undefined
     layersMap = undefined
     visibleLayers = undefined
 
@@ -67,11 +67,11 @@ function newLayersPanel () {
 
     thisObject.container.frame.position = position
 
-    panelTabButton = newPanelTabButton()
-    panelTabButton.parentContainer = thisObject.container
-    panelTabButton.container.frame.parentFrame = thisObject.container.frame
-    panelTabButton.fitFunction = thisObject.fitFunction
-    panelTabButton.initialize()
+    thisObject.panelTabButton = newPanelTabButton()
+    thisObject.panelTabButton.parentContainer = thisObject.container
+    thisObject.panelTabButton.container.frame.parentFrame = thisObject.container.frame
+    thisObject.panelTabButton.fitFunction = thisObject.fitFunction
+    thisObject.panelTabButton.initialize()
 
     onMouseWheelEventSuscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseWheel', onMouseWheel)
 
@@ -80,16 +80,22 @@ function newLayersPanel () {
     isInitialized = true
   }
 
-  function saveObjectState () {
+  function saveObjectStateVisibleLayers () {
     savePropertyAtNodeConfig(thisObject.payload, 'visibleLayers', desiredVisibleLayers)
   }
 
+  function saveObjectStatePanelLocation () {
+    savePropertyAtNodeConfig(thisObject.payload, 'panelLocation', thisObject.panelTabButton.status)
+  }
+
   function readObjectState () {
-    let storedValue = loadPropertyFromNodeConfig(thisObject.payload, 'visibleLayers')
+    let storedValue
+
+    storedValue = loadPropertyFromNodeConfig(thisObject.payload, 'visibleLayers')
 
     if (isNaN(storedValue) || storedValue === null || storedValue === undefined) {
          // not using this value
-      saveObjectState() // this overrides any invalid value at the config.
+      saveObjectStateVisibleLayers() // this overrides any invalid value at the config.
       return
     } else {
       if (storedValue < 0) { storedValue = 0 }
@@ -103,6 +109,21 @@ function newLayersPanel () {
         calculateVisbleLayers()
       }
     }
+
+    storedValue = loadPropertyFromNodeConfig(thisObject.payload, 'panelLocation')
+
+    if (storedValue === null || storedValue === undefined) {
+         // not using this value
+      saveObjectStatePanelLocation() // this overrides any invalid value at the config.
+      return
+    } else {
+      if (storedValue !== 'up' && storedValue !== 'down') {
+        saveObjectStatePanelLocation() // this overrides any invalid value at the config.
+        return
+      }
+      thisObject.panelTabButton.setStatus(storedValue)
+      saveObjectStatePanelLocation()
+    }
   }
 
   function removeLayer (id) {
@@ -162,7 +183,7 @@ function newLayersPanel () {
     }
     desiredPanelHeight = (layerHeight + LAYER_SEPARATION) * desiredVisibleLayers + headerHeight + footerHeight
     calculateVisbleLayers()
-    saveObjectState()
+    saveObjectStateVisibleLayers()
   }
 
   function panelSizePhysics () {
@@ -219,7 +240,7 @@ function newLayersPanel () {
   function getContainer (point) {
     let container
 
-    container = panelTabButton.getContainer(point)
+    container = thisObject.panelTabButton.getContainer(point)
     if (container !== undefined) { return container }
 
      /* First we check if thisObject point is inside thisObject space. */
@@ -269,6 +290,7 @@ function newLayersPanel () {
 
   function physics () {
     if (isInitialized === false) { return }
+    thisObject.panelTabButton.physics()
     saveFrame(thisObject.payload, thisObject.container.frame)
     syncWithConfigPhysics()
 
@@ -353,7 +375,7 @@ function newLayersPanel () {
       visibleLayers[i].draw()
     }
     drawScrollBar()
-    panelTabButton.draw()
+    thisObject.panelTabButton.draw()
   }
 
   function drawHeader () {

Panels/PanelTabButton.js

@@ -3,6 +3,9 @@ function newPanelTabButton () {
     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,
@@ -19,9 +22,9 @@ function newPanelTabButton () {
   thisObject.container.frame.containerName = 'Panel Tab Button'
 
   /* Animation to hide the pannel */
-  let tabStatus = 'visible'
-  let visiblePosition = {}
-  let hiddenPosition = {}
+  thisObject.status = 'up'
+  let upPosition = {}
+  let downPosition = {}
   let transitionPosition = {}
 
   let onMouseClickEventSuscriptionId
@@ -34,9 +37,9 @@ function newPanelTabButton () {
     thisObject.fitFunction = undefined
     thisObject.parentContainer = undefined
 
-    tabStatus = undefined
-    visiblePosition = undefined
-    hiddenPosition = undefined
+    thisObject.status = undefined
+    upPosition = undefined
+    downPosition = undefined
     transitionPosition = undefined
   }
 
@@ -45,20 +48,20 @@ function newPanelTabButton () {
     thisObject.container.frame.height = 10
 
     var position = {
-      x: thisObject.parentContainer.frame.width - 15,
-      y: 2
+      x: thisObject.parentContainer.frame.width - 14,
+      y: 1
     }
 
     thisObject.container.frame.position = position
 
-    visiblePosition.x = thisObject.parentContainer.frame.position.x
-    visiblePosition.y = thisObject.parentContainer.frame.position.y
+    upPosition.x = thisObject.parentContainer.frame.position.x
+    upPosition.y = thisObject.parentContainer.frame.position.y
 
-    hiddenPosition.x = thisObject.parentContainer.frame.position.x
-    hiddenPosition.y = canvas.chartSpace.viewport.visibleArea.bottomRight.y
+    downPosition.x = thisObject.parentContainer.frame.position.x
+    downPosition.y = canvas.chartSpace.viewport.visibleArea.bottomRight.y
 
-    transitionPosition.x = visiblePosition.x
-    transitionPosition.y = visiblePosition.y
+    transitionPosition.x = upPosition.x
+    transitionPosition.y = upPosition.y
 
     /* Lets listen to our own events to react when we have a Mouse Click */
     onMouseClickEventSuscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick)
@@ -66,55 +69,65 @@ function newPanelTabButton () {
     isInitialized = true
   }
 
+  function setStatus (value) {
+    if (value === 'up' && thisObject.status === 'down') {
+      thisObject.status = 'going up'
+    }
+    if (value === 'down' && thisObject.status === 'up') {
+      thisObject.status = 'going down'
+    }
+  }
+
   function onMouseClick (event) {
-    if (tabStatus === 'visible') {
-      visiblePosition.x = thisObject.parentContainer.frame.position.x
-      visiblePosition.y = thisObject.parentContainer.frame.position.y
+    if (thisObject.status === 'up') {
+      transitionPosition.x = upPosition.x
+      transitionPosition.y = upPosition.y
 
-      hiddenPosition.x = thisObject.parentContainer.frame.position.x
-      hiddenPosition.y = canvas.chartSpace.viewport.visibleArea.bottomRight.y
-
-      transitionPosition.x = visiblePosition.x
-      transitionPosition.y = visiblePosition.y
-
-      thisObject.parentContainer.isDraggeable = false
-      thisObject.parentContainer.isWheelable = false
-      tabStatus = 'going down'
+      thisObject.status = 'going down'
     } else {
-      thisObject.parentContainer.isDraggeable = true
-      thisObject.parentContainer.isWheelable = true
-      tabStatus = 'going up'
+      transitionPosition.x = downPosition.x
+      transitionPosition.y = downPosition.y
+
+      thisObject.status = 'going up'
+    }
+  }
+
+  function physics () {
+    if (isInitialized === false) { return }
+
+    upPosition.x = thisObject.parentContainer.frame.position.x
+    upPosition.y = canvas.chartSpace.viewport.visibleArea.topRight.y
+
+    downPosition.x = thisObject.parentContainer.frame.position.x
+    downPosition.y = canvas.chartSpace.viewport.visibleArea.bottomRight.y
+
+    if (thisObject.status === 'going down') {
+      if (transitionPosition.y < downPosition.y) {
+        transitionPosition.y = transitionPosition.y + 50
+        thisObject.parentContainer.frame.position.y = transitionPosition.y
+      } else {
+        thisObject.parentContainer.frame.position.y = downPosition.y
+        thisObject.status = 'down'
+      }
+    }
+    if (thisObject.status === 'going up') {
+      if (transitionPosition.y > upPosition.y) {
+        transitionPosition.y = transitionPosition.y - 50
+        thisObject.parentContainer.frame.position.y = transitionPosition.y
+      } else {
+        thisObject.parentContainer.frame.position.y = upPosition.y
+        thisObject.status = 'up'
+      }
     }
   }
 
   function draw () {
-    return
     if (isInitialized === false) { return }
 
     drawButton()
-
-    if (tabStatus === 'going down') {
-      if (transitionPosition.y < hiddenPosition.y) {
-        transitionPosition.y = transitionPosition.y + 50
-        thisObject.parentContainer.frame.position.y = transitionPosition.y
-      } else {
-        thisObject.parentContainer.frame.position.y = hiddenPosition.y
-        tabStatus = 'hidden'
-      }
-    }
-    if (tabStatus === 'going up') {
-      if (transitionPosition.y > visiblePosition.y) {
-        transitionPosition.y = transitionPosition.y - 50
-        thisObject.parentContainer.frame.position.y = transitionPosition.y
-      } else {
-        thisObject.parentContainer.frame.position.y = visiblePosition.y
-        tabStatus = 'visible'
-      }
-    }
   }
 
   function getContainer (point) {
-    return
     let container
 
        /* First we check if thisObject point is inside thisObject space. */
@@ -135,8 +148,8 @@ function newPanelTabButton () {
     let point2
     let point3
 
-    switch (tabStatus) {
-      case 'visible': {
+    switch (thisObject.status) {
+      case 'up': {
         point1 = {
           x: 3,
           y: 3
@@ -190,7 +203,7 @@ function newPanelTabButton () {
         break
       }
 
-      case 'hidden': {
+      case 'down': {
         point1 = {
           x: 3,
           y: thisObject.container.frame.height - 3

Spaces/PanelsSpace.js

@@ -163,23 +163,39 @@ function newPanelsSpace () {
 
         /* Lets see which quadrant the panel is at */
         let verticalLine = (canvas.chartSpace.viewport.visibleArea.topRight.x - canvas.chartSpace.viewport.visibleArea.topLeft.x) / 2 + canvas.chartSpace.viewport.visibleArea.topLeft.x
-        let horizontalLine = (canvas.chartSpace.viewport.visibleArea.bottomRight.y - canvas.chartSpace.viewport.visibleArea.topRight.y) * 2 / 3 + canvas.chartSpace.viewport.visibleArea.topRight.y
+        let horizontalLine = (canvas.chartSpace.viewport.visibleArea.bottomRight.y - canvas.chartSpace.viewport.visibleArea.topRight.y) / 2 + canvas.chartSpace.viewport.visibleArea.topRight.y
 
-        if (centerPoint.x < verticalLine && centerPoint.y < horizontalLine) {
-          panel.gravitatesTowards = 'topLeft'
-        }
-        if (centerPoint.x >= verticalLine && centerPoint.y < horizontalLine) {
-          panel.gravitatesTowards = 'topRight'
-        }
-        if (centerPoint.x < verticalLine && centerPoint.y >= horizontalLine) {
-          panel.gravitatesTowards = 'bottomLeft'
-        }
-        if (centerPoint.x >= verticalLine && centerPoint.y >= horizontalLine) {
-          panel.gravitatesTowards = 'bottomRight'
+        if (panel.panelTabButton !== undefined) {
+          if (panel.panelTabButton.status === 'up') {
+            if (centerPoint.x < verticalLine) {
+              panel.gravitatesTowards = 'topLeft'
+            } else {
+              panel.gravitatesTowards = 'topRight'
+            }
+          } else {
+            if (centerPoint.x < verticalLine) {
+              panel.gravitatesTowards = 'bottomLeft'
+            } else {
+              panel.gravitatesTowards = 'bottomRight'
+            }
+          }
+        } else {
+          if (centerPoint.x < verticalLine && centerPoint.y < horizontalLine) {
+            panel.gravitatesTowards = 'topLeft'
+          }
+          if (centerPoint.x >= verticalLine && centerPoint.y < horizontalLine) {
+            panel.gravitatesTowards = 'topRight'
+          }
+          if (centerPoint.x < verticalLine && centerPoint.y >= horizontalLine) {
+            panel.gravitatesTowards = 'bottomLeft'
+          }
+          if (centerPoint.x >= verticalLine && centerPoint.y >= horizontalLine) {
+            panel.gravitatesTowards = 'bottomRight'
+          }
         }
 
         /* According to the quadrant we push the panels to the sides */
-        if (centerPoint.x < verticalLine) {
+        if (panel.gravitatesTowards === 'topLeft' || panel.gravitatesTowards === 'bottomLeft') {
           panel.container.frame.position.x = panel.container.frame.position.x - panel.container.speed.x
           isOverlapping(i, panel.container)
           if (panel.container.frame.position.x < 0) {
@@ -193,7 +209,7 @@ function newPanelsSpace () {
           }
         }
         if (panel.container.frame.height <= canvas.chartSpace.viewport.visibleArea.bottomRight.y - canvas.chartSpace.viewport.visibleArea.topRight.y) {
-          if (centerPoint.y < horizontalLine) {
+          if (panel.gravitatesTowards === 'topLeft' || panel.gravitatesTowards === 'topRight') {
             panel.container.frame.position.y = panel.container.frame.position.y - panel.container.speed.y
             isOverlapping(i, panel.container)
             if (panel.container.frame.position.y < canvas.chartSpace.viewport.visibleArea.topLeft.y) {