123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101 |
- 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' ];
|