all files / lib/draw/ DefaultRenderer.js

100% Statements 32/32
100% Branches 8/8
100% Functions 6/6
100% Lines 32/32
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                                                    925×   925× 925×         3835×       2878× 2878×           2878×   2878×   2878×       770× 770×   770×       93× 93× 93× 93×   93×               93×     94×   94×   94×       350×   350×     94×        
import inherits from 'inherits';
 
import BaseRenderer from './BaseRenderer';
 
import {
  componentsToPath,
  createLine
} from '../util/RenderUtil';
 
import {
  append as svgAppend,
  attr as svgAttr,
  create as svgCreate
} from 'tiny-svg';
 
// apply default renderer with lowest possible priority
// so that it only kicks in if noone else could render
var DEFAULT_RENDER_PRIORITY = 1;
 
/**
 * The default renderer used for shapes and connections.
 *
 * @param {EventBus} eventBus
 * @param {Styles} styles
 */
export default function DefaultRenderer(eventBus, styles) {
  //
  BaseRenderer.call(this, eventBus, DEFAULT_RENDER_PRIORITY);
 
  this.CONNECTION_STYLE = styles.style([ 'no-fill' ], { strokeWidth: 5, stroke: 'fuchsia' });
  this.SHAPE_STYLE = styles.style({ fill: 'white', stroke: 'fuchsia', strokeWidth: 2 });
}
 
inherits(DefaultRenderer, BaseRenderer);
 
 
DefaultRenderer.prototype.canRender = function() {
  return true;
};
 
DefaultRenderer.prototype.drawShape = function drawShape(visuals, element) {
 
  var rect = svgCreate('rect');
  svgAttr(rect, {
    x: 0,
    y: 0,
    width: element.width || 0,
    height: element.height || 0
  });
  svgAttr(rect, this.SHAPE_STYLE);
 
  svgAppend(visuals, rect);
 
  return rect;
};
 
DefaultRenderer.prototype.drawConnection = function drawConnection(visuals, connection) {
 
  var line = createLine(connection.waypoints, this.CONNECTION_STYLE);
  svgAppend(visuals, line);
 
  return line;
};
 
DefaultRenderer.prototype.getShapePath = function getShapePath(shape) {
 
  var x = shape.x,
      y = shape.y,
      width = shape.width,
      height = shape.height;
 
  var shapePath = [
    ['M', x, y],
    ['l', width, 0],
    ['l', 0, height],
    ['l', -width, 0],
    ['z']
  ];
 
  return componentsToPath(shapePath);
};
 
DefaultRenderer.prototype.getConnectionPath = function getConnectionPath(connection) {
  var waypoints = connection.waypoints;
 
  var idx, point, connectionPath = [];
 
  for (idx = 0; (point = waypoints[idx]); idx++) {
 
    // take invisible docking into account
    // when creating the path
    point = point.original || point;
 
    connectionPath.push([ idx === 0 ? 'M' : 'L', point.x, point.y ]);
  }
 
  return componentsToPath(connectionPath);
};
 
 
DefaultRenderer.$inject = [ 'eventBus', 'styles' ];