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:
parent
75135b667a
commit
f0610721c9
|
@ -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'
|
||||
];
|
||||
];
|
||||
|
|
|
@ -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;
|
||||
}));
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in New Issue