2150 |
mathias |
1 |
dojo.require("dojox.gfx.vml");
|
|
|
2 |
|
|
|
3 |
dojo.experimental("dojox.gfx.vml_attach");
|
|
|
4 |
|
|
|
5 |
(function(){
|
|
|
6 |
dojox.gfx.attachNode = function(node){
|
|
|
7 |
// summary: creates a shape from a Node
|
|
|
8 |
// node: Node: an VML 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 |
if(node.style.width == node.style.height){
|
|
|
18 |
s = new dojox.gfx.Circle(node);
|
|
|
19 |
attachCircle(s);
|
|
|
20 |
}else{
|
|
|
21 |
s = new dojox.gfx.Ellipse(node);
|
|
|
22 |
attachEllipse(s);
|
|
|
23 |
}
|
|
|
24 |
break;
|
|
|
25 |
case dojox.gfx.Path.nodeType:
|
|
|
26 |
switch(node.getAttribute("dojoGfxType")){
|
|
|
27 |
case "line":
|
|
|
28 |
s = new dojox.gfx.Line(node);
|
|
|
29 |
attachLine(s);
|
|
|
30 |
break;
|
|
|
31 |
case "polyline":
|
|
|
32 |
s = new dojox.gfx.Polyline(node);
|
|
|
33 |
attachPolyline(s);
|
|
|
34 |
break;
|
|
|
35 |
case "path":
|
|
|
36 |
s = new dojox.gfx.Path(node);
|
|
|
37 |
attachPath(s);
|
|
|
38 |
break;
|
|
|
39 |
case "text":
|
|
|
40 |
s = new dojox.gfx.Text(node);
|
|
|
41 |
attachText(s);
|
|
|
42 |
attachFont(s);
|
|
|
43 |
attachTextTransform(s);
|
|
|
44 |
break;
|
|
|
45 |
case "textpath":
|
|
|
46 |
s = new dojox.gfx.TextPath(node);
|
|
|
47 |
attachPath(s);
|
|
|
48 |
attachText(s);
|
|
|
49 |
attachFont(s);
|
|
|
50 |
break;
|
|
|
51 |
}
|
|
|
52 |
break;
|
|
|
53 |
case dojox.gfx.Image.nodeType:
|
|
|
54 |
switch(node.getAttribute("dojoGfxType")){
|
|
|
55 |
case "image":
|
|
|
56 |
s = new dojox.gfx.Image(node);
|
|
|
57 |
attachImage(s);
|
|
|
58 |
attachImageTransform(s);
|
|
|
59 |
break;
|
|
|
60 |
}
|
|
|
61 |
break;
|
|
|
62 |
default:
|
|
|
63 |
//console.debug("FATAL ERROR! tagName = " + node.tagName);
|
|
|
64 |
return null;
|
|
|
65 |
}
|
|
|
66 |
if(!(s instanceof dojox.gfx.Image)){
|
|
|
67 |
attachFill(s);
|
|
|
68 |
attachStroke(s);
|
|
|
69 |
if(!(s instanceof dojox.gfx.Text)){
|
|
|
70 |
attachTransform(s);
|
|
|
71 |
}
|
|
|
72 |
}
|
|
|
73 |
return s; // dojox.gfx.Shape
|
|
|
74 |
};
|
|
|
75 |
|
|
|
76 |
dojox.gfx.attachSurface = function(node){
|
|
|
77 |
// summary: creates a surface from a Node
|
|
|
78 |
// node: Node: an VML node
|
|
|
79 |
var s = new dojox.gfx.Surface();
|
|
|
80 |
s.clipNode = node;
|
|
|
81 |
var r = s.rawNode = node.firstChild;
|
|
|
82 |
var b = r.firstChild;
|
|
|
83 |
if(!b || b.tagName != "rect"){
|
|
|
84 |
return null; // dojox.gfx.Surface
|
|
|
85 |
}
|
|
|
86 |
s.bgNode = r;
|
|
|
87 |
return s; // dojox.gfx.Surface
|
|
|
88 |
};
|
|
|
89 |
|
|
|
90 |
var attachFill = function(object){
|
|
|
91 |
// summary: deduces a fill style from a node.
|
|
|
92 |
// object: dojox.gfx.Shape: an VML shape
|
|
|
93 |
var fillStyle = null, r = object.rawNode, fo = r.fill;
|
|
|
94 |
if(fo.on && fo.type == "gradient"){
|
|
|
95 |
var fillStyle = dojo.clone(dojox.gfx.defaultLinearGradient),
|
|
|
96 |
rad = dojox.gfx.matrix._degToRad(fo.angle);
|
|
|
97 |
fillStyle.x2 = Math.cos(rad);
|
|
|
98 |
fillStyle.y2 = Math.sin(rad);
|
|
|
99 |
fillStyle.colors = [];
|
|
|
100 |
var stops = fo.colors.value.split(";");
|
|
|
101 |
for(var i = 0; i < stops.length; ++i){
|
|
|
102 |
var t = stops[i].match(/\S+/g);
|
|
|
103 |
if(!t || t.length != 2){ continue; }
|
|
|
104 |
fillStyle.colors.push({offset: dojox.gfx.vml._parseFloat(t[0]), color: new dojo.Color(t[1])});
|
|
|
105 |
}
|
|
|
106 |
}else if(fo.on && fo.type == "gradientradial"){
|
|
|
107 |
var fillStyle = dojo.clone(dojox.gfx.defaultRadialGradient),
|
|
|
108 |
w = parseFloat(r.style.width), h = parseFloat(r.style.height);
|
|
|
109 |
fillStyle.cx = isNaN(w) ? 0 : fo.focusposition.x * w;
|
|
|
110 |
fillStyle.cy = isNaN(h) ? 0 : fo.focusposition.y * h;
|
|
|
111 |
fillStyle.r = isNaN(w) ? 1 : w / 2;
|
|
|
112 |
fillStyle.colors = [];
|
|
|
113 |
var stops = fo.colors.value.split(";");
|
|
|
114 |
for(var i = stops.length - 1; i >= 0; --i){
|
|
|
115 |
var t = stops[i].match(/\S+/g);
|
|
|
116 |
if(!t || t.length != 2){ continue; }
|
|
|
117 |
fillStyle.colors.push({offset: dojox.gfx.vml._parseFloat(t[0]), color: new dojo.Color(t[1])});
|
|
|
118 |
}
|
|
|
119 |
}else if(fo.on && fo.type == "tile"){
|
|
|
120 |
var fillStyle = dojo.clone(dojox.gfx.defaultPattern);
|
|
|
121 |
fillStyle.width = dojox.gfx.pt2px(fo.size.x); // from pt
|
|
|
122 |
fillStyle.height = dojox.gfx.pt2px(fo.size.y); // from pt
|
|
|
123 |
fillStyle.x = fo.origin.x * fillStyle.width;
|
|
|
124 |
fillStyle.y = fo.origin.y * fillStyle.height;
|
|
|
125 |
fillStyle.src = fo.src;
|
|
|
126 |
}else if(fo.on && r.fillcolor){
|
|
|
127 |
// a color object !
|
|
|
128 |
fillStyle = new dojo.Color(r.fillcolor+"");
|
|
|
129 |
fillStyle.a = fo.opacity;
|
|
|
130 |
}
|
|
|
131 |
object.fillStyle = fillStyle;
|
|
|
132 |
};
|
|
|
133 |
|
|
|
134 |
var attachStroke = function(object) {
|
|
|
135 |
// summary: deduces a stroke style from a node.
|
|
|
136 |
// object: dojox.gfx.Shape: an VML shape
|
|
|
137 |
var r = object.rawNode;
|
|
|
138 |
if(!r.stroked){
|
|
|
139 |
object.strokeStyle = null;
|
|
|
140 |
return;
|
|
|
141 |
}
|
|
|
142 |
var strokeStyle = object.strokeStyle = dojo.clone(dojox.gfx.defaultStroke),
|
|
|
143 |
rs = r.stroke;
|
|
|
144 |
strokeStyle.color = new dojo.Color(r.strokecolor.value);
|
|
|
145 |
strokeStyle.width = dojox.gfx.normalizedLength(r.strokeweight+"");
|
|
|
146 |
strokeStyle.color.a = rs.opacity;
|
|
|
147 |
strokeStyle.cap = this._translate(this._capMapReversed, rs.endcap);
|
|
|
148 |
strokeStyle.join = rs.joinstyle == "miter" ? rs.miterlimit : rs.joinstyle;
|
|
|
149 |
strokeStyle.style = rs.dashstyle;
|
|
|
150 |
};
|
|
|
151 |
|
|
|
152 |
var attachTransform = function(object) {
|
|
|
153 |
// summary: deduces a transformation matrix from a node.
|
|
|
154 |
// object: dojox.gfx.Shape: an VML shape
|
|
|
155 |
var s = rawNode.skew, sm = s.matrix, so = s.offset;
|
|
|
156 |
object.matrix = dojox.gfx.matrix.normalize({
|
|
|
157 |
xx: sm.xtox,
|
|
|
158 |
xy: sm.ytox,
|
|
|
159 |
yx: sm.xtoy,
|
|
|
160 |
yy: sm.ytoy,
|
|
|
161 |
dx: dojox.gfx.pt2px(so.x),
|
|
|
162 |
dy: dojox.gfx.pt2px(so.y)
|
|
|
163 |
});
|
|
|
164 |
};
|
|
|
165 |
|
|
|
166 |
var attachGroup = function(object){
|
|
|
167 |
// summary: reconstructs all group shape parameters from a node (VML).
|
|
|
168 |
// object: dojox.gfx.Shape: an VML shape
|
|
|
169 |
// attach the background
|
|
|
170 |
object.bgNode = object.rawNode.firstChild; // TODO: check it first
|
|
|
171 |
};
|
|
|
172 |
|
|
|
173 |
var attachRect = function(object){
|
|
|
174 |
// summary: builds a rectangle shape from a node.
|
|
|
175 |
// object: dojox.gfx.Shape: an VML shape
|
|
|
176 |
// a workaround for the VML's arcsize bug: cannot read arcsize of an instantiated node
|
|
|
177 |
var r = object.rawNode, arcsize = r.outerHTML.match(/arcsize = \"(\d*\.?\d+[%f]?)\"/)[1],
|
|
|
178 |
style = r.style, width = parseFloat(style.width), height = parseFloat(style.height);
|
|
|
179 |
arcsize = (arcsize.indexOf("%") >= 0) ? parseFloat(arcsize) / 100 : dojox.gfx.vml._parseFloat(arcsize);
|
|
|
180 |
// make an object
|
|
|
181 |
object.shape = dojox.gfx.makeParameters(dojox.gfx.defaultRect, {
|
|
|
182 |
x: parseInt(style.left),
|
|
|
183 |
y: parseInt(style.top),
|
|
|
184 |
width: width,
|
|
|
185 |
height: height,
|
|
|
186 |
r: Math.min(width, height) * arcsize
|
|
|
187 |
});
|
|
|
188 |
};
|
|
|
189 |
|
|
|
190 |
var attachEllipse = function(object){
|
|
|
191 |
// summary: builds an ellipse shape from a node.
|
|
|
192 |
// object: dojox.gfx.Shape: an VML shape
|
|
|
193 |
var style = object.rawNode.style,
|
|
|
194 |
rx = parseInt(style.width ) / 2,
|
|
|
195 |
ry = parseInt(style.height) / 2;
|
|
|
196 |
object.shape = dojox.gfx.makeParameters(dojox.gfx.defaultEllipse, {
|
|
|
197 |
cx: parseInt(style.left) + rx,
|
|
|
198 |
cy: parseInt(style.top ) + ry,
|
|
|
199 |
rx: rx,
|
|
|
200 |
ry: ry
|
|
|
201 |
});
|
|
|
202 |
};
|
|
|
203 |
|
|
|
204 |
var attachCircle = function(object){
|
|
|
205 |
// summary: builds a circle shape from a node.
|
|
|
206 |
// object: dojox.gfx.Shape: an VML shape
|
|
|
207 |
var style = object.rawNode.style, r = parseInt(style.width) / 2;
|
|
|
208 |
object.shape = dojox.gfx.makeParameters(dojox.gfx.defaultCircle, {
|
|
|
209 |
cx: parseInt(style.left) + r,
|
|
|
210 |
cy: parseInt(style.top) + r,
|
|
|
211 |
r: r
|
|
|
212 |
});
|
|
|
213 |
};
|
|
|
214 |
|
|
|
215 |
var attachLine = function(object){
|
|
|
216 |
// summary: builds a line shape from a node.
|
|
|
217 |
// object: dojox.gfx.Shape: an VML shape
|
|
|
218 |
var shape = object.shape = dojo.clone(dojox.gfx.defaultLine),
|
|
|
219 |
p = object.rawNode.path.v.match(dojox.gfx.pathVmlRegExp);
|
|
|
220 |
do{
|
|
|
221 |
if(p.length < 7 || p[0] != "m" || p[3] != "l" || p[6] != "e"){ break; }
|
|
|
222 |
shape.x1 = parseInt(p[1]);
|
|
|
223 |
shape.y1 = parseInt(p[2]);
|
|
|
224 |
shape.x2 = parseInt(p[4]);
|
|
|
225 |
shape.y2 = parseInt(p[5]);
|
|
|
226 |
}while(false);
|
|
|
227 |
};
|
|
|
228 |
|
|
|
229 |
var attachPolyline = function(object){
|
|
|
230 |
// summary: builds a polyline/polygon shape from a node.
|
|
|
231 |
// object: dojox.gfx.Shape: an VML shape
|
|
|
232 |
var shape = object.shape = dojo.clone(dojox.gfx.defaultPolyline),
|
|
|
233 |
p = object.rawNode.path.v.match(dojox.gfx.pathVmlRegExp);
|
|
|
234 |
do{
|
|
|
235 |
if(p.length < 3 || p[0] != "m"){ break; }
|
|
|
236 |
var x = parseInt(p[0]), y = parseInt(p[1]);
|
|
|
237 |
if(isNaN(x) || isNaN(y)){ break; }
|
|
|
238 |
shape.points.push({x: x, y: y});
|
|
|
239 |
if(p.length < 6 || p[3] != "l"){ break; }
|
|
|
240 |
for(var i = 4; i < p.length; i += 2){
|
|
|
241 |
x = parseInt(p[i]);
|
|
|
242 |
y = parseInt(p[i + 1]);
|
|
|
243 |
if(isNaN(x) || isNaN(y)){ break; }
|
|
|
244 |
shape.points.push({x: x, y: y});
|
|
|
245 |
}
|
|
|
246 |
}while(false);
|
|
|
247 |
};
|
|
|
248 |
|
|
|
249 |
var attachImage = function(object){
|
|
|
250 |
// summary: builds an image shape from a node.
|
|
|
251 |
// object: dojox.gfx.Shape: an VML shape
|
|
|
252 |
object.shape = dojo.clone(dojox.gfx.defaultImage);
|
|
|
253 |
object.shape.src = object.rawNode.firstChild.src;
|
|
|
254 |
};
|
|
|
255 |
|
|
|
256 |
var attachImageTransform = function(object) {
|
|
|
257 |
// summary: deduces a transformation matrix from a node.
|
|
|
258 |
// object: dojox.gfx.Shape: an VML shape
|
|
|
259 |
var m = object.rawNode.filters["DXImageTransform.Microsoft.Matrix"];
|
|
|
260 |
object.matrix = dojox.gfx.matrix.normalize({
|
|
|
261 |
xx: m.M11,
|
|
|
262 |
xy: m.M12,
|
|
|
263 |
yx: m.M21,
|
|
|
264 |
yy: m.M22,
|
|
|
265 |
dx: m.Dx,
|
|
|
266 |
dy: m.Dy
|
|
|
267 |
});
|
|
|
268 |
};
|
|
|
269 |
|
|
|
270 |
var attachText = function(object){
|
|
|
271 |
// summary: builds a text shape from a node.
|
|
|
272 |
// object: dojox.gfx.Shape: an VML shape
|
|
|
273 |
var shape = object.shape = dojo.clone(dojox.gfx.defaultText),
|
|
|
274 |
r = object.rawNode, p = r.path.v.match(dojox.gfx.pathVmlRegExp);
|
|
|
275 |
do{
|
|
|
276 |
if(!p || p.length != 7){ break; }
|
|
|
277 |
var c = r.childNodes, i = 0;
|
|
|
278 |
for(; i < c.length && c[i].tagName != "textpath"; ++i);
|
|
|
279 |
if(i >= c.length){ break; }
|
|
|
280 |
var s = c[i].style;
|
|
|
281 |
shape.text = c[i].string;
|
|
|
282 |
switch(s["v-text-align"]){
|
|
|
283 |
case "left":
|
|
|
284 |
shape.x = parseInt(p[1]);
|
|
|
285 |
shape.align = "start";
|
|
|
286 |
break;
|
|
|
287 |
case "center":
|
|
|
288 |
shape.x = (parseInt(p[1]) + parseInt(p[4])) / 2;
|
|
|
289 |
shape.align = "middle";
|
|
|
290 |
break;
|
|
|
291 |
case "right":
|
|
|
292 |
shape.x = parseInt(p[4]);
|
|
|
293 |
shape.align = "end";
|
|
|
294 |
break;
|
|
|
295 |
}
|
|
|
296 |
shape.y = parseInt(p[2]);
|
|
|
297 |
shape.decoration = s["text-decoration"];
|
|
|
298 |
shape.rotated = s["v-rotate-letters"].toLowerCase() in dojox.gfx.vml._bool;
|
|
|
299 |
shape.kerning = s["v-text-kern"].toLowerCase() in dojox.gfx.vml._bool;
|
|
|
300 |
return;
|
|
|
301 |
}while(false);
|
|
|
302 |
object.shape = null;
|
|
|
303 |
};
|
|
|
304 |
|
|
|
305 |
var attachFont = function(object){
|
|
|
306 |
// summary: deduces a font style from a node.
|
|
|
307 |
// object: dojox.gfx.Shape: an VML shape
|
|
|
308 |
var fontStyle = object.fontStyle = dojo.clone(dojox.gfx.defaultFont),
|
|
|
309 |
c = object.rawNode.childNodes, i = 0;
|
|
|
310 |
for(; i < c.length && c[i].tagName == "textpath"; ++i);
|
|
|
311 |
if(i >= c.length){
|
|
|
312 |
object.fontStyle = null;
|
|
|
313 |
return;
|
|
|
314 |
}
|
|
|
315 |
var s = c[i].style;
|
|
|
316 |
fontStyle.style = s.fontstyle;
|
|
|
317 |
fontStyle.variant = s.fontvariant;
|
|
|
318 |
fontStyle.weight = s.fontweight;
|
|
|
319 |
fontStyle.size = s.fontsize;
|
|
|
320 |
fontStyle.family = s.fontfamily;
|
|
|
321 |
};
|
|
|
322 |
|
|
|
323 |
var attachTextTransform = function(object) {
|
|
|
324 |
// summary: deduces a transformation matrix from a node.
|
|
|
325 |
// object: dojox.gfx.Shape: an VML shape
|
|
|
326 |
attachTransform(object);
|
|
|
327 |
var matrix = object.matrix, fs = object.fontStyle;
|
|
|
328 |
// see comments in _getRealMatrix()
|
|
|
329 |
if(matrix && fs){
|
|
|
330 |
object.matrix = dojox.gfx.matrix.multiply(matrix, {dy: dojox.gfx.normalizedLength(fs.size) * 0.35});
|
|
|
331 |
}
|
|
|
332 |
};
|
|
|
333 |
|
|
|
334 |
var attachPath = function(object){
|
|
|
335 |
// summary: builds a path shape from a Node.
|
|
|
336 |
// object: dojox.gfx.Shape: an VML shape
|
|
|
337 |
var shape = object.shape = dojo.clone(dojox.gfx.defaultPath),
|
|
|
338 |
p = rawNode.path.v.match(dojox.gfx.pathVmlRegExp),
|
|
|
339 |
t = [], skip = false, map = dojox.gfx.Path._pathVmlToSvgMap;
|
|
|
340 |
for(var i = 0; i < p.length; ++p){
|
|
|
341 |
var s = p[i];
|
|
|
342 |
if(s in map) {
|
|
|
343 |
skip = false;
|
|
|
344 |
t.push(map[s]);
|
|
|
345 |
} else if(!skip){
|
|
|
346 |
var n = parseInt(s);
|
|
|
347 |
if(isNaN(n)){
|
|
|
348 |
skip = true;
|
|
|
349 |
}else{
|
|
|
350 |
t.push(n);
|
|
|
351 |
}
|
|
|
352 |
}
|
|
|
353 |
}
|
|
|
354 |
var l = t.length;
|
|
|
355 |
if(l >= 4 && t[l - 1] == "" && t[l - 2] == 0 && t[l - 3] == 0 && t[l - 4] == "l"){
|
|
|
356 |
t.splice(l - 4, 4);
|
|
|
357 |
}
|
|
|
358 |
if(l){
|
|
|
359 |
shape.path = t.join(" ");
|
|
|
360 |
}
|
|
|
361 |
};
|
|
|
362 |
})();
|