LassoTool.js 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253
  1. import { values } from 'min-dash';
  2. import { getEnclosedElements } from '../../util/Elements';
  3. import { hasSecondaryModifier } from '../../util/Mouse';
  4. import {
  5. append as svgAppend,
  6. attr as svgAttr,
  7. create as svgCreate,
  8. remove as svgRemove
  9. } from 'tiny-svg';
  10. var LASSO_TOOL_CURSOR = 'crosshair';
  11. export default function LassoTool(
  12. eventBus, canvas, dragging,
  13. elementRegistry, selection, toolManager) {
  14. this._selection = selection;
  15. this._dragging = dragging;
  16. var self = this;
  17. // lasso visuals implementation
  18. /**
  19. * A helper that realizes the selection box visual
  20. */
  21. var visuals = {
  22. create: function(context) {
  23. var container = canvas.getDefaultLayer(),
  24. frame;
  25. frame = context.frame = svgCreate('rect');
  26. svgAttr(frame, {
  27. class: 'djs-lasso-overlay',
  28. width: 1,
  29. height: 1,
  30. x: 0,
  31. y: 0
  32. });
  33. svgAppend(container, frame);
  34. },
  35. update: function(context) {
  36. var frame = context.frame,
  37. bbox = context.bbox;
  38. svgAttr(frame, {
  39. x: bbox.x,
  40. y: bbox.y,
  41. width: bbox.width,
  42. height: bbox.height
  43. });
  44. },
  45. remove: function(context) {
  46. if (context.frame) {
  47. svgRemove(context.frame);
  48. }
  49. }
  50. };
  51. toolManager.registerTool('lasso', {
  52. tool: 'lasso.selection',
  53. dragging: 'lasso'
  54. });
  55. eventBus.on('lasso.selection.end', function(event) {
  56. var target = event.originalEvent.target;
  57. // only reactive on diagram click
  58. // on some occasions, event.hover is not set and we have to check if the target is an svg
  59. if (!event.hover && !(target instanceof SVGElement)) {
  60. return;
  61. }
  62. eventBus.once('lasso.selection.ended', function() {
  63. self.activateLasso(event.originalEvent, true);
  64. });
  65. });
  66. // lasso interaction implementation
  67. eventBus.on('lasso.end', function(event) {
  68. var bbox = toBBox(event);
  69. var elements = elementRegistry.filter(function(element) {
  70. return element;
  71. });
  72. self.select(elements, bbox);
  73. });
  74. eventBus.on('lasso.start', function(event) {
  75. var context = event.context;
  76. context.bbox = toBBox(event);
  77. visuals.create(context);
  78. });
  79. eventBus.on('lasso.move', function(event) {
  80. var context = event.context;
  81. context.bbox = toBBox(event);
  82. visuals.update(context);
  83. });
  84. eventBus.on('lasso.cleanup', function(event) {
  85. var context = event.context;
  86. visuals.remove(context);
  87. });
  88. // event integration
  89. eventBus.on('element.mousedown', 1500, function(event) {
  90. if (hasSecondaryModifier(event)) {
  91. self.activateLasso(event.originalEvent);
  92. // we've handled the event
  93. return true;
  94. }
  95. });
  96. }
  97. LassoTool.$inject = [
  98. 'eventBus',
  99. 'canvas',
  100. 'dragging',
  101. 'elementRegistry',
  102. 'selection',
  103. 'toolManager'
  104. ];
  105. LassoTool.prototype.activateLasso = function(event, autoActivate) {
  106. this._dragging.init(event, 'lasso', {
  107. autoActivate: autoActivate,
  108. cursor: LASSO_TOOL_CURSOR,
  109. data: {
  110. context: {}
  111. }
  112. });
  113. };
  114. LassoTool.prototype.activateSelection = function(event) {
  115. this._dragging.init(event, 'lasso.selection', {
  116. trapClick: false,
  117. cursor: LASSO_TOOL_CURSOR,
  118. data: {
  119. context: {}
  120. }
  121. });
  122. };
  123. LassoTool.prototype.select = function(elements, bbox) {
  124. var selectedElements = getEnclosedElements(elements, bbox);
  125. this._selection.select(values(selectedElements));
  126. };
  127. LassoTool.prototype.toggle = function() {
  128. if (this.isActive()) {
  129. this._dragging.cancel();
  130. } else {
  131. this.activateSelection();
  132. }
  133. };
  134. LassoTool.prototype.isActive = function() {
  135. var context = this._dragging.context();
  136. return context && /^lasso/.test(context.prefix);
  137. };
  138. function toBBox(event) {
  139. var start = {
  140. x: event.x - event.dx,
  141. y: event.y - event.dy
  142. };
  143. var end = {
  144. x: event.x,
  145. y: event.y
  146. };
  147. var bbox;
  148. if ((start.x <= end.x && start.y < end.y) ||
  149. (start.x < end.x && start.y <= end.y)) {
  150. bbox = {
  151. x: start.x,
  152. y: start.y,
  153. width: end.x - start.x,
  154. height: end.y - start.y
  155. };
  156. } else if ((start.x >= end.x && start.y < end.y) ||
  157. (start.x > end.x && start.y <= end.y)) {
  158. bbox = {
  159. x: end.x,
  160. y: start.y,
  161. width: start.x - end.x,
  162. height: end.y - start.y
  163. };
  164. } else if ((start.x <= end.x && start.y > end.y) ||
  165. (start.x < end.x && start.y >= end.y)) {
  166. bbox = {
  167. x: start.x,
  168. y: end.y,
  169. width: end.x - start.x,
  170. height: start.y - end.y
  171. };
  172. } else if ((start.x >= end.x && start.y > end.y) ||
  173. (start.x > end.x && start.y >= end.y)) {
  174. bbox = {
  175. x: end.x,
  176. y: end.y,
  177. width: start.x - end.x,
  178. height: start.y - end.y
  179. };
  180. } else {
  181. bbox = {
  182. x: end.x,
  183. y: end.y,
  184. width: 0,
  185. height: 0
  186. };
  187. }
  188. return bbox;
  189. }