Reset Aspect Ratio Implemented

CanvasApp/ChartingSpace/EdgeEditor.js

@@ -6,6 +6,7 @@ function newEdgeEditor () {
     fitFunction: undefined,
     isVisible: true,
     isMouseOver: undefined,
+    resetAspectRatio: resetAspectRatio,
     onKeyPressed: onKeyPressed,
     physics: physics,
     drawForeground: drawForeground,
@@ -104,17 +105,33 @@ function newEdgeEditor () {
     thisObject.isMouseOver = false
   }
 
-  function onDoubleClick () {
+  function resetAspectRatio () {
+  /* Resize the Time Machine to match the current screen aspect ration */
+
+    thisObject.container.parentContainer.frame.width = browserCanvas.width / TIME_MACHINE_WIDTH
+    thisObject.container.parentContainer.frame.height = (browserCanvas.height - TOP_SPACE_HEIGHT - COCKPIT_SPACE_HEIGHT) / TIME_MACHINE_HEIGHT
+    coordinateSystem.maxHeight = thisObject.container.parentContainer.frame.height
+    coordinateSystem.maxWidth = thisObject.container.parentContainer.frame.width
+    coordinateSystem.recalculateScale()
+    thisObject.container.parentContainer.eventHandler.raiseEvent('Dimmensions Changed', event)
+  }
+
+  function onDoubleClick (event) {
     doubleClickCounter = 0
     if (canvas.chartingSpace.viewport.zoomLevel === DOUBLE_CLICK_ZOOM_OUT_LEVEL) {
       canvas.chartingSpace.viewport.displaceToContainer(thisObject.container.parentContainer)
       canvas.chartingSpace.viewport.zoomAtCenter(DOUBLE_CLICK_ZOOM_IN_LEVEL)
+      return
+    }
+    if (canvas.chartingSpace.viewport.zoomLevel === DOUBLE_CLICK_ZOOM_IN_LEVEL) {
+      canvas.chartingSpace.viewport.zoomAtCenter(DOUBLE_CLICK_ZOOM_IN_IN_LEVEL)
+      return
     }
   }
 
   function onDragStarted (event) {
     if (doubleClickCounter > 0) {
-      onDoubleClick()
+      onDoubleClick(event)
       return
     } else {
       doubleClickCounter = 50
@@ -179,6 +196,11 @@ function newEdgeEditor () {
       whatHappened = 'left or right arrow key pressed'
       return
     }
+
+    if (event.shiftKey === true && (event.ctrlKey === true || event.metaKey === true) && (event.key === 'R' || event.key === 'r')) {
+      resetAspectRatio()
+      return
+    }
   }
 
   function getContainer (event, purpose) {

CanvasApp/ChartingSpace/TimeMachine.js

@@ -71,8 +71,8 @@ function newTimeMachine () {
     thisObject.container.insideViewport = true
     thisObject.container.detectMouseOver = true
 
-    thisObject.container.frame.width = TIME_MACHINE_WIDTH
-    thisObject.container.frame.height = TIME_MACHINE_HEIGHT
+    thisObject.container.frame.width = browserCanvas.width / TIME_MACHINE_WIDTH
+    thisObject.container.frame.height = (browserCanvas.height - TOP_SPACE_HEIGHT - COCKPIT_SPACE_HEIGHT) / TIME_MACHINE_HEIGHT
   }
 
   function finalize () {
@@ -417,6 +417,14 @@ function newTimeMachine () {
   }
 
   function panelPhysics () {
+    if (
+      thisObject.container.frame.isInViewPort() &&
+      canvas.chartingSpace.viewport.zoomLevel >= ZOOM_OUT_THRESHOLD_FOR_NOT_HIDDING_PANELS) {
+      canvas.panelsSpace.unHide(thisObject.payload.node.id, 'Layers Panel')
+      canvas.panelsSpace.unHide(thisObject.payload.node.id, 'Plotter Panel')
+      return
+    }
+
     if (
       thisObject.container.frame.isCenterInViewPort() &&
       canvas.chartingSpace.viewport.zoomLevel >= ZOOM_OUT_THRESHOLD_FOR_HIDDING_PANELS

CanvasApp/ChartingSpace/Viewport.js

@@ -137,10 +137,10 @@ function newViewport () {
   function displaceToContainer (container) {
     let targetPoint = {
       x: -container.frame.position.x - container.frame.width / 2,
-      y: -container.frame.position.y - container.frame.height / 2 + TOP_SPACE_HEIGHT
+      y: -container.frame.position.y - container.frame.height / 2
     }
-    position.x = targetPoint.x + thisObject.width / 2
-    position.y = targetPoint.y + thisObject.height / 2
+    position.x = targetPoint.x + browserCanvas.width / 2
+    position.y = targetPoint.y + (browserCanvas.height - COCKPIT_SPACE_HEIGHT - TOP_SPACE_HEIGHT) / 2 + TOP_SPACE_HEIGHT
   }
 
   function zoomAtCenter (level) {
@@ -152,7 +152,7 @@ function newViewport () {
   function mousePositionPhysics () {
     if (overrideMousePositionCounter > 0) {
       thisObject.mousePosition.x = browserCanvas.width / 2
-      thisObject.mousePosition.y = (browserCanvas.height - TOP_SPACE_HEIGHT) / 2 - TOP_SPACE_HEIGHT / 2
+      thisObject.mousePosition.y = (browserCanvas.height - TOP_SPACE_HEIGHT - COCKPIT_SPACE_HEIGHT) / 2 + TOP_SPACE_HEIGHT
 
       overrideMousePositionCounter--
       if (overrideMousePositionCounter < 0) {
@@ -413,4 +413,3 @@ function newViewport () {
     }
   }
 }
-

CanvasApp/Globals.js

@@ -45,10 +45,12 @@ const MAC_AMOUNT_FACTOR = 5
 const IS_MAC = navigator.platform.toUpperCase().indexOf('MAC') >= 0
 
 const DOUBLE_CLICK_ZOOM_OUT_LEVEL = 0
-const DOUBLE_CLICK_ZOOM_IN_LEVEL = 7
+const DOUBLE_CLICK_ZOOM_IN_LEVEL = 6
+const DOUBLE_CLICK_ZOOM_IN_IN_LEVEL = 7
 
 const DEBUG = {}
-const ZOOM_OUT_THRESHOLD_FOR_HIDDING_PANELS = 7 // This regulates some behavious changes that happens when the user zoom out below this level.
+const ZOOM_OUT_THRESHOLD_FOR_NOT_HIDDING_PANELS = 12
+const ZOOM_OUT_THRESHOLD_FOR_HIDDING_PANELS = 7 
 const ZOOM_OUT_THRESHOLD_FOR_CHANGING_TIME_FRAME = 3  // This help regulate when to change the Time Frame base on the level of zoom out.
 const ZOOM_OUT_THRESHOLD_FOR_PACKING_OBJECTS_AT_THE_BOTTOM_OR_TOP_OF_VIEWPORT = 2
 const ZOOM_OUT_THRESHOLD_FOR_PLOTTING_IN_LOW_RESOLUTION = 3
@@ -221,8 +223,8 @@ const PERIOD_01_MIN = "01-min";
 We define here the size of the chartingSpace. It has to bee enough big in order to accomodate all the charts we expect to display in this space.
 */
 
-const TIME_MACHINE_WIDTH = 250;
-const TIME_MACHINE_HEIGHT = 120;
+const TIME_MACHINE_WIDTH = 8;
+const TIME_MACHINE_HEIGHT = 8;
 
 let mediaRecorder // to downloadText canvas animation as a mediaRecorder
 let areWeRecording = false

CanvasApp/Spaces/ChartingSpace.js

@@ -332,8 +332,8 @@ function newChartingSpace () {
       timeMachine.payload.uiObject.setValue('Loading...')
 
       /* Setting up the new time machine. */
-      timeMachine.container.frame.position.x = browserCanvas.width / 2 - TIME_MACHINE_WIDTH / 2
-      timeMachine.container.frame.position.y = browserCanvas.height / 2 - TIME_MACHINE_HEIGHT / 2
+      timeMachine.container.frame.position.x = browserCanvas.width / 2 - browserCanvas.width / TIME_MACHINE_WIDTH / 2
+      timeMachine.container.frame.position.y = browserCanvas.height / 2 - (browserCanvas.height - TOP_SPACE_HEIGHT - COCKPIT_SPACE_HEIGHT) / TIME_MACHINE_HEIGHT / 2
       timeMachine.initialize(onTimeMachineInitialized)
 
       function onTimeMachineInitialized () {