BpmnReplacePreview.js 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
  1. import CommandInterceptor from 'diagram-js/lib/command/CommandInterceptor';
  2. import inherits from 'inherits-browser';
  3. import { escapeCSS as cssEscape } from 'diagram-js/lib/util/EscapeUtil';
  4. import {
  5. assign,
  6. forEach
  7. } from 'min-dash';
  8. import {
  9. query as domQuery
  10. } from 'min-dom';
  11. import {
  12. attr as svgAttr
  13. } from 'tiny-svg';
  14. /**
  15. * @typedef {import('diagram-js/lib/core/EventBus').default} EventBus
  16. * @typedef {import('diagram-js/lib/core/ElementRegistry').default} ElementRegistry
  17. * @typedef {import('diagram-js/lib/core/ElementFactory').default} ElementFactory
  18. * @typedef {import('diagram-js/lib/core/Canvas').default} Canvas
  19. * @typedef {import('diagram-js/lib/features/preview-support/PreviewSupport').default} PreviewSupport
  20. */
  21. var LOW_PRIORITY = 250;
  22. /**
  23. * @param {EventBus} eventBus
  24. * @param {ElementRegistry} elementRegistry
  25. * @param {ElementFactory} elementFactory
  26. * @param {Canvas} canvas
  27. * @param {PreviewSupport} previewSupport
  28. */
  29. export default function BpmnReplacePreview(
  30. eventBus, elementRegistry, elementFactory,
  31. canvas, previewSupport) {
  32. CommandInterceptor.call(this, eventBus);
  33. /**
  34. * Replace the visuals of all elements in the context which can be replaced
  35. *
  36. * @param {Object} context
  37. */
  38. function replaceVisual(context) {
  39. var replacements = context.canExecute.replacements;
  40. forEach(replacements, function(replacement) {
  41. var id = replacement.oldElementId;
  42. var newElement = {
  43. type: replacement.newElementType
  44. };
  45. // if the visual of the element is already replaced
  46. if (context.visualReplacements[id]) {
  47. return;
  48. }
  49. var element = elementRegistry.get(id);
  50. assign(newElement, { x: element.x, y: element.y });
  51. // create a temporary shape
  52. var tempShape = elementFactory.createShape(newElement);
  53. canvas.addShape(tempShape, element.parent);
  54. // select the original SVG element related to the element and hide it
  55. var gfx = domQuery('[data-element-id="' + cssEscape(element.id) + '"]', context.dragGroup);
  56. if (gfx) {
  57. svgAttr(gfx, { display: 'none' });
  58. }
  59. // clone the gfx of the temporary shape and add it to the drag group
  60. var dragger = previewSupport.addDragger(tempShape, context.dragGroup);
  61. context.visualReplacements[id] = dragger;
  62. canvas.removeShape(tempShape);
  63. });
  64. }
  65. /**
  66. * Restore the original visuals of the previously replaced elements
  67. *
  68. * @param {Object} context
  69. */
  70. function restoreVisual(context) {
  71. var visualReplacements = context.visualReplacements;
  72. forEach(visualReplacements, function(dragger, id) {
  73. var originalGfx = domQuery('[data-element-id="' + cssEscape(id) + '"]', context.dragGroup);
  74. if (originalGfx) {
  75. svgAttr(originalGfx, { display: 'inline' });
  76. }
  77. dragger.remove();
  78. if (visualReplacements[id]) {
  79. delete visualReplacements[id];
  80. }
  81. });
  82. }
  83. eventBus.on('shape.move.move', LOW_PRIORITY, function(event) {
  84. var context = event.context,
  85. canExecute = context.canExecute;
  86. if (!context.visualReplacements) {
  87. context.visualReplacements = {};
  88. }
  89. if (canExecute && canExecute.replacements) {
  90. replaceVisual(context);
  91. } else {
  92. restoreVisual(context);
  93. }
  94. });
  95. }
  96. BpmnReplacePreview.$inject = [
  97. 'eventBus',
  98. 'elementRegistry',
  99. 'elementFactory',
  100. 'canvas',
  101. 'previewSupport'
  102. ];
  103. inherits(BpmnReplacePreview, CommandInterceptor);