Subversion Repositories Applications.papyrus

Rev

Rev 1318 | Details | Compare with Previous | Last modification | View Log | RSS feed

Rev Author Line No. Line
1318 alexandre_ 1
/*
2
	Copyright (c) 2004-2006, The Dojo Foundation
3
	All Rights Reserved.
4
 
5
	Licensed under the Academic Free License version 2.1 or above OR the
6
	modified BSD license. For more information on Dojo licensing, see:
7
 
8
		http://dojotoolkit.org/community/licensing.shtml
9
*/
10
 
1422 alexandre_ 11
 
12
 
1318 alexandre_ 13
dojo.provide("dojo.gfx.svg");
14
dojo.require("dojo.lang.declare");
15
dojo.require("dojo.svg");
16
dojo.require("dojo.gfx.color");
17
dojo.require("dojo.gfx.common");
18
dojo.require("dojo.gfx.shape");
19
dojo.require("dojo.gfx.path");
20
dojo.require("dojo.experimental");
21
dojo.experimental("dojo.gfx.svg");
22
dojo.gfx.svg.getRef = function (fill) {
23
	if (!fill || fill == "none") {
24
		return null;
25
	}
26
	if (fill.match(/^url\(#.+\)$/)) {
27
		return dojo.byId(fill.slice(5, -1));
28
	}
29
	if (dojo.render.html.opera && fill.match(/^#dj_unique_.+$/)) {
30
		return dojo.byId(fill.slice(1));
31
	}
32
	return null;
33
};
34
dojo.lang.extend(dojo.gfx.Shape, {setFill:function (fill) {
35
	if (!fill) {
36
		this.fillStyle = null;
37
		this.rawNode.setAttribute("fill", "none");
38
		this.rawNode.setAttribute("fill-opacity", 0);
39
		return this;
40
	}
41
	if (typeof (fill) == "object" && "type" in fill) {
42
		switch (fill.type) {
43
		  case "linear":
44
			var f = dojo.gfx.makeParameters(dojo.gfx.defaultLinearGradient, fill);
45
			var gradient = this._setFillObject(f, "linearGradient");
46
			dojo.lang.forEach(["x1", "y1", "x2", "y2"], function (x) {
47
				gradient.setAttribute(x, f[x].toFixed(8));
48
			});
49
			break;
50
		  case "radial":
51
			var f = dojo.gfx.makeParameters(dojo.gfx.defaultRadialGradient, fill);
52
			var gradient = this._setFillObject(f, "radialGradient");
53
			dojo.lang.forEach(["cx", "cy", "r"], function (x) {
54
				gradient.setAttribute(x, f[x].toFixed(8));
55
			});
56
			break;
57
		  case "pattern":
58
			var f = dojo.gfx.makeParameters(dojo.gfx.defaultPattern, fill);
59
			var pattern = this._setFillObject(f, "pattern");
60
			dojo.lang.forEach(["x", "y", "width", "height"], function (x) {
61
				pattern.setAttribute(x, f[x].toFixed(8));
62
			});
63
			break;
64
		}
65
		return this;
66
	}
67
	var f = dojo.gfx.normalizeColor(fill);
68
	this.fillStyle = f;
69
	this.rawNode.setAttribute("fill", f.toCss());
70
	this.rawNode.setAttribute("fill-opacity", f.a);
71
	return this;
72
}, setStroke:function (stroke) {
73
	if (!stroke) {
74
		this.strokeStyle = null;
75
		this.rawNode.setAttribute("stroke", "none");
76
		this.rawNode.setAttribute("stroke-opacity", 0);
77
		return this;
78
	}
79
	this.strokeStyle = dojo.gfx.makeParameters(dojo.gfx.defaultStroke, stroke);
80
	this.strokeStyle.color = dojo.gfx.normalizeColor(this.strokeStyle.color);
81
	var s = this.strokeStyle;
82
	var rn = this.rawNode;
83
	if (s) {
84
		rn.setAttribute("stroke", s.color.toCss());
85
		rn.setAttribute("stroke-opacity", s.color.a);
86
		rn.setAttribute("stroke-width", s.width);
87
		rn.setAttribute("stroke-linecap", s.cap);
88
		if (typeof (s.join) == "number") {
89
			rn.setAttribute("stroke-linejoin", "miter");
90
			rn.setAttribute("stroke-miterlimit", s.join);
91
		} else {
92
			rn.setAttribute("stroke-linejoin", s.join);
93
		}
94
	}
95
	return this;
96
}, _setFillObject:function (f, nodeType) {
97
	var def_elems = this.rawNode.parentNode.getElementsByTagName("defs");
98
	if (def_elems.length == 0) {
99
		return this;
100
	}
101
	this.fillStyle = f;
102
	var defs = def_elems[0];
103
	var fill = this.rawNode.getAttribute("fill");
104
	var ref = dojo.gfx.svg.getRef(fill);
105
	if (ref) {
106
		fill = ref;
107
		if (fill.tagName.toLowerCase() != nodeType.toLowerCase()) {
108
			var id = fill.id;
109
			fill.parentNode.removeChild(fill);
110
			fill = document.createElementNS(dojo.svg.xmlns.svg, nodeType);
111
			fill.setAttribute("id", id);
112
			defs.appendChild(fill);
113
		} else {
114
			while (fill.childNodes.length) {
115
				fill.removeChild(fill.lastChild);
116
			}
117
		}
118
	} else {
119
		fill = document.createElementNS(dojo.svg.xmlns.svg, nodeType);
120
		fill.setAttribute("id", dojo.dom.getUniqueId());
121
		defs.appendChild(fill);
122
	}
123
	if (nodeType == "pattern") {
124
		fill.setAttribute("patternUnits", "userSpaceOnUse");
125
		var img = document.createElementNS(dojo.svg.xmlns.svg, "image");
126
		img.setAttribute("x", 0);
127
		img.setAttribute("y", 0);
128
		img.setAttribute("width", f.width.toFixed(8));
129
		img.setAttribute("height", f.height.toFixed(8));
130
		img.setAttributeNS(dojo.svg.xmlns.xlink, "href", f.src);
131
		fill.appendChild(img);
132
	} else {
133
		fill.setAttribute("gradientUnits", "userSpaceOnUse");
134
		for (var i = 0; i < f.colors.length; ++i) {
135
			f.colors[i].color = dojo.gfx.normalizeColor(f.colors[i].color);
136
			var t = document.createElementNS(dojo.svg.xmlns.svg, "stop");
137
			t.setAttribute("offset", f.colors[i].offset.toFixed(8));
138
			t.setAttribute("stop-color", f.colors[i].color.toCss());
139
			fill.appendChild(t);
140
		}
141
	}
142
	this.rawNode.setAttribute("fill", "url(#" + fill.getAttribute("id") + ")");
143
	this.rawNode.removeAttribute("fill-opacity");
144
	return fill;
145
}, _applyTransform:function () {
146
	var matrix = this._getRealMatrix();
147
	if (matrix) {
148
		var tm = this.matrix;
149
		this.rawNode.setAttribute("transform", "matrix(" + tm.xx.toFixed(8) + "," + tm.yx.toFixed(8) + "," + tm.xy.toFixed(8) + "," + tm.yy.toFixed(8) + "," + tm.dx.toFixed(8) + "," + tm.dy.toFixed(8) + ")");
150
	} else {
151
		this.rawNode.removeAttribute("transform");
152
	}
153
	return this;
154
}, setRawNode:function (rawNode) {
155
	with (rawNode) {
156
		setAttribute("fill", "none");
157
		setAttribute("fill-opacity", 0);
158
		setAttribute("stroke", "none");
159
		setAttribute("stroke-opacity", 0);
160
		setAttribute("stroke-width", 1);
161
		setAttribute("stroke-linecap", "butt");
162
		setAttribute("stroke-linejoin", "miter");
163
		setAttribute("stroke-miterlimit", 4);
164
	}
165
	this.rawNode = rawNode;
166
}, moveToFront:function () {
167
	this.rawNode.parentNode.appendChild(this.rawNode);
168
	return this;
169
}, moveToBack:function () {
170
	this.rawNode.parentNode.insertBefore(this.rawNode, this.rawNode.parentNode.firstChild);
171
	return this;
172
}, setShape:function (newShape) {
173
	this.shape = dojo.gfx.makeParameters(this.shape, newShape);
174
	for (var i in this.shape) {
175
		if (i != "type") {
176
			this.rawNode.setAttribute(i, this.shape[i]);
177
		}
178
	}
179
	return this;
180
}, attachFill:function (rawNode) {
181
	var fillStyle = null;
182
	if (rawNode) {
183
		var fill = rawNode.getAttribute("fill");
184
		if (fill == "none") {
185
			return;
186
		}
187
		var ref = dojo.gfx.svg.getRef(fill);
188
		if (ref) {
189
			var gradient = ref;
190
			switch (gradient.tagName.toLowerCase()) {
191
			  case "lineargradient":
192
				fillStyle = this._getGradient(dojo.gfx.defaultLinearGradient, gradient);
193
				dojo.lang.forEach(["x1", "y1", "x2", "y2"], function (x) {
194
					fillStyle[x] = gradient.getAttribute(x);
195
				});
196
				break;
197
			  case "radialgradient":
198
				fillStyle = this._getGradient(dojo.gfx.defaultRadialGradient, gradient);
199
				dojo.lang.forEach(["cx", "cy", "r"], function (x) {
200
					fillStyle[x] = gradient.getAttribute(x);
201
				});
202
				fillStyle.cx = gradient.getAttribute("cx");
203
				fillStyle.cy = gradient.getAttribute("cy");
204
				fillStyle.r = gradient.getAttribute("r");
205
				break;
206
			  case "pattern":
207
				fillStyle = dojo.lang.shallowCopy(dojo.gfx.defaultPattern, true);
208
				dojo.lang.forEach(["x", "y", "width", "height"], function (x) {
209
					fillStyle[x] = gradient.getAttribute(x);
210
				});
211
				fillStyle.src = gradient.firstChild.getAttributeNS(dojo.svg.xmlns.xlink, "href");
212
				break;
213
			}
214
		} else {
215
			fillStyle = new dojo.gfx.color.Color(fill);
216
			var opacity = rawNode.getAttribute("fill-opacity");
217
			if (opacity != null) {
218
				fillStyle.a = opacity;
219
			}
220
		}
221
	}
222
	return fillStyle;
223
}, _getGradient:function (defaultGradient, gradient) {
224
	var fillStyle = dojo.lang.shallowCopy(defaultGradient, true);
225
	fillStyle.colors = [];
226
	for (var i = 0; i < gradient.childNodes.length; ++i) {
227
		fillStyle.colors.push({offset:gradient.childNodes[i].getAttribute("offset"), color:new dojo.gfx.color.Color(gradient.childNodes[i].getAttribute("stop-color"))});
228
	}
229
	return fillStyle;
230
}, attachStroke:function (rawNode) {
231
	if (!rawNode) {
232
		return;
233
	}
234
	var stroke = rawNode.getAttribute("stroke");
235
	if (stroke == null || stroke == "none") {
236
		return null;
237
	}
238
	var strokeStyle = dojo.lang.shallowCopy(dojo.gfx.defaultStroke, true);
239
	var color = new dojo.gfx.color.Color(stroke);
240
	if (color) {
241
		strokeStyle.color = color;
242
		strokeStyle.color.a = rawNode.getAttribute("stroke-opacity");
243
		strokeStyle.width = rawNode.getAttribute("stroke-width");
244
		strokeStyle.cap = rawNode.getAttribute("stroke-linecap");
245
		strokeStyle.join = rawNode.getAttribute("stroke-linejoin");
246
		if (strokeStyle.join == "miter") {
247
			strokeStyle.join = rawNode.getAttribute("stroke-miterlimit");
248
		}
249
	}
250
	return strokeStyle;
251
}, attachTransform:function (rawNode) {
252
	var matrix = null;
253
	if (rawNode) {
254
		matrix = rawNode.getAttribute("transform");
255
		if (matrix.match(/^matrix\(.+\)$/)) {
256
			var t = matrix.slice(7, -1).split(",");
257
			matrix = dojo.gfx.matrix.normalize({xx:parseFloat(t[0]), xy:parseFloat(t[2]), yx:parseFloat(t[1]), yy:parseFloat(t[3]), dx:parseFloat(t[4]), dy:parseFloat(t[5])});
258
		}
259
	}
260
	return matrix;
261
}, attachShape:function (rawNode) {
262
	var shape = null;
263
	if (rawNode) {
264
		shape = dojo.lang.shallowCopy(this.shape, true);
265
		for (var i in shape) {
266
			shape[i] = rawNode.getAttribute(i);
267
		}
268
	}
269
	return shape;
270
}, attach:function (rawNode) {
271
	if (rawNode) {
272
		this.rawNode = rawNode;
273
		this.fillStyle = this.attachFill(rawNode);
274
		this.strokeStyle = this.attachStroke(rawNode);
275
		this.matrix = this.attachTransform(rawNode);
276
		this.shape = this.attachShape(rawNode);
277
	}
278
}});
279
dojo.declare("dojo.gfx.Group", dojo.gfx.Shape, {setRawNode:function (rawNode) {
280
	this.rawNode = rawNode;
281
}});
282
dojo.gfx.Group.nodeType = "g";
283
dojo.declare("dojo.gfx.Rect", dojo.gfx.shape.Rect, {attachShape:function (rawNode) {
284
	var shape = null;
285
	if (rawNode) {
286
		shape = dojo.gfx.Rect.superclass.attachShape.apply(this, arguments);
287
		shape.r = Math.min(rawNode.getAttribute("rx"), rawNode.getAttribute("ry"));
288
	}
289
	return shape;
290
}, setShape:function (newShape) {
291
	this.shape = dojo.gfx.makeParameters(this.shape, newShape);
292
	this.bbox = null;
293
	for (var i in this.shape) {
294
		if (i != "type" && i != "r") {
295
			this.rawNode.setAttribute(i, this.shape[i]);
296
		}
297
	}
298
	this.rawNode.setAttribute("rx", this.shape.r);
299
	this.rawNode.setAttribute("ry", this.shape.r);
300
	return this;
301
}});
302
dojo.gfx.Rect.nodeType = "rect";
303
dojo.gfx.Ellipse = dojo.gfx.shape.Ellipse;
304
dojo.gfx.Ellipse.nodeType = "ellipse";
305
dojo.gfx.Circle = dojo.gfx.shape.Circle;
306
dojo.gfx.Circle.nodeType = "circle";
307
dojo.gfx.Line = dojo.gfx.shape.Line;
308
dojo.gfx.Line.nodeType = "line";
309
dojo.declare("dojo.gfx.Polyline", dojo.gfx.shape.Polyline, {setShape:function (points) {
310
	if (points && points instanceof Array) {
311
		this.shape = dojo.gfx.makeParameters(this.shape, {points:points});
312
		if (closed && this.shape.points.length) {
313
			this.shape.points.push(this.shape.points[0]);
314
		}
315
	} else {
316
		this.shape = dojo.gfx.makeParameters(this.shape, points);
317
	}
318
	this.box = null;
319
	var attr = [];
320
	var p = this.shape.points;
321
	for (var i = 0; i < p.length; ++i) {
322
		attr.push(p[i].x.toFixed(8));
323
		attr.push(p[i].y.toFixed(8));
324
	}
325
	this.rawNode.setAttribute("points", attr.join(" "));
326
	return this;
327
}});
328
dojo.gfx.Polyline.nodeType = "polyline";
329
dojo.declare("dojo.gfx.Image", dojo.gfx.shape.Image, {setShape:function (newShape) {
330
	this.shape = dojo.gfx.makeParameters(this.shape, newShape);
331
	this.bbox = null;
332
	var rawNode = this.rawNode;
333
	for (var i in this.shape) {
334
		if (i != "type" && i != "src") {
335
			rawNode.setAttribute(i, this.shape[i]);
336
		}
337
	}
338
	rawNode.setAttributeNS(dojo.svg.xmlns.xlink, "href", this.shape.src);
339
	return this;
340
}, setStroke:function () {
341
	return this;
342
}, setFill:function () {
343
	return this;
344
}, attachStroke:function (rawNode) {
345
	return null;
346
}, attachFill:function (rawNode) {
347
	return null;
348
}});
349
dojo.gfx.Image.nodeType = "image";
350
dojo.declare("dojo.gfx.Path", dojo.gfx.path.Path, {_updateWithSegment:function (segment) {
351
	dojo.gfx.Path.superclass._updateWithSegment.apply(this, arguments);
352
	if (typeof (this.shape.path) == "string") {
353
		this.rawNode.setAttribute("d", this.shape.path);
354
	}
355
}, setShape:function (newShape) {
356
	dojo.gfx.Path.superclass.setShape.apply(this, arguments);
357
	this.rawNode.setAttribute("d", this.shape.path);
358
	return this;
359
}});
360
dojo.gfx.Path.nodeType = "path";
361
dojo.gfx._creators = {createPath:function (path) {
362
	return this.createObject(dojo.gfx.Path, path);
363
}, createRect:function (rect) {
364
	return this.createObject(dojo.gfx.Rect, rect);
365
}, createCircle:function (circle) {
366
	return this.createObject(dojo.gfx.Circle, circle);
367
}, createEllipse:function (ellipse) {
368
	return this.createObject(dojo.gfx.Ellipse, ellipse);
369
}, createLine:function (line) {
370
	return this.createObject(dojo.gfx.Line, line);
371
}, createPolyline:function (points) {
372
	return this.createObject(dojo.gfx.Polyline, points);
373
}, createImage:function (image) {
374
	return this.createObject(dojo.gfx.Image, image);
375
}, createGroup:function () {
376
	return this.createObject(dojo.gfx.Group);
377
}, createObject:function (shapeType, rawShape) {
378
	if (!this.rawNode) {
379
		return null;
380
	}
381
	var shape = new shapeType();
382
	var node = document.createElementNS(dojo.svg.xmlns.svg, shapeType.nodeType);
383
	shape.setRawNode(node);
384
	this.rawNode.appendChild(node);
385
	shape.setShape(rawShape);
386
	this.add(shape);
387
	return shape;
388
}, add:function (shape) {
389
	var oldParent = shape.getParent();
390
	if (oldParent) {
391
		oldParent.remove(shape, true);
392
	}
393
	shape._setParent(this, null);
394
	this.rawNode.appendChild(shape.rawNode);
395
	return this;
396
}, remove:function (shape, silently) {
397
	if (this.rawNode == shape.rawNode.parentNode) {
398
		this.rawNode.removeChild(shape.rawNode);
399
	}
400
	shape._setParent(null, null);
401
	return this;
402
}};
403
dojo.gfx.attachNode = function (node) {
404
	if (!node) {
405
		return null;
406
	}
407
	var s = null;
408
	switch (node.tagName.toLowerCase()) {
409
	  case dojo.gfx.Rect.nodeType:
410
		s = new dojo.gfx.Rect();
411
		break;
412
	  case dojo.gfx.Ellipse.nodeType:
413
		s = new dojo.gfx.Ellipse();
414
		break;
415
	  case dojo.gfx.Polyline.nodeType:
416
		s = new dojo.gfx.Polyline();
417
		break;
418
	  case dojo.gfx.Path.nodeType:
419
		s = new dojo.gfx.Path();
420
		break;
421
	  case dojo.gfx.Circle.nodeType:
422
		s = new dojo.gfx.Circle();
423
		break;
424
	  case dojo.gfx.Line.nodeType:
425
		s = new dojo.gfx.Line();
426
		break;
427
	  case dojo.gfx.Image.nodeType:
428
		s = new dojo.gfx.Image();
429
		break;
430
	  default:
431
		dojo.debug("FATAL ERROR! tagName = " + node.tagName);
432
	}
433
	s.attach(node);
434
	return s;
435
};
436
dojo.lang.extend(dojo.gfx.Surface, {setDimensions:function (width, height) {
437
	if (!this.rawNode) {
438
		return this;
439
	}
440
	this.rawNode.setAttribute("width", width);
441
	this.rawNode.setAttribute("height", height);
442
	return this;
443
}, getDimensions:function () {
444
	return this.rawNode ? {width:this.rawNode.getAttribute("width"), height:this.rawNode.getAttribute("height")} : null;
445
}});
446
dojo.gfx.createSurface = function (parentNode, width, height) {
447
	var s = new dojo.gfx.Surface();
448
	s.rawNode = document.createElementNS(dojo.svg.xmlns.svg, "svg");
449
	s.rawNode.setAttribute("width", width);
450
	s.rawNode.setAttribute("height", height);
451
	var defs = new dojo.gfx.svg.Defines();
452
	var node = document.createElementNS(dojo.svg.xmlns.svg, dojo.gfx.svg.Defines.nodeType);
453
	defs.setRawNode(node);
454
	s.rawNode.appendChild(node);
455
	dojo.byId(parentNode).appendChild(s.rawNode);
456
	return s;
457
};
458
dojo.gfx.attachSurface = function (node) {
459
	var s = new dojo.gfx.Surface();
460
	s.rawNode = node;
461
	return s;
462
};
463
dojo.lang.extend(dojo.gfx.Group, dojo.gfx._creators);
464
dojo.lang.extend(dojo.gfx.Surface, dojo.gfx._creators);
465
delete dojo.gfx._creators;
466
dojo.gfx.svg.Defines = function () {
467
	this.rawNode = null;
468
};
469
dojo.lang.extend(dojo.gfx.svg.Defines, {setRawNode:function (rawNode) {
470
	this.rawNode = rawNode;
471
}});
472
dojo.gfx.svg.Defines.nodeType = "defs";
473