From c10f9ca7947789ff0870d71f1e710f19743fa640 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Fri, 1 Jun 2018 10:50:03 +0200 Subject: [PATCH] Bottom Space created --- BottomSpace/BreakpointsBar.js | 72 ++++++++++++++++++++++ Canvas.js | 113 +++++++++++++++++++--------------- Dashboard.js | 1 + Panels/ProductsPanel.js | 2 +- Project.njsproj | 7 +++ Scripts/AppLoader.js | 3 + Spaces/BottomSpace.js | 84 +++++++++++++++++++++++++ Spaces/TopSpace.js | 3 - ViewPort.js | 2 +- server.js | 8 +++ 10 files changed, 241 insertions(+), 54 deletions(-) create mode 100644 BottomSpace/BreakpointsBar.js create mode 100644 Spaces/BottomSpace.js diff --git a/BottomSpace/BreakpointsBar.js b/BottomSpace/BreakpointsBar.js new file mode 100644 index 000000000..8ad01fc5b --- /dev/null +++ b/BottomSpace/BreakpointsBar.js @@ -0,0 +1,72 @@ + +function newBreakpointsBar() { + + var thisObject = { + container: undefined, + draw: draw, + getContainer: getContainer, // returns the inner most container that holds the point received by parameter. + initialize: initialize + }; + + var container = newContainer(); + container.initialize(); + thisObject.container = container; + + thisObject.container.frame.width = browserCanvasContext.width; + thisObject.container.frame.height = 15; + + container.frame.position.x = 0; + container.frame.position.y = 0; + + container.isDraggeable = false; + + let logo; + let canDrawLogo = false; + + return thisObject; + + function initialize() { + + + + } + + function getContainer(point) { + + let container; + + /* First we check if this point is inside this object UI. */ + + if (thisObject.container.frame.isThisPointHere(point, true) === true) { + + return this.container; + + } else { + + /* This point does not belong to this space. */ + + return undefined; + } + + } + + function draw() { + + let opacity = 1; + + browserCanvasContext.beginPath(); + + let zeroPoint = { + x: 0, + y: 0 + }; + + zeroPoint = thisObject.container.frame.frameThisPoint(zeroPoint); + + let breakpointsHeight = 15; + + browserCanvasContext.closePath(); + + browserCanvasContext.fill(); + } +} \ No newline at end of file diff --git a/Canvas.js b/Canvas.js index 3c1b50996..46d9d4692 100644 --- a/Canvas.js +++ b/Canvas.js @@ -1,36 +1,4 @@  -/* - -The canvas object represents a layer on top of the browser canvas object. - -Graphically, thiscanvas object has 4 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. - -All these spaces are child objects of the Canvas object. - -Canvas - | - | - ---> topSpace - | - | - ---> chartSpace - | - | - ---> flaotingSpace - | - | - ---> panelsSpace - -*/ - let browserCanvas; // This is the canvas object of the browser. let browserCanvasContext; // The context of the canvas object. @@ -40,6 +8,41 @@ let splashScreenNeeded = true; function newCanvas() { + /* + The canvas object represents a layer on top of the browser canvas object. + + Graphically, thiscanvas object has 4 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 the breakpoint bar and a toolbar. + + All these spaces are child objects of the Canvas object. + + Canvas + | + | + ---> topSpace + | + | + ---> chartSpace + | + | + ---> flaotingSpace + | + | + ---> panelsSpace + | + | + ---> bottomSpace +*/ + const MODULE_NAME = "Canvas"; const INFO_LOG = false; const ERROR_LOG = true; @@ -69,6 +72,7 @@ function newCanvas() { chartSpace: undefined, floatingSpace: undefined, panelsSpace: undefined, + bottomSpace: undefined, animation: undefined, initialize: initialize }; @@ -87,7 +91,7 @@ function newCanvas() { addCanvasEvents(); - /* Instantiate all the children of Canvas object */ + /* Instantiate all the children spaces of Canvas object */ thisObject.topSpace = newTopSpace(); thisObject.topSpace.initialize(); @@ -101,6 +105,9 @@ function newCanvas() { thisObject.chartSpace = newChartSpace(); thisObject.chartSpace.initialize(onCharSpaceInitialized); + thisObject.bottomSpace = newBottomSpace(); + thisObject.bottomSpace.initialize(); + function onCharSpaceInitialized(err) { viewPort.raiseEvents(); // These events will impacts on objects just initialized. } @@ -125,6 +132,7 @@ function newCanvas() { animation.addCallBackFunction("Splash Screen", splashScreen.draw, onFunctionAdded); animation.addCallBackFunction("ViewPort Animate", viewPort.animate, onFunctionAdded); animation.addCallBackFunction("ViewPort Draw", viewPort.draw, onFunctionAdded); + animation.addCallBackFunction("Bottom Space", thisObject.bottomSpace.draw, onFunctionAdded); animation.addCallBackFunction("Top Space", thisObject.topSpace.draw, onFunctionAdded); animation.start(onStart); @@ -246,6 +254,17 @@ function newCanvas() { return; } + /* We check if the mouse is over an element of the Bottom Space / */ + + container = thisObject.bottomSpace.getContainer(point); + + if (container !== undefined && container.isDraggeable === true) { + + containerBeingDragged = container; + containerDragStarted = true; + return; + } + /* We check if the mouse is over a panel/ */ container = thisObject.panelsSpace.getContainer(point); @@ -301,6 +320,16 @@ function newCanvas() { return; } + /* We check if the mouse is over an element of the Bottom Space / */ + + container = thisObject.bottomSpace.getContainer(point); + + if (container !== undefined && container.isClickeable === true) { + + container.eventHandler.raiseEvent('onMouseClick', event); + return; + } + /* We check if the mouse is over a panel/ */ container = thisObject.panelsSpace.getContainer(point); @@ -461,28 +490,18 @@ function newCanvas() { let upCopyNoTranf; upCopyNoTranf = viewPort.unzoomThisPoint(upCopy); - //upCopyNoTranf = containerBeingDragged.zoom.unzoomThisPoint(upCopyNoTranf); - - /* - let displaceVector = { - x: upCopyNoTranf.x - downCopyNoTransf.x, - y: upCopyNoTranf.y - downCopyNoTransf.y - }; - */ let displaceVector = { x: dragVector.upX - dragVector.downX, y: dragVector.upY - dragVector.downY }; - if (viewPortBeingDragged) { viewPort.displace(displaceVector); } - - + if (containerBeingDragged !== undefined) { containerBeingDragged.frame.position.x = containerBeingDragged.frame.position.x + displaceVector.x; @@ -497,9 +516,5 @@ function newCanvas() { dragVector.downY = dragVector.upY; } - } - -} - - +} \ No newline at end of file diff --git a/Dashboard.js b/Dashboard.js index 0c682885b..6ca3fdf22 100644 --- a/Dashboard.js +++ b/Dashboard.js @@ -133,6 +133,7 @@ let INITIAL_ZOOM_LEVEL = -26; // This is the zoom level at the view port i let INITIAL_TIME_PERIOD = recalculatePeriod(INITIAL_ZOOM_LEVEL); // This value will be overwritten at the viewPort.initialize if the user had a prevous session with this same browser. const TOP_SPACE_HEIGHT = 50; +const BOTTOM_SPACE_HEIGHT = 65; var viewPort = newViewPort(); diff --git a/Panels/ProductsPanel.js b/Panels/ProductsPanel.js index 5074da5c9..524b0e8be 100644 --- a/Panels/ProductsPanel.js +++ b/Panels/ProductsPanel.js @@ -32,7 +32,7 @@ function initialize() { thisObject.container.frame.width = 350; - thisObject.container.frame.height = viewPort.visibleArea.bottomRight.y - viewPort.visibleArea.topLeft.y + 15; + thisObject.container.frame.height = viewPort.visibleArea.bottomRight.y - viewPort.visibleArea.topLeft.y; var position = { x: viewPort.visibleArea.topLeft.x, diff --git a/Project.njsproj b/Project.njsproj index f7b42d4aa..984467d4f 100644 --- a/Project.njsproj +++ b/Project.njsproj @@ -34,6 +34,9 @@ + + Code + Code @@ -79,6 +82,9 @@ Code + + Code + Code @@ -193,6 +199,7 @@ + diff --git a/Scripts/AppLoader.js b/Scripts/AppLoader.js index 924334e4b..013101c25 100644 --- a/Scripts/AppLoader.js +++ b/Scripts/AppLoader.js @@ -21,6 +21,8 @@ /* PlotterPanels */ + "BottomSpace/BreakpointsBar.js", + "TopSpace/PlayStopButton.js", "TopSpace/CompanyLogo.js", "TopSpace/CurrentStartMode.js", @@ -32,6 +34,7 @@ "Panels/TimeControlPanel.js", "Panels/ProductsPanel.js", + "Spaces/BottomSpace.js", "Spaces/TopSpace.js", "Spaces/PanelsSpace.js", "Spaces/ChartSpace.js", diff --git a/Spaces/BottomSpace.js b/Spaces/BottomSpace.js new file mode 100644 index 000000000..85b665d0e --- /dev/null +++ b/Spaces/BottomSpace.js @@ -0,0 +1,84 @@ + +function newBottomSpace() { + + var thisObject = { + container: undefined, + draw: draw, + getContainer: getContainer, // returns the inner most container that holds the point received by parameter. + breakpointsBar: undefined, + initialize: initialize + }; + + var container = newContainer(); + container.initialize(); + thisObject.container = container; + + thisObject.container.frame.width = browserCanvas.width; + thisObject.container.frame.height = BOTTOM_SPACE_HEIGHT; + + container.frame.position.x = 0; + container.frame.position.y = viewPort.visibleArea.bottomLeft.y; + + container.isDraggeable = false; + + return thisObject; + + function initialize() { + + thisObject.breakpointsBar = newBreakpointsBar(); + thisObject.breakpointsBar.initialize(); + + } + + function getContainer(point) { + + let container; + + container = thisObject.breakpointsBar.getContainer(point); + if (container !== undefined) { return container; } + + /* The point does not belong to any inner container, so we return the current container. */ + + return thisObject.container; + + } + + function draw() { + + thisObject.container.frame.draw(false, false); + + drawBackground(); + thisObject.breakpointsBar.draw(); + } + + function drawBackground() { + + let opacity = 1; + + let zeroPoint = { + x: 0, + y: 0 + }; + + zeroPoint = thisObject.container.frame.frameThisPoint(zeroPoint); + + let breakpointsHeight = 15; + + browserCanvasContext.beginPath(); + + browserCanvasContext.rect(zeroPoint.x, zeroPoint.y, zeroPoint.x + thisObject.container.frame.width, zeroPoint.y + breakpointsHeight); + browserCanvasContext.fillStyle = 'rgba(255, 255, 255, ' + opacity + ')'; + + browserCanvasContext.closePath(); + browserCanvasContext.fill(); + + browserCanvasContext.beginPath(); + + browserCanvasContext.rect(zeroPoint.x, zeroPoint.y + breakpointsHeight, zeroPoint.x + thisObject.container.frame.width, zeroPoint.y + thisObject.container.frame.height - breakpointsHeight); + browserCanvasContext.fillStyle = 'rgba(0, 0, 0, ' + opacity + ')'; + + browserCanvasContext.closePath(); + + browserCanvasContext.fill(); + } +} \ No newline at end of file diff --git a/Spaces/TopSpace.js b/Spaces/TopSpace.js index 945b739fd..14ff0f144 100644 --- a/Spaces/TopSpace.js +++ b/Spaces/TopSpace.js @@ -22,9 +22,6 @@ function newTopSpace() { thisObject.container.frame.width = browserCanvas.width; thisObject.container.frame.height = TOP_SPACE_HEIGHT; - container.displacement.containerName = "Top Space"; - container.frame.containerName = "Top Space"; - container.frame.position.x = 0; container.frame.position.y = 0; diff --git a/ViewPort.js b/ViewPort.js index 8532ce54d..0669caf5c 100644 --- a/ViewPort.js +++ b/ViewPort.js @@ -5,7 +5,7 @@ function newViewPort() { let ANIMATION_INCREMENT = 0.25; const TOP_MARGIN = 15 + TOP_SPACE_HEIGHT; - const BOTTOM_MARGIN = 0; + const BOTTOM_MARGIN = BOTTOM_SPACE_HEIGHT; const LEFT_MARGIN = 50; const RIGHT_MARGIN = 50; diff --git a/server.js b/server.js index 78aaf6726..2a47a0e9c 100644 --- a/server.js +++ b/server.js @@ -399,6 +399,14 @@ function onBrowserRequest(request, response) { } break; + case "BottomSpace": // This means the BottomSpace folder. + { + + respondWithFile('./BottomSpace/' + requestParameters[2], response); + + } + break; + case "TopSpace": // This means the TopSpace folder. {