only with mouse over

Panels/LayersPanel.js

@@ -7,6 +7,7 @@ function newLayersPanel () {
     payload: undefined,
     isVisible: true,
     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
+
     layersMap = undefined
     visibleLayers = undefined
 
@@ -75,19 +86,39 @@ function newLayersPanel () {
     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.upDownButton.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.upDownButton.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.upDownButton.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) {
@@ -302,6 +343,7 @@ function newLayersPanel () {
     if (thisObject.payload.node === undefined) { return }
 
     thisObject.upDownButton.physics()
+    thisObject.leftRightButton.physics()
     saveFrame(thisObject.payload, thisObject.container.frame)
     syncWithConfigPhysics()
 
@@ -387,7 +429,10 @@ function newLayersPanel () {
       visibleLayers[i].draw()
     }
     drawScrollBar()
-    thisObject.upDownButton.draw()
+    if (isMouseOver === true) {
+      thisObject.upDownButton.draw()
+      thisObject.leftRightButton.draw()
+    }
   }
 
   function drawHeader () {

Panels/LeftRightButton.js

@@ -0,0 +1,245 @@
+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 () {
+    return
+    if (isInitialized === false) { return }
+
+    leftPosition.x = thisObject.parentContainer.frame.position.x
+    leftPosition.y = canvas.chartingSpace.viewport.visibleArea.topRight.y
+
+    rightPosition.x = thisObject.parentContainer.frame.position.x
+    rightPosition.y = canvas.chartingSpace.viewport.visibleArea.bottomRight.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()
+  }
+}

Panels/UpDownButton.js

@@ -16,13 +16,12 @@ function newUpDownButton () {
    /* 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 newUpDownButton () {
   }
 
   function initialize () {
-    thisObject.container.frame.width = 10
-    thisObject.container.frame.height = 10
+    thisObject.container.frame.width = 12
+    thisObject.container.frame.height = 12
 
     let position = {
-      x: thisObject.parentContainer.frame.width - 14,
-      y: 1
+      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