| 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 |
1×
925×
925×
925×
1×
1×
3835×
1×
2878×
2878×
2878×
2878×
2878×
1×
770×
770×
770×
1×
93×
93×
93×
93×
93×
93×
1×
94×
94×
94×
350×
350×
94×
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';
// 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' ];
|