From f0610721c984256628a5b80abdd4e56a80dd2b49 Mon Sep 17 00:00:00 2001 From: Maciej Barelkowski Date: Wed, 24 Oct 2018 13:56:21 +0200 Subject: [PATCH] feat(keyboard): use key value for bindings `KeyboardEvent.keyCode` is deprecated, so the BpmnKeyBindings will use non-deprecated `KeyboardEvent.key` instead. --- lib/features/keyboard/BpmnKeyBindings.js | 16 +- .../features/keyboard/BpmnKeyBindingsSpec.js | 146 +++++++++++------- test/util/KeyEvents.js | 7 +- 3 files changed, 99 insertions(+), 70 deletions(-) diff --git a/lib/features/keyboard/BpmnKeyBindings.js b/lib/features/keyboard/BpmnKeyBindings.js index 7155068b..eca14952 100644 --- a/lib/features/keyboard/BpmnKeyBindings.js +++ b/lib/features/keyboard/BpmnKeyBindings.js @@ -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' -]; \ No newline at end of file +]; diff --git a/test/spec/features/keyboard/BpmnKeyBindingsSpec.js b/test/spec/features/keyboard/BpmnKeyBindingsSpec.js index 99a54d8e..d2f19da7 100644 --- a/test/spec/features/keyboard/BpmnKeyBindingsSpec.js +++ b/test/spec/features/keyboard/BpmnKeyBindingsSpec.js @@ -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; + })); + + }); }); diff --git a/test/util/KeyEvents.js b/test/util/KeyEvents.js index e5c6483a..6343bf4a 100644 --- a/test/util/KeyEvents.js +++ b/test/util/KeyEvents.js @@ -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;