vml_attach.js 11 KB

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