AttachSupport.js 7.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332
  1. import {
  2. flatten,
  3. filter,
  4. forEach,
  5. groupBy,
  6. map,
  7. unionBy
  8. } from 'min-dash';
  9. import { saveClear } from '../../util/Removal';
  10. import { getNewAttachShapeDelta } from '../../util/AttachUtil';
  11. import inherits from 'inherits-browser';
  12. import CommandInterceptor from '../../command/CommandInterceptor';
  13. var LOW_PRIORITY = 251,
  14. HIGH_PRIORITY = 1401;
  15. var MARKER_ATTACH = 'attach-ok';
  16. /**
  17. * Adds the notion of attached elements to the modeler.
  18. *
  19. * Optionally depends on `diagram-js/lib/features/move` to render
  20. * the attached elements during move preview.
  21. *
  22. * Optionally depends on `diagram-js/lib/features/label-support`
  23. * to render attached labels during move preview.
  24. *
  25. * @param {didi.Injector} injector
  26. * @param {EventBus} eventBus
  27. * @param {Canvas} canvas
  28. * @param {Rules} rules
  29. * @param {Modeling} modeling
  30. */
  31. export default function AttachSupport(injector, eventBus, canvas, rules, modeling) {
  32. CommandInterceptor.call(this, eventBus);
  33. var movePreview = injector.get('movePreview', false);
  34. // remove all the attached elements from the shapes to be validated
  35. // add all the attached shapes to the overall list of moved shapes
  36. eventBus.on('shape.move.start', HIGH_PRIORITY, function(e) {
  37. var context = e.context,
  38. shapes = context.shapes,
  39. validatedShapes = context.validatedShapes;
  40. context.shapes = addAttached(shapes);
  41. context.validatedShapes = removeAttached(validatedShapes);
  42. });
  43. // add attachers to the visual's group
  44. movePreview && eventBus.on('shape.move.start', LOW_PRIORITY, function(e) {
  45. var context = e.context,
  46. shapes = context.shapes,
  47. attachers = getAttachers(shapes);
  48. forEach(attachers, function(attacher) {
  49. movePreview.makeDraggable(context, attacher, true);
  50. forEach(attacher.labels, function(label) {
  51. movePreview.makeDraggable(context, label, true);
  52. });
  53. });
  54. });
  55. // add attach-ok marker to current host
  56. movePreview && eventBus.on('shape.move.start', function(event) {
  57. var context = event.context,
  58. shapes = context.shapes;
  59. if (shapes.length !== 1) {
  60. return;
  61. }
  62. var shape = shapes[0];
  63. var host = shape.host;
  64. if (host) {
  65. canvas.addMarker(host, MARKER_ATTACH);
  66. eventBus.once([
  67. 'shape.move.out',
  68. 'shape.move.cleanup'
  69. ], function() {
  70. canvas.removeMarker(host, MARKER_ATTACH);
  71. });
  72. }
  73. });
  74. // add all attachers to move closure
  75. this.preExecuted('elements.move', HIGH_PRIORITY, function(e) {
  76. var context = e.context,
  77. closure = context.closure,
  78. shapes = context.shapes,
  79. attachers = getAttachers(shapes);
  80. forEach(attachers, function(attacher) {
  81. closure.add(attacher, closure.topLevel[attacher.host.id]);
  82. });
  83. });
  84. // perform the attaching after shapes are done moving
  85. this.postExecuted('elements.move', function(e) {
  86. var context = e.context,
  87. shapes = context.shapes,
  88. newHost = context.newHost,
  89. attachers;
  90. // only single elements can be attached
  91. // multiply elements can be detached
  92. if (newHost && shapes.length !== 1) {
  93. return;
  94. }
  95. if (newHost) {
  96. attachers = shapes;
  97. } else {
  98. // find attachers moved without host
  99. attachers = filter(shapes, function(shape) {
  100. var host = shape.host;
  101. return isAttacher(shape) && !includes(shapes, host);
  102. });
  103. }
  104. forEach(attachers, function(attacher) {
  105. modeling.updateAttachment(attacher, newHost);
  106. });
  107. });
  108. // ensure invalid attachment connections are removed
  109. this.postExecuted('elements.move', function(e) {
  110. var shapes = e.context.shapes;
  111. forEach(shapes, function(shape) {
  112. forEach(shape.attachers, function(attacher) {
  113. // remove invalid outgoing connections
  114. forEach(attacher.outgoing.slice(), function(connection) {
  115. var allowed = rules.allowed('connection.reconnect', {
  116. connection: connection,
  117. source: connection.source,
  118. target: connection.target
  119. });
  120. if (!allowed) {
  121. modeling.removeConnection(connection);
  122. }
  123. });
  124. // remove invalid incoming connections
  125. forEach(attacher.incoming.slice(), function(connection) {
  126. var allowed = rules.allowed('connection.reconnect', {
  127. connection: connection,
  128. source: connection.source,
  129. target: connection.target
  130. });
  131. if (!allowed) {
  132. modeling.removeConnection(connection);
  133. }
  134. });
  135. });
  136. });
  137. });
  138. this.postExecute('shape.create', function(e) {
  139. var context = e.context,
  140. shape = context.shape,
  141. host = context.host;
  142. if (host) {
  143. modeling.updateAttachment(shape, host);
  144. }
  145. });
  146. // update attachments if the host is replaced
  147. this.postExecute('shape.replace', function(e) {
  148. var context = e.context,
  149. oldShape = context.oldShape,
  150. newShape = context.newShape;
  151. // move the attachers to the new host
  152. saveClear(oldShape.attachers, function(attacher) {
  153. var allowed = rules.allowed('elements.move', {
  154. target: newShape,
  155. shapes: [ attacher ]
  156. });
  157. if (allowed === 'attach') {
  158. modeling.updateAttachment(attacher, newShape);
  159. } else {
  160. modeling.removeShape(attacher);
  161. }
  162. });
  163. // move attachers if new host has different size
  164. if (newShape.attachers.length) {
  165. forEach(newShape.attachers, function(attacher) {
  166. var delta = getNewAttachShapeDelta(attacher, oldShape, newShape);
  167. modeling.moveShape(attacher, delta, attacher.parent);
  168. });
  169. }
  170. });
  171. // move shape on host resize
  172. this.postExecute('shape.resize', function(event) {
  173. var context = event.context,
  174. shape = context.shape,
  175. oldBounds = context.oldBounds,
  176. newBounds = context.newBounds,
  177. attachers = shape.attachers,
  178. hints = context.hints || {};
  179. if (hints.attachSupport === false) {
  180. return;
  181. }
  182. forEach(attachers, function(attacher) {
  183. var delta = getNewAttachShapeDelta(attacher, oldBounds, newBounds);
  184. modeling.moveShape(attacher, delta, attacher.parent);
  185. forEach(attacher.labels, function(label) {
  186. modeling.moveShape(label, delta, label.parent);
  187. });
  188. });
  189. });
  190. // remove attachments
  191. this.preExecute('shape.delete', function(event) {
  192. var shape = event.context.shape;
  193. saveClear(shape.attachers, function(attacher) {
  194. modeling.removeShape(attacher);
  195. });
  196. if (shape.host) {
  197. modeling.updateAttachment(shape, null);
  198. }
  199. });
  200. }
  201. inherits(AttachSupport, CommandInterceptor);
  202. AttachSupport.$inject = [
  203. 'injector',
  204. 'eventBus',
  205. 'canvas',
  206. 'rules',
  207. 'modeling'
  208. ];
  209. /**
  210. * Return attachers of the given shapes
  211. *
  212. * @param {Array<djs.model.Base>} shapes
  213. * @return {Array<djs.model.Base>}
  214. */
  215. function getAttachers(shapes) {
  216. return flatten(map(shapes, function(s) {
  217. return s.attachers || [];
  218. }));
  219. }
  220. /**
  221. * Return a combined list of elements and
  222. * attachers.
  223. *
  224. * @param {Array<djs.model.Base>} elements
  225. * @return {Array<djs.model.Base>} filtered
  226. */
  227. function addAttached(elements) {
  228. var attachers = getAttachers(elements);
  229. return unionBy('id', elements, attachers);
  230. }
  231. /**
  232. * Return a filtered list of elements that do not
  233. * contain attached elements with hosts being part
  234. * of the selection.
  235. *
  236. * @param {Array<djs.model.Base>} elements
  237. *
  238. * @return {Array<djs.model.Base>} filtered
  239. */
  240. function removeAttached(elements) {
  241. var ids = groupBy(elements, 'id');
  242. return filter(elements, function(element) {
  243. while (element) {
  244. // host in selection
  245. if (element.host && ids[element.host.id]) {
  246. return false;
  247. }
  248. element = element.parent;
  249. }
  250. return true;
  251. });
  252. }
  253. function isAttacher(shape) {
  254. return !!shape.host;
  255. }
  256. function includes(array, item) {
  257. return array.indexOf(item) !== -1;
  258. }