Fullscreen Mode working

Animation.js

@@ -57,7 +57,7 @@ function newAnimation () {
                 /* We set the canvas to its normal width and height */
 
         browserCanvas.width = window.innerWidth
-        browserCanvas.height = window.innerHeight - window.canvasApp.topMargin
+        browserCanvas.height = window.innerHeight - CURRENT_TOP_MARGIN
 
                 /* First thing is to clear the actual canvas */
 

Canvas.js

@@ -187,7 +187,7 @@ function newCanvas () {
     try {
       let point = {
         x: event.pageX,
-        y: event.pageY - window.canvasApp.topMargin
+        y: event.pageY - CURRENT_TOP_MARGIN
       }
 
       dragVector.downX = point.x
@@ -290,7 +290,7 @@ function newCanvas () {
       }
       let point = {
         x: event.pageX,
-        y: event.pageY - window.canvasApp.topMargin
+        y: event.pageY - CURRENT_TOP_MARGIN
       }
 
       let container
@@ -398,7 +398,7 @@ function newCanvas () {
     try {
       let point = {
         x: event.pageX,
-        y: event.pageY - window.canvasApp.topMargin
+        y: event.pageY - CURRENT_TOP_MARGIN
       }
 
       viewPort.mousePosition.x = point.x
@@ -444,7 +444,7 @@ function newCanvas () {
 
       let point = {
         x: event.pageX,
-        y: event.pageY - window.canvasApp.topMargin
+        y: event.pageY - CURRENT_TOP_MARGIN
       }
 
       let container
@@ -539,7 +539,7 @@ function newCanvas () {
 
       let point = {
         x: event.pageX,
-        y: event.pageY - window.canvasApp.topMargin
+        y: event.pageY - CURRENT_TOP_MARGIN
       }
 
       event.mousePosition = point
@@ -593,7 +593,7 @@ function newCanvas () {
       if (containerDragStarted === true || floatingObjectDragStarted === true || viewPortBeingDragged === true) {
         let point = {
           x: event.pageX,
-          y: event.pageY - window.canvasApp.topMargin
+          y: event.pageY - CURRENT_TOP_MARGIN
         }
 
         browserCanvas.style.cursor = 'grabbing'
@@ -646,4 +646,3 @@ function newCanvas () {
     }
   }
 }
-

CockpitSpace/FullScreen.js

@@ -0,0 +1,166 @@
+
+function newFullScreen () {
+  const MODULE_NAME = 'Fullscreen'
+
+  let thisObject = {
+    visible: true,
+    container: undefined,
+    status: undefined,
+    physics: physics,
+    draw: draw,
+    getContainer: getContainer,
+    initialize: initialize,
+    finalize: finalize
+  }
+
+  thisObject.container = newContainer()
+  thisObject.container.initialize(MODULE_NAME)
+
+  thisObject.container.isDraggeable = false
+  thisObject.container.isWheelable = false
+  thisObject.container.isClickeable = true
+  thisObject.container.detectMouseOver = true
+
+  let selfMouseOverEventSubscriptionId
+  let selfMouseClickEventSubscriptionId
+  let selfMouseNotOverEventSubscriptionId
+
+  let isMouseOver = false
+  let counterTillNextState = 0
+
+  let productCardsToTurnOn = []
+  return thisObject
+
+  function finalize () {
+    thisObject.container.eventHandler.stopListening(selfMouseOverEventSubscriptionId)
+    thisObject.container.eventHandler.stopListening(selfMouseClickEventSubscriptionId)
+    thisObject.container.eventHandler.stopListening(selfMouseNotOverEventSubscriptionId)
+
+    thisObject.container.finalize()
+    thisObject.container = undefined
+  }
+
+  function initialize () {
+    thisObject.container.frame.width = 250
+    thisObject.container.frame.height = COCKPIT_SPACE_HEIGHT - 12
+
+    selfMouseOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver)
+    selfMouseClickEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick)
+    selfMouseNotOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver)
+
+    thisObject.status = 'Ready'
+  }
+
+  function getContainer (point, purpose) {
+    if (thisObject.visible !== true) { return }
+
+    if (thisObject.container.frame.isThisPointHere(point, true) === true) {
+      return thisObject.container
+    } else {
+      return undefined
+    }
+  }
+
+  function onMouseOver (point) {
+    if (thisObject.container.frame.isThisPointHere(point, true, false) === true) {
+      isMouseOver = true
+    } else {
+      isMouseOver = false
+    }
+  }
+
+  function onMouseNotOver (point) {
+    isMouseOver = false
+  }
+
+  function onMouseClick (event) {
+    if (thisObject.status !== 'On') {
+      thisObject.status = 'On'
+      goFullscreen()
+      CURRENT_TOP_MARGIN = 0
+    } else {
+      thisObject.status = 'Off'
+      goOutFullscreen()
+      CURRENT_TOP_MARGIN = window.canvasApp.topMargin
+    }
+  }
+
+  function goFullscreen () {
+    if (browserCanvas.requestFullscreen)  		    {
+      browserCanvas.requestFullscreen()
+    }  	    else if (browserCanvas.mozRequestFullScreen)  		{
+      browserCanvas.mozRequestFullScreen()
+    }  	else if (browserCanvas.webkitRequestFullscreen)  		{
+      browserCanvas.webkitRequestFullscreen()
+    }  	else if (browserCanvas.msRequestFullscreen)  		{ browserCanvas.msRequestFullscreen() }
+  }
+
+  function goOutFullscreen () {
+    if (document.exitFullscreen)  		{
+      document.exitFullscreen()
+    }  	else if (document.mozCancelFullScreen)  		{
+      document.mozCancelFullScreen()
+    }  	else if (document.webkitExitFullscreen)  		{
+      document.webkitExitFullscreen()
+    }  	else if (document.msExitFullscreen)  		{ document.msExitFullscreen() }
+  }
+
+  function physics () {
+    positionPhysics()
+  }
+
+  function positionPhysics () {
+    thisObject.container.frame.position.x = thisObject.container.parentContainer.frame.width * 0.70
+    thisObject.container.frame.position.y = 6
+  }
+
+  function draw () {
+    if (thisObject.visible !== true) { return }
+    drawBackground()
+    drawText()
+  }
+
+  function drawBackground () {
+    let params = {
+      cornerRadius: 3,
+      lineWidth: 0.01,
+      container: thisObject.container,
+      borderColor: UI_COLOR.DARK,
+      castShadow: false,
+      opacity: 1
+    }
+
+    if (isMouseOver === true) {
+      params.backgroundColor = UI_COLOR.TURQUOISE
+    } else {
+      params.backgroundColor = UI_COLOR.DARK_TURQUOISE
+    }
+
+    roundedCornersBackground(params)
+  }
+
+  function drawText () {
+    let fontSize
+    let label
+    let xOffset
+    let yOffset
+
+    const OPACITY = 1
+
+      /* We put the params.VALUE in the middle */
+
+    fontSize = 15
+
+    browserCanvasContext.font = 'bold  ' + fontSize + 'px ' + UI_FONT.PRIMARY
+    label = 'FS'
+
+    let labelPoint = {
+      x: thisObject.container.frame.width / 2 - label.length / 2 * fontSize * FONT_ASPECT_RATIO - 25,
+      y: thisObject.container.frame.height - 9
+    }
+    labelPoint = thisObject.container.frame.frameThisPoint(labelPoint)
+
+    browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + OPACITY + ')'
+    browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y)
+  }
+}

Dashboard.js

@@ -80,7 +80,7 @@ function newDashboard () {
       browserCanvas = document.getElementById('canvas')
 
       browserCanvas.width = window.innerWidth
-      browserCanvas.height = window.innerHeight - window.canvasApp.topMargin
+      browserCanvas.height = window.innerHeight - CURRENT_TOP_MARGIN
 
       viewPort.initialize()
     } catch (err) {

FloatingSpace/CodeEditor.js

@@ -140,7 +140,7 @@ function newCodeEditor () {
     if (thisObject.visible === true) {
       let checkPosition = {
         x: textAreaPosition.x,
-        y: textAreaPosition.y - window.canvasApp.topMargin
+        y: textAreaPosition.y - CURRENT_TOP_MARGIN
       }
       if (thisObject.isVisibleFunction(checkPosition) === false) {
         deactivate()

FloatingSpace/StrategyPartTitle.js

@@ -121,12 +121,12 @@ function newStrategyPartTitle () {
     if (thisObject.editMode === true) {
       let inputPosition = {
         x: 0,
-        y: 0 + window.canvasApp.topMargin
+        y: 0 + CURRENT_TOP_MARGIN
       }
 
       inputPosition = thisObject.container.frame.frameThisPoint(inputPosition)
 
-      if (inputPosition.y < window.canvasApp.topMargin) { exitEditMode() }
+      if (inputPosition.y < CURRENT_TOP_MARGIN) { exitEditMode() }
 
       let inputDiv = document.getElementById('inputDiv')
       inputDiv.style = 'position:absolute; top:' + inputPosition.y + 'px; left:' + inputPosition.x + 'px; z-index:1; '

Globals.js

@@ -165,6 +165,8 @@ let INITIAL_ZOOM_LEVEL = -28.25       // This is the zoom level at the view port
 let INITIAL_TIME_PERIOD = ONE_DAY_IN_MILISECONDS  // This value will be overwritten at the viewPort.initialize if the user had a prevous session with this same browser.
 let VERY_LARGE_NUMBER = 100000000000
 
+let CURRENT_TOP_MARGIN = window.canvasApp.topMargin
+
 let maxDate = new Date();
 maxDate.setMilliseconds(0);
 maxDate.setDate(maxDate.getDate() + 365 * 1);  // We might have charts that projects data into the future.

Spaces/CockpitSpace.js

@@ -7,6 +7,7 @@
      status: 'BOTTOM',
      assetBalances: undefined,
      restartSimulation: undefined,
+     fullscreen: undefined,
      draw: draw,
      physics: physics,
      getContainer: getContainer,
@@ -37,6 +38,7 @@
      thisObject.container = undefined
      thisObject.assetBalances = undefined
      thisObject.restartSimulation = undefined
+     thisObject.fullscreen = undefined
    }
 
    function initialize () {
@@ -49,6 +51,10 @@
      thisObject.restartSimulation = newRestartSimulation()
      thisObject.restartSimulation.container.connectToParent(thisObject.container)
      thisObject.restartSimulation.initialize()
+
+     thisObject.fullscreen = newFullScreen()
+     thisObject.fullscreen.container.connectToParent(thisObject.container)
+     thisObject.fullscreen.initialize()
    }
 
    function onMouseClick (event) {
@@ -70,6 +76,7 @@
 
    function childrenPhysics () {
      thisObject.restartSimulation.physics()
+     thisObject.fullscreen.physics()
    }
    function thisObjectPhysics () {
      /* Check the limits */
@@ -109,6 +116,9 @@
      container = thisObject.restartSimulation.getContainer(point)
      if (container !== undefined) { return container }
 
+     container = thisObject.fullscreen.getContainer(point)
+     if (container !== undefined) { return container }
+
      if (thisObject.container.frame.isThisPointHere(point, true) === true) {
        return thisObject.container
      } else {
@@ -123,6 +133,7 @@
 
      thisObject.assetBalances.draw()
      thisObject.restartSimulation.draw()
+     thisObject.fullscreen.draw()
    }
 
    function drawBackground () {