raphael.vml.js 36 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999
  1. define(["./raphael.core"], function(R) {
  2. if (R && !R.vml) {
  3. return;
  4. }
  5. var has = "hasOwnProperty",
  6. Str = String,
  7. toFloat = parseFloat,
  8. math = Math,
  9. round = math.round,
  10. mmax = math.max,
  11. mmin = math.min,
  12. abs = math.abs,
  13. fillString = "fill",
  14. separator = /[, ]+/,
  15. eve = R.eve,
  16. ms = " progid:DXImageTransform.Microsoft",
  17. S = " ",
  18. E = "",
  19. map = {M: "m", L: "l", C: "c", Z: "x", m: "t", l: "r", c: "v", z: "x"},
  20. bites = /([clmz]),?([^clmz]*)/gi,
  21. blurregexp = / progid:\S+Blur\([^\)]+\)/g,
  22. val = /-?[^,\s-]+/g,
  23. cssDot = "position:absolute;left:0;top:0;width:1px;height:1px;behavior:url(#default#VML)",
  24. zoom = 21600,
  25. pathTypes = {path: 1, rect: 1, image: 1},
  26. ovalTypes = {circle: 1, ellipse: 1},
  27. path2vml = function (path) {
  28. var total = /[ahqstv]/ig,
  29. command = R._pathToAbsolute;
  30. Str(path).match(total) && (command = R._path2curve);
  31. total = /[clmz]/g;
  32. if (command == R._pathToAbsolute && !Str(path).match(total)) {
  33. var res = Str(path).replace(bites, function (all, command, args) {
  34. var vals = [],
  35. isMove = command.toLowerCase() == "m",
  36. res = map[command];
  37. args.replace(val, function (value) {
  38. if (isMove && vals.length == 2) {
  39. res += vals + map[command == "m" ? "l" : "L"];
  40. vals = [];
  41. }
  42. vals.push(round(value * zoom));
  43. });
  44. return res + vals;
  45. });
  46. return res;
  47. }
  48. var pa = command(path), p, r;
  49. res = [];
  50. for (var i = 0, ii = pa.length; i < ii; i++) {
  51. p = pa[i];
  52. r = pa[i][0].toLowerCase();
  53. r == "z" && (r = "x");
  54. for (var j = 1, jj = p.length; j < jj; j++) {
  55. r += round(p[j] * zoom) + (j != jj - 1 ? "," : E);
  56. }
  57. res.push(r);
  58. }
  59. return res.join(S);
  60. },
  61. compensation = function (deg, dx, dy) {
  62. var m = R.matrix();
  63. m.rotate(-deg, .5, .5);
  64. return {
  65. dx: m.x(dx, dy),
  66. dy: m.y(dx, dy)
  67. };
  68. },
  69. setCoords = function (p, sx, sy, dx, dy, deg) {
  70. var _ = p._,
  71. m = p.matrix,
  72. fillpos = _.fillpos,
  73. o = p.node,
  74. s = o.style,
  75. y = 1,
  76. flip = "",
  77. dxdy,
  78. kx = zoom / sx,
  79. ky = zoom / sy;
  80. s.visibility = "hidden";
  81. if (!sx || !sy) {
  82. return;
  83. }
  84. o.coordsize = abs(kx) + S + abs(ky);
  85. s.rotation = deg * (sx * sy < 0 ? -1 : 1);
  86. if (deg) {
  87. var c = compensation(deg, dx, dy);
  88. dx = c.dx;
  89. dy = c.dy;
  90. }
  91. sx < 0 && (flip += "x");
  92. sy < 0 && (flip += " y") && (y = -1);
  93. s.flip = flip;
  94. o.coordorigin = (dx * -kx) + S + (dy * -ky);
  95. if (fillpos || _.fillsize) {
  96. var fill = o.getElementsByTagName(fillString);
  97. fill = fill && fill[0];
  98. o.removeChild(fill);
  99. if (fillpos) {
  100. c = compensation(deg, m.x(fillpos[0], fillpos[1]), m.y(fillpos[0], fillpos[1]));
  101. fill.position = c.dx * y + S + c.dy * y;
  102. }
  103. if (_.fillsize) {
  104. fill.size = _.fillsize[0] * abs(sx) + S + _.fillsize[1] * abs(sy);
  105. }
  106. o.appendChild(fill);
  107. }
  108. s.visibility = "visible";
  109. };
  110. R.toString = function () {
  111. return "Your browser doesn\u2019t support SVG. Falling down to VML.\nYou are running Rapha\xebl " + this.version;
  112. };
  113. var addArrow = function (o, value, isEnd) {
  114. var values = Str(value).toLowerCase().split("-"),
  115. se = isEnd ? "end" : "start",
  116. i = values.length,
  117. type = "classic",
  118. w = "medium",
  119. h = "medium";
  120. while (i--) {
  121. switch (values[i]) {
  122. case "block":
  123. case "classic":
  124. case "oval":
  125. case "diamond":
  126. case "open":
  127. case "none":
  128. type = values[i];
  129. break;
  130. case "wide":
  131. case "narrow": h = values[i]; break;
  132. case "long":
  133. case "short": w = values[i]; break;
  134. }
  135. }
  136. var stroke = o.node.getElementsByTagName("stroke")[0];
  137. stroke[se + "arrow"] = type;
  138. stroke[se + "arrowlength"] = w;
  139. stroke[se + "arrowwidth"] = h;
  140. },
  141. setFillAndStroke = function (o, params) {
  142. // o.paper.canvas.style.display = "none";
  143. o.attrs = o.attrs || {};
  144. var node = o.node,
  145. a = o.attrs,
  146. s = node.style,
  147. xy,
  148. newpath = pathTypes[o.type] && (params.x != a.x || params.y != a.y || params.width != a.width || params.height != a.height || params.cx != a.cx || params.cy != a.cy || params.rx != a.rx || params.ry != a.ry || params.r != a.r),
  149. isOval = ovalTypes[o.type] && (a.cx != params.cx || a.cy != params.cy || a.r != params.r || a.rx != params.rx || a.ry != params.ry),
  150. res = o;
  151. for (var par in params) if (params[has](par)) {
  152. a[par] = params[par];
  153. }
  154. if (newpath) {
  155. a.path = R._getPath[o.type](o);
  156. o._.dirty = 1;
  157. }
  158. params.href && (node.href = params.href);
  159. params.title && (node.title = params.title);
  160. params.target && (node.target = params.target);
  161. params.cursor && (s.cursor = params.cursor);
  162. "blur" in params && o.blur(params.blur);
  163. if (params.path && o.type == "path" || newpath) {
  164. node.path = path2vml(~Str(a.path).toLowerCase().indexOf("r") ? R._pathToAbsolute(a.path) : a.path);
  165. o._.dirty = 1;
  166. if (o.type == "image") {
  167. o._.fillpos = [a.x, a.y];
  168. o._.fillsize = [a.width, a.height];
  169. setCoords(o, 1, 1, 0, 0, 0);
  170. }
  171. }
  172. "transform" in params && o.transform(params.transform);
  173. if (isOval) {
  174. var cx = +a.cx,
  175. cy = +a.cy,
  176. rx = +a.rx || +a.r || 0,
  177. ry = +a.ry || +a.r || 0;
  178. node.path = R.format("ar{0},{1},{2},{3},{4},{1},{4},{1}x", round((cx - rx) * zoom), round((cy - ry) * zoom), round((cx + rx) * zoom), round((cy + ry) * zoom), round(cx * zoom));
  179. o._.dirty = 1;
  180. }
  181. if ("clip-rect" in params) {
  182. var rect = Str(params["clip-rect"]).split(separator);
  183. if (rect.length == 4) {
  184. rect[2] = +rect[2] + (+rect[0]);
  185. rect[3] = +rect[3] + (+rect[1]);
  186. var div = node.clipRect || R._g.doc.createElement("div"),
  187. dstyle = div.style;
  188. dstyle.clip = R.format("rect({1}px {2}px {3}px {0}px)", rect);
  189. if (!node.clipRect) {
  190. dstyle.position = "absolute";
  191. dstyle.top = 0;
  192. dstyle.left = 0;
  193. dstyle.width = o.paper.width + "px";
  194. dstyle.height = o.paper.height + "px";
  195. node.parentNode.insertBefore(div, node);
  196. div.appendChild(node);
  197. node.clipRect = div;
  198. }
  199. }
  200. if (!params["clip-rect"]) {
  201. node.clipRect && (node.clipRect.style.clip = "auto");
  202. }
  203. }
  204. if (o.textpath) {
  205. var textpathStyle = o.textpath.style;
  206. params.font && (textpathStyle.font = params.font);
  207. params["font-family"] && (textpathStyle.fontFamily = '"' + params["font-family"].split(",")[0].replace(/^['"]+|['"]+$/g, E) + '"');
  208. params["font-size"] && (textpathStyle.fontSize = params["font-size"]);
  209. params["font-weight"] && (textpathStyle.fontWeight = params["font-weight"]);
  210. params["font-style"] && (textpathStyle.fontStyle = params["font-style"]);
  211. }
  212. if ("arrow-start" in params) {
  213. addArrow(res, params["arrow-start"]);
  214. }
  215. if ("arrow-end" in params) {
  216. addArrow(res, params["arrow-end"], 1);
  217. }
  218. if (params.opacity != null ||
  219. params.fill != null ||
  220. params.src != null ||
  221. params.stroke != null ||
  222. params["stroke-width"] != null ||
  223. params["stroke-opacity"] != null ||
  224. params["fill-opacity"] != null ||
  225. params["stroke-dasharray"] != null ||
  226. params["stroke-miterlimit"] != null ||
  227. params["stroke-linejoin"] != null ||
  228. params["stroke-linecap"] != null) {
  229. var fill = node.getElementsByTagName(fillString),
  230. newfill = false;
  231. fill = fill && fill[0];
  232. !fill && (newfill = fill = createNode(fillString));
  233. if (o.type == "image" && params.src) {
  234. fill.src = params.src;
  235. }
  236. params.fill && (fill.on = true);
  237. if (fill.on == null || params.fill == "none" || params.fill === null) {
  238. fill.on = false;
  239. }
  240. if (fill.on && params.fill) {
  241. var isURL = Str(params.fill).match(R._ISURL);
  242. if (isURL) {
  243. fill.parentNode == node && node.removeChild(fill);
  244. fill.rotate = true;
  245. fill.src = isURL[1];
  246. fill.type = "tile";
  247. var bbox = o.getBBox(1);
  248. fill.position = bbox.x + S + bbox.y;
  249. o._.fillpos = [bbox.x, bbox.y];
  250. R._preload(isURL[1], function () {
  251. o._.fillsize = [this.offsetWidth, this.offsetHeight];
  252. });
  253. } else {
  254. fill.color = R.getRGB(params.fill).hex;
  255. fill.src = E;
  256. fill.type = "solid";
  257. if (R.getRGB(params.fill).error && (res.type in {circle: 1, ellipse: 1} || Str(params.fill).charAt() != "r") && addGradientFill(res, params.fill, fill)) {
  258. a.fill = "none";
  259. a.gradient = params.fill;
  260. fill.rotate = false;
  261. }
  262. }
  263. }
  264. if ("fill-opacity" in params || "opacity" in params) {
  265. var opacity = ((+a["fill-opacity"] + 1 || 2) - 1) * ((+a.opacity + 1 || 2) - 1) * ((+R.getRGB(params.fill).o + 1 || 2) - 1);
  266. opacity = mmin(mmax(opacity, 0), 1);
  267. fill.opacity = opacity;
  268. if (fill.src) {
  269. fill.color = "none";
  270. }
  271. }
  272. node.appendChild(fill);
  273. var stroke = (node.getElementsByTagName("stroke") && node.getElementsByTagName("stroke")[0]),
  274. newstroke = false;
  275. !stroke && (newstroke = stroke = createNode("stroke"));
  276. if ((params.stroke && params.stroke != "none") ||
  277. params["stroke-width"] ||
  278. params["stroke-opacity"] != null ||
  279. params["stroke-dasharray"] ||
  280. params["stroke-miterlimit"] ||
  281. params["stroke-linejoin"] ||
  282. params["stroke-linecap"]) {
  283. stroke.on = true;
  284. }
  285. (params.stroke == "none" || params.stroke === null || stroke.on == null || params.stroke == 0 || params["stroke-width"] == 0) && (stroke.on = false);
  286. var strokeColor = R.getRGB(params.stroke);
  287. stroke.on && params.stroke && (stroke.color = strokeColor.hex);
  288. opacity = ((+a["stroke-opacity"] + 1 || 2) - 1) * ((+a.opacity + 1 || 2) - 1) * ((+strokeColor.o + 1 || 2) - 1);
  289. var width = (toFloat(params["stroke-width"]) || 1) * .75;
  290. opacity = mmin(mmax(opacity, 0), 1);
  291. params["stroke-width"] == null && (width = a["stroke-width"]);
  292. params["stroke-width"] && (stroke.weight = width);
  293. width && width < 1 && (opacity *= width) && (stroke.weight = 1);
  294. stroke.opacity = opacity;
  295. params["stroke-linejoin"] && (stroke.joinstyle = params["stroke-linejoin"] || "miter");
  296. stroke.miterlimit = params["stroke-miterlimit"] || 8;
  297. params["stroke-linecap"] && (stroke.endcap = params["stroke-linecap"] == "butt" ? "flat" : params["stroke-linecap"] == "square" ? "square" : "round");
  298. if ("stroke-dasharray" in params) {
  299. var dasharray = {
  300. "-": "shortdash",
  301. ".": "shortdot",
  302. "-.": "shortdashdot",
  303. "-..": "shortdashdotdot",
  304. ". ": "dot",
  305. "- ": "dash",
  306. "--": "longdash",
  307. "- .": "dashdot",
  308. "--.": "longdashdot",
  309. "--..": "longdashdotdot"
  310. };
  311. stroke.dashstyle = dasharray[has](params["stroke-dasharray"]) ? dasharray[params["stroke-dasharray"]] : E;
  312. }
  313. newstroke && node.appendChild(stroke);
  314. }
  315. if (res.type == "text") {
  316. res.paper.canvas.style.display = E;
  317. var span = res.paper.span,
  318. m = 100,
  319. fontSize = a.font && a.font.match(/\d+(?:\.\d*)?(?=px)/);
  320. s = span.style;
  321. a.font && (s.font = a.font);
  322. a["font-family"] && (s.fontFamily = a["font-family"]);
  323. a["font-weight"] && (s.fontWeight = a["font-weight"]);
  324. a["font-style"] && (s.fontStyle = a["font-style"]);
  325. fontSize = toFloat(a["font-size"] || fontSize && fontSize[0]) || 10;
  326. s.fontSize = fontSize * m + "px";
  327. res.textpath.string && (span.innerHTML = Str(res.textpath.string).replace(/</g, "&#60;").replace(/&/g, "&#38;").replace(/\n/g, "<br>"));
  328. var brect = span.getBoundingClientRect();
  329. res.W = a.w = (brect.right - brect.left) / m;
  330. res.H = a.h = (brect.bottom - brect.top) / m;
  331. // res.paper.canvas.style.display = "none";
  332. res.X = a.x;
  333. res.Y = a.y + res.H / 2;
  334. ("x" in params || "y" in params) && (res.path.v = R.format("m{0},{1}l{2},{1}", round(a.x * zoom), round(a.y * zoom), round(a.x * zoom) + 1));
  335. var dirtyattrs = ["x", "y", "text", "font", "font-family", "font-weight", "font-style", "font-size"];
  336. for (var d = 0, dd = dirtyattrs.length; d < dd; d++) if (dirtyattrs[d] in params) {
  337. res._.dirty = 1;
  338. break;
  339. }
  340. // text-anchor emulation
  341. switch (a["text-anchor"]) {
  342. case "start":
  343. res.textpath.style["v-text-align"] = "left";
  344. res.bbx = res.W / 2;
  345. break;
  346. case "end":
  347. res.textpath.style["v-text-align"] = "right";
  348. res.bbx = -res.W / 2;
  349. break;
  350. default:
  351. res.textpath.style["v-text-align"] = "center";
  352. res.bbx = 0;
  353. break;
  354. }
  355. res.textpath.style["v-text-kern"] = true;
  356. }
  357. // res.paper.canvas.style.display = E;
  358. },
  359. addGradientFill = function (o, gradient, fill) {
  360. o.attrs = o.attrs || {};
  361. var attrs = o.attrs,
  362. pow = Math.pow,
  363. opacity,
  364. oindex,
  365. type = "linear",
  366. fxfy = ".5 .5";
  367. o.attrs.gradient = gradient;
  368. gradient = Str(gradient).replace(R._radial_gradient, function (all, fx, fy) {
  369. type = "radial";
  370. if (fx && fy) {
  371. fx = toFloat(fx);
  372. fy = toFloat(fy);
  373. pow(fx - .5, 2) + pow(fy - .5, 2) > .25 && (fy = math.sqrt(.25 - pow(fx - .5, 2)) * ((fy > .5) * 2 - 1) + .5);
  374. fxfy = fx + S + fy;
  375. }
  376. return E;
  377. });
  378. gradient = gradient.split(/\s*\-\s*/);
  379. if (type == "linear") {
  380. var angle = gradient.shift();
  381. angle = -toFloat(angle);
  382. if (isNaN(angle)) {
  383. return null;
  384. }
  385. }
  386. var dots = R._parseDots(gradient);
  387. if (!dots) {
  388. return null;
  389. }
  390. o = o.shape || o.node;
  391. if (dots.length) {
  392. o.removeChild(fill);
  393. fill.on = true;
  394. fill.method = "none";
  395. fill.color = dots[0].color;
  396. fill.color2 = dots[dots.length - 1].color;
  397. var clrs = [];
  398. for (var i = 0, ii = dots.length; i < ii; i++) {
  399. dots[i].offset && clrs.push(dots[i].offset + S + dots[i].color);
  400. }
  401. fill.colors = clrs.length ? clrs.join() : "0% " + fill.color;
  402. if (type == "radial") {
  403. fill.type = "gradientTitle";
  404. fill.focus = "100%";
  405. fill.focussize = "0 0";
  406. fill.focusposition = fxfy;
  407. fill.angle = 0;
  408. } else {
  409. // fill.rotate= true;
  410. fill.type = "gradient";
  411. fill.angle = (270 - angle) % 360;
  412. }
  413. o.appendChild(fill);
  414. }
  415. return 1;
  416. },
  417. Element = function (node, vml) {
  418. this[0] = this.node = node;
  419. node.raphael = true;
  420. this.id = R._oid++;
  421. node.raphaelid = this.id;
  422. this.X = 0;
  423. this.Y = 0;
  424. this.attrs = {};
  425. this.paper = vml;
  426. this.matrix = R.matrix();
  427. this._ = {
  428. transform: [],
  429. sx: 1,
  430. sy: 1,
  431. dx: 0,
  432. dy: 0,
  433. deg: 0,
  434. dirty: 1,
  435. dirtyT: 1
  436. };
  437. !vml.bottom && (vml.bottom = this);
  438. this.prev = vml.top;
  439. vml.top && (vml.top.next = this);
  440. vml.top = this;
  441. this.next = null;
  442. };
  443. var elproto = R.el;
  444. Element.prototype = elproto;
  445. elproto.constructor = Element;
  446. elproto.transform = function (tstr) {
  447. if (tstr == null) {
  448. return this._.transform;
  449. }
  450. var vbs = this.paper._viewBoxShift,
  451. vbt = vbs ? "s" + [vbs.scale, vbs.scale] + "-1-1t" + [vbs.dx, vbs.dy] : E,
  452. oldt;
  453. if (vbs) {
  454. oldt = tstr = Str(tstr).replace(/\.{3}|\u2026/g, this._.transform || E);
  455. }
  456. R._extractTransform(this, vbt + tstr);
  457. var matrix = this.matrix.clone(),
  458. skew = this.skew,
  459. o = this.node,
  460. split,
  461. isGrad = ~Str(this.attrs.fill).indexOf("-"),
  462. isPatt = !Str(this.attrs.fill).indexOf("url(");
  463. matrix.translate(1, 1);
  464. if (isPatt || isGrad || this.type == "image") {
  465. skew.matrix = "1 0 0 1";
  466. skew.offset = "0 0";
  467. split = matrix.split();
  468. if ((isGrad && split.noRotation) || !split.isSimple) {
  469. o.style.filter = matrix.toFilter();
  470. var bb = this.getBBox(),
  471. bbt = this.getBBox(1),
  472. dx = bb.x - bbt.x,
  473. dy = bb.y - bbt.y;
  474. o.coordorigin = (dx * -zoom) + S + (dy * -zoom);
  475. setCoords(this, 1, 1, dx, dy, 0);
  476. } else {
  477. o.style.filter = E;
  478. setCoords(this, split.scalex, split.scaley, split.dx, split.dy, split.rotate);
  479. }
  480. } else {
  481. o.style.filter = E;
  482. skew.matrix = Str(matrix);
  483. skew.offset = matrix.offset();
  484. }
  485. if (oldt !== null) { // empty string value is true as well
  486. this._.transform = oldt;
  487. R._extractTransform(this, oldt);
  488. }
  489. return this;
  490. };
  491. elproto.rotate = function (deg, cx, cy) {
  492. if (this.removed) {
  493. return this;
  494. }
  495. if (deg == null) {
  496. return;
  497. }
  498. deg = Str(deg).split(separator);
  499. if (deg.length - 1) {
  500. cx = toFloat(deg[1]);
  501. cy = toFloat(deg[2]);
  502. }
  503. deg = toFloat(deg[0]);
  504. (cy == null) && (cx = cy);
  505. if (cx == null || cy == null) {
  506. var bbox = this.getBBox(1);
  507. cx = bbox.x + bbox.width / 2;
  508. cy = bbox.y + bbox.height / 2;
  509. }
  510. this._.dirtyT = 1;
  511. this.transform(this._.transform.concat([["r", deg, cx, cy]]));
  512. return this;
  513. };
  514. elproto.translate = function (dx, dy) {
  515. if (this.removed) {
  516. return this;
  517. }
  518. dx = Str(dx).split(separator);
  519. if (dx.length - 1) {
  520. dy = toFloat(dx[1]);
  521. }
  522. dx = toFloat(dx[0]) || 0;
  523. dy = +dy || 0;
  524. if (this._.bbox) {
  525. this._.bbox.x += dx;
  526. this._.bbox.y += dy;
  527. }
  528. this.transform(this._.transform.concat([["t", dx, dy]]));
  529. return this;
  530. };
  531. elproto.scale = function (sx, sy, cx, cy) {
  532. if (this.removed) {
  533. return this;
  534. }
  535. sx = Str(sx).split(separator);
  536. if (sx.length - 1) {
  537. sy = toFloat(sx[1]);
  538. cx = toFloat(sx[2]);
  539. cy = toFloat(sx[3]);
  540. isNaN(cx) && (cx = null);
  541. isNaN(cy) && (cy = null);
  542. }
  543. sx = toFloat(sx[0]);
  544. (sy == null) && (sy = sx);
  545. (cy == null) && (cx = cy);
  546. if (cx == null || cy == null) {
  547. var bbox = this.getBBox(1);
  548. }
  549. cx = cx == null ? bbox.x + bbox.width / 2 : cx;
  550. cy = cy == null ? bbox.y + bbox.height / 2 : cy;
  551. this.transform(this._.transform.concat([["s", sx, sy, cx, cy]]));
  552. this._.dirtyT = 1;
  553. return this;
  554. };
  555. elproto.hide = function () {
  556. !this.removed && (this.node.style.display = "none");
  557. return this;
  558. };
  559. elproto.show = function () {
  560. !this.removed && (this.node.style.display = E);
  561. return this;
  562. };
  563. // Needed to fix the vml setViewBox issues
  564. elproto.auxGetBBox = R.el.getBBox;
  565. elproto.getBBox = function(){
  566. var b = this.auxGetBBox();
  567. if (this.paper && this.paper._viewBoxShift)
  568. {
  569. var c = {};
  570. var z = 1/this.paper._viewBoxShift.scale;
  571. c.x = b.x - this.paper._viewBoxShift.dx;
  572. c.x *= z;
  573. c.y = b.y - this.paper._viewBoxShift.dy;
  574. c.y *= z;
  575. c.width = b.width * z;
  576. c.height = b.height * z;
  577. c.x2 = c.x + c.width;
  578. c.y2 = c.y + c.height;
  579. return c;
  580. }
  581. return b;
  582. };
  583. elproto._getBBox = function () {
  584. if (this.removed) {
  585. return {};
  586. }
  587. return {
  588. x: this.X + (this.bbx || 0) - this.W / 2,
  589. y: this.Y - this.H,
  590. width: this.W,
  591. height: this.H
  592. };
  593. };
  594. elproto.remove = function () {
  595. if (this.removed || !this.node.parentNode) {
  596. return;
  597. }
  598. this.paper.__set__ && this.paper.__set__.exclude(this);
  599. R.eve.unbind("raphael.*.*." + this.id);
  600. R._tear(this, this.paper);
  601. this.node.parentNode.removeChild(this.node);
  602. this.shape && this.shape.parentNode.removeChild(this.shape);
  603. for (var i in this) {
  604. this[i] = typeof this[i] == "function" ? R._removedFactory(i) : null;
  605. }
  606. this.removed = true;
  607. };
  608. elproto.attr = function (name, value) {
  609. if (this.removed) {
  610. return this;
  611. }
  612. if (name == null) {
  613. var res = {};
  614. for (var a in this.attrs) if (this.attrs[has](a)) {
  615. res[a] = this.attrs[a];
  616. }
  617. res.gradient && res.fill == "none" && (res.fill = res.gradient) && delete res.gradient;
  618. res.transform = this._.transform;
  619. return res;
  620. }
  621. if (value == null && R.is(name, "string")) {
  622. if (name == fillString && this.attrs.fill == "none" && this.attrs.gradient) {
  623. return this.attrs.gradient;
  624. }
  625. var names = name.split(separator),
  626. out = {};
  627. for (var i = 0, ii = names.length; i < ii; i++) {
  628. name = names[i];
  629. if (name in this.attrs) {
  630. out[name] = this.attrs[name];
  631. } else if (R.is(this.paper.customAttributes[name], "function")) {
  632. out[name] = this.paper.customAttributes[name].def;
  633. } else {
  634. out[name] = R._availableAttrs[name];
  635. }
  636. }
  637. return ii - 1 ? out : out[names[0]];
  638. }
  639. if (this.attrs && value == null && R.is(name, "array")) {
  640. out = {};
  641. for (i = 0, ii = name.length; i < ii; i++) {
  642. out[name[i]] = this.attr(name[i]);
  643. }
  644. return out;
  645. }
  646. var params;
  647. if (value != null) {
  648. params = {};
  649. params[name] = value;
  650. }
  651. value == null && R.is(name, "object") && (params = name);
  652. for (var key in params) {
  653. eve("raphael.attr." + key + "." + this.id, this, params[key]);
  654. }
  655. if (params) {
  656. for (key in this.paper.customAttributes) if (this.paper.customAttributes[has](key) && params[has](key) && R.is(this.paper.customAttributes[key], "function")) {
  657. var par = this.paper.customAttributes[key].apply(this, [].concat(params[key]));
  658. this.attrs[key] = params[key];
  659. for (var subkey in par) if (par[has](subkey)) {
  660. params[subkey] = par[subkey];
  661. }
  662. }
  663. // this.paper.canvas.style.display = "none";
  664. if (params.text && this.type == "text") {
  665. this.textpath.string = params.text;
  666. }
  667. setFillAndStroke(this, params);
  668. // this.paper.canvas.style.display = E;
  669. }
  670. return this;
  671. };
  672. elproto.toFront = function () {
  673. !this.removed && this.node.parentNode.appendChild(this.node);
  674. this.paper && this.paper.top != this && R._tofront(this, this.paper);
  675. return this;
  676. };
  677. elproto.toBack = function () {
  678. if (this.removed) {
  679. return this;
  680. }
  681. if (this.node.parentNode.firstChild != this.node) {
  682. this.node.parentNode.insertBefore(this.node, this.node.parentNode.firstChild);
  683. R._toback(this, this.paper);
  684. }
  685. return this;
  686. };
  687. elproto.insertAfter = function (element) {
  688. if (this.removed) {
  689. return this;
  690. }
  691. if (element.constructor == R.st.constructor) {
  692. element = element[element.length - 1];
  693. }
  694. if (element.node.nextSibling) {
  695. element.node.parentNode.insertBefore(this.node, element.node.nextSibling);
  696. } else {
  697. element.node.parentNode.appendChild(this.node);
  698. }
  699. R._insertafter(this, element, this.paper);
  700. return this;
  701. };
  702. elproto.insertBefore = function (element) {
  703. if (this.removed) {
  704. return this;
  705. }
  706. if (element.constructor == R.st.constructor) {
  707. element = element[0];
  708. }
  709. element.node.parentNode.insertBefore(this.node, element.node);
  710. R._insertbefore(this, element, this.paper);
  711. return this;
  712. };
  713. elproto.blur = function (size) {
  714. var s = this.node.runtimeStyle,
  715. f = s.filter;
  716. f = f.replace(blurregexp, E);
  717. if (+size !== 0) {
  718. this.attrs.blur = size;
  719. s.filter = f + S + ms + ".Blur(pixelradius=" + (+size || 1.5) + ")";
  720. s.margin = R.format("-{0}px 0 0 -{0}px", round(+size || 1.5));
  721. } else {
  722. s.filter = f;
  723. s.margin = 0;
  724. delete this.attrs.blur;
  725. }
  726. return this;
  727. };
  728. R._engine.path = function (pathString, vml) {
  729. var el = createNode("shape");
  730. el.style.cssText = cssDot;
  731. el.coordsize = zoom + S + zoom;
  732. el.coordorigin = vml.coordorigin;
  733. var p = new Element(el, vml),
  734. attr = {fill: "none", stroke: "#000"};
  735. pathString && (attr.path = pathString);
  736. p.type = "path";
  737. p.path = [];
  738. p.Path = E;
  739. setFillAndStroke(p, attr);
  740. vml.canvas && vml.canvas.appendChild(el);
  741. var skew = createNode("skew");
  742. skew.on = true;
  743. el.appendChild(skew);
  744. p.skew = skew;
  745. p.transform(E);
  746. return p;
  747. };
  748. R._engine.rect = function (vml, x, y, w, h, r) {
  749. var path = R._rectPath(x, y, w, h, r),
  750. res = vml.path(path),
  751. a = res.attrs;
  752. res.X = a.x = x;
  753. res.Y = a.y = y;
  754. res.W = a.width = w;
  755. res.H = a.height = h;
  756. a.r = r;
  757. a.path = path;
  758. res.type = "rect";
  759. return res;
  760. };
  761. R._engine.ellipse = function (vml, x, y, rx, ry) {
  762. var res = vml.path(),
  763. a = res.attrs;
  764. res.X = x - rx;
  765. res.Y = y - ry;
  766. res.W = rx * 2;
  767. res.H = ry * 2;
  768. res.type = "ellipse";
  769. setFillAndStroke(res, {
  770. cx: x,
  771. cy: y,
  772. rx: rx,
  773. ry: ry
  774. });
  775. return res;
  776. };
  777. R._engine.circle = function (vml, x, y, r) {
  778. var res = vml.path(),
  779. a = res.attrs;
  780. res.X = x - r;
  781. res.Y = y - r;
  782. res.W = res.H = r * 2;
  783. res.type = "circle";
  784. setFillAndStroke(res, {
  785. cx: x,
  786. cy: y,
  787. r: r
  788. });
  789. return res;
  790. };
  791. R._engine.image = function (vml, src, x, y, w, h) {
  792. var path = R._rectPath(x, y, w, h),
  793. res = vml.path(path).attr({stroke: "none"}),
  794. a = res.attrs,
  795. node = res.node,
  796. fill = node.getElementsByTagName(fillString)[0];
  797. a.src = src;
  798. res.X = a.x = x;
  799. res.Y = a.y = y;
  800. res.W = a.width = w;
  801. res.H = a.height = h;
  802. a.path = path;
  803. res.type = "image";
  804. fill.parentNode == node && node.removeChild(fill);
  805. fill.rotate = true;
  806. fill.src = src;
  807. fill.type = "tile";
  808. res._.fillpos = [x, y];
  809. res._.fillsize = [w, h];
  810. node.appendChild(fill);
  811. setCoords(res, 1, 1, 0, 0, 0);
  812. return res;
  813. };
  814. R._engine.text = function (vml, x, y, text) {
  815. var el = createNode("shape"),
  816. path = createNode("path"),
  817. o = createNode("textpath");
  818. x = x || 0;
  819. y = y || 0;
  820. text = text || "";
  821. path.v = R.format("m{0},{1}l{2},{1}", round(x * zoom), round(y * zoom), round(x * zoom) + 1);
  822. path.textpathok = true;
  823. o.string = Str(text);
  824. o.on = true;
  825. el.style.cssText = cssDot;
  826. el.coordsize = zoom + S + zoom;
  827. el.coordorigin = "0 0";
  828. var p = new Element(el, vml),
  829. attr = {
  830. fill: "#000",
  831. stroke: "none",
  832. font: R._availableAttrs.font,
  833. text: text
  834. };
  835. p.shape = el;
  836. p.path = path;
  837. p.textpath = o;
  838. p.type = "text";
  839. p.attrs.text = Str(text);
  840. p.attrs.x = x;
  841. p.attrs.y = y;
  842. p.attrs.w = 1;
  843. p.attrs.h = 1;
  844. setFillAndStroke(p, attr);
  845. el.appendChild(o);
  846. el.appendChild(path);
  847. vml.canvas.appendChild(el);
  848. var skew = createNode("skew");
  849. skew.on = true;
  850. el.appendChild(skew);
  851. p.skew = skew;
  852. p.transform(E);
  853. return p;
  854. };
  855. R._engine.setSize = function (width, height) {
  856. var cs = this.canvas.style;
  857. this.width = width;
  858. this.height = height;
  859. width == +width && (width += "px");
  860. height == +height && (height += "px");
  861. cs.width = width;
  862. cs.height = height;
  863. cs.clip = "rect(0 " + width + " " + height + " 0)";
  864. if (this._viewBox) {
  865. R._engine.setViewBox.apply(this, this._viewBox);
  866. }
  867. return this;
  868. };
  869. R._engine.setViewBox = function (x, y, w, h, fit) {
  870. R.eve("raphael.setViewBox", this, this._viewBox, [x, y, w, h, fit]);
  871. var paperSize = this.getSize(),
  872. width = paperSize.width,
  873. height = paperSize.height,
  874. H, W;
  875. if (fit) {
  876. H = height / h;
  877. W = width / w;
  878. if (w * H < width) {
  879. x -= (width - w * H) / 2 / H;
  880. }
  881. if (h * W < height) {
  882. y -= (height - h * W) / 2 / W;
  883. }
  884. }
  885. this._viewBox = [x, y, w, h, !!fit];
  886. this._viewBoxShift = {
  887. dx: -x,
  888. dy: -y,
  889. scale: paperSize
  890. };
  891. this.forEach(function (el) {
  892. el.transform("...");
  893. });
  894. return this;
  895. };
  896. var createNode;
  897. R._engine.initWin = function (win) {
  898. var doc = win.document;
  899. if (doc.styleSheets.length < 31) {
  900. doc.createStyleSheet().addRule(".rvml", "behavior:url(#default#VML)");
  901. } else {
  902. // no more room, add to the existing one
  903. // http://msdn.microsoft.com/en-us/library/ms531194%28VS.85%29.aspx
  904. doc.styleSheets[0].addRule(".rvml", "behavior:url(#default#VML)");
  905. }
  906. try {
  907. !doc.namespaces.rvml && doc.namespaces.add("rvml", "urn:schemas-microsoft-com:vml");
  908. createNode = function (tagName) {
  909. return doc.createElement('<rvml:' + tagName + ' class="rvml">');
  910. };
  911. } catch (e) {
  912. createNode = function (tagName) {
  913. return doc.createElement('<' + tagName + ' xmlns="urn:schemas-microsoft.com:vml" class="rvml">');
  914. };
  915. }
  916. };
  917. R._engine.initWin(R._g.win);
  918. R._engine.create = function () {
  919. var con = R._getContainer.apply(0, arguments),
  920. container = con.container,
  921. height = con.height,
  922. s,
  923. width = con.width,
  924. x = con.x,
  925. y = con.y;
  926. if (!container) {
  927. throw new Error("VML container not found.");
  928. }
  929. var res = new R._Paper,
  930. c = res.canvas = R._g.doc.createElement("div"),
  931. cs = c.style;
  932. x = x || 0;
  933. y = y || 0;
  934. width = width || 512;
  935. height = height || 342;
  936. res.width = width;
  937. res.height = height;
  938. width == +width && (width += "px");
  939. height == +height && (height += "px");
  940. res.coordsize = zoom * 1e3 + S + zoom * 1e3;
  941. res.coordorigin = "0 0";
  942. res.span = R._g.doc.createElement("span");
  943. res.span.style.cssText = "position:absolute;left:-9999em;top:-9999em;padding:0;margin:0;line-height:1;";
  944. c.appendChild(res.span);
  945. cs.cssText = R.format("top:0;left:0;width:{0};height:{1};display:inline-block;position:relative;clip:rect(0 {0} {1} 0);overflow:hidden", width, height);
  946. if (container == 1) {
  947. R._g.doc.body.appendChild(c);
  948. cs.left = x + "px";
  949. cs.top = y + "px";
  950. cs.position = "absolute";
  951. } else {
  952. if (container.firstChild) {
  953. container.insertBefore(c, container.firstChild);
  954. } else {
  955. container.appendChild(c);
  956. }
  957. }
  958. res.renderfix = function () {};
  959. return res;
  960. };
  961. R.prototype.clear = function () {
  962. R.eve("raphael.clear", this);
  963. this.canvas.innerHTML = E;
  964. this.span = R._g.doc.createElement("span");
  965. this.span.style.cssText = "position:absolute;left:-9999em;top:-9999em;padding:0;margin:0;line-height:1;display:inline;";
  966. this.canvas.appendChild(this.span);
  967. this.bottom = this.top = null;
  968. };
  969. R.prototype.remove = function () {
  970. R.eve("raphael.remove", this);
  971. this.canvas.parentNode.removeChild(this.canvas);
  972. for (var i in this) {
  973. this[i] = typeof this[i] == "function" ? R._removedFactory(i) : null;
  974. }
  975. return true;
  976. };
  977. var setproto = R.st;
  978. for (var method in elproto) if (elproto[has](method) && !setproto[has](method)) {
  979. setproto[method] = (function (methodname) {
  980. return function () {
  981. var arg = arguments;
  982. return this.forEach(function (el) {
  983. el[methodname].apply(el, arg);
  984. });
  985. };
  986. })(method);
  987. }
  988. });