DefaultRenderer.js 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101
  1. import inherits from 'inherits';
  2. import BaseRenderer from './BaseRenderer';
  3. import {
  4. componentsToPath,
  5. createLine
  6. } from '../util/RenderUtil';
  7. import {
  8. append as svgAppend,
  9. attr as svgAttr,
  10. create as svgCreate
  11. } from 'tiny-svg';
  12. // apply default renderer with lowest possible priority
  13. // so that it only kicks in if noone else could render
  14. var DEFAULT_RENDER_PRIORITY = 1;
  15. /**
  16. * The default renderer used for shapes and connections.
  17. *
  18. * @param {EventBus} eventBus
  19. * @param {Styles} styles
  20. */
  21. export default function DefaultRenderer(eventBus, styles) {
  22. //
  23. BaseRenderer.call(this, eventBus, DEFAULT_RENDER_PRIORITY);
  24. this.CONNECTION_STYLE = styles.style([ 'no-fill' ], { strokeWidth: 5, stroke: 'fuchsia' });
  25. this.SHAPE_STYLE = styles.style({ fill: 'white', stroke: 'fuchsia', strokeWidth: 2 });
  26. }
  27. inherits(DefaultRenderer, BaseRenderer);
  28. DefaultRenderer.prototype.canRender = function() {
  29. return true;
  30. };
  31. DefaultRenderer.prototype.drawShape = function drawShape(visuals, element) {
  32. var rect = svgCreate('rect');
  33. svgAttr(rect, {
  34. x: 0,
  35. y: 0,
  36. width: element.width || 0,
  37. height: element.height || 0
  38. });
  39. svgAttr(rect, this.SHAPE_STYLE);
  40. svgAppend(visuals, rect);
  41. return rect;
  42. };
  43. DefaultRenderer.prototype.drawConnection = function drawConnection(visuals, connection) {
  44. var line = createLine(connection.waypoints, this.CONNECTION_STYLE);
  45. svgAppend(visuals, line);
  46. return line;
  47. };
  48. DefaultRenderer.prototype.getShapePath = function getShapePath(shape) {
  49. var x = shape.x,
  50. y = shape.y,
  51. width = shape.width,
  52. height = shape.height;
  53. var shapePath = [
  54. ['M', x, y],
  55. ['l', width, 0],
  56. ['l', 0, height],
  57. ['l', -width, 0],
  58. ['z']
  59. ];
  60. return componentsToPath(shapePath);
  61. };
  62. DefaultRenderer.prototype.getConnectionPath = function getConnectionPath(connection) {
  63. var waypoints = connection.waypoints;
  64. var idx, point, connectionPath = [];
  65. for (idx = 0; (point = waypoints[idx]); idx++) {
  66. // take invisible docking into account
  67. // when creating the path
  68. point = point.original || point;
  69. connectionPath.push([ idx === 0 ? 'M' : 'L', point.x, point.y ]);
  70. }
  71. return componentsToPath(connectionPath);
  72. };
  73. DefaultRenderer.$inject = [ 'eventBus', 'styles' ];