ASPECT RATIO global const eliminated

BottomSpace/ChartAspectRatio.js

@@ -0,0 +1,116 @@
+function newChartAspectRatio() {
+
+    let thisObject = {
+        aspectRatio: undefined,
+        draw: draw,
+        getContainer: getContainer,
+        initialize: initialize
+    };
+
+    let container = newContainer();
+    container.initialize();
+    thisObject.container = container;
+
+    thisObject.container.frame.width = 50;
+    thisObject.container.frame.height = BOTTOM_SPACE_HEIGHT;
+
+    container.frame.position.x = viewPort.visibleArea.topRight.x - thisObject.container.frame.width * 2;
+    container.frame.position.y = viewPort.visibleArea.bottomLeft.y;
+
+    container.isDraggeable = false;
+    container.isClickeable = false;
+    container.isWheeleable = true;
+
+    thisObject.aspectRatio = {};
+
+    const INITIAL_Y_ASPECT_RATIO = 2 / 10;
+    const MIN_Y_ASPECT_RATIO = 1 / 10;
+    const MAX_Y_ASPECT_RATIO = 10 / 10;
+
+    thisObject.aspectRatio.x = 1;
+    thisObject.aspectRatio.y = INITIAL_Y_ASPECT_RATIO;
+
+    canDrawIcon = false;
+
+    return thisObject;
+
+    function initialize() {
+
+        icon = new Image();
+
+        icon.onload = onImageLoad;
+
+        function onImageLoad() {
+            canDrawIcon = true;
+        }
+
+        icon.src = "Images/scale.y.png";
+
+        thisObject.container.eventHandler.listenToEvent('Mouse Wheel', onMouseWheel);
+
+    }
+
+    function onMouseWheel(pDelta) {
+
+        if (pDelta < 0) {
+            pDelta = -0.1;
+        } else {
+            pDelta = 0.1;
+        }
+
+        thisObject.aspectRatio.y = thisObject.aspectRatio.y + pDelta;
+        thisObject.aspectRatio.y = Math.round(thisObject.aspectRatio.y * 100) / 100;
+
+        if (thisObject.aspectRatio.y < MIN_Y_ASPECT_RATIO) {
+
+            thisObject.aspectRatio.y = MIN_Y_ASPECT_RATIO;
+
+        }
+
+        if (thisObject.aspectRatio.y > MAX_Y_ASPECT_RATIO) {
+
+            thisObject.aspectRatio.y = MAX_Y_ASPECT_RATIO;
+
+        }
+    }
+
+    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() {
+
+        thisObject.container.frame.draw(false, false);
+
+        if (canDrawIcon === false) { return; }
+
+        let breakpointsHeight = 15;
+
+        let imageHeight = 30;
+        let imageWidth = 15;
+
+        let imagePoint = {
+            x: 10,
+            y: thisObject.container.frame.height / 2 - imageHeight / 2 + breakpointsHeight
+        };
+
+        imagePoint = thisObject.container.frame.frameThisPoint(imagePoint);
+
+        browserCanvasContext.drawImage(icon, imagePoint.x, imagePoint.y, imageWidth, imageHeight);
+    }
+
+}

BottomSpace/DeleteTradingHistory.js

@@ -12,7 +12,7 @@ function newDeleteTradingHistory() {
     container.initialize();
     thisObject.container = container;
 
-    thisObject.container.frame.width = 150;
+    thisObject.container.frame.width = 50;
     thisObject.container.frame.height = BOTTOM_SPACE_HEIGHT;
 
     container.frame.position.x = viewPort.visibleArea.topRight.x;

Canvas.js

@@ -94,6 +94,9 @@ function newCanvas() {
             thisObject.topSpace = newTopSpace();
             thisObject.topSpace.initialize();
 
+            thisObject.bottomSpace = newBottomSpace();
+            thisObject.bottomSpace.initialize();
+
             thisObject.panelsSpace = newPanelsSpace();
             thisObject.panelsSpace.initialize();
 
@@ -103,9 +106,6 @@ function newCanvas() {
             thisObject.chartSpace = newChartSpace();
             thisObject.chartSpace.initialize(onCharSpaceInitialized);
 
-            thisObject.bottomSpace = newBottomSpace();
-            thisObject.bottomSpace.initialize();
-
             function onCharSpaceInitialized(err) {
 
                 try {
@@ -527,6 +527,17 @@ function newCanvas() {
                 return false;  // This instructs the browser not to take the event and scroll the page. 
             }
 
+            /* We try the Bottom Space. */
+
+            let bottomContainer = canvas.bottomSpace.getContainer({ x: event.pageX, y: event.pageY });
+
+            if (bottomContainer !== undefined && bottomContainer.isWheeleable === true) {
+
+                bottomContainer.eventHandler.raiseEvent("Mouse Wheel", event.wheelDelta);
+                return false;  // This instructs the browser not to take the event and scroll the page. 
+
+            } 
+
             /* Finally we try the Chart Space. */
 
             let chartContainer = canvas.chartSpace.getContainer({ x: event.pageX, y: event.pageY });

Globals.js

@@ -129,9 +129,6 @@ const _1_MINUTE_IN_MILISECONDS = 1 * 60 * 1000;
 
 const EARLIEST_DATE = new Date(2014, 0, 18, 4, 26, 8);
 
-const MIN_CHART_ASPECT_RATIO = 2 / 10;
-let CHART_ASPECT_RATIO = MIN_CHART_ASPECT_RATIO;
-
 const TOP_SPACE_HEIGHT = 50;
 const BOTTOM_SPACE_HEIGHT = 50;
 

Project.njsproj

@@ -43,6 +43,9 @@
     <Compile Include="BreakpointsBar.js">
       <SubType>Code</SubType>
     </Compile>
+    <Compile Include="BottomSpace\ChartAspectRatio.js">
+      <SubType>Code</SubType>
+    </Compile>
     <Compile Include="CloudVM\CloudRequire.js">
       <SubType>Code</SubType>
     </Compile>

Scales/ChartGrid.js

@@ -67,7 +67,7 @@
 
         const basePeriod = {
             x: 8 * 60 * 60 * 1000,
-            y: timeLineCoordinateSystem.max.y / 1000 / CHART_ASPECT_RATIO
+            y: timeLineCoordinateSystem.max.y / 1000 / canvas.bottomSpace.chartAspectRatio.aspectRatio.y
         };
 
         let period = {

Scales/RightScale.js

@@ -39,13 +39,6 @@
             pDelta = 0.1;
         }
 
-        CHART_ASPECT_RATIO = CHART_ASPECT_RATIO + pDelta;
-
-        if (CHART_ASPECT_RATIO < MIN_CHART_ASPECT_RATIO) {
-
-            CHART_ASPECT_RATIO = MIN_CHART_ASPECT_RATIO;
-
-        }
     }
 
     function getContainer(point) {

Scripts/AppLoader.js

@@ -30,6 +30,7 @@
                 "Globals.js",
 
                 "BottomSpace/DeleteTradingHistory.js",
+                "BottomSpace/ChartAspectRatio.js",
 
                 "TopSpace/PlayStopButton.js",
                 "TopSpace/CompanyLogo.js",

Spaces/BottomSpace.js

@@ -3,6 +3,7 @@ function newBottomSpace() {
 
     var thisObject = {
         deleteTradingHistory: undefined,
+        chartAspectRatio: undefined,
         container: undefined,
         draw: draw,
         getContainer: getContainer,     // returns the inner most container that holds the point received by parameter.
@@ -28,6 +29,9 @@ function newBottomSpace() {
         thisObject.deleteTradingHistory = newDeleteTradingHistory();
         thisObject.deleteTradingHistory.initialize();
 
+        thisObject.chartAspectRatio = newChartAspectRatio();
+        thisObject.chartAspectRatio.initialize();
+
     }
 
     function getContainer(point) {
@@ -37,6 +41,9 @@ function newBottomSpace() {
         container = thisObject.deleteTradingHistory.getContainer(point);
         if (container !== undefined) { return container; }
 
+        container = thisObject.chartAspectRatio.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;
@@ -49,6 +56,7 @@ function newBottomSpace() {
 
         drawBackground();
         thisObject.deleteTradingHistory.draw();
+        thisObject.chartAspectRatio.draw();
 
     }
 

TimeMachine.js

@@ -61,7 +61,7 @@ function newTimeMachine() {
         timelineChart.container.parentContainer = thisObject.container;
 
         timelineChart.container.frame.width = thisObject.container.frame.width * 1;
-        timelineChart.container.frame.height = thisObject.container.frame.height * 1 * CHART_ASPECT_RATIO;
+        timelineChart.container.frame.height = thisObject.container.frame.height * 1 * canvas.bottomSpace.chartAspectRatio.aspectRatio.y;
 
         timelineChart.container.frame.position.x = thisObject.container.frame.width / 2 - timelineChart.container.frame.width / 2;
         timelineChart.container.frame.position.y = timelineChart.container.frame.height * 1.5 * iteration;
@@ -116,7 +116,7 @@ function newTimeMachine() {
                 timelineChart.container.parentContainer = thisObject.container;
 
                 timelineChart.container.frame.width = thisObject.container.frame.width * 1;
-                timelineChart.container.frame.height = thisObject.container.frame.height * 1 * CHART_ASPECT_RATIO;
+                timelineChart.container.frame.height = thisObject.container.frame.height * 1 * canvas.bottomSpace.chartAspectRatio.aspectRatio.y;
 
                 timelineChart.container.frame.position.x = thisObject.container.frame.width / 2 - timelineChart.container.frame.width / 2;
                 timelineChart.container.frame.position.y = timelineChart.container.frame.height * 1.5 * iteration;

TimelineChart.js

@@ -946,7 +946,8 @@
 
         if (thisObject.container.frame.isInViewPort()) {
 
-            thisObject.container.frame.height = CHART_SPACE_HEIGHT * CHART_ASPECT_RATIO;
+            thisObject.container.frame.height = CHART_SPACE_HEIGHT * canvas.bottomSpace.chartAspectRatio.aspectRatio.y;
+            recalculateScale();
 
             this.container.frame.draw();