Scrolling with keys charts and designer

Canvas.js

@@ -195,11 +195,19 @@ function newCanvas () {
     }
 
     if (event.shiftKey === true && event.code === 'ArrowLeft') {
-      alert('charts to the Left')
+      canvas.chartSpace.oneScreenLeft()
     }
 
     if (event.shiftKey === true && event.code === 'ArrowRight') {
-      alert('charts to the Rigth')
+      canvas.chartSpace.oneScreenRight()
+    }
+
+    if (event.shiftKey === true && event.code === 'ArrowUp') {
+      canvas.chartSpace.oneScreenUp()
+    }
+
+    if (event.shiftKey === true && event.code === 'ArrowDown') {
+      canvas.chartSpace.oneScreenDown()
     }
 
     if (event.ctrlKey === true && event.code === 'ArrowLeft') {

Spaces/ChartSpace.js

@@ -16,6 +16,10 @@ function newChartSpace () {
     visible: true,
     container: undefined,
     timeMachines: [],
+    oneScreenUp: oneScreenUp,
+    oneScreenDown: oneScreenDown,
+    oneScreenLeft: oneScreenLeft,
+    oneScreenRight: oneScreenRight,
     fitIntoVisibleArea: fitIntoVisibleArea,
     isThisPointVisible: isThisPointVisible,
     physics: physics,
@@ -34,6 +38,7 @@ function newChartSpace () {
 
   let canvasBrowserResizedEventSubscriptionId
 
+  const PERCENTAGE_OF_SCREEN_FOR_DISPLACEMENT = 25
   return thisObject
 
   function finalize () {
@@ -112,6 +117,42 @@ function newChartSpace () {
     thisObject.container.frame.height = COCKPIT_SPACE_POSITION
   }
 
+  function oneScreenUp () {
+    let displaceVector = {
+      x: 0,
+      y: +browserCanvas.height * PERCENTAGE_OF_SCREEN_FOR_DISPLACEMENT / 100
+    }
+
+    viewPort.displace(displaceVector)
+  }
+
+  function oneScreenDown () {
+    let displaceVector = {
+      x: 0,
+      y: -browserCanvas.height * PERCENTAGE_OF_SCREEN_FOR_DISPLACEMENT / 100
+    }
+
+    viewPort.displace(displaceVector)
+  }
+
+  function oneScreenLeft () {
+    let displaceVector = {
+      x: -browserCanvas.width * PERCENTAGE_OF_SCREEN_FOR_DISPLACEMENT / 100,
+      y: 0
+    }
+
+    viewPort.displace(displaceVector)
+  }
+
+  function oneScreenRight () {
+    let displaceVector = {
+      x: +browserCanvas.width * PERCENTAGE_OF_SCREEN_FOR_DISPLACEMENT / 100,
+      y: 0
+    }
+
+    viewPort.displace(displaceVector)
+  }
+
   function fitIntoVisibleArea (point) {
        /* Here we check the boundaries of the resulting points, so they dont go out of the visible area. */
 

Spaces/FloatingSpace.js

@@ -46,7 +46,7 @@ function newFloatingSpace () {
 
   let visible = false
 
-  const PERCENTAGE_OF_SCREEN_FOR_DISPLACEMENT = 50
+  const PERCENTAGE_OF_SCREEN_FOR_DISPLACEMENT = 25
   return thisObject
 
   function finalize () {