Bottom Space created

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();
+    }
+}

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;
 
         }
-
     }
-
-}
-
-
+}

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();
 
 

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,

Project.njsproj

@@ -34,6 +34,9 @@
     </Compile>
     <Compile Include="Animation.js" />
     <Compile Include="Azure\azure-storage.blob.js" />
+    <Compile Include="BottomSpace\BreakpointsBar.js">
+      <SubType>Code</SubType>
+    </Compile>
     <Compile Include="CloudVM\CloudRequire.js">
       <SubType>Code</SubType>
     </Compile>
@@ -79,6 +82,9 @@
     <Compile Include="ImageButton.js">
       <SubType>Code</SubType>
     </Compile>
+    <Compile Include="Spaces\BottomSpace.js">
+      <SubType>Code</SubType>
+    </Compile>
     <Compile Include="Spaces\TopSpace.js">
       <SubType>Code</SubType>
     </Compile>
@@ -193,6 +199,7 @@
     <Folder Include="Files\" />
     <Folder Include="FloatingSpace\" />
     <Folder Include="AABrowserAPI\" />
+    <Folder Include="BottomSpace\" />
     <Folder Include="TopSpace\" />
     <Folder Include="Scripts\" />
     <Folder Include="Server\" />

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",

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();
+    }
+}

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;
 

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;
 

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.
             {