From 011c870ed67ef601aa488472f73abf50d66fd8bf Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Tue, 14 May 2019 16:14:25 +0200 Subject: [PATCH] Refactoring to Cockpit Space --- Canvas.js | 65 ++++++---------------- ChartsSpace/ViewPort.js | 4 +- {BottomSpace => CockpitSpace}/UIControl.js | 0 Globals.js | 4 +- Project.njsproj | 10 ++-- Scales/TimePeriodScale.js | 2 +- Spaces/ChartSpace.js | 11 ++-- Spaces/{BottomSpace.js => CockpitSpace.js} | 15 +++-- Spaces/FloatingSpace.js | 6 +- TopSpace/CurrentEvent.js | 2 +- TopSpace/EndUser.js | 2 +- TopSpace/Login.js | 2 +- 12 files changed, 44 insertions(+), 79 deletions(-) rename {BottomSpace => CockpitSpace}/UIControl.js (100%) rename Spaces/{BottomSpace.js => CockpitSpace.js} (96%) diff --git a/Canvas.js b/Canvas.js index 970b151fb..3bc45b757 100644 --- a/Canvas.js +++ b/Canvas.js @@ -36,6 +36,7 @@ function newCanvas () { chartSpace: undefined, floatingSpace: undefined, panelsSpace: undefined, + cockpitSpace: undefined, bottomSpace: undefined, strategySpace: undefined, animation: undefined, @@ -49,41 +50,6 @@ function newCanvas () { let lastContainerMouseOver return thisObject -/* - The canvas object represents a layer on top of the browser canvas object. - - Graphically, thiscanvas object has 5 spaces: - - 1. The "Top Space": It is where Team and User information is displayed. - 2. The "Chart Space": It is where the charts are plotted. - 3. The "Floating Space": It is where floating elements live. There is a physics engine for this layer that allows these elements to flow. - 4. The "Panels Space": It is where panels live. --> This space has yet to be develop, currently pannels are somehow at the Chart Space. - 5. The "Bottom Space": Includes UIControls that other panels can add there. - 6. The "Strategy Spece": Functionality to manage Strategies - - All these spaces are child objects of the Canvas object. - - Canvas - | - | - ---> topSpace - | - | - ---> chartSpace - | - | - ---> flaotingSpace - | - | - ---> panelsSpace - | - | - ---> bottomSpace - | - | - ---> strategySpace -*/ - function finalize () { try { if (INFO_LOG === true) { logger.write('[INFO] finalize -> Entering function.') } @@ -128,8 +94,8 @@ function newCanvas () { thisObject.strategySpace = newStrategySpace() await thisObject.strategySpace.initialize() - thisObject.bottomSpace = newBottomSpace() - thisObject.bottomSpace.initialize() + thisObject.cockpitSpace = newCockpitSpace() + thisObject.cockpitSpace.initialize() thisObject.panelsSpace = newPanelsSpace() thisObject.panelsSpace.initialize() @@ -140,6 +106,8 @@ function newCanvas () { thisObject.chartSpace = newChartSpace() thisObject.chartSpace.initialize(onCharSpaceInitialized) + thisObject.bottomSpace = thisObject.cockpitSpace + function onCharSpaceInitialized (err) { try { if (INFO_LOG === true) { logger.write('[INFO] initialize -> onCharSpaceInitialized -> Entering function.') } @@ -174,8 +142,8 @@ function newCanvas () { animation.addCallBackFunction('Chart Space Physics', thisObject.chartSpace.physics, onFunctionAdded) animation.addCallBackFunction('Panels Space', thisObject.panelsSpace.draw, onFunctionAdded) animation.addCallBackFunction('ViewPort Animate', viewPort.animate, onFunctionAdded) - animation.addCallBackFunction('Bottom Space Draw', thisObject.bottomSpace.draw, onFunctionAdded) - animation.addCallBackFunction('Bottom Space Physics', thisObject.bottomSpace.physics, onFunctionAdded) + animation.addCallBackFunction('CockpitSpace Draw', thisObject.cockpitSpace.draw, onFunctionAdded) + animation.addCallBackFunction('CockpitSpace Physics', thisObject.cockpitSpace.physics, onFunctionAdded) animation.addCallBackFunction('Top Space Draw', thisObject.topSpace.draw, onFunctionAdded) animation.addCallBackFunction('Strategy Space Draw', thisObject.strategySpace.draw, onFunctionAdded) animation.addCallBackFunction('Splash Screen Draw', splashScreen.draw, onFunctionAdded) @@ -334,9 +302,9 @@ function newCanvas () { return } - /* We check if the mouse is over an element of the Bottom Space / */ + /* We check if the mouse is over an element of the CockpitSpace / */ - container = thisObject.bottomSpace.getContainer(point) + container = thisObject.cockpitSpace.getContainer(point) if (container !== undefined && container.isDraggeable === true) { containerBeingDragged = container @@ -425,9 +393,9 @@ function newCanvas () { return } - /* We check if the mouse is over an element of the Bottom Space / */ + /* We check if the mouse is over an element of the CockpitSpace / */ - container = thisObject.bottomSpace.getContainer(point) + container = thisObject.cockpitSpace.getContainer(point) if (container !== undefined && container.isClickeable === true) { container.eventHandler.raiseEvent('onMouseClick', point) @@ -583,10 +551,10 @@ function newCanvas () { } } - /* We check if the mouse is over an element of the Bottom Space / */ + /* We check if the mouse is over an element of the CockpitSpace / */ - if (thisObject.bottomSpace !== undefined) { - container = thisObject.bottomSpace.getContainer(point) + if (thisObject.cockpitSpace !== undefined) { + container = thisObject.cockpitSpace.getContainer(point) if (container !== undefined && container.detectMouseOver === true) { containerFound() @@ -665,9 +633,9 @@ function newCanvas () { return false // This instructs the browser not to take the event and scroll the page. } - /* We try the Bottom Space. */ + /* We try the CockpitSpace. */ - container = canvas.bottomSpace.getContainer({ x: point.x, y: point.y }) + container = canvas.cockpitSpace.getContainer({ x: point.x, y: point.y }) if (container !== undefined && container.isWheelable === true) { container.eventHandler.raiseEvent('onMouseWheel', event) @@ -760,4 +728,3 @@ function newCanvas () { } } } - diff --git a/ChartsSpace/ViewPort.js b/ChartsSpace/ViewPort.js index e3d4ee247..264c5b07b 100644 --- a/ChartsSpace/ViewPort.js +++ b/ChartsSpace/ViewPort.js @@ -12,7 +12,7 @@ function newViewPort () { let ANIMATION_INCREMENT = 0.25 let TOP_MARGIN = 15 + TOP_SPACE_HEIGHT - let BOTTOM_MARGIN = 20 + BOTTOM_SPACE_HEIGHT + let BOTTOM_MARGIN = 20 + COCKPIT_SPACE_HEIGHT let LEFT_MARGIN = 50 let RIGHT_MARGIN = 50 let MARGINS = { @@ -84,7 +84,7 @@ function newViewPort () { function resize () { TOP_MARGIN = 15 + TOP_SPACE_HEIGHT - BOTTOM_MARGIN = 20 + browserCanvas.height - BOTTOM_SPACE_POSITION + BOTTOM_MARGIN = 20 + browserCanvas.height - COCKPIT_SPACE_POSITION LEFT_MARGIN = 50 RIGHT_MARGIN = 50 MARGINS = { diff --git a/BottomSpace/UIControl.js b/CockpitSpace/UIControl.js similarity index 100% rename from BottomSpace/UIControl.js rename to CockpitSpace/UIControl.js diff --git a/Globals.js b/Globals.js index 039d5dbcd..3261d18fd 100644 --- a/Globals.js +++ b/Globals.js @@ -163,10 +163,10 @@ const MIN_PLOTABLE_DATE = new Date(2015, 0, 1, 0, 0, 0); const MAX_PLOTABLE_DATE = maxDate; const TOP_SPACE_HEIGHT = 5; -const BOTTOM_SPACE_HEIGHT = 40; +const COCKPIT_SPACE_HEIGHT = 40; const BREAKPOINT_HEIGHT = 15; const SIDE_PANEL_WIDTH = 450 -let BOTTOM_SPACE_POSITION = browserCanvas.height - BOTTOM_SPACE_HEIGHT +let COCKPIT_SPACE_POSITION = browserCanvas.height - COCKPIT_SPACE_HEIGHT const PRODUCT_CARD_STATUS = { ON: 'on', diff --git a/Project.njsproj b/Project.njsproj index 4634a91ad..7cc00eb05 100644 --- a/Project.njsproj +++ b/Project.njsproj @@ -32,13 +32,13 @@ - + Code Code - + Code @@ -85,7 +85,7 @@ Code - + Code @@ -112,7 +112,7 @@ Code - + Code @@ -177,7 +177,7 @@ - + diff --git a/Scales/TimePeriodScale.js b/Scales/TimePeriodScale.js index ab3712520..55ba9a6b8 100644 --- a/Scales/TimePeriodScale.js +++ b/Scales/TimePeriodScale.js @@ -187,7 +187,7 @@ to be visible at the top of the viewPort. */ /* Lets start the drawing. */ - let displacement = viewPort.margins.BOTTOM - BOTTOM_SPACE_HEIGHT + let displacement = viewPort.margins.BOTTOM - COCKPIT_SPACE_HEIGHT /* browserCanvasContext.beginPath() diff --git a/Spaces/ChartSpace.js b/Spaces/ChartSpace.js index 39b9ac34b..2af37d1d0 100644 --- a/Spaces/ChartSpace.js +++ b/Spaces/ChartSpace.js @@ -117,8 +117,8 @@ function newChartSpace () { returnPoint.x = 0 } - if (point.y > BOTTOM_SPACE_POSITION + BOTTOM_SPACE_HEIGHT / 2) { - returnPoint.y = BOTTOM_SPACE_POSITION + BOTTOM_SPACE_HEIGHT / 2 + if (point.y > COCKPIT_SPACE_POSITION + COCKPIT_SPACE_HEIGHT / 2) { + returnPoint.y = COCKPIT_SPACE_POSITION + COCKPIT_SPACE_HEIGHT / 2 } if (point.y < 0) { @@ -137,7 +137,7 @@ function newChartSpace () { return false } - if (point.y > BOTTOM_SPACE_POSITION + BOTTOM_SPACE_HEIGHT / 2) { + if (point.y > COCKPIT_SPACE_POSITION + COCKPIT_SPACE_HEIGHT / 2) { return false } @@ -149,7 +149,7 @@ function newChartSpace () { } function physics () { - thisObject.container.frame.height = BOTTOM_SPACE_POSITION + thisObject.container.frame.height = COCKPIT_SPACE_POSITION if (thisObject.container.frame.height <= 0 / 100) { thisObject.visible = false @@ -180,7 +180,7 @@ function newChartSpace () { let toPoint = { x: browserCanvas.width, - y: BOTTOM_SPACE_POSITION + y: COCKPIT_SPACE_POSITION } browserCanvasContext.beginPath() @@ -199,4 +199,3 @@ function newChartSpace () { } } } - diff --git a/Spaces/BottomSpace.js b/Spaces/CockpitSpace.js similarity index 96% rename from Spaces/BottomSpace.js rename to Spaces/CockpitSpace.js index 3bee0df9d..c84447c60 100644 --- a/Spaces/BottomSpace.js +++ b/Spaces/CockpitSpace.js @@ -1,6 +1,6 @@ - function newBottomSpace () { - const MODULE_NAME = 'Bottom Space' + function newCockpitSpace () { + const MODULE_NAME = 'CockpitSpace' const ERROR_LOG = true let thisObject = { @@ -49,10 +49,10 @@ function resize () { thisObject.container.frame.position.x = 0 - thisObject.container.frame.position.y = browserCanvas.height - BOTTOM_SPACE_HEIGHT + thisObject.container.frame.position.y = browserCanvas.height - COCKPIT_SPACE_HEIGHT thisObject.container.frame.width = browserCanvas.width - thisObject.container.frame.height = BOTTOM_SPACE_HEIGHT + thisObject.container.frame.height = COCKPIT_SPACE_HEIGHT } function physics () { @@ -67,8 +67,8 @@ thisObject.container.isDraggeable = false } - if (thisObject.container.frame.position.y > browserCanvas.height * 99.5 / 100 - BOTTOM_SPACE_HEIGHT) { - thisObject.container.frame.position.y = browserCanvas.height - BOTTOM_SPACE_HEIGHT + if (thisObject.container.frame.position.y > browserCanvas.height * 99.5 / 100 - COCKPIT_SPACE_HEIGHT) { + thisObject.container.frame.position.y = browserCanvas.height - COCKPIT_SPACE_HEIGHT thisObject.status = 'BOTTOM' canvas.strategySpace.makeInvisible() } else { @@ -83,7 +83,7 @@ canvas.panelsSpace.visible = true } - BOTTOM_SPACE_POSITION = thisObject.container.frame.position.y + COCKPIT_SPACE_POSITION = thisObject.container.frame.position.y viewPort.resize() } @@ -305,4 +305,3 @@ browserCanvasContext.stroke() } } - diff --git a/Spaces/FloatingSpace.js b/Spaces/FloatingSpace.js index 32752e594..1c9aeb5dd 100644 --- a/Spaces/FloatingSpace.js +++ b/Spaces/FloatingSpace.js @@ -79,8 +79,8 @@ function newFloatingSpace () { returnPoint.x = 0 } - if (point.y < BOTTOM_SPACE_POSITION + BOTTOM_SPACE_HEIGHT) { - returnPoint.y = BOTTOM_SPACE_POSITION + BOTTOM_SPACE_HEIGHT + if (point.y < COCKPIT_SPACE_POSITION + COCKPIT_SPACE_HEIGHT) { + returnPoint.y = COCKPIT_SPACE_POSITION + COCKPIT_SPACE_HEIGHT } if (point.y > browserCanvas.height) { @@ -99,7 +99,7 @@ function newFloatingSpace () { return false } - if (point.y < BOTTOM_SPACE_POSITION + BOTTOM_SPACE_HEIGHT) { + if (point.y < COCKPIT_SPACE_POSITION + COCKPIT_SPACE_HEIGHT) { return false } diff --git a/TopSpace/CurrentEvent.js b/TopSpace/CurrentEvent.js index 81a5c92d3..b2831e277 100644 --- a/TopSpace/CurrentEvent.js +++ b/TopSpace/CurrentEvent.js @@ -70,7 +70,7 @@ function newCurrentEvent () { thisObject.container = container thisObject.container.frame.width = 150 - thisObject.container.frame.height = BOTTOM_SPACE_HEIGHT + thisObject.container.frame.height = COCKPIT_SPACE_HEIGHT resize() diff --git a/TopSpace/EndUser.js b/TopSpace/EndUser.js index 6edaf5b44..b8699eb69 100644 --- a/TopSpace/EndUser.js +++ b/TopSpace/EndUser.js @@ -12,7 +12,7 @@ function newEndUser () { thisObject.container = container thisObject.container.frame.width = 200 - thisObject.container.frame.height = BOTTOM_SPACE_HEIGHT + thisObject.container.frame.height = COCKPIT_SPACE_HEIGHT container.frame.position.x = viewPort.visibleArea.topRight.x - thisObject.container.frame.width * 5 container.frame.position.y = viewPort.visibleArea.bottomLeft.y + BREAKPOINT_HEIGHT diff --git a/TopSpace/Login.js b/TopSpace/Login.js index 7d242191c..61aa996c1 100644 --- a/TopSpace/Login.js +++ b/TopSpace/Login.js @@ -19,7 +19,7 @@ function newLogin () { thisObject.container = container thisObject.container.frame.width = 200 - thisObject.container.frame.height = BOTTOM_SPACE_HEIGHT + thisObject.container.frame.height = COCKPIT_SPACE_HEIGHT container.frame.position.x = viewPort.visibleArea.topRight.x - thisObject.container.frame.width * 1 container.frame.position.y = viewPort.visibleArea.bottomLeft.y + BREAKPOINT_HEIGHT