Refactoring to Cockpit Space

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 () {
     }
   }
 }
-

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

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

Project.njsproj

@@ -32,13 +32,13 @@
   </PropertyGroup>
   <ItemGroup>
     <Compile Include="Animation.js" />
-    <Compile Include="BottomSpace\DeleteTradingHistory.js">
+    <Compile Include="CockpitSpace\DeleteTradingHistory.js">
       <SubType>Code</SubType>
     </Compile>
     <Compile Include="BreakpointsBar.js">
       <SubType>Code</SubType>
     </Compile>
-    <Compile Include="BottomSpace\ChartAspectRatio.js">
+    <Compile Include="CockpitSpace\ChartAspectRatio.js">
       <SubType>Code</SubType>
     </Compile>
     <Compile Include="CloudVM\CloudRequire.js">
@@ -85,7 +85,7 @@
     <Compile Include="ImageButton.js">
       <SubType>Code</SubType>
     </Compile>
-    <Compile Include="Spaces\BottomSpace.js">
+    <Compile Include="Spaces\CockpitSpace.js">
       <SubType>Code</SubType>
     </Compile>
     <Compile Include="Spaces\TopSpace.js">
@@ -112,7 +112,7 @@
     <Compile Include="TopSpace\EndUser.js">
       <SubType>Code</SubType>
     </Compile>
-    <Compile Include="BottomSpace\PlayStopButton.js">
+    <Compile Include="CockpitSpace\PlayStopButton.js">
       <SubType>Code</SubType>
     </Compile>
     <Compile Include="WebDebugLog.js">
@@ -177,7 +177,7 @@
     <Folder Include="Exchange\" />
     <Folder Include="Files\" />
     <Folder Include="FloatingSpace\" />
-    <Folder Include="BottomSpace\" />
+    <Folder Include="CockpitSpace\" />
     <Folder Include="Scales\" />
     <Folder Include="TopSpace\" />
     <Folder Include="Spaces\" />

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

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 () {
     }
   }
 }
-

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

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
     }
 

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

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

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