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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
|
/**
* $Id: mxPolyline.js,v 1.31 2012-05-24 12:00:45 gaudenz Exp $
* Copyright (c) 2006-2010, JGraph Ltd
*/
/**
* Class: mxPolyline
*
* Extends <mxShape> to implement a polyline (a line with multiple points).
* This shape is registered under <mxConstants.SHAPE_POLYLINE> in
* <mxCellRenderer>.
*
* Constructor: mxPolyline
*
* Constructs a new polyline shape.
*
* Parameters:
*
* points - Array of <mxPoints> that define the points. This is stored in
* <mxShape.points>.
* stroke - String that defines the stroke color. Default is 'black'. This is
* stored in <stroke>.
* strokewidth - Optional integer that defines the stroke width. Default is
* 1. This is stored in <strokewidth>.
*/
function mxPolyline(points, stroke, strokewidth)
{
this.points = points;
this.stroke = stroke;
this.strokewidth = (strokewidth != null) ? strokewidth : 1;
};
/**
* Extends mxShape.
*/
mxPolyline.prototype = new mxShape();
mxPolyline.prototype.constructor = mxPolyline;
/**
* Variable: addPipe
*
* Specifies if a SVG path should be created around any path to increase the
* tolerance for mouse events. Default is false since this shape is filled.
*/
mxPolyline.prototype.addPipe = true;
/**
* Function: create
*
* Override to create HTML regardless of gradient and
* rounded property.
*/
mxPolyline.prototype.create = function()
{
var node = null;
if (this.dialect == mxConstants.DIALECT_SVG)
{
node = this.createSvg();
}
else if (this.dialect == mxConstants.DIALECT_STRICTHTML ||
(this.dialect == mxConstants.DIALECT_PREFERHTML &&
this.points != null && this.points.length > 0))
{
node = document.createElement('DIV');
this.configureHtmlShape(node);
node.style.borderStyle = '';
node.style.background = '';
}
else
{
node = document.createElement('v:shape');
this.configureVmlShape(node);
var strokeNode = document.createElement('v:stroke');
if (this.opacity != null)
{
strokeNode.opacity = this.opacity + '%';
}
node.appendChild(strokeNode);
}
return node;
};
/**
* Function: redrawVml
*
* Overrides the method to update the bounds if they have not been
* assigned.
*/
mxPolyline.prototype.redrawVml = function()
{
// Updates the bounds based on the points
if (this.points != null && this.points.length > 0 && this.points[0] != null)
{
this.bounds = new mxRectangle(this.points[0].x,this.points[0].y, 0, 0);
for (var i = 1; i < this.points.length; i++)
{
this.bounds.add(new mxRectangle(this.points[i].x,this.points[i].y, 0, 0));
}
}
mxShape.prototype.redrawVml.apply(this, arguments);
};
/**
* Function: createSvg
*
* Creates and returns the SVG node(s) to represent this shape.
*/
mxPolyline.prototype.createSvg = function()
{
var g = this.createSvgGroup('path');
// Creates an invisible shape around the path for easier
// selection with the mouse. Note: Firefox does not ignore
// the value of the stroke attribute for pointer-events: stroke,
// it does, however, ignore the visibility attribute.
if (this.addPipe)
{
this.pipe = this.createSvgPipe();
g.appendChild(this.pipe);
}
return g;
};
/**
* Function: redrawSvg
*
* Updates the SVG node(s) to reflect the latest bounds and scale.
*/
mxPolyline.prototype.redrawSvg = function()
{
this.updateSvgShape(this.innerNode);
var d = this.innerNode.getAttribute('d');
if (d != null && this.pipe != null)
{
this.pipe.setAttribute('d', d);
var strokeWidth = Math.round(Math.max(1, this.strokewidth * this.scale));
this.pipe.setAttribute('stroke-width', strokeWidth + mxShape.prototype.SVG_STROKE_TOLERANCE);
}
};
|
