all files / lib/features/preview-support/ PreviewSupport.js

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