From a525c633a28c02c7fbb8da5249cb0e570aad034c Mon Sep 17 00:00:00 2001 From: Nico Rehwaldt Date: Sat, 27 Oct 2018 00:57:24 +0200 Subject: [PATCH] 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 | 127 -------------- lib/features/keyboard/BpmnKeyboardBindings.js | 158 ++++++++++++++++++ lib/features/keyboard/index.js | 6 +- ...ngsSpec.js => BpmnKeyboardBindingsSpec.js} | 48 +++++- 4 files changed, 200 insertions(+), 139 deletions(-) delete mode 100644 lib/features/keyboard/BpmnKeyBindings.js create mode 100644 lib/features/keyboard/BpmnKeyboardBindings.js rename test/spec/features/keyboard/{BpmnKeyBindingsSpec.js => BpmnKeyboardBindingsSpec.js} (71%) diff --git a/lib/features/keyboard/BpmnKeyBindings.js b/lib/features/keyboard/BpmnKeyBindings.js deleted file mode 100644 index eca14952..00000000 --- a/lib/features/keyboard/BpmnKeyBindings.js +++ /dev/null @@ -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' -]; diff --git a/lib/features/keyboard/BpmnKeyboardBindings.js b/lib/features/keyboard/BpmnKeyboardBindings.js new file mode 100644 index 00000000..98b61975 --- /dev/null +++ b/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; + } + }); + +}; \ No newline at end of file diff --git a/lib/features/keyboard/index.js b/lib/features/keyboard/index.js index 77b76063..26d04e1a 100644 --- a/lib/features/keyboard/index.js +++ b/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' ], - bpmnKeyBindings: [ 'type', BpmnKeyBindings ] + __init__: [ 'keyboardBindings' ], + keyboardBindings: [ 'type', BpmnKeyboardBindings ] }; diff --git a/test/spec/features/keyboard/BpmnKeyBindingsSpec.js b/test/spec/features/keyboard/BpmnKeyboardBindingsSpec.js similarity index 71% rename from test/spec/features/keyboard/BpmnKeyBindingsSpec.js rename to test/spec/features/keyboard/BpmnKeyboardBindingsSpec.js index d2f19da7..ee0d83ca 100644 --- a/test/spec/features/keyboard/BpmnKeyBindingsSpec.js +++ b/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; })); });