| New file |
|---|
| 0,0 → 1,362 |
|---|
| dojo.require("dojox.gfx.vml"); |
| |
| dojo.experimental("dojox.gfx.vml_attach"); |
| |
| (function(){ |
| dojox.gfx.attachNode = function(node){ |
| // summary: creates a shape from a Node |
| // node: Node: an VML node |
| if(!node) return null; |
| var s = null; |
| switch(node.tagName.toLowerCase()){ |
| case dojox.gfx.Rect.nodeType: |
| s = new dojox.gfx.Rect(node); |
| attachRect(s); |
| break; |
| case dojox.gfx.Ellipse.nodeType: |
| if(node.style.width == node.style.height){ |
| s = new dojox.gfx.Circle(node); |
| attachCircle(s); |
| }else{ |
| s = new dojox.gfx.Ellipse(node); |
| attachEllipse(s); |
| } |
| break; |
| case dojox.gfx.Path.nodeType: |
| switch(node.getAttribute("dojoGfxType")){ |
| case "line": |
| s = new dojox.gfx.Line(node); |
| attachLine(s); |
| break; |
| case "polyline": |
| s = new dojox.gfx.Polyline(node); |
| attachPolyline(s); |
| break; |
| case "path": |
| s = new dojox.gfx.Path(node); |
| attachPath(s); |
| break; |
| case "text": |
| s = new dojox.gfx.Text(node); |
| attachText(s); |
| attachFont(s); |
| attachTextTransform(s); |
| break; |
| case "textpath": |
| s = new dojox.gfx.TextPath(node); |
| attachPath(s); |
| attachText(s); |
| attachFont(s); |
| break; |
| } |
| break; |
| case dojox.gfx.Image.nodeType: |
| switch(node.getAttribute("dojoGfxType")){ |
| case "image": |
| s = new dojox.gfx.Image(node); |
| attachImage(s); |
| attachImageTransform(s); |
| break; |
| } |
| break; |
| default: |
| //console.debug("FATAL ERROR! tagName = " + node.tagName); |
| return null; |
| } |
| if(!(s instanceof dojox.gfx.Image)){ |
| attachFill(s); |
| attachStroke(s); |
| if(!(s instanceof dojox.gfx.Text)){ |
| attachTransform(s); |
| } |
| } |
| return s; // dojox.gfx.Shape |
| }; |
| |
| dojox.gfx.attachSurface = function(node){ |
| // summary: creates a surface from a Node |
| // node: Node: an VML node |
| var s = new dojox.gfx.Surface(); |
| s.clipNode = node; |
| var r = s.rawNode = node.firstChild; |
| var b = r.firstChild; |
| if(!b || b.tagName != "rect"){ |
| return null; // dojox.gfx.Surface |
| } |
| s.bgNode = r; |
| return s; // dojox.gfx.Surface |
| }; |
| |
| var attachFill = function(object){ |
| // summary: deduces a fill style from a node. |
| // object: dojox.gfx.Shape: an VML shape |
| var fillStyle = null, r = object.rawNode, fo = r.fill; |
| if(fo.on && fo.type == "gradient"){ |
| var fillStyle = dojo.clone(dojox.gfx.defaultLinearGradient), |
| rad = dojox.gfx.matrix._degToRad(fo.angle); |
| fillStyle.x2 = Math.cos(rad); |
| fillStyle.y2 = Math.sin(rad); |
| fillStyle.colors = []; |
| var stops = fo.colors.value.split(";"); |
| for(var i = 0; i < stops.length; ++i){ |
| var t = stops[i].match(/\S+/g); |
| if(!t || t.length != 2){ continue; } |
| fillStyle.colors.push({offset: dojox.gfx.vml._parseFloat(t[0]), color: new dojo.Color(t[1])}); |
| } |
| }else if(fo.on && fo.type == "gradientradial"){ |
| var fillStyle = dojo.clone(dojox.gfx.defaultRadialGradient), |
| w = parseFloat(r.style.width), h = parseFloat(r.style.height); |
| fillStyle.cx = isNaN(w) ? 0 : fo.focusposition.x * w; |
| fillStyle.cy = isNaN(h) ? 0 : fo.focusposition.y * h; |
| fillStyle.r = isNaN(w) ? 1 : w / 2; |
| fillStyle.colors = []; |
| var stops = fo.colors.value.split(";"); |
| for(var i = stops.length - 1; i >= 0; --i){ |
| var t = stops[i].match(/\S+/g); |
| if(!t || t.length != 2){ continue; } |
| fillStyle.colors.push({offset: dojox.gfx.vml._parseFloat(t[0]), color: new dojo.Color(t[1])}); |
| } |
| }else if(fo.on && fo.type == "tile"){ |
| var fillStyle = dojo.clone(dojox.gfx.defaultPattern); |
| fillStyle.width = dojox.gfx.pt2px(fo.size.x); // from pt |
| fillStyle.height = dojox.gfx.pt2px(fo.size.y); // from pt |
| fillStyle.x = fo.origin.x * fillStyle.width; |
| fillStyle.y = fo.origin.y * fillStyle.height; |
| fillStyle.src = fo.src; |
| }else if(fo.on && r.fillcolor){ |
| // a color object ! |
| fillStyle = new dojo.Color(r.fillcolor+""); |
| fillStyle.a = fo.opacity; |
| } |
| object.fillStyle = fillStyle; |
| }; |
| |
| var attachStroke = function(object) { |
| // summary: deduces a stroke style from a node. |
| // object: dojox.gfx.Shape: an VML shape |
| var r = object.rawNode; |
| if(!r.stroked){ |
| object.strokeStyle = null; |
| return; |
| } |
| var strokeStyle = object.strokeStyle = dojo.clone(dojox.gfx.defaultStroke), |
| rs = r.stroke; |
| strokeStyle.color = new dojo.Color(r.strokecolor.value); |
| strokeStyle.width = dojox.gfx.normalizedLength(r.strokeweight+""); |
| strokeStyle.color.a = rs.opacity; |
| strokeStyle.cap = this._translate(this._capMapReversed, rs.endcap); |
| strokeStyle.join = rs.joinstyle == "miter" ? rs.miterlimit : rs.joinstyle; |
| strokeStyle.style = rs.dashstyle; |
| }; |
| |
| var attachTransform = function(object) { |
| // summary: deduces a transformation matrix from a node. |
| // object: dojox.gfx.Shape: an VML shape |
| var s = rawNode.skew, sm = s.matrix, so = s.offset; |
| object.matrix = dojox.gfx.matrix.normalize({ |
| xx: sm.xtox, |
| xy: sm.ytox, |
| yx: sm.xtoy, |
| yy: sm.ytoy, |
| dx: dojox.gfx.pt2px(so.x), |
| dy: dojox.gfx.pt2px(so.y) |
| }); |
| }; |
| |
| var attachGroup = function(object){ |
| // summary: reconstructs all group shape parameters from a node (VML). |
| // object: dojox.gfx.Shape: an VML shape |
| // attach the background |
| object.bgNode = object.rawNode.firstChild; // TODO: check it first |
| }; |
| |
| var attachRect = function(object){ |
| // summary: builds a rectangle shape from a node. |
| // object: dojox.gfx.Shape: an VML shape |
| // a workaround for the VML's arcsize bug: cannot read arcsize of an instantiated node |
| var r = object.rawNode, arcsize = r.outerHTML.match(/arcsize = \"(\d*\.?\d+[%f]?)\"/)[1], |
| style = r.style, width = parseFloat(style.width), height = parseFloat(style.height); |
| arcsize = (arcsize.indexOf("%") >= 0) ? parseFloat(arcsize) / 100 : dojox.gfx.vml._parseFloat(arcsize); |
| // make an object |
| object.shape = dojox.gfx.makeParameters(dojox.gfx.defaultRect, { |
| x: parseInt(style.left), |
| y: parseInt(style.top), |
| width: width, |
| height: height, |
| r: Math.min(width, height) * arcsize |
| }); |
| }; |
| |
| var attachEllipse = function(object){ |
| // summary: builds an ellipse shape from a node. |
| // object: dojox.gfx.Shape: an VML shape |
| var style = object.rawNode.style, |
| rx = parseInt(style.width ) / 2, |
| ry = parseInt(style.height) / 2; |
| object.shape = dojox.gfx.makeParameters(dojox.gfx.defaultEllipse, { |
| cx: parseInt(style.left) + rx, |
| cy: parseInt(style.top ) + ry, |
| rx: rx, |
| ry: ry |
| }); |
| }; |
| |
| var attachCircle = function(object){ |
| // summary: builds a circle shape from a node. |
| // object: dojox.gfx.Shape: an VML shape |
| var style = object.rawNode.style, r = parseInt(style.width) / 2; |
| object.shape = dojox.gfx.makeParameters(dojox.gfx.defaultCircle, { |
| cx: parseInt(style.left) + r, |
| cy: parseInt(style.top) + r, |
| r: r |
| }); |
| }; |
| |
| var attachLine = function(object){ |
| // summary: builds a line shape from a node. |
| // object: dojox.gfx.Shape: an VML shape |
| var shape = object.shape = dojo.clone(dojox.gfx.defaultLine), |
| p = object.rawNode.path.v.match(dojox.gfx.pathVmlRegExp); |
| do{ |
| if(p.length < 7 || p[0] != "m" || p[3] != "l" || p[6] != "e"){ break; } |
| shape.x1 = parseInt(p[1]); |
| shape.y1 = parseInt(p[2]); |
| shape.x2 = parseInt(p[4]); |
| shape.y2 = parseInt(p[5]); |
| }while(false); |
| }; |
| |
| var attachPolyline = function(object){ |
| // summary: builds a polyline/polygon shape from a node. |
| // object: dojox.gfx.Shape: an VML shape |
| var shape = object.shape = dojo.clone(dojox.gfx.defaultPolyline), |
| p = object.rawNode.path.v.match(dojox.gfx.pathVmlRegExp); |
| do{ |
| if(p.length < 3 || p[0] != "m"){ break; } |
| var x = parseInt(p[0]), y = parseInt(p[1]); |
| if(isNaN(x) || isNaN(y)){ break; } |
| shape.points.push({x: x, y: y}); |
| if(p.length < 6 || p[3] != "l"){ break; } |
| for(var i = 4; i < p.length; i += 2){ |
| x = parseInt(p[i]); |
| y = parseInt(p[i + 1]); |
| if(isNaN(x) || isNaN(y)){ break; } |
| shape.points.push({x: x, y: y}); |
| } |
| }while(false); |
| }; |
| |
| var attachImage = function(object){ |
| // summary: builds an image shape from a node. |
| // object: dojox.gfx.Shape: an VML shape |
| object.shape = dojo.clone(dojox.gfx.defaultImage); |
| object.shape.src = object.rawNode.firstChild.src; |
| }; |
| |
| var attachImageTransform = function(object) { |
| // summary: deduces a transformation matrix from a node. |
| // object: dojox.gfx.Shape: an VML shape |
| var m = object.rawNode.filters["DXImageTransform.Microsoft.Matrix"]; |
| object.matrix = dojox.gfx.matrix.normalize({ |
| xx: m.M11, |
| xy: m.M12, |
| yx: m.M21, |
| yy: m.M22, |
| dx: m.Dx, |
| dy: m.Dy |
| }); |
| }; |
| |
| var attachText = function(object){ |
| // summary: builds a text shape from a node. |
| // object: dojox.gfx.Shape: an VML shape |
| var shape = object.shape = dojo.clone(dojox.gfx.defaultText), |
| r = object.rawNode, p = r.path.v.match(dojox.gfx.pathVmlRegExp); |
| do{ |
| if(!p || p.length != 7){ break; } |
| var c = r.childNodes, i = 0; |
| for(; i < c.length && c[i].tagName != "textpath"; ++i); |
| if(i >= c.length){ break; } |
| var s = c[i].style; |
| shape.text = c[i].string; |
| switch(s["v-text-align"]){ |
| case "left": |
| shape.x = parseInt(p[1]); |
| shape.align = "start"; |
| break; |
| case "center": |
| shape.x = (parseInt(p[1]) + parseInt(p[4])) / 2; |
| shape.align = "middle"; |
| break; |
| case "right": |
| shape.x = parseInt(p[4]); |
| shape.align = "end"; |
| break; |
| } |
| shape.y = parseInt(p[2]); |
| shape.decoration = s["text-decoration"]; |
| shape.rotated = s["v-rotate-letters"].toLowerCase() in dojox.gfx.vml._bool; |
| shape.kerning = s["v-text-kern"].toLowerCase() in dojox.gfx.vml._bool; |
| return; |
| }while(false); |
| object.shape = null; |
| }; |
| |
| var attachFont = function(object){ |
| // summary: deduces a font style from a node. |
| // object: dojox.gfx.Shape: an VML shape |
| var fontStyle = object.fontStyle = dojo.clone(dojox.gfx.defaultFont), |
| c = object.rawNode.childNodes, i = 0; |
| for(; i < c.length && c[i].tagName == "textpath"; ++i); |
| if(i >= c.length){ |
| object.fontStyle = null; |
| return; |
| } |
| var s = c[i].style; |
| fontStyle.style = s.fontstyle; |
| fontStyle.variant = s.fontvariant; |
| fontStyle.weight = s.fontweight; |
| fontStyle.size = s.fontsize; |
| fontStyle.family = s.fontfamily; |
| }; |
| |
| var attachTextTransform = function(object) { |
| // summary: deduces a transformation matrix from a node. |
| // object: dojox.gfx.Shape: an VML shape |
| attachTransform(object); |
| var matrix = object.matrix, fs = object.fontStyle; |
| // see comments in _getRealMatrix() |
| if(matrix && fs){ |
| object.matrix = dojox.gfx.matrix.multiply(matrix, {dy: dojox.gfx.normalizedLength(fs.size) * 0.35}); |
| } |
| }; |
| |
| var attachPath = function(object){ |
| // summary: builds a path shape from a Node. |
| // object: dojox.gfx.Shape: an VML shape |
| var shape = object.shape = dojo.clone(dojox.gfx.defaultPath), |
| p = rawNode.path.v.match(dojox.gfx.pathVmlRegExp), |
| t = [], skip = false, map = dojox.gfx.Path._pathVmlToSvgMap; |
| for(var i = 0; i < p.length; ++p){ |
| var s = p[i]; |
| if(s in map) { |
| skip = false; |
| t.push(map[s]); |
| } else if(!skip){ |
| var n = parseInt(s); |
| if(isNaN(n)){ |
| skip = true; |
| }else{ |
| t.push(n); |
| } |
| } |
| } |
| var l = t.length; |
| if(l >= 4 && t[l - 1] == "" && t[l - 2] == 0 && t[l - 3] == 0 && t[l - 4] == "l"){ |
| t.splice(l - 4, 4); |
| } |
| if(l){ |
| shape.path = t.join(" "); |
| } |
| }; |
| })(); |