git.roojs.org Git - raphael/blob - raphael.vml.js

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