feat(keyboard): rewrite event handling to use key value and the event…

…-bus

* use KeyboardEvent.key for new listeners as keyCode is deprecated
* allow to register KeyboardEvent listeners for specified keys
* allow to use priority for KeyboardEvents
* default listeners will use key values instead of keyCode
* preserve previous way of registering listeners

There are three ways to register a listener now using keyboard.addListener:
1. Pass key or array of keys, then priority and the callback
2. Pass key or array of keys, then callback (default priority will be used)
3. Pass sole callback for global keyboard listener (lower priority than the latter)

Closes #226

lib/features/keyboard/DiagramKeyBindings.js

@@ -0,0 +1,134 @@
+import {
+  isCmd,
+  isShift,
+  MoveCanvasFactory
+} from './helpers';
+
+var zKeys = [ 'Z', 'z' ];
+
+var copyKeys = [ 'C', 'c' ];
+var pasteKeys = [ 'V', 'v' ];
+
+var undoKeys = [ 'Z', 'z' ];
+var redoKeys = zKeys.concat('Y', 'y');
+
+var removeSelectionKeys = [ 'Delete' ];
+
+var zoomDefaultKeys = [ '0' ];
+var zoomInKeys = [ '+', 'Add', '=' ];
+var zoomOutKeys = [ '-', 'Subtract' ];
+
+var moveCanvasLeftKeys = [ 'ArrowLeft', 'Left' ];
+var moveCanvasUpKeys = [ 'ArrowUp', 'Up' ];
+var moveCanvasRightKeys = [ 'ArrowRight', 'Right' ];
+var moveCanvasDownKeys = [ 'ArrowDown', 'Down' ];
+
+var DEFAULT_PRIORITY = 1000;
+
+/**
+ * Adds default KeyboardEvent listeners
+ *
+ * @param {Keyboard} keyboard
+ * @param {EditorActions} editorActions
+ */
+export default function DiagramKeyBindings(keyboard, editorActions) {
+
+  var moveCanvasLeft = MoveCanvasFactory('left', keyboard._config, editorActions);
+  var moveCanvasUp = MoveCanvasFactory('up', keyboard._config, editorActions);
+  var moveCanvasRight = MoveCanvasFactory('right', keyboard._config, editorActions);
+  var moveCanvasDown = MoveCanvasFactory('down', keyboard._config, editorActions);
+
+  keyboard.addListener(copyKeys, DEFAULT_PRIORITY, copy);
+  keyboard.addListener(pasteKeys, DEFAULT_PRIORITY, paste);
+
+  keyboard.addListener(undoKeys, DEFAULT_PRIORITY, undo);
+  keyboard.addListener(redoKeys, DEFAULT_PRIORITY, redo);
+
+  keyboard.addListener(removeSelectionKeys, DEFAULT_PRIORITY, removeSelection);
+
+  keyboard.addListener(zoomDefaultKeys, DEFAULT_PRIORITY, zoomDefault);
+  keyboard.addListener(zoomInKeys, DEFAULT_PRIORITY, zoomIn);
+  keyboard.addListener(zoomOutKeys, DEFAULT_PRIORITY, zoomOut);
+
+  keyboard.addListener(moveCanvasLeftKeys, DEFAULT_PRIORITY, moveCanvasLeft);
+  keyboard.addListener(moveCanvasUpKeys, DEFAULT_PRIORITY, moveCanvasUp);
+  keyboard.addListener(moveCanvasRightKeys, DEFAULT_PRIORITY, moveCanvasRight);
+  keyboard.addListener(moveCanvasDownKeys, DEFAULT_PRIORITY, moveCanvasDown);
+
+  function copy(context) {
+    if (isCmd(context.event)) {
+      editorActions.trigger('copy');
+
+      return true;
+    }
+  }
+
+  function paste(context) {
+
+    if (isCmd(context.event)) {
+      editorActions.trigger('paste');
+
+      return true;
+    }
+  }
+
+  function redo(context) {
+    var key = context.key;
+
+    if (isCmd(context.event) && (!zKeys.indexOf(key) > -1 || isShift(context.event))) {
+      editorActions.trigger('redo');
+
+      return true;
+    }
+  }
+
+  function removeSelection(context) {
+
+    if (isCmd(context.event)) {
+      editorActions.trigger('removeSelection');
+
+      return true;
+    }
+  }
+
+  function undo(context) {
+
+    if (isCmd(context.event) && !isShift(context.event)) {
+      editorActions.trigger('undo');
+
+      return true;
+    }
+  }
+
+  function zoomDefault(context) {
+
+    if (isCmd(context.event)) {
+      editorActions.trigger('zoom', { value: 1 });
+
+      return true;
+    }
+  }
+
+  function zoomIn(context) {
+
+    if (isCmd(context.event)) {
+      editorActions.trigger('stepZoom', { value: 1 });
+
+      return true;
+    }
+  }
+
+  function zoomOut(context) {
+
+    if (isCmd(context.event)) {
+      editorActions.trigger('stepZoom', { value: -1 });
+
+      return true;
+    }
+  }
+}
+
+DiagramKeyBindings.$inject = [
+  'keyboard',
+  'editorActions'
+];