chore(keyboard): register keys backed by editor actions only

* only register keyboard bindings that are backed by actual
  editor actions
* rename BpmnKeyBindings -> BpmnKeyboardBindings for parity with
  diagram-js@latest
* sub-class and override _keyboardBindings_ service provided
  by diagram-js
* extend spec to verify default actions

lib/features/keyboard/BpmnKeyBindings.js

@@ -1,127 +0,0 @@
-/**
- * BPMN 2.0 specific key bindings.
- *
- * @param {Keyboard} keyboard
- * @param {EditorActions} editorActions
- */
-export default function BpmnKeyBindings(keyboard, editorActions) {
-
-  // ctrl + a -> select all elements
-  function selectAll(context) {
-
-    var event = context.event;
-
-    if (keyboard.isKey(['a', 'A'], event) && keyboard.isCmd(event)) {
-      editorActions.trigger('selectElements');
-
-      return true;
-    }
-  }
-
-  // ctrl + f -> search labels
-  function find(context) {
-
-    var event = context.event;
-
-    if (keyboard.isKey(['f', 'F'], event) && keyboard.isCmd(event)) {
-      editorActions.trigger('find');
-
-      return true;
-    }
-  }
-
-  // s -> activate space tool
-  function spaceTool(context) {
-
-    var event = context.event;
-
-    if (keyboard.hasModifier(event)) {
-      return;
-    }
-
-    if (keyboard.isKey(['s', 'S'], event)) {
-      editorActions.trigger('spaceTool');
-
-      return true;
-    }
-  }
-
-  // l -> activate lasso tool
-  function lassoTool(context) {
-
-    var event = context.event;
-
-    if (keyboard.hasModifier(event)) {
-      return;
-    }
-
-    if (keyboard.isKey(['l', 'L'], event)) {
-      editorActions.trigger('lassoTool');
-
-      return true;
-    }
-  }
-
-
-  // h -> activate hand tool
-  function handTool(context) {
-
-    var event = context.event;
-
-    if (keyboard.hasModifier(event)) {
-      return;
-    }
-
-    if (keyboard.isKey(['h', 'H'], event)) {
-      editorActions.trigger('handTool');
-
-      return true;
-    }
-  }
-
-  // c -> activate global connect tool
-  function globalConnectTool(context) {
-
-    var event = context.event;
-
-    if (keyboard.hasModifier(event)) {
-      return;
-    }
-
-    if (keyboard.isKey(['c', 'C'], event)) {
-      editorActions.trigger('globalConnectTool');
-
-      return true;
-    }
-  }
-
-  // e -> activate direct editing
-  function directEditing(context) {
-
-    var event = context.event;
-
-    if (keyboard.hasModifier(event)) {
-      return;
-    }
-
-    if (keyboard.isKey(['e', 'E'], event)) {
-      editorActions.trigger('directEditing');
-
-      return true;
-    }
-  }
-
-
-  keyboard.addListener(selectAll);
-  keyboard.addListener(find);
-  keyboard.addListener(spaceTool);
-  keyboard.addListener(lassoTool);
-  keyboard.addListener(handTool);
-  keyboard.addListener(globalConnectTool);
-  keyboard.addListener(directEditing);
-}
-
-BpmnKeyBindings.$inject = [
-  'keyboard',
-  'editorActions'
-];

lib/features/keyboard/BpmnKeyboardBindings.js

@@ -0,0 +1,158 @@
+import inherits from 'inherits';
+
+import KeyboardBindings from 'diagram-js/lib/features/keyboard/KeyboardBindings';
+
+
+/**
+ * BPMN 2.0 specific keyboard bindings.
+ *
+ * @param {Injector} injector
+ */
+export default function BpmnKeyboardBindings(injector) {
+  injector.invoke(KeyboardBindings, this);
+}
+
+inherits(BpmnKeyboardBindings, KeyboardBindings);
+
+BpmnKeyboardBindings.$inject = [
+  'injector'
+];
+
+
+/**
+ * Register available keyboard bindings.
+ *
+ * @param {Keyboard} keyboard
+ * @param {EditorActions} editorActions
+ */
+BpmnKeyboardBindings.prototype.registerBindings = function(keyboard, editorActions) {
+
+  // inherit default bindings
+  KeyboardBindings.prototype.registerBindings.call(this, keyboard, editorActions);
+
+  /**
+   * Add keyboard binding if respective editor action
+   * is registered.
+   *
+   * @param {String} action name
+   * @param {Function} fn that implements the key binding
+   */
+  function addListener(action, fn) {
+
+    if (editorActions.isRegistered(action)) {
+      keyboard.addListener(fn);
+    }
+  }
+
+  // select all elements
+  // CTRL + A
+  addListener('selectElements', function(context) {
+
+    var event = context.event;
+
+    if (keyboard.isKey(['a', 'A'], event) && keyboard.isCmd(event)) {
+      editorActions.trigger('selectElements');
+
+      return true;
+    }
+  });
+
+  // search labels
+  // CTRL + F
+  addListener('find', function(context) {
+
+    var event = context.event;
+
+    if (keyboard.isKey(['f', 'F'], event) && keyboard.isCmd(event)) {
+      editorActions.trigger('find');
+
+      return true;
+    }
+  });
+
+  // activate space tool
+  // S
+  addListener('spaceTool', function(context) {
+
+    var event = context.event;
+
+    if (keyboard.hasModifier(event)) {
+      return;
+    }
+
+    if (keyboard.isKey(['s', 'S'], event)) {
+      editorActions.trigger('spaceTool');
+
+      return true;
+    }
+  });
+
+  // activate lasso tool
+  // L
+  addListener('lassoTool', function(context) {
+
+    var event = context.event;
+
+    if (keyboard.hasModifier(event)) {
+      return;
+    }
+
+    if (keyboard.isKey(['l', 'L'], event)) {
+      editorActions.trigger('lassoTool');
+
+      return true;
+    }
+  });
+
+  // activate hand tool
+  // H
+  addListener('handTool', function(context) {
+
+    var event = context.event;
+
+    if (keyboard.hasModifier(event)) {
+      return;
+    }
+
+    if (keyboard.isKey(['h', 'H'], event)) {
+      editorActions.trigger('handTool');
+
+      return true;
+    }
+  });
+
+  // activate global connect tool
+  // C
+  addListener('globalConnectTool', function(context) {
+
+    var event = context.event;
+
+    if (keyboard.hasModifier(event)) {
+      return;
+    }
+
+    if (keyboard.isKey(['c', 'C'], event)) {
+      editorActions.trigger('globalConnectTool');
+
+      return true;
+    }
+  });
+
+  // activate direct editing
+  // E
+  addListener('directEditing', function(context) {
+
+    var event = context.event;
+
+    if (keyboard.hasModifier(event)) {
+      return;
+    }
+
+    if (keyboard.isKey(['e', 'E'], event)) {
+      editorActions.trigger('directEditing');
+
+      return true;
+    }
+  });
+
+};

lib/features/keyboard/index.js

@@ -1,11 +1,11 @@
 import KeyboardModule from 'diagram-js/lib/features/keyboard';
 
-import BpmnKeyBindings from './BpmnKeyBindings';
+import BpmnKeyboardBindings from './BpmnKeyboardBindings';
 
 export default {
   __depends__: [
     KeyboardModule
   ],
-  __init__: [ 'bpmnKeyBindings' ],
+  __init__: [ 'keyboardBindings' ],
-  bpmnKeyBindings: [ 'type', BpmnKeyBindings ]
+  keyboardBindings: [ 'type', BpmnKeyboardBindings ]
 };

test/spec/features/keyboard/BpmnKeyboardBindingsSpec.js

@@ -11,13 +11,19 @@ import { forEach } from 'min-dash';
 
 import coreModule from 'lib/core';
 import editorActionsModule from 'lib/features/editor-actions';
+import searchModule from 'lib/features/search';
+import globalConnectModule from 'diagram-js/lib/features/global-connect';
+import spaceToolModule from 'diagram-js/lib/features/space-tool';
+import lassoToolModule from 'diagram-js/lib/features/lasso-tool';
+import handToolModule from 'diagram-js/lib/features/hand-tool';
 import keyboardModule from 'lib/features/keyboard';
 import modelingModule from 'lib/features/modeling';
+import labelEditingModule from 'lib/features/label-editing';
 
 var createKeyEvent = require('../../../util/KeyEvents').createKeyEvent;
 
 
-describe('features - keyboard', function() {
+describe('features/keyboard', function() {
 
   var diagramXML = require('../../../fixtures/bpmn/simple.bpmn');
 
@@ -25,13 +31,19 @@ describe('features - keyboard', function() {
     coreModule,
     editorActionsModule,
     keyboardModule,
-    modelingModule
+    modelingModule,
+    globalConnectModule,
+    spaceToolModule,
+    lassoToolModule,
+    handToolModule,
+    searchModule,
+    labelEditingModule
   ];
 
   beforeEach(bootstrapViewer(diagramXML, { modules: testModules }));
 
 
-  describe('bpmn key bindings', function() {
+  describe('bpmn keyboard bindings', function() {
 
     var container;
 
@@ -39,9 +51,27 @@ describe('features - keyboard', function() {
       container = TestContainer.get(this);
     });
 
+
     it('should include triggers inside editorActions', inject(function(editorActions) {
+      // given
+      var expectedActions = [
+        'undo',
+        'redo',
+        'zoom',
+        'removeSelection',
+        'selectElements',
+        'spaceTool',
+        'lassoTool',
+        'handTool',
+        'globalConnectTool',
+        'setColor',
+        'directEditing',
+        'find',
+        'moveToOrigin'
+      ];
+
       // then
-      expect(editorActions.length()).to.equal(19);
+      expect(editorActions.getActions()).to.eql(expectedActions);
     }));
 
 
@@ -58,7 +88,7 @@ describe('features - keyboard', function() {
         keyboard._keyHandler(e);
 
         // then
-        expect(globalConnect.toggle.calledOnce).to.be.true;
+        expect(globalConnect.toggle).to.have.been.calledOnce;
       }));
 
     });
@@ -77,7 +107,7 @@ describe('features - keyboard', function() {
         keyboard._keyHandler(e);
 
         // then
-        expect(lassoTool.activateSelection.calledOnce).to.be.true;
+        expect(lassoTool.activateSelection).to.have.been.calledOnce;
       }));
 
     });
@@ -96,7 +126,7 @@ describe('features - keyboard', function() {
         keyboard._keyHandler(e);
 
         // then
-        expect(spaceTool.activateSelection.calledOnce).to.be.true;
+        expect(spaceTool.activateSelection).to.have.been.calledOnce;
       }));
 
     });
@@ -119,7 +149,7 @@ describe('features - keyboard', function() {
         keyboard._keyHandler(e);
 
         // then
-        expect(directEditing.activate.calledOnce).to.be.true;
+        expect(directEditing.activate).to.have.been.calledOnce;
       }));
 
     });
@@ -163,7 +193,7 @@ describe('features - keyboard', function() {
         keyboard._keyHandler(e);
 
         // then
-        expect(searchPad.toggle).calledOnce;
+        expect(searchPad.toggle).to.have.been.calledOnce;
       }));
 
     });