KeyboardBindings.js 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181
  1. import {
  2. isCmd,
  3. isKey,
  4. isCopy,
  5. isPaste,
  6. isUndo,
  7. isRedo,
  8. KEYS_COPY,
  9. KEYS_PASTE,
  10. KEYS_UNDO,
  11. KEYS_REDO
  12. } from './KeyboardUtil';
  13. export {
  14. KEYS_COPY,
  15. KEYS_PASTE,
  16. KEYS_UNDO,
  17. KEYS_REDO
  18. };
  19. var LOW_PRIORITY = 500;
  20. /**
  21. * Adds default keyboard bindings.
  22. *
  23. * This does not pull in any features will bind only actions that
  24. * have previously been registered against the editorActions component.
  25. *
  26. * @param {EventBus} eventBus
  27. * @param {Keyboard} keyboard
  28. */
  29. export default function KeyboardBindings(eventBus, keyboard) {
  30. var self = this;
  31. eventBus.on('editorActions.init', LOW_PRIORITY, function(event) {
  32. var editorActions = event.editorActions;
  33. self.registerBindings(keyboard, editorActions);
  34. });
  35. }
  36. KeyboardBindings.$inject = [
  37. 'eventBus',
  38. 'keyboard'
  39. ];
  40. /**
  41. * Register available keyboard bindings.
  42. *
  43. * @param {Keyboard} keyboard
  44. * @param {EditorActions} editorActions
  45. */
  46. KeyboardBindings.prototype.registerBindings = function(keyboard, editorActions) {
  47. /**
  48. * Add keyboard binding if respective editor action
  49. * is registered.
  50. *
  51. * @param {string} action name
  52. * @param {Function} fn that implements the key binding
  53. */
  54. function addListener(action, fn) {
  55. if (editorActions.isRegistered(action)) {
  56. keyboard.addListener(fn);
  57. }
  58. }
  59. // undo
  60. // (CTRL|CMD) + Z
  61. addListener('undo', function(context) {
  62. var event = context.keyEvent;
  63. if (isUndo(event)) {
  64. editorActions.trigger('undo');
  65. return true;
  66. }
  67. });
  68. // redo
  69. // CTRL + Y
  70. // CMD + SHIFT + Z
  71. addListener('redo', function(context) {
  72. var event = context.keyEvent;
  73. if (isRedo(event)) {
  74. editorActions.trigger('redo');
  75. return true;
  76. }
  77. });
  78. // copy
  79. // CTRL/CMD + C
  80. addListener('copy', function(context) {
  81. var event = context.keyEvent;
  82. if (isCopy(event)) {
  83. editorActions.trigger('copy');
  84. return true;
  85. }
  86. });
  87. // paste
  88. // CTRL/CMD + V
  89. addListener('paste', function(context) {
  90. var event = context.keyEvent;
  91. if (isPaste(event)) {
  92. editorActions.trigger('paste');
  93. return true;
  94. }
  95. });
  96. // zoom in one step
  97. // CTRL/CMD + +
  98. addListener('stepZoom', function(context) {
  99. var event = context.keyEvent;
  100. // quirk: it has to be triggered by `=` as well to work on international keyboard layout
  101. // cf: https://github.com/bpmn-io/bpmn-js/issues/1362#issuecomment-722989754
  102. if (isKey([ '+', 'Add', '=' ], event) && isCmd(event)) {
  103. editorActions.trigger('stepZoom', { value: 1 });
  104. return true;
  105. }
  106. });
  107. // zoom out one step
  108. // CTRL + -
  109. addListener('stepZoom', function(context) {
  110. var event = context.keyEvent;
  111. if (isKey([ '-', 'Subtract' ], event) && isCmd(event)) {
  112. editorActions.trigger('stepZoom', { value: -1 });
  113. return true;
  114. }
  115. });
  116. // zoom to the default level
  117. // CTRL + 0
  118. addListener('zoom', function(context) {
  119. var event = context.keyEvent;
  120. if (isKey('0', event) && isCmd(event)) {
  121. editorActions.trigger('zoom', { value: 1 });
  122. return true;
  123. }
  124. });
  125. // delete selected element
  126. // DEL
  127. addListener('removeSelection', function(context) {
  128. var event = context.keyEvent;
  129. if (isKey([ 'Backspace', 'Delete', 'Del' ], event)) {
  130. editorActions.trigger('removeSelection');
  131. return true;
  132. }
  133. });
  134. };