PreviewSupport.js 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124
  1. import {
  2. forEach
  3. } from 'min-dash';
  4. import {
  5. append as svgAppend,
  6. attr as svgAttr,
  7. clone as svgClone,
  8. create as svgCreate
  9. } from 'tiny-svg';
  10. /**
  11. * Adds support for previews of moving/resizing elements.
  12. */
  13. export default function PreviewSupport(elementRegistry, canvas, styles) {
  14. this._elementRegistry = elementRegistry;
  15. this._canvas = canvas;
  16. this._styles = styles;
  17. }
  18. PreviewSupport.$inject = [
  19. 'elementRegistry',
  20. 'canvas',
  21. 'styles'
  22. ];
  23. /**
  24. * Returns graphics of an element.
  25. *
  26. * @param {djs.model.Base} element
  27. *
  28. * @return {SVGElement}
  29. */
  30. PreviewSupport.prototype.getGfx = function(element) {
  31. return this._elementRegistry.getGraphics(element);
  32. };
  33. /**
  34. * Adds a move preview of a given shape to a given svg group.
  35. *
  36. * @param {djs.model.Base} element
  37. * @param {SVGElement} group
  38. *
  39. * @return {SVGElement} dragger
  40. */
  41. PreviewSupport.prototype.addDragger = function(shape, group) {
  42. var gfx = this.getGfx(shape);
  43. // clone is not included in tsvg for some reason
  44. var dragger = svgClone(gfx);
  45. var bbox = gfx.getBoundingClientRect();
  46. // remove markers from connections
  47. if (isConnection(shape)) {
  48. removeMarkers(dragger);
  49. }
  50. svgAttr(dragger, this._styles.cls('djs-dragger', [], {
  51. x: bbox.top,
  52. y: bbox.left
  53. }));
  54. svgAppend(group, dragger);
  55. return dragger;
  56. };
  57. /**
  58. * Adds a resize preview of a given shape to a given svg group.
  59. *
  60. * @param {djs.model.Base} element
  61. * @param {SVGElement} group
  62. *
  63. * @return {SVGElement} frame
  64. */
  65. PreviewSupport.prototype.addFrame = function(shape, group) {
  66. var frame = svgCreate('rect', {
  67. class: 'djs-resize-overlay',
  68. width: shape.width,
  69. height: shape.height,
  70. x: shape.x,
  71. y: shape.y
  72. });
  73. svgAppend(group, frame);
  74. return frame;
  75. };
  76. // helpers //////////////////////
  77. /**
  78. * Removes all svg marker references from an SVG.
  79. *
  80. * @param {SVGElement} gfx
  81. */
  82. function removeMarkers(gfx) {
  83. if (gfx.children) {
  84. forEach(gfx.children, function(child) {
  85. // recursion
  86. removeMarkers(child);
  87. });
  88. }
  89. gfx.style.markerStart = '';
  90. gfx.style.markerEnd = '';
  91. }
  92. /**
  93. * Checks if an element is a connection.
  94. */
  95. function isConnection(element) {
  96. return element.waypoints;
  97. }