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

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