2150 |
mathias |
1 |
dojo.require("dojox.gfx.svg");
|
|
|
2 |
|
|
|
3 |
dojo.experimental("dojox.gfx.svg_attach");
|
|
|
4 |
|
|
|
5 |
(function(){
|
|
|
6 |
dojox.gfx.attachNode = function(node){
|
|
|
7 |
// summary: creates a shape from a Node
|
|
|
8 |
// node: Node: an SVG node
|
|
|
9 |
if(!node) return null;
|
|
|
10 |
var s = null;
|
|
|
11 |
switch(node.tagName.toLowerCase()){
|
|
|
12 |
case dojox.gfx.Rect.nodeType:
|
|
|
13 |
s = new dojox.gfx.Rect(node);
|
|
|
14 |
attachRect(s);
|
|
|
15 |
break;
|
|
|
16 |
case dojox.gfx.Ellipse.nodeType:
|
|
|
17 |
s = new dojox.gfx.Ellipse(node);
|
|
|
18 |
attachShape(s, dojox.gfx.defaultEllipse);
|
|
|
19 |
break;
|
|
|
20 |
case dojox.gfx.Polyline.nodeType:
|
|
|
21 |
s = new dojox.gfx.Polyline(node);
|
|
|
22 |
attachShape(s, dojox.gfx.defaultPolyline);
|
|
|
23 |
break;
|
|
|
24 |
case dojox.gfx.Path.nodeType:
|
|
|
25 |
s = new dojox.gfx.Path(node);
|
|
|
26 |
attachShape(s, dojox.gfx.defaultPath);
|
|
|
27 |
break;
|
|
|
28 |
case dojox.gfx.Circle.nodeType:
|
|
|
29 |
s = new dojox.gfx.Circle(node);
|
|
|
30 |
attachShape(s, dojox.gfx.defaultCircle);
|
|
|
31 |
break;
|
|
|
32 |
case dojox.gfx.Line.nodeType:
|
|
|
33 |
s = new dojox.gfx.Line(node);
|
|
|
34 |
attachShape(s, dojox.gfx.defaultLine);
|
|
|
35 |
break;
|
|
|
36 |
case dojox.gfx.Image.nodeType:
|
|
|
37 |
s = new dojox.gfx.Image(node);
|
|
|
38 |
attachShape(s, dojox.gfx.defaultImage);
|
|
|
39 |
break;
|
|
|
40 |
case dojox.gfx.Text.nodeType:
|
|
|
41 |
var t = node.getElementsByTagName("textPath");
|
|
|
42 |
if(t && t.length){
|
|
|
43 |
s = new dojox.gfx.TextPath(node);
|
|
|
44 |
attachShape(s, dojox.gfx.defaultPath);
|
|
|
45 |
attachTextPath(s);
|
|
|
46 |
}else{
|
|
|
47 |
s = new dojox.gfx.Text(node);
|
|
|
48 |
attachText(s);
|
|
|
49 |
}
|
|
|
50 |
attachFont(s);
|
|
|
51 |
break;
|
|
|
52 |
default:
|
|
|
53 |
//console.debug("FATAL ERROR! tagName = " + node.tagName);
|
|
|
54 |
return null;
|
|
|
55 |
}
|
|
|
56 |
if(!(s instanceof dojox.gfx.Image)){
|
|
|
57 |
attachFill(s);
|
|
|
58 |
attachStroke(s);
|
|
|
59 |
}
|
|
|
60 |
attachTransform(s);
|
|
|
61 |
return s; // dojox.gfx.Shape
|
|
|
62 |
};
|
|
|
63 |
|
|
|
64 |
dojox.gfx.attachSurface = function(node){
|
|
|
65 |
// summary: creates a surface from a Node
|
|
|
66 |
// node: Node: an SVG node
|
|
|
67 |
var s = new dojox.gfx.Surface();
|
|
|
68 |
s.rawNode = node;
|
|
|
69 |
var def_elems = node.getElementsByTagName("defs");
|
|
|
70 |
if(def_elems.length == 0){
|
|
|
71 |
return null; // dojox.gfx.Surface
|
|
|
72 |
}
|
|
|
73 |
s.defNode = def_elems[0];
|
|
|
74 |
return s; // dojox.gfx.Surface
|
|
|
75 |
};
|
|
|
76 |
|
|
|
77 |
var attachFill = function(object){
|
|
|
78 |
// summary: deduces a fill style from a node.
|
|
|
79 |
// object: dojox.gfx.Shape: an SVG shape
|
|
|
80 |
var fill = object.rawNode.getAttribute("fill");
|
|
|
81 |
if(fill == "none"){
|
|
|
82 |
object.fillStyle = null;
|
|
|
83 |
return;
|
|
|
84 |
}
|
|
|
85 |
var fillStyle = null, gradient = dojox.gfx.svg.getRef(fill);
|
|
|
86 |
if(ref){
|
|
|
87 |
switch(gradient.tagName.toLowerCase()){
|
|
|
88 |
case "lineargradient":
|
|
|
89 |
fillStyle = _getGradient(dojox.gfx.defaultLinearGradient, gradient);
|
|
|
90 |
dojo.forEach(["x1", "y1", "x2", "y2"], function(x){
|
|
|
91 |
fillStyle[x] = gradient.getAttribute(x);
|
|
|
92 |
});
|
|
|
93 |
break;
|
|
|
94 |
case "radialgradient":
|
|
|
95 |
fillStyle = _getGradient(dojox.gfx.defaultRadialGradient, gradient);
|
|
|
96 |
dojo.forEach(["cx", "cy", "r"], function(x){
|
|
|
97 |
fillStyle[x] = gradient.getAttribute(x);
|
|
|
98 |
});
|
|
|
99 |
fillStyle.cx = gradient.getAttribute("cx");
|
|
|
100 |
fillStyle.cy = gradient.getAttribute("cy");
|
|
|
101 |
fillStyle.r = gradient.getAttribute("r");
|
|
|
102 |
break;
|
|
|
103 |
case "pattern":
|
|
|
104 |
fillStyle = dojo.lang.shallowCopy(dojox.gfx.defaultPattern, true);
|
|
|
105 |
dojo.forEach(["x", "y", "width", "height"], function(x){
|
|
|
106 |
fillStyle[x] = gradient.getAttribute(x);
|
|
|
107 |
});
|
|
|
108 |
fillStyle.src = gradient.firstChild.getAttributeNS(dojox.gfx.svg.xmlns.xlink, "href");
|
|
|
109 |
break;
|
|
|
110 |
}
|
|
|
111 |
}else{
|
|
|
112 |
fillStyle = new dojo.Color(fill);
|
|
|
113 |
var opacity = rawNode.getAttribute("fill-opacity");
|
|
|
114 |
if(opacity != null){ fillStyle.a = opacity; }
|
|
|
115 |
}
|
|
|
116 |
object.fillStyle = fillStyle;
|
|
|
117 |
};
|
|
|
118 |
|
|
|
119 |
var _getGradient = function(defaultGradient, gradient){
|
|
|
120 |
var fillStyle = dojo.clone(defaultGradient);
|
|
|
121 |
fillStyle.colors = [];
|
|
|
122 |
for(var i = 0; i < gradient.childNodes.length; ++i){
|
|
|
123 |
fillStyle.colors.push({
|
|
|
124 |
offset: gradient.childNodes[i].getAttribute("offset"),
|
|
|
125 |
color: new dojo.Color(gradient.childNodes[i].getAttribute("stop-color"))
|
|
|
126 |
});
|
|
|
127 |
}
|
|
|
128 |
return fillStyle;
|
|
|
129 |
};
|
|
|
130 |
|
|
|
131 |
var attachStroke = function(object){
|
|
|
132 |
// summary: deduces a stroke style from a node.
|
|
|
133 |
// object: dojox.gfx.Shape: an SVG shape
|
|
|
134 |
var rawNode = object.rawNode, stroke = rawNode.getAttribute("stroke");
|
|
|
135 |
if(stroke == null || stroke == "none"){
|
|
|
136 |
object.strokeStyle = null;
|
|
|
137 |
return;
|
|
|
138 |
}
|
|
|
139 |
var strokeStyle = object.strokeStyle = dojo.clone(dojox.gfx.defaultStroke);
|
|
|
140 |
var color = new dojo.Color(stroke);
|
|
|
141 |
if(color){
|
|
|
142 |
strokeStyle.color = color;
|
|
|
143 |
strokeStyle.color.a = rawNode.getAttribute("stroke-opacity");
|
|
|
144 |
strokeStyle.width = rawNode.getAttribute("stroke-width");
|
|
|
145 |
strokeStyle.cap = rawNode.getAttribute("stroke-linecap");
|
|
|
146 |
strokeStyle.join = rawNode.getAttribute("stroke-linejoin");
|
|
|
147 |
if(strokeStyle.join == "miter"){
|
|
|
148 |
strokeStyle.join = rawNode.getAttribute("stroke-miterlimit");
|
|
|
149 |
}
|
|
|
150 |
strokeStyle.style = rawNode.getAttribute("dojoGfxStrokeStyle");
|
|
|
151 |
}
|
|
|
152 |
};
|
|
|
153 |
|
|
|
154 |
var attachTransform = function(object){
|
|
|
155 |
// summary: deduces a transformation matrix from a node.
|
|
|
156 |
// object: dojox.gfx.Shape: an SVG shape
|
|
|
157 |
var matrix = object.rawNode.getAttribute("transform");
|
|
|
158 |
if(matrix.match(/^matrix\(.+\)$/)){
|
|
|
159 |
var t = matrix.slice(7, -1).split(",");
|
|
|
160 |
object.matrix = dojox.gfx.matrix.normalize({
|
|
|
161 |
xx: parseFloat(t[0]), xy: parseFloat(t[2]),
|
|
|
162 |
yx: parseFloat(t[1]), yy: parseFloat(t[3]),
|
|
|
163 |
dx: parseFloat(t[4]), dy: parseFloat(t[5])
|
|
|
164 |
});
|
|
|
165 |
}else{
|
|
|
166 |
object.matrix = null;
|
|
|
167 |
}
|
|
|
168 |
};
|
|
|
169 |
|
|
|
170 |
var attachFont = function(object){
|
|
|
171 |
// summary: deduces a font style from a Node.
|
|
|
172 |
// object: dojox.gfx.Shape: an SVG shape
|
|
|
173 |
var fontStyle = object.fontStyle = dojo.clone(dojox.gfx.defaultFont),
|
|
|
174 |
r = object.rawNode;
|
|
|
175 |
fontStyle.style = r.getAttribute("font-style");
|
|
|
176 |
fontStyle.variant = r.getAttribute("font-variant");
|
|
|
177 |
fontStyle.weight = r.getAttribute("font-weight");
|
|
|
178 |
fontStyle.size = r.getAttribute("font-size");
|
|
|
179 |
fontStyle.family = r.getAttribute("font-family");
|
|
|
180 |
};
|
|
|
181 |
|
|
|
182 |
var attachShape = function(object, def){
|
|
|
183 |
// summary: builds a shape from a node.
|
|
|
184 |
// object: dojox.gfx.Shape: an SVG shape
|
|
|
185 |
// def: Object: a default shape template
|
|
|
186 |
var shape = object.shape = dojo.clone(def), r = object.rawNode;
|
|
|
187 |
for(var i in shape) {
|
|
|
188 |
shape[i] = r.getAttribute(i);
|
|
|
189 |
}
|
|
|
190 |
};
|
|
|
191 |
|
|
|
192 |
var attachRect = function(object){
|
|
|
193 |
// summary: builds a rectangle shape from a node.
|
|
|
194 |
// object: dojox.gfx.Shape: an SVG shape
|
|
|
195 |
attachShape(object, dojox.gfx.defaultRect);
|
|
|
196 |
object.shape.r = Math.min(object.rawNode.getAttribute("rx"), object.rawNode.getAttribute("ry"));
|
|
|
197 |
};
|
|
|
198 |
|
|
|
199 |
var attachText = function(object){
|
|
|
200 |
// summary: builds a text shape from a node.
|
|
|
201 |
// object: dojox.gfx.Shape: an SVG shape
|
|
|
202 |
var shape = object.shape = dojo.clone(dojox.gfx.defaultText),
|
|
|
203 |
r = object.rawNode;
|
|
|
204 |
shape.x = r.getAttribute("x");
|
|
|
205 |
shape.y = r.getAttribute("y");
|
|
|
206 |
shape.align = r.getAttribute("text-anchor");
|
|
|
207 |
shape.decoration = r.getAttribute("text-decoration");
|
|
|
208 |
shape.rotated = parseFloat(r.getAttribute("rotate")) != 0;
|
|
|
209 |
shape.kerning = r.getAttribute("kerning") == "auto";
|
|
|
210 |
shape.text = r.firstChild.nodeValue;
|
|
|
211 |
};
|
|
|
212 |
|
|
|
213 |
var attachTextPath = function(object){
|
|
|
214 |
// summary: builds a textpath shape from a node.
|
|
|
215 |
// object: dojox.gfx.Shape: an SVG shape
|
|
|
216 |
var shape = object.shape = dojo.clone(dojox.gfx.defaultTextPath),
|
|
|
217 |
r = object.rawNode;
|
|
|
218 |
shape.align = r.getAttribute("text-anchor");
|
|
|
219 |
shape.decoration = r.getAttribute("text-decoration");
|
|
|
220 |
shape.rotated = parseFloat(r.getAttribute("rotate")) != 0;
|
|
|
221 |
shape.kerning = r.getAttribute("kerning") == "auto";
|
|
|
222 |
shape.text = r.firstChild.nodeValue;
|
|
|
223 |
};
|
|
|
224 |
})();
|