HandTool.js 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159
  1. import {
  2. hasPrimaryModifier
  3. } from '../../util/Mouse';
  4. import { isKey } from '../../features/keyboard/KeyboardUtil';
  5. var HIGH_PRIORITY = 1500;
  6. var HAND_CURSOR = 'grab';
  7. export default function HandTool(
  8. eventBus, canvas, dragging,
  9. injector, toolManager, mouse) {
  10. this._dragging = dragging;
  11. this._mouse = mouse;
  12. var self = this,
  13. keyboard = injector.get('keyboard', false);
  14. toolManager.registerTool('hand', {
  15. tool: 'hand',
  16. dragging: 'hand.move'
  17. });
  18. eventBus.on('element.mousedown', HIGH_PRIORITY, function(event) {
  19. if (!hasPrimaryModifier(event)) {
  20. return;
  21. }
  22. self.activateMove(event.originalEvent, true);
  23. return false;
  24. });
  25. keyboard && keyboard.addListener(HIGH_PRIORITY, function(e) {
  26. if (!isSpace(e.keyEvent) || self.isActive()) {
  27. return;
  28. }
  29. var mouseEvent = self._mouse.getLastMoveEvent();
  30. self.activateMove(mouseEvent, !!mouseEvent);
  31. }, 'keyboard.keydown');
  32. keyboard && keyboard.addListener(HIGH_PRIORITY, function(e) {
  33. if (!isSpace(e.keyEvent) || !self.isActive()) {
  34. return;
  35. }
  36. self.toggle();
  37. }, 'keyboard.keyup');
  38. eventBus.on('hand.end', function(event) {
  39. var target = event.originalEvent.target;
  40. // only reactive on diagram click
  41. // on some occasions, event.hover is not set and we have to check if the target is an svg
  42. if (!event.hover && !(target instanceof SVGElement)) {
  43. return false;
  44. }
  45. eventBus.once('hand.ended', function() {
  46. self.activateMove(event.originalEvent, { reactivate: true });
  47. });
  48. });
  49. eventBus.on('hand.move.move', function(event) {
  50. var scale = canvas.viewbox().scale;
  51. canvas.scroll({
  52. dx: event.dx * scale,
  53. dy: event.dy * scale
  54. });
  55. });
  56. eventBus.on('hand.move.end', function(event) {
  57. var context = event.context,
  58. reactivate = context.reactivate;
  59. // Don't reactivate if the user is using the keyboard keybinding
  60. if (!hasPrimaryModifier(event) && reactivate) {
  61. eventBus.once('hand.move.ended', function(event) {
  62. self.activateHand(event.originalEvent, true, true);
  63. });
  64. }
  65. return false;
  66. });
  67. }
  68. HandTool.$inject = [
  69. 'eventBus',
  70. 'canvas',
  71. 'dragging',
  72. 'injector',
  73. 'toolManager',
  74. 'mouse'
  75. ];
  76. HandTool.prototype.activateMove = function(event, autoActivate, context) {
  77. if (typeof autoActivate === 'object') {
  78. context = autoActivate;
  79. autoActivate = false;
  80. }
  81. this._dragging.init(event, 'hand.move', {
  82. autoActivate: autoActivate,
  83. cursor: HAND_CURSOR,
  84. data: {
  85. context: context || {}
  86. }
  87. });
  88. };
  89. HandTool.prototype.activateHand = function(event, autoActivate, reactivate) {
  90. this._dragging.init(event, 'hand', {
  91. trapClick: false,
  92. autoActivate: autoActivate,
  93. cursor: HAND_CURSOR,
  94. data: {
  95. context: {
  96. reactivate: reactivate
  97. }
  98. }
  99. });
  100. };
  101. HandTool.prototype.toggle = function() {
  102. if (this.isActive()) {
  103. return this._dragging.cancel();
  104. }
  105. var mouseEvent = this._mouse.getLastMoveEvent();
  106. this.activateHand(mouseEvent, !!mouseEvent);
  107. };
  108. HandTool.prototype.isActive = function() {
  109. var context = this._dragging.context();
  110. if (context) {
  111. return /^(hand|hand\.move)$/.test(context.prefix);
  112. }
  113. return false;
  114. };
  115. // helpers //////////
  116. function isSpace(keyEvent) {
  117. return isKey('Space', keyEvent);
  118. }