| 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 |
|