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 KeyboardModule from 'diagram-js/lib/features/keyboard';
|
||||||
|
|
||||||
import BpmnKeyBindings from './BpmnKeyBindings';
|
import BpmnKeyboardBindings from './BpmnKeyboardBindings';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
__depends__: [
|
__depends__: [
|
||||||
KeyboardModule
|
KeyboardModule
|
||||||
],
|
],
|
||||||
__init__: [ 'bpmnKeyBindings' ],
|
__init__: [ 'keyboardBindings' ],
|
||||||
bpmnKeyBindings: [ 'type', BpmnKeyBindings ]
|
keyboardBindings: [ 'type', BpmnKeyboardBindings ]
|
||||||
};
|
};
|
||||||
|
|
|
@ -11,13 +11,19 @@ import { forEach } from 'min-dash';
|
||||||
|
|
||||||
import coreModule from 'lib/core';
|
import coreModule from 'lib/core';
|
||||||
import editorActionsModule from 'lib/features/editor-actions';
|
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 keyboardModule from 'lib/features/keyboard';
|
||||||
import modelingModule from 'lib/features/modeling';
|
import modelingModule from 'lib/features/modeling';
|
||||||
|
import labelEditingModule from 'lib/features/label-editing';
|
||||||
|
|
||||||
var createKeyEvent = require('../../../util/KeyEvents').createKeyEvent;
|
var createKeyEvent = require('../../../util/KeyEvents').createKeyEvent;
|
||||||
|
|
||||||
|
|
||||||
describe('features - keyboard', function() {
|
describe('features/keyboard', function() {
|
||||||
|
|
||||||
var diagramXML = require('../../../fixtures/bpmn/simple.bpmn');
|
var diagramXML = require('../../../fixtures/bpmn/simple.bpmn');
|
||||||
|
|
||||||
|
@ -25,13 +31,19 @@ describe('features - keyboard', function() {
|
||||||
coreModule,
|
coreModule,
|
||||||
editorActionsModule,
|
editorActionsModule,
|
||||||
keyboardModule,
|
keyboardModule,
|
||||||
modelingModule
|
modelingModule,
|
||||||
|
globalConnectModule,
|
||||||
|
spaceToolModule,
|
||||||
|
lassoToolModule,
|
||||||
|
handToolModule,
|
||||||
|
searchModule,
|
||||||
|
labelEditingModule
|
||||||
];
|
];
|
||||||
|
|
||||||
beforeEach(bootstrapViewer(diagramXML, { modules: testModules }));
|
beforeEach(bootstrapViewer(diagramXML, { modules: testModules }));
|
||||||
|
|
||||||
|
|
||||||
describe('bpmn key bindings', function() {
|
describe('bpmn keyboard bindings', function() {
|
||||||
|
|
||||||
var container;
|
var container;
|
||||||
|
|
||||||
|
@ -39,9 +51,27 @@ describe('features - keyboard', function() {
|
||||||
container = TestContainer.get(this);
|
container = TestContainer.get(this);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
it('should include triggers inside editorActions', inject(function(editorActions) {
|
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
|
// then
|
||||||
expect(editorActions.length()).to.equal(19);
|
expect(editorActions.getActions()).to.eql(expectedActions);
|
||||||
}));
|
}));
|
||||||
|
|
||||||
|
|
||||||
|
@ -58,7 +88,7 @@ describe('features - keyboard', function() {
|
||||||
keyboard._keyHandler(e);
|
keyboard._keyHandler(e);
|
||||||
|
|
||||||
// then
|
// 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);
|
keyboard._keyHandler(e);
|
||||||
|
|
||||||
// then
|
// 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);
|
keyboard._keyHandler(e);
|
||||||
|
|
||||||
// then
|
// 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);
|
keyboard._keyHandler(e);
|
||||||
|
|
||||||
// then
|
// 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);
|
keyboard._keyHandler(e);
|
||||||
|
|
||||||
// then
|
// then
|
||||||
expect(searchPad.toggle).calledOnce;
|
expect(searchPad.toggle).to.have.been.calledOnce;
|
||||||
}));
|
}));
|
||||||
|
|
||||||
});
|
});
|
Loading…
Reference in New Issue