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