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:
parent
645265ad7e
commit
a525c633a2
|
@ -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'
|
||||
];
|
|
@ -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;
|
||||
}
|
||||
});
|
||||
|
||||
};
|
|
@ -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 ]
|
||||
};
|
||||
|
|
|
@ -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;
|
||||
}));
|
||||
|
||||
});
|
Loading…
Reference in New Issue