LabelBehavior.js 8.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402
  1. import {
  2. assign
  3. } from 'min-dash';
  4. import inherits from 'inherits';
  5. import {
  6. is,
  7. getBusinessObject
  8. } from '../../../util/ModelUtil';
  9. import {
  10. isLabelExternal,
  11. getExternalLabelMid,
  12. hasExternalLabel,
  13. isLabel
  14. } from '../../../util/LabelUtil';
  15. import {
  16. getLabel
  17. } from '../../label-editing/LabelUtil';
  18. import {
  19. getLabelAdjustment
  20. } from './util/LabelLayoutUtil';
  21. import CommandInterceptor from 'diagram-js/lib/command/CommandInterceptor';
  22. import {
  23. getNewAttachPoint
  24. } from 'diagram-js/lib/util/AttachUtil';
  25. import {
  26. getMid,
  27. roundPoint
  28. } from 'diagram-js/lib/layout/LayoutUtil';
  29. import {
  30. delta
  31. } from 'diagram-js/lib/util/PositionUtil';
  32. import {
  33. sortBy
  34. } from 'min-dash';
  35. import {
  36. getDistancePointLine,
  37. perpendicularFoot
  38. } from './util/GeometricUtil';
  39. var DEFAULT_LABEL_DIMENSIONS = {
  40. width: 90,
  41. height: 20
  42. };
  43. var NAME_PROPERTY = 'name';
  44. var TEXT_PROPERTY = 'text';
  45. /**
  46. * A component that makes sure that external labels are added
  47. * together with respective elements and properly updated (DI wise)
  48. * during move.
  49. *
  50. * @param {EventBus} eventBus
  51. * @param {Modeling} modeling
  52. * @param {BpmnFactory} bpmnFactory
  53. * @param {TextRenderer} textRenderer
  54. */
  55. export default function LabelBehavior(
  56. eventBus, modeling, bpmnFactory,
  57. textRenderer) {
  58. CommandInterceptor.call(this, eventBus);
  59. // update label if name property was updated
  60. this.postExecute('element.updateProperties', function(e) {
  61. var context = e.context,
  62. element = context.element,
  63. properties = context.properties;
  64. if (NAME_PROPERTY in properties) {
  65. modeling.updateLabel(element, properties[NAME_PROPERTY]);
  66. }
  67. if (TEXT_PROPERTY in properties
  68. && is(element, 'bpmn:TextAnnotation')) {
  69. var newBounds = textRenderer.getTextAnnotationBounds(
  70. {
  71. x: element.x,
  72. y: element.y,
  73. width: element.width,
  74. height: element.height
  75. },
  76. properties[TEXT_PROPERTY] || ''
  77. );
  78. modeling.updateLabel(element, properties.text, newBounds);
  79. }
  80. });
  81. // create label shape after shape/connection was created
  82. this.postExecute([ 'shape.create', 'connection.create' ], function(e) {
  83. var context = e.context,
  84. hints = context.hints || {};
  85. if (hints.createElementsBehavior === false) {
  86. return;
  87. }
  88. var element = context.shape || context.connection,
  89. businessObject = element.businessObject;
  90. if (isLabel(element) || !isLabelExternal(element)) {
  91. return;
  92. }
  93. // only create label if attribute available
  94. if (!getLabel(element)) {
  95. return;
  96. }
  97. var labelCenter = getExternalLabelMid(element);
  98. // we don't care about x and y
  99. var labelDimensions = textRenderer.getExternalLabelBounds(
  100. DEFAULT_LABEL_DIMENSIONS,
  101. getLabel(element)
  102. );
  103. modeling.createLabel(element, labelCenter, {
  104. id: businessObject.id + '_label',
  105. businessObject: businessObject,
  106. width: labelDimensions.width,
  107. height: labelDimensions.height
  108. });
  109. });
  110. // update label after label shape was deleted
  111. this.postExecute('shape.delete', function(event) {
  112. var context = event.context,
  113. labelTarget = context.labelTarget,
  114. hints = context.hints || {};
  115. // check if label
  116. if (labelTarget && hints.unsetLabel !== false) {
  117. modeling.updateLabel(labelTarget, null, null, { removeShape: false });
  118. }
  119. });
  120. // update di information on label creation
  121. this.postExecute([ 'label.create' ], function(event) {
  122. var context = event.context,
  123. element = context.shape,
  124. businessObject,
  125. di;
  126. // we want to trigger on real labels only
  127. if (!element.labelTarget) {
  128. return;
  129. }
  130. // we want to trigger on BPMN elements only
  131. if (!is(element.labelTarget || element, 'bpmn:BaseElement')) {
  132. return;
  133. }
  134. businessObject = element.businessObject,
  135. di = businessObject.di;
  136. if (!di.label) {
  137. di.label = bpmnFactory.create('bpmndi:BPMNLabel', {
  138. bounds: bpmnFactory.create('dc:Bounds')
  139. });
  140. }
  141. assign(di.label.bounds, {
  142. x: element.x,
  143. y: element.y,
  144. width: element.width,
  145. height: element.height
  146. });
  147. });
  148. function getVisibleLabelAdjustment(event) {
  149. var context = event.context,
  150. connection = context.connection,
  151. label = connection.label,
  152. hints = assign({}, context.hints),
  153. newWaypoints = context.newWaypoints || connection.waypoints,
  154. oldWaypoints = context.oldWaypoints;
  155. if (typeof hints.startChanged === 'undefined') {
  156. hints.startChanged = !!hints.connectionStart;
  157. }
  158. if (typeof hints.endChanged === 'undefined') {
  159. hints.endChanged = !!hints.connectionEnd;
  160. }
  161. return getLabelAdjustment(label, newWaypoints, oldWaypoints, hints);
  162. }
  163. this.postExecute([
  164. 'connection.layout',
  165. 'connection.updateWaypoints'
  166. ], function(event) {
  167. var context = event.context,
  168. hints = context.hints || {};
  169. if (hints.labelBehavior === false) {
  170. return;
  171. }
  172. var connection = context.connection,
  173. label = connection.label,
  174. labelAdjustment;
  175. // handle missing label as well as the case
  176. // that the label parent does not exist (yet),
  177. // because it is being pasted / created via multi element create
  178. //
  179. // Cf. https://github.com/bpmn-io/bpmn-js/pull/1227
  180. if (!label || !label.parent) {
  181. return;
  182. }
  183. labelAdjustment = getVisibleLabelAdjustment(event);
  184. modeling.moveShape(label, labelAdjustment);
  185. });
  186. // keep label position on shape replace
  187. this.postExecute([ 'shape.replace' ], function(event) {
  188. var context = event.context,
  189. newShape = context.newShape,
  190. oldShape = context.oldShape;
  191. var businessObject = getBusinessObject(newShape);
  192. if (businessObject
  193. && isLabelExternal(businessObject)
  194. && oldShape.label
  195. && newShape.label) {
  196. newShape.label.x = oldShape.label.x;
  197. newShape.label.y = oldShape.label.y;
  198. }
  199. });
  200. // move external label after resizing
  201. this.postExecute('shape.resize', function(event) {
  202. var context = event.context,
  203. shape = context.shape,
  204. newBounds = context.newBounds,
  205. oldBounds = context.oldBounds;
  206. if (hasExternalLabel(shape)) {
  207. var label = shape.label,
  208. labelMid = getMid(label),
  209. edges = asEdges(oldBounds);
  210. // get nearest border point to label as reference point
  211. var referencePoint = getReferencePoint(labelMid, edges);
  212. var delta = getReferencePointDelta(referencePoint, oldBounds, newBounds);
  213. modeling.moveShape(label, delta);
  214. }
  215. });
  216. }
  217. inherits(LabelBehavior, CommandInterceptor);
  218. LabelBehavior.$inject = [
  219. 'eventBus',
  220. 'modeling',
  221. 'bpmnFactory',
  222. 'textRenderer'
  223. ];
  224. // helpers //////////////////////
  225. /**
  226. * Calculates a reference point delta relative to a new position
  227. * of a certain element's bounds
  228. *
  229. * @param {Point} point
  230. * @param {Bounds} oldBounds
  231. * @param {Bounds} newBounds
  232. *
  233. * @return {Delta} delta
  234. */
  235. export function getReferencePointDelta(referencePoint, oldBounds, newBounds) {
  236. var newReferencePoint = getNewAttachPoint(referencePoint, oldBounds, newBounds);
  237. return roundPoint(delta(newReferencePoint, referencePoint));
  238. }
  239. /**
  240. * Generates the nearest point (reference point) for a given point
  241. * onto given set of lines
  242. *
  243. * @param {Array<Point, Point>} lines
  244. * @param {Point} point
  245. *
  246. * @param {Point}
  247. */
  248. export function getReferencePoint(point, lines) {
  249. if (!lines.length) {
  250. return;
  251. }
  252. var nearestLine = getNearestLine(point, lines);
  253. return perpendicularFoot(point, nearestLine);
  254. }
  255. /**
  256. * Convert the given bounds to a lines array containing all edges
  257. *
  258. * @param {Bounds|Point} bounds
  259. *
  260. * @return Array<Point>
  261. */
  262. export function asEdges(bounds) {
  263. return [
  264. [ // top
  265. {
  266. x: bounds.x,
  267. y: bounds.y
  268. },
  269. {
  270. x: bounds.x + (bounds.width || 0),
  271. y: bounds.y
  272. }
  273. ],
  274. [ // right
  275. {
  276. x: bounds.x + (bounds.width || 0),
  277. y: bounds.y
  278. },
  279. {
  280. x: bounds.x + (bounds.width || 0),
  281. y: bounds.y + (bounds.height || 0)
  282. }
  283. ],
  284. [ // bottom
  285. {
  286. x: bounds.x,
  287. y: bounds.y + (bounds.height || 0)
  288. },
  289. {
  290. x: bounds.x + (bounds.width || 0),
  291. y: bounds.y + (bounds.height || 0)
  292. }
  293. ],
  294. [ // left
  295. {
  296. x: bounds.x,
  297. y: bounds.y
  298. },
  299. {
  300. x: bounds.x,
  301. y: bounds.y + (bounds.height || 0)
  302. }
  303. ]
  304. ];
  305. }
  306. /**
  307. * Returns the nearest line for a given point by distance
  308. * @param {Point} point
  309. * @param Array<Point> lines
  310. *
  311. * @return Array<Point>
  312. */
  313. function getNearestLine(point, lines) {
  314. var distances = lines.map(function(l) {
  315. return {
  316. line: l,
  317. distance: getDistancePointLine(point, l)
  318. };
  319. });
  320. var sorted = sortBy(distances, 'distance');
  321. return sorted[0].line;
  322. }