graphael-rails 0.1.4 → 0.1.5
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +7 -0
- data/Gemfile.lock +41 -6
- data/VERSION +1 -1
- data/graphael-rails.gemspec +7 -47
- metadata +16 -59
- data/vendor/assets/javascripts/g.raphael/README.markdown +0 -21
- data/vendor/assets/javascripts/g.raphael/docs/blueprint-min.png +0 -0
- data/vendor/assets/javascripts/g.raphael/docs/dr-print.css +0 -218
- data/vendor/assets/javascripts/g.raphael/docs/dr.css +0 -404
- data/vendor/assets/javascripts/g.raphael/docs/reference.html +0 -350
- data/vendor/assets/javascripts/g.raphael/docs/reference.js +0 -35
- data/vendor/assets/javascripts/g.raphael/g.bar.js +0 -621
- data/vendor/assets/javascripts/g.raphael/g.dot.js +0 -156
- data/vendor/assets/javascripts/g.raphael/g.line.js +0 -329
- data/vendor/assets/javascripts/g.raphael/g.pie.js +0 -255
- data/vendor/assets/javascripts/g.raphael/g.raphael.js +0 -887
- data/vendor/assets/javascripts/g.raphael/g.raphael.json +0 -9
- data/vendor/assets/javascripts/g.raphael/min/g.bar-min.js +0 -7
- data/vendor/assets/javascripts/g.raphael/min/g.dot-min.js +0 -7
- data/vendor/assets/javascripts/g.raphael/min/g.line-min.js +0 -7
- data/vendor/assets/javascripts/g.raphael/min/g.pie-min.js +0 -1
- data/vendor/assets/javascripts/g.raphael/min/g.raphael-min.js +0 -7
- data/vendor/assets/javascripts/g.raphael/raphael-min.js +0 -9
- data/vendor/assets/javascripts/g.raphael/test/barchart.html +0 -37
- data/vendor/assets/javascripts/g.raphael/test/barchart2.html +0 -51
- data/vendor/assets/javascripts/g.raphael/test/brightness.html +0 -47
- data/vendor/assets/javascripts/g.raphael/test/css/demo-print.css +0 -17
- data/vendor/assets/javascripts/g.raphael/test/css/demo.css +0 -21
- data/vendor/assets/javascripts/g.raphael/test/dotchart.html +0 -35
- data/vendor/assets/javascripts/g.raphael/test/images/bg.png +0 -0
- data/vendor/assets/javascripts/g.raphael/test/images/bgbg.png +0 -0
- data/vendor/assets/javascripts/g.raphael/test/linechart.html +0 -66
- data/vendor/assets/javascripts/g.raphael/test/piechart.html +0 -26
- data/vendor/assets/javascripts/g.raphael/test/piechart2.html +0 -46
- data/vendor/assets/javascripts/g.raphael/test/tooltips.html +0 -85
- data/vendor/assets/javascripts/raphael/README.markdown +0 -3
- data/vendor/assets/javascripts/raphael/history.md +0 -82
- data/vendor/assets/javascripts/raphael/license.txt +0 -21
- data/vendor/assets/javascripts/raphael/make +0 -45
- data/vendor/assets/javascripts/raphael/raphael-min.js +0 -10
- data/vendor/assets/javascripts/raphael/raphael.core.js +0 -5189
- data/vendor/assets/javascripts/raphael/raphael.js +0 -5815
- data/vendor/assets/javascripts/raphael/raphael.svg.js +0 -1360
- data/vendor/assets/javascripts/raphael/raphael.vml.js +0 -973
- data/vendor/assets/javascripts/raphael/reference.html +0 -2489
- data/vendor/assets/javascripts/raphael/reference.js +0 -248
@@ -1,1360 +0,0 @@
|
|
1
|
-
// ┌─────────────────────────────────────────────────────────────────────┐ \\
|
2
|
-
// │ Raphaël - JavaScript Vector Library │ \\
|
3
|
-
// ├─────────────────────────────────────────────────────────────────────┤ \\
|
4
|
-
// │ SVG Module │ \\
|
5
|
-
// ├─────────────────────────────────────────────────────────────────────┤ \\
|
6
|
-
// │ Copyright (c) 2008-2011 Dmitry Baranovskiy (http://raphaeljs.com) │ \\
|
7
|
-
// │ Copyright (c) 2008-2011 Sencha Labs (http://sencha.com) │ \\
|
8
|
-
// │ Licensed under the MIT (http://raphaeljs.com/license.html) license. │ \\
|
9
|
-
// └─────────────────────────────────────────────────────────────────────┘ \\
|
10
|
-
window.Raphael.svg && function (R) {
|
11
|
-
var has = "hasOwnProperty",
|
12
|
-
Str = String,
|
13
|
-
toFloat = parseFloat,
|
14
|
-
toInt = parseInt,
|
15
|
-
math = Math,
|
16
|
-
mmax = math.max,
|
17
|
-
abs = math.abs,
|
18
|
-
pow = math.pow,
|
19
|
-
separator = /[, ]+/,
|
20
|
-
eve = R.eve,
|
21
|
-
E = "",
|
22
|
-
S = " ";
|
23
|
-
var xlink = "http://www.w3.org/1999/xlink",
|
24
|
-
markers = {
|
25
|
-
block: "M5,0 0,2.5 5,5z",
|
26
|
-
classic: "M5,0 0,2.5 5,5 3.5,3 3.5,2z",
|
27
|
-
diamond: "M2.5,0 5,2.5 2.5,5 0,2.5z",
|
28
|
-
open: "M6,1 1,3.5 6,6",
|
29
|
-
oval: "M2.5,0A2.5,2.5,0,0,1,2.5,5 2.5,2.5,0,0,1,2.5,0z"
|
30
|
-
},
|
31
|
-
markerCounter = {};
|
32
|
-
R.toString = function () {
|
33
|
-
return "Your browser supports SVG.\nYou are running Rapha\xebl " + this.version;
|
34
|
-
};
|
35
|
-
var $ = function (el, attr) {
|
36
|
-
if (attr) {
|
37
|
-
if (typeof el == "string") {
|
38
|
-
el = $(el);
|
39
|
-
}
|
40
|
-
for (var key in attr) if (attr[has](key)) {
|
41
|
-
if (key.substring(0, 6) == "xlink:") {
|
42
|
-
el.setAttributeNS(xlink, key.substring(6), Str(attr[key]));
|
43
|
-
} else {
|
44
|
-
el.setAttribute(key, Str(attr[key]));
|
45
|
-
}
|
46
|
-
}
|
47
|
-
} else {
|
48
|
-
el = R._g.doc.createElementNS("http://www.w3.org/2000/svg", el);
|
49
|
-
el.style && (el.style.webkitTapHighlightColor = "rgba(0,0,0,0)");
|
50
|
-
}
|
51
|
-
return el;
|
52
|
-
},
|
53
|
-
addGradientFill = function (element, gradient) {
|
54
|
-
var type = "linear",
|
55
|
-
id = element.id + gradient,
|
56
|
-
fx = .5, fy = .5,
|
57
|
-
o = element.node,
|
58
|
-
SVG = element.paper,
|
59
|
-
s = o.style,
|
60
|
-
el = R._g.doc.getElementById(id);
|
61
|
-
if (!el) {
|
62
|
-
gradient = Str(gradient).replace(R._radial_gradient, function (all, _fx, _fy) {
|
63
|
-
type = "radial";
|
64
|
-
if (_fx && _fy) {
|
65
|
-
fx = toFloat(_fx);
|
66
|
-
fy = toFloat(_fy);
|
67
|
-
var dir = ((fy > .5) * 2 - 1);
|
68
|
-
pow(fx - .5, 2) + pow(fy - .5, 2) > .25 &&
|
69
|
-
(fy = math.sqrt(.25 - pow(fx - .5, 2)) * dir + .5) &&
|
70
|
-
fy != .5 &&
|
71
|
-
(fy = fy.toFixed(5) - 1e-5 * dir);
|
72
|
-
}
|
73
|
-
return E;
|
74
|
-
});
|
75
|
-
gradient = gradient.split(/\s*\-\s*/);
|
76
|
-
if (type == "linear") {
|
77
|
-
var angle = gradient.shift();
|
78
|
-
angle = -toFloat(angle);
|
79
|
-
if (isNaN(angle)) {
|
80
|
-
return null;
|
81
|
-
}
|
82
|
-
var vector = [0, 0, math.cos(R.rad(angle)), math.sin(R.rad(angle))],
|
83
|
-
max = 1 / (mmax(abs(vector[2]), abs(vector[3])) || 1);
|
84
|
-
vector[2] *= max;
|
85
|
-
vector[3] *= max;
|
86
|
-
if (vector[2] < 0) {
|
87
|
-
vector[0] = -vector[2];
|
88
|
-
vector[2] = 0;
|
89
|
-
}
|
90
|
-
if (vector[3] < 0) {
|
91
|
-
vector[1] = -vector[3];
|
92
|
-
vector[3] = 0;
|
93
|
-
}
|
94
|
-
}
|
95
|
-
var dots = R._parseDots(gradient);
|
96
|
-
if (!dots) {
|
97
|
-
return null;
|
98
|
-
}
|
99
|
-
id = id.replace(/[\(\)\s,\xb0#]/g, "_");
|
100
|
-
|
101
|
-
if (element.gradient && id != element.gradient.id) {
|
102
|
-
SVG.defs.removeChild(element.gradient);
|
103
|
-
delete element.gradient;
|
104
|
-
}
|
105
|
-
|
106
|
-
if (!element.gradient) {
|
107
|
-
el = $(type + "Gradient", {id: id});
|
108
|
-
element.gradient = el;
|
109
|
-
$(el, type == "radial" ? {
|
110
|
-
fx: fx,
|
111
|
-
fy: fy
|
112
|
-
} : {
|
113
|
-
x1: vector[0],
|
114
|
-
y1: vector[1],
|
115
|
-
x2: vector[2],
|
116
|
-
y2: vector[3],
|
117
|
-
gradientTransform: element.matrix.invert()
|
118
|
-
});
|
119
|
-
SVG.defs.appendChild(el);
|
120
|
-
for (var i = 0, ii = dots.length; i < ii; i++) {
|
121
|
-
el.appendChild($("stop", {
|
122
|
-
offset: dots[i].offset ? dots[i].offset : i ? "100%" : "0%",
|
123
|
-
"stop-color": dots[i].color || "#fff"
|
124
|
-
}));
|
125
|
-
}
|
126
|
-
}
|
127
|
-
}
|
128
|
-
$(o, {
|
129
|
-
fill: "url(#" + id + ")",
|
130
|
-
opacity: 1,
|
131
|
-
"fill-opacity": 1
|
132
|
-
});
|
133
|
-
s.fill = E;
|
134
|
-
s.opacity = 1;
|
135
|
-
s.fillOpacity = 1;
|
136
|
-
return 1;
|
137
|
-
},
|
138
|
-
updatePosition = function (o) {
|
139
|
-
var bbox = o.getBBox(1);
|
140
|
-
$(o.pattern, {patternTransform: o.matrix.invert() + " translate(" + bbox.x + "," + bbox.y + ")"});
|
141
|
-
},
|
142
|
-
addArrow = function (o, value, isEnd) {
|
143
|
-
if (o.type == "path") {
|
144
|
-
var values = Str(value).toLowerCase().split("-"),
|
145
|
-
p = o.paper,
|
146
|
-
se = isEnd ? "end" : "start",
|
147
|
-
node = o.node,
|
148
|
-
attrs = o.attrs,
|
149
|
-
stroke = attrs["stroke-width"],
|
150
|
-
i = values.length,
|
151
|
-
type = "classic",
|
152
|
-
from,
|
153
|
-
to,
|
154
|
-
dx,
|
155
|
-
refX,
|
156
|
-
attr,
|
157
|
-
w = 3,
|
158
|
-
h = 3,
|
159
|
-
t = 5;
|
160
|
-
while (i--) {
|
161
|
-
switch (values[i]) {
|
162
|
-
case "block":
|
163
|
-
case "classic":
|
164
|
-
case "oval":
|
165
|
-
case "diamond":
|
166
|
-
case "open":
|
167
|
-
case "none":
|
168
|
-
type = values[i];
|
169
|
-
break;
|
170
|
-
case "wide": h = 5; break;
|
171
|
-
case "narrow": h = 2; break;
|
172
|
-
case "long": w = 5; break;
|
173
|
-
case "short": w = 2; break;
|
174
|
-
}
|
175
|
-
}
|
176
|
-
if (type == "open") {
|
177
|
-
w += 2;
|
178
|
-
h += 2;
|
179
|
-
t += 2;
|
180
|
-
dx = 1;
|
181
|
-
refX = isEnd ? 4 : 1;
|
182
|
-
attr = {
|
183
|
-
fill: "none",
|
184
|
-
stroke: attrs.stroke
|
185
|
-
};
|
186
|
-
} else {
|
187
|
-
refX = dx = w / 2;
|
188
|
-
attr = {
|
189
|
-
fill: attrs.stroke,
|
190
|
-
stroke: "none"
|
191
|
-
};
|
192
|
-
}
|
193
|
-
if (o._.arrows) {
|
194
|
-
if (isEnd) {
|
195
|
-
o._.arrows.endPath && markerCounter[o._.arrows.endPath]--;
|
196
|
-
o._.arrows.endMarker && markerCounter[o._.arrows.endMarker]--;
|
197
|
-
} else {
|
198
|
-
o._.arrows.startPath && markerCounter[o._.arrows.startPath]--;
|
199
|
-
o._.arrows.startMarker && markerCounter[o._.arrows.startMarker]--;
|
200
|
-
}
|
201
|
-
} else {
|
202
|
-
o._.arrows = {};
|
203
|
-
}
|
204
|
-
if (type != "none") {
|
205
|
-
var pathId = "raphael-marker-" + type,
|
206
|
-
markerId = "raphael-marker-" + se + type + w + h;
|
207
|
-
if (!R._g.doc.getElementById(pathId)) {
|
208
|
-
p.defs.appendChild($($("path"), {
|
209
|
-
"stroke-linecap": "round",
|
210
|
-
d: markers[type],
|
211
|
-
id: pathId
|
212
|
-
}));
|
213
|
-
markerCounter[pathId] = 1;
|
214
|
-
} else {
|
215
|
-
markerCounter[pathId]++;
|
216
|
-
}
|
217
|
-
var marker = R._g.doc.getElementById(markerId),
|
218
|
-
use;
|
219
|
-
if (!marker) {
|
220
|
-
marker = $($("marker"), {
|
221
|
-
id: markerId,
|
222
|
-
markerHeight: h,
|
223
|
-
markerWidth: w,
|
224
|
-
orient: "auto",
|
225
|
-
refX: refX,
|
226
|
-
refY: h / 2
|
227
|
-
});
|
228
|
-
use = $($("use"), {
|
229
|
-
"xlink:href": "#" + pathId,
|
230
|
-
transform: (isEnd ? "rotate(180 " + w / 2 + " " + h / 2 + ") " : E) + "scale(" + w / t + "," + h / t + ")",
|
231
|
-
"stroke-width": (1 / ((w / t + h / t) / 2)).toFixed(4)
|
232
|
-
});
|
233
|
-
marker.appendChild(use);
|
234
|
-
p.defs.appendChild(marker);
|
235
|
-
markerCounter[markerId] = 1;
|
236
|
-
} else {
|
237
|
-
markerCounter[markerId]++;
|
238
|
-
use = marker.getElementsByTagName("use")[0];
|
239
|
-
}
|
240
|
-
$(use, attr);
|
241
|
-
var delta = dx * (type != "diamond" && type != "oval");
|
242
|
-
if (isEnd) {
|
243
|
-
from = o._.arrows.startdx * stroke || 0;
|
244
|
-
to = R.getTotalLength(attrs.path) - delta * stroke;
|
245
|
-
} else {
|
246
|
-
from = delta * stroke;
|
247
|
-
to = R.getTotalLength(attrs.path) - (o._.arrows.enddx * stroke || 0);
|
248
|
-
}
|
249
|
-
attr = {};
|
250
|
-
attr["marker-" + se] = "url(#" + markerId + ")";
|
251
|
-
if (to || from) {
|
252
|
-
attr.d = Raphael.getSubpath(attrs.path, from, to);
|
253
|
-
}
|
254
|
-
$(node, attr);
|
255
|
-
o._.arrows[se + "Path"] = pathId;
|
256
|
-
o._.arrows[se + "Marker"] = markerId;
|
257
|
-
o._.arrows[se + "dx"] = delta;
|
258
|
-
o._.arrows[se + "Type"] = type;
|
259
|
-
o._.arrows[se + "String"] = value;
|
260
|
-
} else {
|
261
|
-
if (isEnd) {
|
262
|
-
from = o._.arrows.startdx * stroke || 0;
|
263
|
-
to = R.getTotalLength(attrs.path) - from;
|
264
|
-
} else {
|
265
|
-
from = 0;
|
266
|
-
to = R.getTotalLength(attrs.path) - (o._.arrows.enddx * stroke || 0);
|
267
|
-
}
|
268
|
-
o._.arrows[se + "Path"] && $(node, {d: Raphael.getSubpath(attrs.path, from, to)});
|
269
|
-
delete o._.arrows[se + "Path"];
|
270
|
-
delete o._.arrows[se + "Marker"];
|
271
|
-
delete o._.arrows[se + "dx"];
|
272
|
-
delete o._.arrows[se + "Type"];
|
273
|
-
delete o._.arrows[se + "String"];
|
274
|
-
}
|
275
|
-
for (attr in markerCounter) if (markerCounter[has](attr) && !markerCounter[attr]) {
|
276
|
-
var item = R._g.doc.getElementById(attr);
|
277
|
-
item && item.parentNode.removeChild(item);
|
278
|
-
}
|
279
|
-
}
|
280
|
-
},
|
281
|
-
dasharray = {
|
282
|
-
"": [0],
|
283
|
-
"none": [0],
|
284
|
-
"-": [3, 1],
|
285
|
-
".": [1, 1],
|
286
|
-
"-.": [3, 1, 1, 1],
|
287
|
-
"-..": [3, 1, 1, 1, 1, 1],
|
288
|
-
". ": [1, 3],
|
289
|
-
"- ": [4, 3],
|
290
|
-
"--": [8, 3],
|
291
|
-
"- .": [4, 3, 1, 3],
|
292
|
-
"--.": [8, 3, 1, 3],
|
293
|
-
"--..": [8, 3, 1, 3, 1, 3]
|
294
|
-
},
|
295
|
-
addDashes = function (o, value, params) {
|
296
|
-
value = dasharray[Str(value).toLowerCase()];
|
297
|
-
if (value) {
|
298
|
-
var width = o.attrs["stroke-width"] || "1",
|
299
|
-
butt = {round: width, square: width, butt: 0}[o.attrs["stroke-linecap"] || params["stroke-linecap"]] || 0,
|
300
|
-
dashes = [],
|
301
|
-
i = value.length;
|
302
|
-
while (i--) {
|
303
|
-
dashes[i] = value[i] * width + ((i % 2) ? 1 : -1) * butt;
|
304
|
-
}
|
305
|
-
$(o.node, {"stroke-dasharray": dashes.join(",")});
|
306
|
-
}
|
307
|
-
},
|
308
|
-
setFillAndStroke = function (o, params) {
|
309
|
-
var node = o.node,
|
310
|
-
attrs = o.attrs,
|
311
|
-
vis = node.style.visibility;
|
312
|
-
node.style.visibility = "hidden";
|
313
|
-
for (var att in params) {
|
314
|
-
if (params[has](att)) {
|
315
|
-
if (!R._availableAttrs[has](att)) {
|
316
|
-
continue;
|
317
|
-
}
|
318
|
-
var value = params[att];
|
319
|
-
attrs[att] = value;
|
320
|
-
switch (att) {
|
321
|
-
case "blur":
|
322
|
-
o.blur(value);
|
323
|
-
break;
|
324
|
-
case "href":
|
325
|
-
case "title":
|
326
|
-
case "target":
|
327
|
-
var pn = node.parentNode;
|
328
|
-
if (pn.tagName.toLowerCase() != "a") {
|
329
|
-
var hl = $("a");
|
330
|
-
pn.insertBefore(hl, node);
|
331
|
-
hl.appendChild(node);
|
332
|
-
pn = hl;
|
333
|
-
}
|
334
|
-
if (att == "target") {
|
335
|
-
pn.setAttributeNS(xlink, "show", value == "blank" ? "new" : value);
|
336
|
-
} else {
|
337
|
-
pn.setAttributeNS(xlink, att, value);
|
338
|
-
}
|
339
|
-
break;
|
340
|
-
case "cursor":
|
341
|
-
node.style.cursor = value;
|
342
|
-
break;
|
343
|
-
case "transform":
|
344
|
-
o.transform(value);
|
345
|
-
break;
|
346
|
-
case "arrow-start":
|
347
|
-
addArrow(o, value);
|
348
|
-
break;
|
349
|
-
case "arrow-end":
|
350
|
-
addArrow(o, value, 1);
|
351
|
-
break;
|
352
|
-
case "clip-rect":
|
353
|
-
var rect = Str(value).split(separator);
|
354
|
-
if (rect.length == 4) {
|
355
|
-
o.clip && o.clip.parentNode.parentNode.removeChild(o.clip.parentNode);
|
356
|
-
var el = $("clipPath"),
|
357
|
-
rc = $("rect");
|
358
|
-
el.id = R.createUUID();
|
359
|
-
$(rc, {
|
360
|
-
x: rect[0],
|
361
|
-
y: rect[1],
|
362
|
-
width: rect[2],
|
363
|
-
height: rect[3]
|
364
|
-
});
|
365
|
-
el.appendChild(rc);
|
366
|
-
o.paper.defs.appendChild(el);
|
367
|
-
$(node, {"clip-path": "url(#" + el.id + ")"});
|
368
|
-
o.clip = rc;
|
369
|
-
}
|
370
|
-
if (!value) {
|
371
|
-
var path = node.getAttribute("clip-path");
|
372
|
-
if (path) {
|
373
|
-
var clip = R._g.doc.getElementById(path.replace(/(^url\(#|\)$)/g, E));
|
374
|
-
clip && clip.parentNode.removeChild(clip);
|
375
|
-
$(node, {"clip-path": E});
|
376
|
-
delete o.clip;
|
377
|
-
}
|
378
|
-
}
|
379
|
-
break;
|
380
|
-
case "path":
|
381
|
-
if (o.type == "path") {
|
382
|
-
$(node, {d: value ? attrs.path = R._pathToAbsolute(value) : "M0,0"});
|
383
|
-
o._.dirty = 1;
|
384
|
-
if (o._.arrows) {
|
385
|
-
"startString" in o._.arrows && addArrow(o, o._.arrows.startString);
|
386
|
-
"endString" in o._.arrows && addArrow(o, o._.arrows.endString, 1);
|
387
|
-
}
|
388
|
-
}
|
389
|
-
break;
|
390
|
-
case "width":
|
391
|
-
node.setAttribute(att, value);
|
392
|
-
o._.dirty = 1;
|
393
|
-
if (attrs.fx) {
|
394
|
-
att = "x";
|
395
|
-
value = attrs.x;
|
396
|
-
} else {
|
397
|
-
break;
|
398
|
-
}
|
399
|
-
case "x":
|
400
|
-
if (attrs.fx) {
|
401
|
-
value = -attrs.x - (attrs.width || 0);
|
402
|
-
}
|
403
|
-
case "rx":
|
404
|
-
if (att == "rx" && o.type == "rect") {
|
405
|
-
break;
|
406
|
-
}
|
407
|
-
case "cx":
|
408
|
-
node.setAttribute(att, value);
|
409
|
-
o.pattern && updatePosition(o);
|
410
|
-
o._.dirty = 1;
|
411
|
-
break;
|
412
|
-
case "height":
|
413
|
-
node.setAttribute(att, value);
|
414
|
-
o._.dirty = 1;
|
415
|
-
if (attrs.fy) {
|
416
|
-
att = "y";
|
417
|
-
value = attrs.y;
|
418
|
-
} else {
|
419
|
-
break;
|
420
|
-
}
|
421
|
-
case "y":
|
422
|
-
if (attrs.fy) {
|
423
|
-
value = -attrs.y - (attrs.height || 0);
|
424
|
-
}
|
425
|
-
case "ry":
|
426
|
-
if (att == "ry" && o.type == "rect") {
|
427
|
-
break;
|
428
|
-
}
|
429
|
-
case "cy":
|
430
|
-
node.setAttribute(att, value);
|
431
|
-
o.pattern && updatePosition(o);
|
432
|
-
o._.dirty = 1;
|
433
|
-
break;
|
434
|
-
case "r":
|
435
|
-
if (o.type == "rect") {
|
436
|
-
$(node, {rx: value, ry: value});
|
437
|
-
} else {
|
438
|
-
node.setAttribute(att, value);
|
439
|
-
}
|
440
|
-
o._.dirty = 1;
|
441
|
-
break;
|
442
|
-
case "src":
|
443
|
-
if (o.type == "image") {
|
444
|
-
node.setAttributeNS(xlink, "href", value);
|
445
|
-
}
|
446
|
-
break;
|
447
|
-
case "stroke-width":
|
448
|
-
if (o._.sx != 1 || o._.sy != 1) {
|
449
|
-
value /= mmax(abs(o._.sx), abs(o._.sy)) || 1;
|
450
|
-
}
|
451
|
-
if (o.paper._vbSize) {
|
452
|
-
value *= o.paper._vbSize;
|
453
|
-
}
|
454
|
-
node.setAttribute(att, value);
|
455
|
-
if (attrs["stroke-dasharray"]) {
|
456
|
-
addDashes(o, attrs["stroke-dasharray"], params);
|
457
|
-
}
|
458
|
-
if (o._.arrows) {
|
459
|
-
"startString" in o._.arrows && addArrow(o, o._.arrows.startString);
|
460
|
-
"endString" in o._.arrows && addArrow(o, o._.arrows.endString, 1);
|
461
|
-
}
|
462
|
-
break;
|
463
|
-
case "stroke-dasharray":
|
464
|
-
addDashes(o, value, params);
|
465
|
-
break;
|
466
|
-
case "fill":
|
467
|
-
var isURL = Str(value).match(R._ISURL);
|
468
|
-
if (isURL) {
|
469
|
-
el = $("pattern");
|
470
|
-
var ig = $("image");
|
471
|
-
el.id = R.createUUID();
|
472
|
-
$(el, {x: 0, y: 0, patternUnits: "userSpaceOnUse", height: 1, width: 1});
|
473
|
-
$(ig, {x: 0, y: 0, "xlink:href": isURL[1]});
|
474
|
-
el.appendChild(ig);
|
475
|
-
|
476
|
-
(function (el) {
|
477
|
-
R._preload(isURL[1], function () {
|
478
|
-
var w = this.offsetWidth,
|
479
|
-
h = this.offsetHeight;
|
480
|
-
$(el, {width: w, height: h});
|
481
|
-
$(ig, {width: w, height: h});
|
482
|
-
o.paper.safari();
|
483
|
-
});
|
484
|
-
})(el);
|
485
|
-
o.paper.defs.appendChild(el);
|
486
|
-
$(node, {fill: "url(#" + el.id + ")"});
|
487
|
-
o.pattern = el;
|
488
|
-
o.pattern && updatePosition(o);
|
489
|
-
break;
|
490
|
-
}
|
491
|
-
var clr = R.getRGB(value);
|
492
|
-
if (!clr.error) {
|
493
|
-
delete params.gradient;
|
494
|
-
delete attrs.gradient;
|
495
|
-
!R.is(attrs.opacity, "undefined") &&
|
496
|
-
R.is(params.opacity, "undefined") &&
|
497
|
-
$(node, {opacity: attrs.opacity});
|
498
|
-
!R.is(attrs["fill-opacity"], "undefined") &&
|
499
|
-
R.is(params["fill-opacity"], "undefined") &&
|
500
|
-
$(node, {"fill-opacity": attrs["fill-opacity"]});
|
501
|
-
} else if ((o.type == "circle" || o.type == "ellipse" || Str(value).charAt() != "r") && addGradientFill(o, value)) {
|
502
|
-
if ("opacity" in attrs || "fill-opacity" in attrs) {
|
503
|
-
var gradient = R._g.doc.getElementById(node.getAttribute("fill").replace(/^url\(#|\)$/g, E));
|
504
|
-
if (gradient) {
|
505
|
-
var stops = gradient.getElementsByTagName("stop");
|
506
|
-
$(stops[stops.length - 1], {"stop-opacity": ("opacity" in attrs ? attrs.opacity : 1) * ("fill-opacity" in attrs ? attrs["fill-opacity"] : 1)});
|
507
|
-
}
|
508
|
-
}
|
509
|
-
attrs.gradient = value;
|
510
|
-
attrs.fill = "none";
|
511
|
-
break;
|
512
|
-
}
|
513
|
-
clr[has]("opacity") && $(node, {"fill-opacity": clr.opacity > 1 ? clr.opacity / 100 : clr.opacity});
|
514
|
-
case "stroke":
|
515
|
-
clr = R.getRGB(value);
|
516
|
-
node.setAttribute(att, clr.hex);
|
517
|
-
att == "stroke" && clr[has]("opacity") && $(node, {"stroke-opacity": clr.opacity > 1 ? clr.opacity / 100 : clr.opacity});
|
518
|
-
if (att == "stroke" && o._.arrows) {
|
519
|
-
"startString" in o._.arrows && addArrow(o, o._.arrows.startString);
|
520
|
-
"endString" in o._.arrows && addArrow(o, o._.arrows.endString, 1);
|
521
|
-
}
|
522
|
-
break;
|
523
|
-
case "gradient":
|
524
|
-
(o.type == "circle" || o.type == "ellipse" || Str(value).charAt() != "r") && addGradientFill(o, value);
|
525
|
-
break;
|
526
|
-
case "opacity":
|
527
|
-
if (attrs.gradient && !attrs[has]("stroke-opacity")) {
|
528
|
-
$(node, {"stroke-opacity": value > 1 ? value / 100 : value});
|
529
|
-
}
|
530
|
-
// fall
|
531
|
-
case "fill-opacity":
|
532
|
-
if (attrs.gradient) {
|
533
|
-
gradient = R._g.doc.getElementById(node.getAttribute("fill").replace(/^url\(#|\)$/g, E));
|
534
|
-
if (gradient) {
|
535
|
-
stops = gradient.getElementsByTagName("stop");
|
536
|
-
$(stops[stops.length - 1], {"stop-opacity": value});
|
537
|
-
}
|
538
|
-
break;
|
539
|
-
}
|
540
|
-
default:
|
541
|
-
att == "font-size" && (value = toInt(value, 10) + "px");
|
542
|
-
var cssrule = att.replace(/(\-.)/g, function (w) {
|
543
|
-
return w.substring(1).toUpperCase();
|
544
|
-
});
|
545
|
-
node.style[cssrule] = value;
|
546
|
-
o._.dirty = 1;
|
547
|
-
node.setAttribute(att, value);
|
548
|
-
break;
|
549
|
-
}
|
550
|
-
}
|
551
|
-
}
|
552
|
-
|
553
|
-
tuneText(o, params);
|
554
|
-
node.style.visibility = vis;
|
555
|
-
},
|
556
|
-
leading = 1.2,
|
557
|
-
tuneText = function (el, params) {
|
558
|
-
if (el.type != "text" || !(params[has]("text") || params[has]("font") || params[has]("font-size") || params[has]("x") || params[has]("y"))) {
|
559
|
-
return;
|
560
|
-
}
|
561
|
-
var a = el.attrs,
|
562
|
-
node = el.node,
|
563
|
-
fontSize = node.firstChild ? toInt(R._g.doc.defaultView.getComputedStyle(node.firstChild, E).getPropertyValue("font-size"), 10) : 10;
|
564
|
-
|
565
|
-
if (params[has]("text")) {
|
566
|
-
a.text = params.text;
|
567
|
-
while (node.firstChild) {
|
568
|
-
node.removeChild(node.firstChild);
|
569
|
-
}
|
570
|
-
var texts = Str(params.text).split("\n"),
|
571
|
-
tspans = [],
|
572
|
-
tspan;
|
573
|
-
for (var i = 0, ii = texts.length; i < ii; i++) {
|
574
|
-
tspan = $("tspan");
|
575
|
-
i && $(tspan, {dy: fontSize * leading, x: a.x});
|
576
|
-
tspan.appendChild(R._g.doc.createTextNode(texts[i]));
|
577
|
-
node.appendChild(tspan);
|
578
|
-
tspans[i] = tspan;
|
579
|
-
}
|
580
|
-
} else {
|
581
|
-
tspans = node.getElementsByTagName("tspan");
|
582
|
-
for (i = 0, ii = tspans.length; i < ii; i++) if (i) {
|
583
|
-
$(tspans[i], {dy: fontSize * leading, x: a.x});
|
584
|
-
} else {
|
585
|
-
$(tspans[0], {dy: 0});
|
586
|
-
}
|
587
|
-
}
|
588
|
-
$(node, {x: a.x, y: a.y});
|
589
|
-
el._.dirty = 1;
|
590
|
-
var bb = el._getBBox(),
|
591
|
-
dif = a.y - (bb.y + bb.height / 2);
|
592
|
-
dif && R.is(dif, "finite") && $(tspans[0], {dy: dif});
|
593
|
-
},
|
594
|
-
Element = function (node, svg) {
|
595
|
-
var X = 0,
|
596
|
-
Y = 0;
|
597
|
-
/*\
|
598
|
-
* Element.node
|
599
|
-
[ property (object) ]
|
600
|
-
**
|
601
|
-
* Gives you a reference to the DOM object, so you can assign event handlers or just mess around.
|
602
|
-
**
|
603
|
-
* Note: Don’t mess with it.
|
604
|
-
> Usage
|
605
|
-
| // draw a circle at coordinate 10,10 with radius of 10
|
606
|
-
| var c = paper.circle(10, 10, 10);
|
607
|
-
| c.node.onclick = function () {
|
608
|
-
| c.attr("fill", "red");
|
609
|
-
| };
|
610
|
-
\*/
|
611
|
-
this[0] = this.node = node;
|
612
|
-
/*\
|
613
|
-
* Element.raphael
|
614
|
-
[ property (object) ]
|
615
|
-
**
|
616
|
-
* Internal reference to @Raphael object. In case it is not available.
|
617
|
-
> Usage
|
618
|
-
| Raphael.el.red = function () {
|
619
|
-
| var hsb = this.paper.raphael.rgb2hsb(this.attr("fill"));
|
620
|
-
| hsb.h = 1;
|
621
|
-
| this.attr({fill: this.paper.raphael.hsb2rgb(hsb).hex});
|
622
|
-
| }
|
623
|
-
\*/
|
624
|
-
node.raphael = true;
|
625
|
-
/*\
|
626
|
-
* Element.id
|
627
|
-
[ property (number) ]
|
628
|
-
**
|
629
|
-
* Unique id of the element. Especially usesful when you want to listen to events of the element,
|
630
|
-
* because all events are fired in format `<module>.<action>.<id>`. Also useful for @Paper.getById method.
|
631
|
-
\*/
|
632
|
-
this.id = R._oid++;
|
633
|
-
node.raphaelid = this.id;
|
634
|
-
this.matrix = R.matrix();
|
635
|
-
this.realPath = null;
|
636
|
-
/*\
|
637
|
-
* Element.paper
|
638
|
-
[ property (object) ]
|
639
|
-
**
|
640
|
-
* Internal reference to “paper” where object drawn. Mainly for use in plugins and element extensions.
|
641
|
-
> Usage
|
642
|
-
| Raphael.el.cross = function () {
|
643
|
-
| this.attr({fill: "red"});
|
644
|
-
| this.paper.path("M10,10L50,50M50,10L10,50")
|
645
|
-
| .attr({stroke: "red"});
|
646
|
-
| }
|
647
|
-
\*/
|
648
|
-
this.paper = svg;
|
649
|
-
this.attrs = this.attrs || {};
|
650
|
-
this._ = {
|
651
|
-
transform: [],
|
652
|
-
sx: 1,
|
653
|
-
sy: 1,
|
654
|
-
deg: 0,
|
655
|
-
dx: 0,
|
656
|
-
dy: 0,
|
657
|
-
dirty: 1
|
658
|
-
};
|
659
|
-
!svg.bottom && (svg.bottom = this);
|
660
|
-
/*\
|
661
|
-
* Element.prev
|
662
|
-
[ property (object) ]
|
663
|
-
**
|
664
|
-
* Reference to the previous element in the hierarchy.
|
665
|
-
\*/
|
666
|
-
this.prev = svg.top;
|
667
|
-
svg.top && (svg.top.next = this);
|
668
|
-
svg.top = this;
|
669
|
-
/*\
|
670
|
-
* Element.next
|
671
|
-
[ property (object) ]
|
672
|
-
**
|
673
|
-
* Reference to the next element in the hierarchy.
|
674
|
-
\*/
|
675
|
-
this.next = null;
|
676
|
-
},
|
677
|
-
elproto = R.el;
|
678
|
-
|
679
|
-
Element.prototype = elproto;
|
680
|
-
elproto.constructor = Element;
|
681
|
-
|
682
|
-
R._engine.path = function (pathString, SVG) {
|
683
|
-
var el = $("path");
|
684
|
-
SVG.canvas && SVG.canvas.appendChild(el);
|
685
|
-
var p = new Element(el, SVG);
|
686
|
-
p.type = "path";
|
687
|
-
setFillAndStroke(p, {
|
688
|
-
fill: "none",
|
689
|
-
stroke: "#000",
|
690
|
-
path: pathString
|
691
|
-
});
|
692
|
-
return p;
|
693
|
-
};
|
694
|
-
/*\
|
695
|
-
* Element.rotate
|
696
|
-
[ method ]
|
697
|
-
**
|
698
|
-
* Deprecated! Use @Element.transform instead.
|
699
|
-
* Adds rotation by given angle around given point to the list of
|
700
|
-
* transformations of the element.
|
701
|
-
> Parameters
|
702
|
-
- deg (number) angle in degrees
|
703
|
-
- cx (number) #optional x coordinate of the centre of rotation
|
704
|
-
- cy (number) #optional y coordinate of the centre of rotation
|
705
|
-
* If cx & cy aren’t specified centre of the shape is used as a point of rotation.
|
706
|
-
= (object) @Element
|
707
|
-
\*/
|
708
|
-
elproto.rotate = function (deg, cx, cy) {
|
709
|
-
if (this.removed) {
|
710
|
-
return this;
|
711
|
-
}
|
712
|
-
deg = Str(deg).split(separator);
|
713
|
-
if (deg.length - 1) {
|
714
|
-
cx = toFloat(deg[1]);
|
715
|
-
cy = toFloat(deg[2]);
|
716
|
-
}
|
717
|
-
deg = toFloat(deg[0]);
|
718
|
-
(cy == null) && (cx = cy);
|
719
|
-
if (cx == null || cy == null) {
|
720
|
-
var bbox = this.getBBox(1);
|
721
|
-
cx = bbox.x + bbox.width / 2;
|
722
|
-
cy = bbox.y + bbox.height / 2;
|
723
|
-
}
|
724
|
-
this.transform(this._.transform.concat([["r", deg, cx, cy]]));
|
725
|
-
return this;
|
726
|
-
};
|
727
|
-
/*\
|
728
|
-
* Element.scale
|
729
|
-
[ method ]
|
730
|
-
**
|
731
|
-
* Deprecated! Use @Element.transform instead.
|
732
|
-
* Adds scale by given amount relative to given point to the list of
|
733
|
-
* transformations of the element.
|
734
|
-
> Parameters
|
735
|
-
- sx (number) horisontal scale amount
|
736
|
-
- sy (number) vertical scale amount
|
737
|
-
- cx (number) #optional x coordinate of the centre of scale
|
738
|
-
- cy (number) #optional y coordinate of the centre of scale
|
739
|
-
* If cx & cy aren’t specified centre of the shape is used instead.
|
740
|
-
= (object) @Element
|
741
|
-
\*/
|
742
|
-
elproto.scale = function (sx, sy, cx, cy) {
|
743
|
-
if (this.removed) {
|
744
|
-
return this;
|
745
|
-
}
|
746
|
-
sx = Str(sx).split(separator);
|
747
|
-
if (sx.length - 1) {
|
748
|
-
sy = toFloat(sx[1]);
|
749
|
-
cx = toFloat(sx[2]);
|
750
|
-
cy = toFloat(sx[3]);
|
751
|
-
}
|
752
|
-
sx = toFloat(sx[0]);
|
753
|
-
(sy == null) && (sy = sx);
|
754
|
-
(cy == null) && (cx = cy);
|
755
|
-
if (cx == null || cy == null) {
|
756
|
-
var bbox = this.getBBox(1);
|
757
|
-
}
|
758
|
-
cx = cx == null ? bbox.x + bbox.width / 2 : cx;
|
759
|
-
cy = cy == null ? bbox.y + bbox.height / 2 : cy;
|
760
|
-
this.transform(this._.transform.concat([["s", sx, sy, cx, cy]]));
|
761
|
-
return this;
|
762
|
-
};
|
763
|
-
/*\
|
764
|
-
* Element.translate
|
765
|
-
[ method ]
|
766
|
-
**
|
767
|
-
* Deprecated! Use @Element.transform instead.
|
768
|
-
* Adds translation by given amount to the list of transformations of the element.
|
769
|
-
> Parameters
|
770
|
-
- dx (number) horisontal shift
|
771
|
-
- dy (number) vertical shift
|
772
|
-
= (object) @Element
|
773
|
-
\*/
|
774
|
-
elproto.translate = function (dx, dy) {
|
775
|
-
if (this.removed) {
|
776
|
-
return this;
|
777
|
-
}
|
778
|
-
dx = Str(dx).split(separator);
|
779
|
-
if (dx.length - 1) {
|
780
|
-
dy = toFloat(dx[1]);
|
781
|
-
}
|
782
|
-
dx = toFloat(dx[0]) || 0;
|
783
|
-
dy = +dy || 0;
|
784
|
-
this.transform(this._.transform.concat([["t", dx, dy]]));
|
785
|
-
return this;
|
786
|
-
};
|
787
|
-
/*\
|
788
|
-
* Element.transform
|
789
|
-
[ method ]
|
790
|
-
**
|
791
|
-
* Adds transformation to the element which is separate to other attributes,
|
792
|
-
* i.e. translation doesn’t change `x` or `y` of the rectange. The format
|
793
|
-
* of transformation string is similar to the path string syntax:
|
794
|
-
| "t100,100r30,100,100s2,2,100,100r45s1.5"
|
795
|
-
* Each letter is a command. There are four commands: `t` is for translate, `r` is for rotate, `s` is for
|
796
|
-
* scale and `m` is for matrix.
|
797
|
-
*
|
798
|
-
* There are also alternative “absolute” translation, rotation and scale: `T`, `R` and `S`. They will not take previous transformation into account. For example, `...T100,0` will always move element 100 px horisontally, while `...t100,0` could move it vertically if there is `r90` before. Just compare results of `r90t100,0` and `r90T100,0`.
|
799
|
-
*
|
800
|
-
* So, the example line above could be read like “translate by 100, 100; rotate 30° around 100, 100; scale twice around 100, 100;
|
801
|
-
* rotate 45° around centre; scale 1.5 times relative to centre”. As you can see rotate and scale commands have origin
|
802
|
-
* coordinates as optional parameters, the default is the centre point of the element.
|
803
|
-
* Matrix accepts six parameters.
|
804
|
-
> Usage
|
805
|
-
| var el = paper.rect(10, 20, 300, 200);
|
806
|
-
| // translate 100, 100, rotate 45°, translate -100, 0
|
807
|
-
| el.transform("t100,100r45t-100,0");
|
808
|
-
| // if you want you can append or prepend transformations
|
809
|
-
| el.transform("...t50,50");
|
810
|
-
| el.transform("s2...");
|
811
|
-
| // or even wrap
|
812
|
-
| el.transform("t50,50...t-50-50");
|
813
|
-
| // to reset transformation call method with empty string
|
814
|
-
| el.transform("");
|
815
|
-
| // to get current value call it without parameters
|
816
|
-
| console.log(el.transform());
|
817
|
-
> Parameters
|
818
|
-
- tstr (string) #optional transformation string
|
819
|
-
* If tstr isn’t specified
|
820
|
-
= (string) current transformation string
|
821
|
-
* else
|
822
|
-
= (object) @Element
|
823
|
-
\*/
|
824
|
-
elproto.transform = function (tstr) {
|
825
|
-
var _ = this._;
|
826
|
-
if (tstr == null) {
|
827
|
-
return _.transform;
|
828
|
-
}
|
829
|
-
R._extractTransform(this, tstr);
|
830
|
-
|
831
|
-
this.clip && $(this.clip, {transform: this.matrix.invert()});
|
832
|
-
this.pattern && updatePosition(this);
|
833
|
-
this.node && $(this.node, {transform: this.matrix});
|
834
|
-
|
835
|
-
if (_.sx != 1 || _.sy != 1) {
|
836
|
-
var sw = this.attrs[has]("stroke-width") ? this.attrs["stroke-width"] : 1;
|
837
|
-
this.attr({"stroke-width": sw});
|
838
|
-
}
|
839
|
-
|
840
|
-
return this;
|
841
|
-
};
|
842
|
-
/*\
|
843
|
-
* Element.hide
|
844
|
-
[ method ]
|
845
|
-
**
|
846
|
-
* Makes element invisible. See @Element.show.
|
847
|
-
= (object) @Element
|
848
|
-
\*/
|
849
|
-
elproto.hide = function () {
|
850
|
-
!this.removed && this.paper.safari(this.node.style.display = "none");
|
851
|
-
return this;
|
852
|
-
};
|
853
|
-
/*\
|
854
|
-
* Element.show
|
855
|
-
[ method ]
|
856
|
-
**
|
857
|
-
* Makes element visible. See @Element.hide.
|
858
|
-
= (object) @Element
|
859
|
-
\*/
|
860
|
-
elproto.show = function () {
|
861
|
-
!this.removed && this.paper.safari(this.node.style.display = "");
|
862
|
-
return this;
|
863
|
-
};
|
864
|
-
/*\
|
865
|
-
* Element.remove
|
866
|
-
[ method ]
|
867
|
-
**
|
868
|
-
* Removes element form the paper.
|
869
|
-
\*/
|
870
|
-
elproto.remove = function () {
|
871
|
-
if (this.removed || !this.node.parentNode) {
|
872
|
-
return;
|
873
|
-
}
|
874
|
-
var paper = this.paper;
|
875
|
-
paper.__set__ && paper.__set__.exclude(this);
|
876
|
-
eve.unbind("raphael.*.*." + this.id);
|
877
|
-
if (this.gradient) {
|
878
|
-
paper.defs.removeChild(this.gradient);
|
879
|
-
}
|
880
|
-
R._tear(this, paper);
|
881
|
-
if (this.node.parentNode.tagName.toLowerCase() == "a") {
|
882
|
-
this.node.parentNode.parentNode.removeChild(this.node.parentNode);
|
883
|
-
} else {
|
884
|
-
this.node.parentNode.removeChild(this.node);
|
885
|
-
}
|
886
|
-
for (var i in this) {
|
887
|
-
this[i] = typeof this[i] == "function" ? R._removedFactory(i) : null;
|
888
|
-
}
|
889
|
-
this.removed = true;
|
890
|
-
};
|
891
|
-
elproto._getBBox = function () {
|
892
|
-
if (this.node.style.display == "none") {
|
893
|
-
this.show();
|
894
|
-
var hide = true;
|
895
|
-
}
|
896
|
-
var bbox = {};
|
897
|
-
try {
|
898
|
-
bbox = this.node.getBBox();
|
899
|
-
} catch(e) {
|
900
|
-
// Firefox 3.0.x plays badly here
|
901
|
-
} finally {
|
902
|
-
bbox = bbox || {};
|
903
|
-
}
|
904
|
-
hide && this.hide();
|
905
|
-
return bbox;
|
906
|
-
};
|
907
|
-
/*\
|
908
|
-
* Element.attr
|
909
|
-
[ method ]
|
910
|
-
**
|
911
|
-
* Sets the attributes of the element.
|
912
|
-
> Parameters
|
913
|
-
- attrName (string) attribute’s name
|
914
|
-
- value (string) value
|
915
|
-
* or
|
916
|
-
- params (object) object of name/value pairs
|
917
|
-
* or
|
918
|
-
- attrName (string) attribute’s name
|
919
|
-
* or
|
920
|
-
- attrNames (array) in this case method returns array of current values for given attribute names
|
921
|
-
= (object) @Element if attrsName & value or params are passed in.
|
922
|
-
= (...) value of the attribute if only attrsName is passed in.
|
923
|
-
= (array) array of values of the attribute if attrsNames is passed in.
|
924
|
-
= (object) object of attributes if nothing is passed in.
|
925
|
-
> Possible parameters
|
926
|
-
# <p>Please refer to the <a href="http://www.w3.org/TR/SVG/" title="The W3C Recommendation for the SVG language describes these properties in detail.">SVG specification</a> for an explanation of these parameters.</p>
|
927
|
-
o arrow-end (string) arrowhead on the end of the path. The format for string is `<type>[-<width>[-<length>]]`. Possible types: `classic`, `block`, `open`, `oval`, `diamond`, `none`, width: `wide`, `narrow`, `midium`, length: `long`, `short`, `midium`.
|
928
|
-
o clip-rect (string) comma or space separated values: x, y, width and height
|
929
|
-
o cursor (string) CSS type of the cursor
|
930
|
-
o cx (number) the x-axis coordinate of the center of the circle, or ellipse
|
931
|
-
o cy (number) the y-axis coordinate of the center of the circle, or ellipse
|
932
|
-
o fill (string) colour, gradient or image
|
933
|
-
o fill-opacity (number)
|
934
|
-
o font (string)
|
935
|
-
o font-family (string)
|
936
|
-
o font-size (number) font size in pixels
|
937
|
-
o font-weight (string)
|
938
|
-
o height (number)
|
939
|
-
o href (string) URL, if specified element behaves as hyperlink
|
940
|
-
o opacity (number)
|
941
|
-
o path (string) SVG path string format
|
942
|
-
o r (number) radius of the circle, ellipse or rounded corner on the rect
|
943
|
-
o rx (number) horisontal radius of the ellipse
|
944
|
-
o ry (number) vertical radius of the ellipse
|
945
|
-
o src (string) image URL, only works for @Element.image element
|
946
|
-
o stroke (string) stroke colour
|
947
|
-
o stroke-dasharray (string) [“”, “`-`”, “`.`”, “`-.`”, “`-..`”, “`. `”, “`- `”, “`--`”, “`- .`”, “`--.`”, “`--..`”]
|
948
|
-
o stroke-linecap (string) [“`butt`”, “`square`”, “`round`”]
|
949
|
-
o stroke-linejoin (string) [“`bevel`”, “`round`”, “`miter`”]
|
950
|
-
o stroke-miterlimit (number)
|
951
|
-
o stroke-opacity (number)
|
952
|
-
o stroke-width (number) stroke width in pixels, default is '1'
|
953
|
-
o target (string) used with href
|
954
|
-
o text (string) contents of the text element. Use `\n` for multiline text
|
955
|
-
o text-anchor (string) [“`start`”, “`middle`”, “`end`”], default is “`middle`”
|
956
|
-
o title (string) will create tooltip with a given text
|
957
|
-
o transform (string) see @Element.transform
|
958
|
-
o width (number)
|
959
|
-
o x (number)
|
960
|
-
o y (number)
|
961
|
-
> Gradients
|
962
|
-
* Linear gradient format: “`‹angle›-‹colour›[-‹colour›[:‹offset›]]*-‹colour›`”, example: “`90-#fff-#000`” – 90°
|
963
|
-
* gradient from white to black or “`0-#fff-#f00:20-#000`” – 0° gradient from white via red (at 20%) to black.
|
964
|
-
*
|
965
|
-
* radial gradient: “`r[(‹fx›, ‹fy›)]‹colour›[-‹colour›[:‹offset›]]*-‹colour›`”, example: “`r#fff-#000`” –
|
966
|
-
* gradient from white to black or “`r(0.25, 0.75)#fff-#000`” – gradient from white to black with focus point
|
967
|
-
* at 0.25, 0.75. Focus point coordinates are in 0..1 range. Radial gradients can only be applied to circles and ellipses.
|
968
|
-
> Path String
|
969
|
-
# <p>Please refer to <a href="http://www.w3.org/TR/SVG/paths.html#PathData" title="Details of a path’s data attribute’s format are described in the SVG specification.">SVG documentation regarding path string</a>. Raphaël fully supports it.</p>
|
970
|
-
> Colour Parsing
|
971
|
-
# <ul>
|
972
|
-
# <li>Colour name (“<code>red</code>”, “<code>green</code>”, “<code>cornflowerblue</code>”, etc)</li>
|
973
|
-
# <li>#••• — shortened HTML colour: (“<code>#000</code>”, “<code>#fc0</code>”, etc)</li>
|
974
|
-
# <li>#•••••• — full length HTML colour: (“<code>#000000</code>”, “<code>#bd2300</code>”)</li>
|
975
|
-
# <li>rgb(•••, •••, •••) — red, green and blue channels’ values: (“<code>rgb(200, 100, 0)</code>”)</li>
|
976
|
-
# <li>rgb(•••%, •••%, •••%) — same as above, but in %: (“<code>rgb(100%, 175%, 0%)</code>”)</li>
|
977
|
-
# <li>rgba(•••, •••, •••, •••) — red, green and blue channels’ values: (“<code>rgba(200, 100, 0, .5)</code>”)</li>
|
978
|
-
# <li>rgba(•••%, •••%, •••%, •••%) — same as above, but in %: (“<code>rgba(100%, 175%, 0%, 50%)</code>”)</li>
|
979
|
-
# <li>hsb(•••, •••, •••) — hue, saturation and brightness values: (“<code>hsb(0.5, 0.25, 1)</code>”)</li>
|
980
|
-
# <li>hsb(•••%, •••%, •••%) — same as above, but in %</li>
|
981
|
-
# <li>hsba(•••, •••, •••, •••) — same as above, but with opacity</li>
|
982
|
-
# <li>hsl(•••, •••, •••) — almost the same as hsb, see <a href="http://en.wikipedia.org/wiki/HSL_and_HSV" title="HSL and HSV - Wikipedia, the free encyclopedia">Wikipedia page</a></li>
|
983
|
-
# <li>hsl(•••%, •••%, •••%) — same as above, but in %</li>
|
984
|
-
# <li>hsla(•••, •••, •••, •••) — same as above, but with opacity</li>
|
985
|
-
# <li>Optionally for hsb and hsl you could specify hue as a degree: “<code>hsl(240deg, 1, .5)</code>” or, if you want to go fancy, “<code>hsl(240°, 1, .5)</code>”</li>
|
986
|
-
# </ul>
|
987
|
-
\*/
|
988
|
-
elproto.attr = function (name, value) {
|
989
|
-
if (this.removed) {
|
990
|
-
return this;
|
991
|
-
}
|
992
|
-
if (name == null) {
|
993
|
-
var res = {};
|
994
|
-
for (var a in this.attrs) if (this.attrs[has](a)) {
|
995
|
-
res[a] = this.attrs[a];
|
996
|
-
}
|
997
|
-
res.gradient && res.fill == "none" && (res.fill = res.gradient) && delete res.gradient;
|
998
|
-
res.transform = this._.transform;
|
999
|
-
return res;
|
1000
|
-
}
|
1001
|
-
if (value == null && R.is(name, "string")) {
|
1002
|
-
if (name == "fill" && this.attrs.fill == "none" && this.attrs.gradient) {
|
1003
|
-
return this.attrs.gradient;
|
1004
|
-
}
|
1005
|
-
if (name == "transform") {
|
1006
|
-
return this._.transform;
|
1007
|
-
}
|
1008
|
-
var names = name.split(separator),
|
1009
|
-
out = {};
|
1010
|
-
for (var i = 0, ii = names.length; i < ii; i++) {
|
1011
|
-
name = names[i];
|
1012
|
-
if (name in this.attrs) {
|
1013
|
-
out[name] = this.attrs[name];
|
1014
|
-
} else if (R.is(this.paper.customAttributes[name], "function")) {
|
1015
|
-
out[name] = this.paper.customAttributes[name].def;
|
1016
|
-
} else {
|
1017
|
-
out[name] = R._availableAttrs[name];
|
1018
|
-
}
|
1019
|
-
}
|
1020
|
-
return ii - 1 ? out : out[names[0]];
|
1021
|
-
}
|
1022
|
-
if (value == null && R.is(name, "array")) {
|
1023
|
-
out = {};
|
1024
|
-
for (i = 0, ii = name.length; i < ii; i++) {
|
1025
|
-
out[name[i]] = this.attr(name[i]);
|
1026
|
-
}
|
1027
|
-
return out;
|
1028
|
-
}
|
1029
|
-
if (value != null) {
|
1030
|
-
var params = {};
|
1031
|
-
params[name] = value;
|
1032
|
-
} else if (name != null && R.is(name, "object")) {
|
1033
|
-
params = name;
|
1034
|
-
}
|
1035
|
-
for (var key in params) {
|
1036
|
-
eve("raphael.attr." + key + "." + this.id, this, params[key]);
|
1037
|
-
}
|
1038
|
-
for (key in this.paper.customAttributes) if (this.paper.customAttributes[has](key) && params[has](key) && R.is(this.paper.customAttributes[key], "function")) {
|
1039
|
-
var par = this.paper.customAttributes[key].apply(this, [].concat(params[key]));
|
1040
|
-
this.attrs[key] = params[key];
|
1041
|
-
for (var subkey in par) if (par[has](subkey)) {
|
1042
|
-
params[subkey] = par[subkey];
|
1043
|
-
}
|
1044
|
-
}
|
1045
|
-
setFillAndStroke(this, params);
|
1046
|
-
return this;
|
1047
|
-
};
|
1048
|
-
/*\
|
1049
|
-
* Element.toFront
|
1050
|
-
[ method ]
|
1051
|
-
**
|
1052
|
-
* Moves the element so it is the closest to the viewer’s eyes, on top of other elements.
|
1053
|
-
= (object) @Element
|
1054
|
-
\*/
|
1055
|
-
elproto.toFront = function () {
|
1056
|
-
if (this.removed) {
|
1057
|
-
return this;
|
1058
|
-
}
|
1059
|
-
if (this.node.parentNode.tagName.toLowerCase() == "a") {
|
1060
|
-
this.node.parentNode.parentNode.appendChild(this.node.parentNode);
|
1061
|
-
} else {
|
1062
|
-
this.node.parentNode.appendChild(this.node);
|
1063
|
-
}
|
1064
|
-
var svg = this.paper;
|
1065
|
-
svg.top != this && R._tofront(this, svg);
|
1066
|
-
return this;
|
1067
|
-
};
|
1068
|
-
/*\
|
1069
|
-
* Element.toBack
|
1070
|
-
[ method ]
|
1071
|
-
**
|
1072
|
-
* Moves the element so it is the furthest from the viewer’s eyes, behind other elements.
|
1073
|
-
= (object) @Element
|
1074
|
-
\*/
|
1075
|
-
elproto.toBack = function () {
|
1076
|
-
if (this.removed) {
|
1077
|
-
return this;
|
1078
|
-
}
|
1079
|
-
var parent = this.node.parentNode;
|
1080
|
-
if (parent.tagName.toLowerCase() == "a") {
|
1081
|
-
parent.parentNode.insertBefore(this.node.parentNode, this.node.parentNode.parentNode.firstChild);
|
1082
|
-
} else if (parent.firstChild != this.node) {
|
1083
|
-
parent.insertBefore(this.node, this.node.parentNode.firstChild);
|
1084
|
-
}
|
1085
|
-
R._toback(this, this.paper);
|
1086
|
-
var svg = this.paper;
|
1087
|
-
return this;
|
1088
|
-
};
|
1089
|
-
/*\
|
1090
|
-
* Element.insertAfter
|
1091
|
-
[ method ]
|
1092
|
-
**
|
1093
|
-
* Inserts current object after the given one.
|
1094
|
-
= (object) @Element
|
1095
|
-
\*/
|
1096
|
-
elproto.insertAfter = function (element) {
|
1097
|
-
if (this.removed) {
|
1098
|
-
return this;
|
1099
|
-
}
|
1100
|
-
var node = element.node || element[element.length - 1].node;
|
1101
|
-
if (node.nextSibling) {
|
1102
|
-
node.parentNode.insertBefore(this.node, node.nextSibling);
|
1103
|
-
} else {
|
1104
|
-
node.parentNode.appendChild(this.node);
|
1105
|
-
}
|
1106
|
-
R._insertafter(this, element, this.paper);
|
1107
|
-
return this;
|
1108
|
-
};
|
1109
|
-
/*\
|
1110
|
-
* Element.insertBefore
|
1111
|
-
[ method ]
|
1112
|
-
**
|
1113
|
-
* Inserts current object before the given one.
|
1114
|
-
= (object) @Element
|
1115
|
-
\*/
|
1116
|
-
elproto.insertBefore = function (element) {
|
1117
|
-
if (this.removed) {
|
1118
|
-
return this;
|
1119
|
-
}
|
1120
|
-
var node = element.node || element[0].node;
|
1121
|
-
node.parentNode.insertBefore(this.node, node);
|
1122
|
-
R._insertbefore(this, element, this.paper);
|
1123
|
-
return this;
|
1124
|
-
};
|
1125
|
-
elproto.blur = function (size) {
|
1126
|
-
// Experimental. No Safari support. Use it on your own risk.
|
1127
|
-
var t = this;
|
1128
|
-
if (+size !== 0) {
|
1129
|
-
var fltr = $("filter"),
|
1130
|
-
blur = $("feGaussianBlur");
|
1131
|
-
t.attrs.blur = size;
|
1132
|
-
fltr.id = R.createUUID();
|
1133
|
-
$(blur, {stdDeviation: +size || 1.5});
|
1134
|
-
fltr.appendChild(blur);
|
1135
|
-
t.paper.defs.appendChild(fltr);
|
1136
|
-
t._blur = fltr;
|
1137
|
-
$(t.node, {filter: "url(#" + fltr.id + ")"});
|
1138
|
-
} else {
|
1139
|
-
if (t._blur) {
|
1140
|
-
t._blur.parentNode.removeChild(t._blur);
|
1141
|
-
delete t._blur;
|
1142
|
-
delete t.attrs.blur;
|
1143
|
-
}
|
1144
|
-
t.node.removeAttribute("filter");
|
1145
|
-
}
|
1146
|
-
};
|
1147
|
-
R._engine.circle = function (svg, x, y, r) {
|
1148
|
-
var el = $("circle");
|
1149
|
-
svg.canvas && svg.canvas.appendChild(el);
|
1150
|
-
var res = new Element(el, svg);
|
1151
|
-
res.attrs = {cx: x, cy: y, r: r, fill: "none", stroke: "#000"};
|
1152
|
-
res.type = "circle";
|
1153
|
-
$(el, res.attrs);
|
1154
|
-
return res;
|
1155
|
-
};
|
1156
|
-
R._engine.rect = function (svg, x, y, w, h, r) {
|
1157
|
-
var el = $("rect");
|
1158
|
-
svg.canvas && svg.canvas.appendChild(el);
|
1159
|
-
var res = new Element(el, svg);
|
1160
|
-
res.attrs = {x: x, y: y, width: w, height: h, r: r || 0, rx: r || 0, ry: r || 0, fill: "none", stroke: "#000"};
|
1161
|
-
res.type = "rect";
|
1162
|
-
$(el, res.attrs);
|
1163
|
-
return res;
|
1164
|
-
};
|
1165
|
-
R._engine.ellipse = function (svg, x, y, rx, ry) {
|
1166
|
-
var el = $("ellipse");
|
1167
|
-
svg.canvas && svg.canvas.appendChild(el);
|
1168
|
-
var res = new Element(el, svg);
|
1169
|
-
res.attrs = {cx: x, cy: y, rx: rx, ry: ry, fill: "none", stroke: "#000"};
|
1170
|
-
res.type = "ellipse";
|
1171
|
-
$(el, res.attrs);
|
1172
|
-
return res;
|
1173
|
-
};
|
1174
|
-
R._engine.image = function (svg, src, x, y, w, h) {
|
1175
|
-
var el = $("image");
|
1176
|
-
$(el, {x: x, y: y, width: w, height: h, preserveAspectRatio: "none"});
|
1177
|
-
el.setAttributeNS(xlink, "href", src);
|
1178
|
-
svg.canvas && svg.canvas.appendChild(el);
|
1179
|
-
var res = new Element(el, svg);
|
1180
|
-
res.attrs = {x: x, y: y, width: w, height: h, src: src};
|
1181
|
-
res.type = "image";
|
1182
|
-
return res;
|
1183
|
-
};
|
1184
|
-
R._engine.text = function (svg, x, y, text) {
|
1185
|
-
var el = $("text");
|
1186
|
-
svg.canvas && svg.canvas.appendChild(el);
|
1187
|
-
var res = new Element(el, svg);
|
1188
|
-
res.attrs = {
|
1189
|
-
x: x,
|
1190
|
-
y: y,
|
1191
|
-
"text-anchor": "middle",
|
1192
|
-
text: text,
|
1193
|
-
font: R._availableAttrs.font,
|
1194
|
-
stroke: "none",
|
1195
|
-
fill: "#000"
|
1196
|
-
};
|
1197
|
-
res.type = "text";
|
1198
|
-
setFillAndStroke(res, res.attrs);
|
1199
|
-
return res;
|
1200
|
-
};
|
1201
|
-
R._engine.setSize = function (width, height) {
|
1202
|
-
this.width = width || this.width;
|
1203
|
-
this.height = height || this.height;
|
1204
|
-
this.canvas.setAttribute("width", this.width);
|
1205
|
-
this.canvas.setAttribute("height", this.height);
|
1206
|
-
if (this._viewBox) {
|
1207
|
-
this.setViewBox.apply(this, this._viewBox);
|
1208
|
-
}
|
1209
|
-
return this;
|
1210
|
-
};
|
1211
|
-
R._engine.create = function () {
|
1212
|
-
var con = R._getContainer.apply(0, arguments),
|
1213
|
-
container = con && con.container,
|
1214
|
-
x = con.x,
|
1215
|
-
y = con.y,
|
1216
|
-
width = con.width,
|
1217
|
-
height = con.height;
|
1218
|
-
if (!container) {
|
1219
|
-
throw new Error("SVG container not found.");
|
1220
|
-
}
|
1221
|
-
var cnvs = $("svg"),
|
1222
|
-
css = "overflow:hidden;",
|
1223
|
-
isFloating;
|
1224
|
-
x = x || 0;
|
1225
|
-
y = y || 0;
|
1226
|
-
width = width || 512;
|
1227
|
-
height = height || 342;
|
1228
|
-
$(cnvs, {
|
1229
|
-
height: height,
|
1230
|
-
version: 1.1,
|
1231
|
-
width: width,
|
1232
|
-
xmlns: "http://www.w3.org/2000/svg"
|
1233
|
-
});
|
1234
|
-
if (container == 1) {
|
1235
|
-
cnvs.style.cssText = css + "position:absolute;left:" + x + "px;top:" + y + "px";
|
1236
|
-
R._g.doc.body.appendChild(cnvs);
|
1237
|
-
isFloating = 1;
|
1238
|
-
} else {
|
1239
|
-
cnvs.style.cssText = css + "position:relative";
|
1240
|
-
if (container.firstChild) {
|
1241
|
-
container.insertBefore(cnvs, container.firstChild);
|
1242
|
-
} else {
|
1243
|
-
container.appendChild(cnvs);
|
1244
|
-
}
|
1245
|
-
}
|
1246
|
-
container = new R._Paper;
|
1247
|
-
container.width = width;
|
1248
|
-
container.height = height;
|
1249
|
-
container.canvas = cnvs;
|
1250
|
-
container.clear();
|
1251
|
-
container._left = container._top = 0;
|
1252
|
-
isFloating && (container.renderfix = function () {});
|
1253
|
-
container.renderfix();
|
1254
|
-
return container;
|
1255
|
-
};
|
1256
|
-
R._engine.setViewBox = function (x, y, w, h, fit) {
|
1257
|
-
eve("raphael.setViewBox", this, this._viewBox, [x, y, w, h, fit]);
|
1258
|
-
var size = mmax(w / this.width, h / this.height),
|
1259
|
-
top = this.top,
|
1260
|
-
aspectRatio = fit ? "meet" : "xMinYMin",
|
1261
|
-
vb,
|
1262
|
-
sw;
|
1263
|
-
if (x == null) {
|
1264
|
-
if (this._vbSize) {
|
1265
|
-
size = 1;
|
1266
|
-
}
|
1267
|
-
delete this._vbSize;
|
1268
|
-
vb = "0 0 " + this.width + S + this.height;
|
1269
|
-
} else {
|
1270
|
-
this._vbSize = size;
|
1271
|
-
vb = x + S + y + S + w + S + h;
|
1272
|
-
}
|
1273
|
-
$(this.canvas, {
|
1274
|
-
viewBox: vb,
|
1275
|
-
preserveAspectRatio: aspectRatio
|
1276
|
-
});
|
1277
|
-
while (size && top) {
|
1278
|
-
sw = "stroke-width" in top.attrs ? top.attrs["stroke-width"] : 1;
|
1279
|
-
top.attr({"stroke-width": sw});
|
1280
|
-
top._.dirty = 1;
|
1281
|
-
top._.dirtyT = 1;
|
1282
|
-
top = top.prev;
|
1283
|
-
}
|
1284
|
-
this._viewBox = [x, y, w, h, !!fit];
|
1285
|
-
return this;
|
1286
|
-
};
|
1287
|
-
/*\
|
1288
|
-
* Paper.renderfix
|
1289
|
-
[ method ]
|
1290
|
-
**
|
1291
|
-
* Fixes the issue of Firefox and IE9 regarding subpixel rendering. If paper is dependant
|
1292
|
-
* on other elements after reflow it could shift half pixel which cause for lines to lost their crispness.
|
1293
|
-
* This method fixes the issue.
|
1294
|
-
**
|
1295
|
-
Special thanks to Mariusz Nowak (http://www.medikoo.com/) for this method.
|
1296
|
-
\*/
|
1297
|
-
R.prototype.renderfix = function () {
|
1298
|
-
var cnvs = this.canvas,
|
1299
|
-
s = cnvs.style,
|
1300
|
-
pos;
|
1301
|
-
try {
|
1302
|
-
pos = cnvs.getScreenCTM() || cnvs.createSVGMatrix();
|
1303
|
-
} catch (e) {
|
1304
|
-
pos = cnvs.createSVGMatrix();
|
1305
|
-
}
|
1306
|
-
var left = -pos.e % 1,
|
1307
|
-
top = -pos.f % 1;
|
1308
|
-
if (left || top) {
|
1309
|
-
if (left) {
|
1310
|
-
this._left = (this._left + left) % 1;
|
1311
|
-
s.left = this._left + "px";
|
1312
|
-
}
|
1313
|
-
if (top) {
|
1314
|
-
this._top = (this._top + top) % 1;
|
1315
|
-
s.top = this._top + "px";
|
1316
|
-
}
|
1317
|
-
}
|
1318
|
-
};
|
1319
|
-
/*\
|
1320
|
-
* Paper.clear
|
1321
|
-
[ method ]
|
1322
|
-
**
|
1323
|
-
* Clears the paper, i.e. removes all the elements.
|
1324
|
-
\*/
|
1325
|
-
R.prototype.clear = function () {
|
1326
|
-
R.eve("raphael.clear", this);
|
1327
|
-
var c = this.canvas;
|
1328
|
-
while (c.firstChild) {
|
1329
|
-
c.removeChild(c.firstChild);
|
1330
|
-
}
|
1331
|
-
this.bottom = this.top = null;
|
1332
|
-
(this.desc = $("desc")).appendChild(R._g.doc.createTextNode("Created with Rapha\xebl " + R.version));
|
1333
|
-
c.appendChild(this.desc);
|
1334
|
-
c.appendChild(this.defs = $("defs"));
|
1335
|
-
};
|
1336
|
-
/*\
|
1337
|
-
* Paper.remove
|
1338
|
-
[ method ]
|
1339
|
-
**
|
1340
|
-
* Removes the paper from the DOM.
|
1341
|
-
\*/
|
1342
|
-
R.prototype.remove = function () {
|
1343
|
-
eve("raphael.remove", this);
|
1344
|
-
this.canvas.parentNode && this.canvas.parentNode.removeChild(this.canvas);
|
1345
|
-
for (var i in this) {
|
1346
|
-
this[i] = typeof this[i] == "function" ? R._removedFactory(i) : null;
|
1347
|
-
}
|
1348
|
-
};
|
1349
|
-
var setproto = R.st;
|
1350
|
-
for (var method in elproto) if (elproto[has](method) && !setproto[has](method)) {
|
1351
|
-
setproto[method] = (function (methodname) {
|
1352
|
-
return function () {
|
1353
|
-
var arg = arguments;
|
1354
|
-
return this.forEach(function (el) {
|
1355
|
-
el[methodname].apply(el, arg);
|
1356
|
-
});
|
1357
|
-
};
|
1358
|
-
})(method);
|
1359
|
-
}
|
1360
|
-
}(window.Raphael);
|