1 dojo.require("dojox.gfx.vml");
3 dojo.experimental("dojox.gfx.vml_attach");
6 dojox.gfx.attachNode = function(node){
7 // summary: creates a shape from a Node
8 // node: Node: an VML node
11 switch(node.tagName.toLowerCase()){
12 case dojox.gfx.Rect.nodeType:
13 s = new dojox.gfx.Rect(node);
16 case dojox.gfx.Ellipse.nodeType:
17 if(node.style.width == node.style.height){
18 s = new dojox.gfx.Circle(node);
21 s = new dojox.gfx.Ellipse(node);
25 case dojox.gfx.Path.nodeType:
26 switch(node.getAttribute("dojoGfxType")){
28 s = new dojox.gfx.Line(node);
32 s = new dojox.gfx.Polyline(node);
36 s = new dojox.gfx.Path(node);
40 s = new dojox.gfx.Text(node);
43 attachTextTransform(s);
46 s = new dojox.gfx.TextPath(node);
53 case dojox.gfx.Image.nodeType:
54 switch(node.getAttribute("dojoGfxType")){
56 s = new dojox.gfx.Image(node);
58 attachImageTransform(s);
63 //console.debug("FATAL ERROR! tagName = " + node.tagName);
66 if(!(s instanceof dojox.gfx.Image)){
69 if(!(s instanceof dojox.gfx.Text)){
73 return s; // dojox.gfx.Shape
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();
81 var r = s.rawNode = node.firstChild;
83 if(!b || b.tagName != "rect"){
84 return null; // dojox.gfx.Surface
87 return s; // dojox.gfx.Surface
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])});
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])});
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){
128 fillStyle = new dojo.Color(r.fillcolor+"");
129 fillStyle.a = fo.opacity;
131 object.fillStyle = fillStyle;
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;
139 object.strokeStyle = null;
142 var strokeStyle = object.strokeStyle = dojo.clone(dojox.gfx.defaultStroke),
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;
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({
161 dx: dojox.gfx.pt2px(so.x),
162 dy: dojox.gfx.pt2px(so.y)
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
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);
181 object.shape = dojox.gfx.makeParameters(dojox.gfx.defaultRect, {
182 x: parseInt(style.left),
183 y: parseInt(style.top),
186 r: Math.min(width, height) * arcsize
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,
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,
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);
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]);
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);
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){
242 y = parseInt(p[i + 1]);
243 if(isNaN(x) || isNaN(y)){ break; }
244 shape.points.push({x: x, y: y});
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;
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({
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);
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; }
281 shape.text = c[i].string;
282 switch(s["v-text-align"]){
284 shape.x = parseInt(p[1]);
285 shape.align = "start";
288 shape.x = (parseInt(p[1]) + parseInt(p[4])) / 2;
289 shape.align = "middle";
292 shape.x = parseInt(p[4]);
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;
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);
312 object.fontStyle = null;
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;
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()
330 object.matrix = dojox.gfx.matrix.multiply(matrix, {dy: dojox.gfx.normalizedLength(fs.size) * 0.35});
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){
355 if(l >= 4 && t[l - 1] == "" && t[l - 2] == 0 && t[l - 3] == 0 && t[l - 4] == "l"){
359 shape.path = t.join(" ");