Play button at the bottom

BottomSpace/PlayStopButton.js

@@ -16,8 +16,8 @@ function newPlayStopButton() {
     thisObject.container.frame.width = 50;
     thisObject.container.frame.height = TOP_SPACE_HEIGHT;
 
-    container.frame.position.x = viewPort.visibleArea.topRight.x;
-    container.frame.position.y = 0;
+    container.frame.position.x = (viewPort.visibleArea.topRight.x - viewPort.visibleArea.topLeft.x) / 2 - 10;
+    container.frame.position.y = viewPort.visibleArea.bottomLeft.y;
 
     container.isDraggeable = false;
     container.isClickeable = true;
@@ -126,14 +126,16 @@ function newPlayStopButton() {
 
         thisObject.container.frame.draw(false, false);
 
+        let breakpointsHeight = 15;
+
         if (canDraw === false) { return; }
 
-        let imageHeight = 15;
-        let imageWidth = 15;
+        let imageHeight = 20;
+        let imageWidth = 20;
 
         let imagePoint = {
             x: thisObject.container.frame.width / 2 - imageWidth / 2,
-            y: thisObject.container.frame.height / 2 - imageHeight / 2
+            y: thisObject.container.frame.height / 2 - imageHeight / 2 + breakpointsHeight
         };
 
         imagePoint = thisObject.container.frame.frameThisPoint(imagePoint);

Panels/TimeControlPanel.js

@@ -50,8 +50,8 @@ function newTimeControlPanel() {
 
         /* Here we will listen to the event when time was changed due to a Bot Execution. */
 
-        canvas.topSpace.playStopButton.container.eventHandler.listenToEvent("Bot Execution Changed Datetime", onBotChangedTime);
-        canvas.topSpace.playStopButton.setDatetime(datetime);
+        canvas.bottomSpace.playStopButton.container.eventHandler.listenToEvent("Bot Execution Changed Datetime", onBotChangedTime);
+        canvas.bottomSpace.playStopButton.setDatetime(datetime);
 
         viewPort.eventHandler.listenToEvent("Zoom Changed", onZoomChanged);
         timePeriod = INITIAL_TIME_PERIOD;
@@ -95,7 +95,7 @@ function newTimeControlPanel() {
     function setDatetime(pDatetime) {
 
         thisObject.datetimeDisplay.currentDatetime = new Date(pDatetime);
-        canvas.topSpace.playStopButton.setDatetime(pDatetime);
+        canvas.bottomSpace.playStopButton.setDatetime(pDatetime);
     }
 
     function addTime(seconds) {

Project.njsproj

@@ -146,7 +146,7 @@
     <Compile Include="TopSpace\EndUser.js">
       <SubType>Code</SubType>
     </Compile>
-    <Compile Include="TopSpace\PlayStopButton.js">
+    <Compile Include="BottomSpace\PlayStopButton.js">
       <SubType>Code</SubType>
     </Compile>
     <Compile Include="BottomSpace\UsersModule.js">

Scripts/AppLoader.js

@@ -34,8 +34,8 @@
                 "BottomSpace/UsersModule.js",
                 "BottomSpace/TeamsModule.js",
                 "BottomSpace/KeyVaultModule.js",
+                "BottomSpace/PlayStopButton.js",
 
-                "TopSpace/PlayStopButton.js",
                 "TopSpace/CompanyLogo.js",
                 "TopSpace/CurrentStartMode.js",
                 "TopSpace/CurrentProcess.js",

Spaces/BottomSpace.js

@@ -7,6 +7,7 @@ function newBottomSpace() {
         UsersModule: undefined,
         TeamsModule: undefined,
         KeyVaultModule: undefined,
+        playStopButton: undefined,
         container: undefined,
         draw: draw,
         getContainer: getContainer,     // returns the inner most container that holds the point received by parameter.
@@ -44,6 +45,8 @@ function newBottomSpace() {
         thisObject.KeyVaultModule = newKeyVaultModule();
         thisObject.KeyVaultModule.initialize();
 
+        thisObject.playStopButton = newPlayStopButton();
+        thisObject.playStopButton.initialize();
     }
 
     function getContainer(point) {
@@ -65,6 +68,9 @@ function newBottomSpace() {
         container = thisObject.KeyVaultModule.getContainer(point);
         if (container !== undefined) { return container; }
 
+        container = thisObject.playStopButton.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;
@@ -81,6 +87,7 @@ function newBottomSpace() {
         thisObject.UsersModule.draw();
         thisObject.TeamsModule.draw();
         thisObject.KeyVaultModule.draw();
+        thisObject.playStopButton.draw();
 
     }
 

Spaces/TopSpace.js

@@ -12,7 +12,6 @@ function newTopSpace() {
         currentProcess: undefined,
         currentStartMode: undefined,
         login: undefined,
-        playStopButton: undefined,
         initialize: initialize
     };
 
@@ -61,9 +60,6 @@ function newTopSpace() {
         thisObject.login = newLogin();
         thisObject.login.initialize();
 
-        thisObject.playStopButton = newPlayStopButton();
-        thisObject.playStopButton.initialize();
-
     }
 
     function getContainer(point) {
@@ -91,9 +87,6 @@ function newTopSpace() {
         container = thisObject.login.getContainer(point);
         if (container !== undefined) { return container; }
 
-        container = thisObject.playStopButton.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;
@@ -112,7 +105,6 @@ function newTopSpace() {
         thisObject.currentProcess.draw();
         thisObject.currentStartMode.draw();
         thisObject.login.draw();
-        thisObject.playStopButton.draw();
 
     }