feat(keyboard): move arrow bindings to keyboard-move feature

Moving canvas with keyboard will now be controlled by
KeyboardMove feature. To use it, press Cmd/Ctrl and arrows.
Use Shift for accelerated move speed.

Configure speed by adding `keyboardMove` to `config`
with following properties:

- moveSpeed
- moveSpeedAccelerated

BREAKING CHANGES:

- remove canvas movement controls from Keyboard
- move canvas with keyboard arrows and Cmd/Ctrl

lib/features/keyboard/KeyboardBindings.js

@@ -13,8 +13,6 @@ import {
  */
 export default function KeyboardBindings(keyboard, editorActions) {
 
-  var config = keyboard._config;
-
   // undo
   // (CTRL|CMD) + Z
   function undo(context) {
@@ -133,53 +131,6 @@ export default function KeyboardBindings(keyboard, editorActions) {
     }
   }
 
-  // move canvas left
-  // left arrow
-  //
-  // 37 = Left
-  // 38 = Up
-  // 39 = Right
-  // 40 = Down
-  function moveCanvas(context) {
-
-    var event = context.event;
-
-    if (isKey([
-      'ArrowLeft', 'Left',
-      'ArrowUp', 'Up',
-      'ArrowDown', 'Down',
-      'ArrowRight', 'Right'
-    ], event)) {
-
-      var opts = {
-        invertY: config.invertY,
-        speed: (config.speed || 50)
-      };
-
-      switch (event.key) {
-      case 'ArrowLeft':
-      case 'Left':
-        opts.direction = 'left';
-        break;
-      case 'ArrowUp':
-      case 'Up':
-        opts.direction = 'up';
-        break;
-      case 'ArrowRight':
-      case 'Right':
-        opts.direction = 'right';
-        break;
-      case 'ArrowDown':
-      case 'Down':
-        opts.direction = 'down';
-        break;
-      }
-
-      editorActions.trigger('moveCanvas', opts);
-
-      return true;
-    }
-  }
 
   keyboard.addListener(copy);
   keyboard.addListener(paste);
@@ -192,8 +143,6 @@ export default function KeyboardBindings(keyboard, editorActions) {
   keyboard.addListener(zoomDefault);
   keyboard.addListener(zoomIn);
   keyboard.addListener(zoomOut);
-
-  keyboard.addListener(moveCanvas);
 }
 
 KeyboardBindings.$inject = [

lib/navigation/keyboard-move/KeyboardMove.js

@@ -0,0 +1,82 @@
+import { assign } from 'min-dash';
+
+
+var DEFAULT_CONFIG = {
+  moveSpeed: 50,
+  moveSpeedAccelerated: 200
+};
+
+
+/**
+ *
+ * @param {Object} config
+ * @param {Number} [config.moveSpeed=50]
+ * @param {Number} [config.moveSpeedAccelerated=200]
+ * @param {Keyboard} keyboard
+ * @param {EditorActions} editorActions
+ */
+export default function KeyboardNavigation(
+    config,
+    keyboard,
+    editorActions
+) {
+
+  var self = this;
+
+  this._config = assign({}, DEFAULT_CONFIG, config || {});
+
+  keyboard.addListener(arrowsListener);
+
+
+  function arrowsListener(context) {
+
+    var event = context.event,
+        config = self._config;
+
+    if (!keyboard.isCmd(event)) {
+      return;
+    }
+
+    if (keyboard.isKey([
+      'ArrowLeft', 'Left',
+      'ArrowUp', 'Up',
+      'ArrowDown', 'Down',
+      'ArrowRight', 'Right'
+    ], event)) {
+
+      var opts = {
+        speed: keyboard.isShift(event) ? config.moveSpeedAccelerated : config.moveSpeed
+      };
+
+      switch (event.key) {
+      case 'ArrowLeft':
+      case 'Left':
+        opts.direction = 'left';
+        break;
+      case 'ArrowUp':
+      case 'Up':
+        opts.direction = 'up';
+        break;
+      case 'ArrowRight':
+      case 'Right':
+        opts.direction = 'right';
+        break;
+      case 'ArrowDown':
+      case 'Down':
+        opts.direction = 'down';
+        break;
+      }
+
+      editorActions.trigger('moveCanvas', opts);
+
+      return true;
+    }
+  }
+}
+
+
+KeyboardNavigation.$inject = [
+  'config.keyboardMove',
+  'keyboard',
+  'editorActions'
+];

lib/navigation/keyboard-move/index.js

@@ -0,0 +1,14 @@
+import EditorActions from '../../features/editor-actions';
+import KeyboardModule from '../../features/keyboard';
+
+import KeyboardMove from './KeyboardMove';
+
+
+export default {
+  __depends__: [
+    EditorActions,
+    KeyboardModule
+  ],
+  __init__: [ 'keyboardMove' ],
+  keyboardMove: [ 'type', KeyboardMove ]
+};

lib/navigation/movecanvas/MoveCanvas.js

@@ -21,17 +21,28 @@ import {
 } from '../../util/Event';
 
 
-function length(point) {
-  return Math.sqrt(Math.pow(point.x, 2) + Math.pow(point.y, 2));
-}
-
 var THRESHOLD = 15;
 
 
+/**
+ * @param {EventBus} eventBus
+ * @param {Canvas} canvas
+ * @param {Keyboard} keyboard
+ * @param {EditorActions} editorActions
+ */
 export default function MoveCanvas(eventBus, canvas) {
 
   var context;
 
+
+  // listen for move on element mouse down;
+  // allow others to hook into the event before us though
+  // (dragging / element moving will do this)
+  eventBus.on('element.mousedown', 500, function(e) {
+    return handleStart(e.originalEvent);
+  });
+
+
   function handleMove(event) {
 
     var start = context.start,
@@ -96,15 +107,18 @@ export default function MoveCanvas(eventBus, canvas) {
     // we've handled the event
     return true;
   }
+}
+
+
+MoveCanvas.$inject = [
+  'eventBus',
+  'canvas'
+];
 
-  // listen for move on element mouse down;
-  // allow others to hook into the event before us though
-  // (dragging / element moving will do this)
-  eventBus.on('element.mousedown', 500, function(e) {
-    return handleStart(e.originalEvent);
-  });
 
-}
 
+// helpers ///////
 
-MoveCanvas.$inject = [ 'eventBus', 'canvas' ];
+function length(point) {
+  return Math.sqrt(Math.pow(point.x, 2) + Math.pow(point.y, 2));
+}