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 | 1× 1295× 1295× 1295× 1295× 1× 1× 1665× 1× 1× 1× 1× 1665× 1665× 1665× 4514× 4514× 1665× 1× | 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'; import { isFrameElement } from '../util/Elements'; // 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 }); this.FRAME_STYLE = styles.style([ 'no-fill' ], { stroke: 'fuchsia', strokeDasharray: 4, 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 }); if (isFrameElement(element)) { svgAttr(rect, this.FRAME_STYLE); } else { 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' ]; |