feat(keyboard): use key value for bindings

`KeyboardEvent.keyCode` is deprecated, so the BpmnKeyBindings will
use non-deprecated `KeyboardEvent.key` instead.
This commit is contained in:
Maciej Barelkowski 2018-10-24 13:56:21 +02:00 committed by merge-me[bot]
parent 75135b667a
commit f0610721c9
3 changed files with 99 additions and 70 deletions

View File

@ -11,7 +11,7 @@ export default function BpmnKeyBindings(keyboard, editorActions) {
var event = context.event;
if (event.keyCode === 65 && keyboard.isCmd(event)) {
if (keyboard.isKey(['a', 'A'], event) && keyboard.isCmd(event)) {
editorActions.trigger('selectElements');
return true;
@ -23,7 +23,7 @@ export default function BpmnKeyBindings(keyboard, editorActions) {
var event = context.event;
if (event.keyCode === 70 && keyboard.isCmd(event)) {
if (keyboard.isKey(['f', 'F'], event) && keyboard.isCmd(event)) {
editorActions.trigger('find');
return true;
@ -39,7 +39,7 @@ export default function BpmnKeyBindings(keyboard, editorActions) {
return;
}
if (event.keyCode === 83) {
if (keyboard.isKey(['s', 'S'], event)) {
editorActions.trigger('spaceTool');
return true;
@ -55,7 +55,7 @@ export default function BpmnKeyBindings(keyboard, editorActions) {
return;
}
if (event.keyCode === 76) {
if (keyboard.isKey(['l', 'L'], event)) {
editorActions.trigger('lassoTool');
return true;
@ -72,7 +72,7 @@ export default function BpmnKeyBindings(keyboard, editorActions) {
return;
}
if (event.keyCode === 72) {
if (keyboard.isKey(['h', 'H'], event)) {
editorActions.trigger('handTool');
return true;
@ -88,7 +88,7 @@ export default function BpmnKeyBindings(keyboard, editorActions) {
return;
}
if (event.keyCode === 67) {
if (keyboard.isKey(['c', 'C'], event)) {
editorActions.trigger('globalConnectTool');
return true;
@ -104,7 +104,7 @@ export default function BpmnKeyBindings(keyboard, editorActions) {
return;
}
if (event.keyCode === 69) {
if (keyboard.isKey(['e', 'E'], event)) {
editorActions.trigger('directEditing');
return true;
@ -124,4 +124,4 @@ export default function BpmnKeyBindings(keyboard, editorActions) {
BpmnKeyBindings.$inject = [
'keyboard',
'editorActions'
];
];

View File

@ -7,6 +7,8 @@ import {
import TestContainer from 'mocha-test-container-support';
import { forEach } from 'min-dash';
import coreModule from 'lib/core';
import editorActionsModule from 'lib/features/editor-actions';
import keyboardModule from 'lib/features/keyboard';
@ -43,102 +45,128 @@ describe('features - keyboard', function() {
}));
it('should trigger lasso tool', inject(function(keyboard, globalConnect) {
forEach(['c', 'C'], function(key) {
sinon.spy(globalConnect, 'toggle');
it('should global connect tool for key ' + key, inject(function(keyboard, globalConnect) {
// given
var e = createKeyEvent(container, 67, false);
sinon.spy(globalConnect, 'toggle');
// when
keyboard._keyHandler(e);
// given
var e = createKeyEvent(container, key, false);
// then
expect(globalConnect.toggle.calledOnce).to.be.true;
}));
// when
keyboard._keyHandler(e);
// then
expect(globalConnect.toggle.calledOnce).to.be.true;
}));
});
it('should trigger lasso tool', inject(function(keyboard, lassoTool) {
forEach(['l', 'L'], function(key) {
sinon.spy(lassoTool, 'activateSelection');
it('should trigger lasso tool for key ' + key, inject(function(keyboard, lassoTool) {
// given
var e = createKeyEvent(container, 76, false);
sinon.spy(lassoTool, 'activateSelection');
// when
keyboard._keyHandler(e);
// given
var e = createKeyEvent(container, key, false);
// then
expect(lassoTool.activateSelection.calledOnce).to.be.true;
}));
// when
keyboard._keyHandler(e);
// then
expect(lassoTool.activateSelection.calledOnce).to.be.true;
}));
});
it('should trigger space tool', inject(function(keyboard, spaceTool) {
forEach(['s', 'S'], function(key) {
sinon.spy(spaceTool, 'activateSelection');
it('should trigger space tool', inject(function(keyboard, spaceTool) {
// given
var e = createKeyEvent(container, 83, false);
sinon.spy(spaceTool, 'activateSelection');
// when
keyboard._keyHandler(e);
// given
var e = createKeyEvent(container, key, false);
// then
expect(spaceTool.activateSelection.calledOnce).to.be.true;
}));
// when
keyboard._keyHandler(e);
// then
expect(spaceTool.activateSelection.calledOnce).to.be.true;
}));
});
it('should trigger direct editing', inject(function(keyboard, selection, elementRegistry, directEditing) {
forEach(['e', 'E'], function(key) {
sinon.spy(directEditing, 'activate');
it('should trigger direct editing', inject(function(keyboard, selection, elementRegistry, directEditing) {
// given
var task = elementRegistry.get('Task_1');
sinon.spy(directEditing, 'activate');
selection.select(task);
// given
var task = elementRegistry.get('Task_1');
var e = createKeyEvent(container, 69, false);
selection.select(task);
// when
keyboard._keyHandler(e);
var e = createKeyEvent(container, key, false);
// then
expect(directEditing.activate.calledOnce).to.be.true;
}));
// when
keyboard._keyHandler(e);
// then
expect(directEditing.activate.calledOnce).to.be.true;
}));
});
it('should select all elements', inject(function(canvas, keyboard, selection, elementRegistry) {
forEach(['a', 'A'], function(key) {
// given
var e = createKeyEvent(container, 65, true);
it('should select all elements',
inject(function(canvas, keyboard, selection, elementRegistry) {
var allElements = elementRegistry.getAll(),
rootElement = canvas.getRootElement();
// given
var e = createKeyEvent(container, key, true);
// when
keyboard._keyHandler(e);
var allElements = elementRegistry.getAll(),
rootElement = canvas.getRootElement();
// then
var selectedElements = selection.get();
// when
keyboard._keyHandler(e);
expect(selectedElements).to.have.length(allElements.length - 1);
expect(selectedElements).not.to.contain(rootElement);
}));
// then
var selectedElements = selection.get();
expect(selectedElements).to.have.length(allElements.length - 1);
expect(selectedElements).not.to.contain(rootElement);
})
);
});
it('should trigger search for labels', inject(function(canvas, keyboard, searchPad, elementRegistry) {
forEach(['f', 'F'], function(key) {
sinon.spy(searchPad, 'toggle');
it('should trigger search for labels', inject(function(keyboard, searchPad) {
// given
var e = createKeyEvent(container, 70, true);
sinon.spy(searchPad, 'toggle');
// when
keyboard._keyHandler(e);
// given
var e = createKeyEvent(container, key, true);
// then
expect(searchPad.toggle).calledOnce;
}));
// when
keyboard._keyHandler(e);
// then
expect(searchPad.toggle).calledOnce;
}));
});
});

View File

@ -1,8 +1,9 @@
export function createKeyEvent(element, code, ctrlKey) {
export function createKeyEvent(element, key, ctrlKey) {
var e = document.createEvent('Events') || new document.defaultView.CustomEvent('keyEvent');
e.keyCode = code;
e.which = code;
e.key = key;
e.keyCode = key;
e.which = key;
e.ctrlKey = ctrlKey;
return e;