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
This commit is contained in:
Nico Rehwaldt 2018-10-27 00:57:24 +02:00 committed by merge-me[bot]
parent 645265ad7e
commit a525c633a2
4 changed files with 200 additions and 139 deletions

View File

@ -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'
];

View File

@ -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;
}
});
};

View File

@ -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 ]
};

View File

@ -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;
}));
});