LabelEditingPreview.js 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145
  1. import {
  2. append as svgAppend,
  3. attr as svgAttr,
  4. create as svgCreate,
  5. remove as svgRemove
  6. } from 'tiny-svg';
  7. import {
  8. getDi,
  9. is
  10. } from '../../util/ModelUtil';
  11. import {
  12. translate
  13. } from 'diagram-js/lib/util/SvgTransformUtil';
  14. /**
  15. * @typedef {import('diagram-js/lib/core/Canvas').default} Canvas
  16. * @typedef {import('diagram-js/lib/core/EventBus').default} EventBus
  17. * @typedef {import('../../draw/PathMap').default} PathMap
  18. */
  19. var MARKER_HIDDEN = 'djs-element-hidden',
  20. MARKER_LABEL_HIDDEN = 'djs-label-hidden';
  21. /**
  22. * @param {EventBus} eventBus
  23. * @param {Canvas} canvas
  24. * @param {PathMap} pathMap
  25. */
  26. export default function LabelEditingPreview(eventBus, canvas, pathMap) {
  27. var self = this;
  28. var defaultLayer = canvas.getDefaultLayer();
  29. var element, absoluteElementBBox, gfx;
  30. eventBus.on('directEditing.activate', function(context) {
  31. var activeProvider = context.active;
  32. element = activeProvider.element.label || activeProvider.element;
  33. // text annotation
  34. if (is(element, 'bpmn:TextAnnotation')) {
  35. absoluteElementBBox = canvas.getAbsoluteBBox(element);
  36. gfx = svgCreate('g');
  37. var textPathData = pathMap.getScaledPath('TEXT_ANNOTATION', {
  38. xScaleFactor: 1,
  39. yScaleFactor: 1,
  40. containerWidth: element.width,
  41. containerHeight: element.height,
  42. position: {
  43. mx: 0.0,
  44. my: 0.0
  45. }
  46. });
  47. var path = self.path = svgCreate('path');
  48. svgAttr(path, {
  49. d: textPathData,
  50. strokeWidth: 2,
  51. stroke: getStrokeColor(element)
  52. });
  53. svgAppend(gfx, path);
  54. svgAppend(defaultLayer, gfx);
  55. translate(gfx, element.x, element.y);
  56. }
  57. if (is(element, 'bpmn:TextAnnotation') ||
  58. element.labelTarget) {
  59. canvas.addMarker(element, MARKER_HIDDEN);
  60. } else if (is(element, 'bpmn:Task') ||
  61. is(element, 'bpmn:CallActivity') ||
  62. is(element, 'bpmn:SubProcess') ||
  63. is(element, 'bpmn:Participant')) {
  64. canvas.addMarker(element, MARKER_LABEL_HIDDEN);
  65. }
  66. });
  67. eventBus.on('directEditing.resize', function(context) {
  68. // text annotation
  69. if (is(element, 'bpmn:TextAnnotation')) {
  70. var height = context.height,
  71. dy = context.dy;
  72. var newElementHeight = Math.max(element.height / absoluteElementBBox.height * (height + dy), 0);
  73. var textPathData = pathMap.getScaledPath('TEXT_ANNOTATION', {
  74. xScaleFactor: 1,
  75. yScaleFactor: 1,
  76. containerWidth: element.width,
  77. containerHeight: newElementHeight,
  78. position: {
  79. mx: 0.0,
  80. my: 0.0
  81. }
  82. });
  83. svgAttr(self.path, {
  84. d: textPathData
  85. });
  86. }
  87. });
  88. eventBus.on([ 'directEditing.complete', 'directEditing.cancel' ], function(context) {
  89. var activeProvider = context.active;
  90. if (activeProvider) {
  91. canvas.removeMarker(activeProvider.element.label || activeProvider.element, MARKER_HIDDEN);
  92. canvas.removeMarker(element, MARKER_LABEL_HIDDEN);
  93. }
  94. element = undefined;
  95. absoluteElementBBox = undefined;
  96. if (gfx) {
  97. svgRemove(gfx);
  98. gfx = undefined;
  99. }
  100. });
  101. }
  102. LabelEditingPreview.$inject = [
  103. 'eventBus',
  104. 'canvas',
  105. 'pathMap'
  106. ];
  107. // helpers //////////
  108. function getStrokeColor(element, defaultColor) {
  109. var di = getDi(element);
  110. return di.get('stroke') || defaultColor || 'black';
  111. }