DefaultRenderer.js 2.6 KB

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