Charting Details Fixed

Canvas.js

@@ -763,9 +763,7 @@ function newCanvas() {
                     return
                 } else {
                     if (container.isClickeable === false) {
-                        if (event.buttons === 2) {
-                            viewPortBeingDragged = true
-                        }
+                        viewPortBeingDragged = true
                     }
                     return
                 }

ChartingSpace/CoordinateSystem.js

@@ -94,7 +94,7 @@ function newCoordinateSystem() {
         thisObject.eventHandler = undefined
     }
 
-    function initialize(minValue, maxValue, pMaxWidth, pMaxHeight) {
+    function initialize(minValue, maxValue, maxWidth, maxHeight) {
         /* Defines the min and max value of rate that we are going to transport to the available screen at the center position. */
         thisObject.min.x = minValue.x
         thisObject.max.x = maxValue.x
@@ -102,8 +102,8 @@ function newCoordinateSystem() {
         thisObject.min.y = minValue.y
         thisObject.max.y = maxValue.y
 
-        thisObject.maxWidth = pMaxWidth
-        thisObject.maxHeight = pMaxHeight
+        thisObject.maxWidth = maxWidth
+        thisObject.maxHeight = maxHeight
 
         recalculateScale()
     }
@@ -122,14 +122,18 @@ function newCoordinateSystem() {
     }
 
     function reportYValue(value) {
+        /* We will try to create a margin on the y axis so that in auto mode the charts dont get into the scales */
+        const TOP_MARGIN_FACTOR = 1.01
+        const BOTTOM_MARGIN_FACTOR = 0.99
+
         if (thisObject.autoMinYScale === true) {
-            if (value < newYMin) {
-                newYMin = value
+            if (value  * BOTTOM_MARGIN_FACTOR < newYMin) {
+                newYMin = value * BOTTOM_MARGIN_FACTOR
             }
         }
         if (thisObject.autoMaxYScale === true) {
-            if (value > newYMax) {
-                newYMax = value
+            if (value * TOP_MARGIN_FACTOR> newYMax) {
+                newYMax = value * TOP_MARGIN_FACTOR
             }
         }
     }

ChartingSpace/TimeMachine.js

@@ -165,9 +165,9 @@ function newTimeMachine() {
             let timeMachineIndex = findChildIndexAtParentNode(thisObject.payload.node)
             let dashboardIndex = findChildIndexAtParentNode(thisObject.payload.parentNode)
 
-            thisObject.container.frame.position.x = thisObject.container.frame.width * timeMachineIndex * 2  
-            thisObject.container.frame.position.y = thisObject.container.frame.height * dashboardIndex * 2  
-        } 
+            thisObject.container.frame.position.x = thisObject.container.frame.width * timeMachineIndex * 2
+            thisObject.container.frame.position.y = thisObject.container.frame.height * dashboardIndex * 2
+        }
     }
 
     function onKeyPressed(event) {
@@ -684,7 +684,7 @@ function newTimeMachine() {
         for (let i = 0; i < thisObject.timelineCharts.length; i++) {
             let timelinechart = thisObject.timelineCharts[i]
             if (timelinechart.layersManager !== undefined) {
-                let layers =  timelinechart.layersManager.layers 
+                let layers = timelinechart.layersManager.layers
                 for (let j = 0; j < layers.length; j++) {
                     let layer = layers[j]
 
@@ -829,7 +829,7 @@ function newTimeMachine() {
             minValue,
             maxValue,
             thisObject.container.frame.width,
-            thisObject.container.frame.height
+            thisObject.container.frame.height  
         )
     }
 }

ChartingSpace/TimelineChart.js

@@ -167,7 +167,7 @@ function newTimelineChart() {
             minValue,
             maxValue,
             thisObject.container.frame.width,
-            thisObject.container.frame.height
+            thisObject.container.frame.heigh  
         )
     }
 

ChartingSpace/Viewport.js

@@ -7,9 +7,10 @@ function newViewport() {
 
     let ANIMATION_INCREMENT = 0.25
     let ANIMATION_STEPS = 5
+    let MARGIN_AMOUNT = 40
 
-    let TOP_MARGIN = 40 + TOP_SPACE_HEIGHT
-    let BOTTOM_MARGIN = 10 + 2 + COCKPIT_SPACE_HEIGHT
+    let TOP_MARGIN = TOP_SPACE_HEIGHT
+    let BOTTOM_MARGIN = COCKPIT_SPACE_HEIGHT + MARGIN_AMOUNT
     let LEFT_MARGIN = 0
     let RIGHT_MARGIN = 0
     let MARGINS = {
@@ -28,6 +29,7 @@ function newViewport() {
         zoomTargetLevel: undefined,
         zoomLevel: undefined,
         mousePosition: undefined,
+        marginAmount: MARGIN_AMOUNT,
         margins: MARGINS,
         payload: undefined,
         zoomAtCenter: zoomAtCenter,
@@ -47,7 +49,7 @@ function newViewport() {
         initialize: initialize,
         finalize: finalize
     }
-   
+
     let position = {
         x: 0,
         y: 0
@@ -98,8 +100,8 @@ function newViewport() {
     }
 
     function resize() {
-        TOP_MARGIN = 40 + TOP_SPACE_HEIGHT
-        BOTTOM_MARGIN = 10 + 2 + browserCanvas.height - COCKPIT_SPACE_POSITION
+        TOP_MARGIN = TOP_SPACE_HEIGHT + MARGIN_AMOUNT
+        BOTTOM_MARGIN = browserCanvas.height - COCKPIT_SPACE_POSITION + MARGIN_AMOUNT
         LEFT_MARGIN = 0
         RIGHT_MARGIN = 0
         MARGINS = {

Globals.js

@@ -192,7 +192,7 @@ const MIN_PLOTABLE_DATE = new Date(2015, 0, 1, 0, 0, 0);
 const MAX_PLOTABLE_DATE = maxDate;
 
 const TOP_SPACE_HEIGHT = 40
-const COCKPIT_SPACE_HEIGHT = 30;
+const COCKPIT_SPACE_HEIGHT = 40;
 const SIDE_PANEL_WIDTH = 350
 let COCKPIT_SPACE_POSITION = browserCanvas.height - COCKPIT_SPACE_HEIGHT
 

Plotting/Plotter.js

@@ -735,7 +735,6 @@ function newPlotter() {
                             /* We make sure the points do not fall outside the viewport visible area. This step allways need to be done.  */
                             dataPoint = canvas.chartingSpace.viewport.fitIntoVisibleArea(dataPoint)
                             dataPoint = thisObject.fitFunction(dataPoint)
-
                             /* 
                             Contributing to Auto-Scale: A point will contribute to the y coordinate only if the x coordinate is plotted in the screen.
                             It can happen that objects that span through a long period of time could have its begin point inside the visible 
@@ -815,6 +814,7 @@ function newPlotter() {
                     }
                     dataPoint = canvas.chartingSpace.viewport.fitIntoVisibleArea(dataPoint)
                     dataPoint = thisObject.fitFunction(dataPoint)
+
                     imagePosition.x = dataPoint.x
                     imagePosition.y = dataPoint.y
                     let imageToDraw = canvas.designSpace.iconCollection.get(imageName)
@@ -858,6 +858,7 @@ function newPlotter() {
                     }
                     dataPoint = canvas.chartingSpace.viewport.fitIntoVisibleArea(dataPoint)
                     dataPoint = thisObject.fitFunction(dataPoint)
+
                     textPosition.x = dataPoint.x
                     textPosition.y = dataPoint.y
 

SideSpace/SidePanelTab.js

@@ -15,7 +15,7 @@ function newSidePanelTab() {
     }
 
     const TAB_WIDTH = 25
-    const TAB_HEIGHT = 60
+    const TAB_HEIGHT = TOP_SPACE_HEIGHT * 2
     const ANIMATION_STEP = 100
 
     let isInitialized = false
@@ -67,7 +67,6 @@ function newSidePanelTab() {
             }
         }
 
-        thisObject.container.frame.position.y = 69 + 69 * thisObject.index
         ORIGINAL_PARENT_POSITON = thisObject.container.parentContainer.frame.position.x
         setClosed()
     }
@@ -118,9 +117,16 @@ function newSidePanelTab() {
 
     function physics() {
         if (isInitialized === false) { return }
+        positionPhysics()
         animate()
     }
 
+    function positionPhysics() {
+        if (canvas.chartingSpace.viewport !== undefined) {
+            thisObject.container.frame.position.y = browserCanvas.height / 2 - TAB_HEIGHT / 2 //  TOP_SPACE_HEIGHT + canvas.chartingSpace.viewport.marginAmount + TAB_HEIGHT * thisObject.index
+        }
+    }
+
     function draw() {
         if (isInitialized === false) { return }
         borders()

Utilities/CoordinateTransformations.js

@@ -6,13 +6,12 @@ function transformThisPoint(point, container) {
     /* We pass this point through the canvas.chartingSpace.viewport lends, meaning we apply the canvas.chartingSpace.viewport zoom and displacement. */
 
     point = canvas.chartingSpace.viewport.transformThisPoint(point)
-
     return point
 }
 
 function unTransformThisPoint(point, container) {
     point = canvas.chartingSpace.viewport.unTransformThisPoint(point)
+    
     point = container.frame.unframeThisPoint(point)
-
     return point
 }