Subversion Repositories Applications.papyrus

Rev

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