From bf28b5ee3747cef9d97480fe78afd1378490657f Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Mon, 20 May 2019 11:25:25 +0200 Subject: [PATCH] Fullscreen Mode working --- Animation.js | 2 +- Canvas.js | 13 ++- CockpitSpace/FullScreen.js | 166 +++++++++++++++++++++++++++++ Dashboard.js | 2 +- FloatingSpace/CodeEditor.js | 2 +- FloatingSpace/StrategyPartTitle.js | 4 +- Globals.js | 2 + Spaces/CockpitSpace.js | 11 ++ 8 files changed, 190 insertions(+), 12 deletions(-) create mode 100644 CockpitSpace/FullScreen.js diff --git a/Animation.js b/Animation.js index 01ce1f6f5..95bf8a85d 100644 --- a/Animation.js +++ b/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 */ diff --git a/Canvas.js b/Canvas.js index 44b0f8a15..f41ffc738 100644 --- a/Canvas.js +++ b/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 () { } } } - diff --git a/CockpitSpace/FullScreen.js b/CockpitSpace/FullScreen.js new file mode 100644 index 000000000..f9caaf7e5 --- /dev/null +++ b/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) + } +} diff --git a/Dashboard.js b/Dashboard.js index 63e3176af..663c7cfa6 100644 --- a/Dashboard.js +++ b/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) { diff --git a/FloatingSpace/CodeEditor.js b/FloatingSpace/CodeEditor.js index 0d3b28d1d..8df2e4311 100644 --- a/FloatingSpace/CodeEditor.js +++ b/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() diff --git a/FloatingSpace/StrategyPartTitle.js b/FloatingSpace/StrategyPartTitle.js index 8597bff14..99c027b60 100644 --- a/FloatingSpace/StrategyPartTitle.js +++ b/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; ' diff --git a/Globals.js b/Globals.js index d25a99d1c..b458ec7bc 100644 --- a/Globals.js +++ b/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. diff --git a/Spaces/CockpitSpace.js b/Spaces/CockpitSpace.js index 36d5477ff..8b50c4038 100644 --- a/Spaces/CockpitSpace.js +++ b/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 () {