extjs-rails 4.1.0.alpha5 → 4.1.0.alpha6

data/app/assets/javascripts/src/draw/engine/SvgExporter.js

@@ -1,280 +0,0 @@
-/**
- * @private
- */
-Ext.define('Ext.draw.engine.SvgExporter', {
-    singleton: true,
-   
-    statics: (function(){ 
-        var surface, len, width,
-        height,
-        init = function(s){
-            surface = s;
-            len = surface.length;
-            width = surface.width;
-            height = surface.height;
-        },
-        spriteProcessor = {
-            path: function(sprite){  
-               
-                var attr = sprite.attr,
-                    path = attr.path,
-                    pathString = '',
-                    props, p, pLen;
-                
-                if(Ext.isArray(path[0])){
-                    pLen = path.length;
-                    for (p = 0; p < pLen; p++) {
-                        pathString += path[p].join(' ');
-                    }
-                }else if(Ext.isArray(path)){
-                    pathString = path.join(' ');
-                }else{
-                    pathString = path.replace(/,/g,' ');
-                }
-
-                props = toPropertyString({
-                    d: pathString,
-                    fill: attr.fill || 'none',
-                    stroke: attr.stroke,
-                    'fill-opacity': attr.opacity,
-                    'stroke-width': attr['stroke-width'],
-                    'stroke-opacity': attr['stroke-opacity'],
-                    "z-index": attr.zIndex,
-                    transform: sprite.matrix.toSvg()    
-                });
-
-                return '<path ' + props + '/>';
-            },
-            text: function(sprite){
-                
-                // TODO
-                // implement multi line support (@see Svg.js tuneText)
-                
-                var attr = sprite.attr,
-                    fontRegex = /(-?\d*\.?\d*){1}(em|ex|px|in|cm|mm|pt|pc|%)\s('*.*'*)/,
-                    match = fontRegex.exec(attr.font),
-                    size = (match && match[1]) || "12",
-                    // default font family is Arial
-                    family = (match && match[3]) || 'Arial',
-                    text = attr.text,
-                    factor = (Ext.isFF3_0 || Ext.isFF3_5) ? 2 : 4,
-                    tspanString = '',
-                    props;
-
-                sprite.getBBox();
-                tspanString += '<tspan x="' + (attr.x || '') + '" dy="';
-                tspanString += (size/factor)+'">';
-                tspanString += Ext.htmlEncode(text) + '</tspan>';
-
-
-                props = toPropertyString({
-                        x: attr.x,
-                        y: attr.y,
-                        'font-size': size,
-                        'font-family': family,
-                        'font-weight': attr['font-weight'],
-                        'text-anchor': attr['text-anchor'],
-                        // if no fill property is set it will be black
-                        fill: attr.fill || '#000',
-                        'fill-opacity': attr.opacity,
-                        transform: sprite.matrix.toSvg()
-                });
-
-                    
-                    
-                return '<text '+ props + '>' +  tspanString + '</text>';
-            },
-            rect: function(sprite){
-
-                var attr = sprite.attr,
-                    props =  toPropertyString({
-                        x: attr.x,
-                        y: attr.y,
-                        rx: attr.rx,
-                        ry: attr.ry,
-                        width: attr.width,
-                        height: attr.height,
-                        fill: attr.fill || 'none',
-                        'fill-opacity': attr.opacity,
-                        stroke: attr.stroke,
-                        'stroke-opacity': attr['stroke-opacity'],
-                        'stroke-width':attr['stroke-width'],
-                        transform: sprite.matrix && sprite.matrix.toSvg()
-                    });
-                
-                return '<rect ' + props + '/>';
-            },
-            circle: function(sprite){
-
-                var attr = sprite.attr,                
-                    props = toPropertyString({
-                        cx: attr.x,
-                        cy: attr.y,
-                        r: attr.radius,
-                        fill: attr.translation.fill || attr.fill || 'none',
-                        'fill-opacity': attr.opacity,
-                        stroke: attr.stroke,
-                        'stroke-opacity': attr['stroke-opacity'],
-                        'stroke-width':attr['stroke-width'],
-                        transform: sprite.matrix.toSvg()
-                    });
-
-                return '<circle ' + props + ' />';
-            },
-            image: function(sprite){
-
-                var attr = sprite.attr,
-                    props = toPropertyString({
-                        x: attr.x - (attr.width/2 >> 0),
-                        y: attr.y - (attr.height/2 >> 0),
-                        width: attr.width,
-                        height: attr.height,
-                        'xlink:href': attr.src,
-                        transform: sprite.matrix.toSvg()
-                    });
-
-                return '<image ' + props + ' />';
-            }
-        },
-        svgHeader = function(){
-            var svg = '<?xml version="1.0" standalone="yes"?>';
-            svg += '<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">';
-            return svg;
-        },
-        svgContent = function(){
-            var svg = '<svg width="'+width+'px" height="'+height+'px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">',
-                defs = '', item, itemsLen, items, gradient,
-                getSvgString, colorstops, stop,
-                coll, keys, colls, k, kLen, key, collI, i, j, stopsLen, sortedItems, za, zb;
-
-            items = surface.items.items;
-            itemsLen = items.length;
-           
-            
-            getSvgString = function(node){
-                      
-                var childs = node.childNodes,
-                    childLength = childs.length,
-                    i = 0,
-                    attrLength,
-                    j,
-                    svgString = '', child, attr, tagName, attrItem;
-
-                    for(; i < childLength; i++){
-                        child = childs[i];
-                        attr = child.attributes;
-                        tagName = child.tagName;
-                        
-                        svgString += '<' +tagName;
-                        
-                        for(j = 0, attrLength = attr.length; j < attrLength; j++){
-                            attrItem = attr.item(j);
-                            svgString += ' '+attrItem.name+'="'+attrItem.value+'"';
-                        }
-                        
-                        svgString += '>';
-                        
-                        if(child.childNodes.length > 0){
-                            svgString += getSvgString(child);
-                        }
-                        
-                        svgString += '</' + tagName + '>';
-                        
-                    }
-                return svgString;
-            };
-            
-            
-            if(surface.getDefs){
-                defs = getSvgString(surface.getDefs());
-            }else{
-                // IE
-                coll = surface.gradientsColl;
-                if (coll) {
-                    keys  = coll.keys;
-                    colls = coll.items;
-                    k     = 0;
-                    kLen  = keys.length;
-                }
-
-                for (; k < kLen; k++) {
-                    key   = keys[k];
-                    collI = colls[k];
-
-                    gradient = surface.gradientsColl.getByKey(key);
-                    defs += '<linearGradient id="' + key + '" x1="0" y1="0" x2="1" y2="1">';
-
-                    var color = gradient.colors.replace(/rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)/g, 'rgb($1|$2|$3)');
-                    color = color.replace(/rgba\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,([\d\.]+)\)/g, 'rgba($1|$2|$3|$4)')
-                    colorstops = color.split(',');
-                    for(i=0, stopsLen = colorstops.length; i < stopsLen; i++){
-                        stop = colorstops[i].split(' ');
-                        color = Ext.draw.Color.fromString(stop[1].replace(/\|/g,','));
-                        defs += '<stop offset="'+stop[0]+'" stop-color="' + color.toString() + '" stop-opacity="1"></stop>';
-                    }
-                    defs += '</linearGradient>';
-                }
-            }
-            
-            svg += '<defs>' + defs + '</defs>';
-
-            // thats the background rectangle
-            svg += spriteProcessor.rect({
-                attr: {
-                        width: '100%',
-                        height: '100%',
-                        fill: '#fff',
-                        stroke: 'none',
-                        opacity: '0'
-                }
-            });
-                
-            // Sort the items (stable sort guaranteed)
-            sortedItems = new Array(itemsLen);
-            for(i = 0; i < itemsLen; i++){
-                sortedItems[i] = i;
-            }
-            sortedItems.sort(function (a, b) {
-                za = items[a].attr.zIndex || 0;
-                zb = items[b].attr.zIndex || 0;
-                if (za == zb) {
-                    return a - b;
-                }
-                return za - zb;
-            });
-
-            for(i = 0; i < itemsLen; i++){
-                item = items[sortedItems[i]];
-                if(!item.attr.hidden){
-                    svg += spriteProcessor[item.type](item);
-                }
-            }
-
-            svg += '</svg>';
-
-            return svg;
-        },                
-        toPropertyString = function(obj){
-            var propString = '',
-                key;
-
-            for(key in obj){
-
-                if(obj.hasOwnProperty(key) && obj[key] != null){
-                    propString += key +'="'+ obj[key]+'" ';
-                }
-
-            }
-
-            return propString;
-        };
-
-        return {
-            generate: function(config, surface){
-                init(surface);
-                return svgHeader() + svgContent();
-            }
-        };
-    }())
-
-});

data/app/assets/javascripts/src/draw/engine/Vml.js

@@ -1,916 +0,0 @@
-/**
- * @class Ext.draw.engine.Vml
- * Provides specific methods to draw with VML.
- */
-
-Ext.define('Ext.draw.engine.Vml', {
-
-    /* Begin Definitions */
-
-    extend: 'Ext.draw.Surface',
-
-    requires: ['Ext.draw.Draw', 'Ext.draw.Color', 'Ext.draw.Sprite', 'Ext.draw.Matrix', 'Ext.Element'],
-
-    /* End Definitions */
-
-    engine: 'Vml',
-
-    map: {M: "m", L: "l", C: "c", Z: "x", m: "t", l: "r", c: "v", z: "x"},
-    bitesRe: /([clmz]),?([^clmz]*)/gi,
-    valRe: /-?[^,\s\-]+/g,
-    fillUrlRe: /^url\(\s*['"]?([^\)]+?)['"]?\s*\)$/i,
-    pathlike: /^(path|rect)$/,
-    NonVmlPathRe: /[ahqstv]/ig, // Non-VML Pathing ops
-    partialPathRe: /[clmz]/g,
-    fontFamilyRe: /^['"]+|['"]+$/g,
-    baseVmlCls: Ext.baseCSSPrefix + 'vml-base',
-    vmlGroupCls: Ext.baseCSSPrefix + 'vml-group',
-    spriteCls: Ext.baseCSSPrefix + 'vml-sprite',
-    measureSpanCls: Ext.baseCSSPrefix + 'vml-measure-span',
-    zoom: 21600,
-    coordsize: 1000,
-    coordorigin: '0 0',
-    zIndexShift: 0,
-    // VML uses CSS z-index and therefore doesn't need sprites to be kept in zIndex order
-    orderSpritesByZIndex: false,
-
-    // @private
-    // Convert an SVG standard path into a VML path
-    path2vml: function (path) {
-        var me = this,
-            nonVML = me.NonVmlPathRe,
-            map = me.map,
-            val = me.valRe,
-            zoom = me.zoom,
-            bites = me.bitesRe,
-            command = Ext.Function.bind(Ext.draw.Draw.pathToAbsolute, Ext.draw.Draw),
-            res, pa, p, r, i, ii, j, jj;
-        if (String(path).match(nonVML)) {
-            command = Ext.Function.bind(Ext.draw.Draw.path2curve, Ext.draw.Draw);
-        } else if (!String(path).match(me.partialPathRe)) {
-            res = String(path).replace(bites, function (all, command, args) {
-                var vals = [],
-                    isMove = command.toLowerCase() == "m",
-                    res = map[command];
-                args.replace(val, function (value) {
-                    if (isMove && vals.length === 2) {
-                        res += vals + map[command == "m" ? "l" : "L"];
-                        vals = [];
-                    }
-                    vals.push(Math.round(value * zoom));
-                });
-                return res + vals;
-            });
-            return res;
-        }
-        pa = command(path);
-        res = [];
-        for (i = 0, ii = pa.length; i < ii; i++) {
-            p = pa[i];
-            r = pa[i][0].toLowerCase();
-            if (r == "z") {
-                r = "x";
-            }
-            for (j = 1, jj = p.length; j < jj; j++) {
-                r += Math.round(p[j] * me.zoom) + (j != jj - 1 ? "," : "");
-            }
-            res.push(r);
-        }
-        return res.join(" ");
-    },
-
-    // @private - set of attributes which need to be translated from the sprite API to the native browser API
-    translateAttrs: {
-        radius: "r",
-        radiusX: "rx",
-        radiusY: "ry",
-        lineWidth: "stroke-width",
-        fillOpacity: "fill-opacity",
-        strokeOpacity: "stroke-opacity",
-        strokeLinejoin: "stroke-linejoin"
-    },
-
-    // @private - Minimun set of defaults for different types of sprites.
-    minDefaults: {
-        circle: {
-            fill: "none",
-            stroke: null,
-            "stroke-width": null,
-            opacity: null,
-            "fill-opacity": null,
-            "stroke-opacity": null
-        },
-        ellipse: {
-            cx: 0,
-            cy: 0,
-            rx: 0,
-            ry: 0,
-            fill: "none",
-            stroke: null,
-            "stroke-width": null,
-            opacity: null,
-            "fill-opacity": null,
-            "stroke-opacity": null
-        },
-        rect: {
-            x: 0,
-            y: 0,
-            width: 0,
-            height: 0,
-            rx: 0,
-            ry: 0,
-            fill: "none",
-            stroke: null,
-            "stroke-width": null,
-            opacity: null,
-            "fill-opacity": null,
-            "stroke-opacity": null
-        },
-        text: {
-            x: 0,
-            y: 0,
-            "text-anchor": "start",
-            font: '10px "Arial"',
-            fill: "#000",
-            stroke: null,
-            "stroke-width": null,
-            opacity: null,
-            "fill-opacity": null,
-            "stroke-opacity": null
-        },
-        path: {
-            d: "M0,0",
-            fill: "none",
-            stroke: null,
-            "stroke-width": null,
-            opacity: null,
-            "fill-opacity": null,
-            "stroke-opacity": null
-        },
-        image: {
-            x: 0,
-            y: 0,
-            width: 0,
-            height: 0,
-            preserveAspectRatio: "none",
-            opacity: null
-        }
-    },
-
-    // private
-    onMouseEnter: function (e) {
-        this.fireEvent("mouseenter", e);
-    },
-
-    // private
-    onMouseLeave: function (e) {
-        this.fireEvent("mouseleave", e);
-    },
-
-    // @private - Normalize a delegated single event from the main container to each sprite and sprite group
-    processEvent: function (name, e) {
-        var target = e.getTarget(),
-            surface = this.surface,
-            sprite;
-        this.fireEvent(name, e);
-        sprite = this.items.get(target.id);
-        if (sprite) {
-            sprite.fireEvent(name, sprite, e);
-        }
-    },
-
-    // Create the VML element/elements and append them to the DOM
-    createSpriteElement: function (sprite) {
-        var me = this,
-            attr = sprite.attr,
-            type = sprite.type,
-            zoom = me.zoom,
-            vml = sprite.vml || (sprite.vml = {}),
-            round = Math.round,
-            el = (type === 'image') ? me.createNode('image') : me.createNode('shape'),
-            path, skew, textPath;
-
-        el.coordsize = zoom + ' ' + zoom;
-        el.coordorigin = attr.coordorigin || "0 0";
-        Ext.get(el).addCls(me.spriteCls);
-        if (type == "text") {
-            vml.path = path = me.createNode("path");
-            path.textpathok = true;
-            vml.textpath = textPath = me.createNode("textpath");
-            textPath.on = true;
-            el.appendChild(textPath);
-            el.appendChild(path);
-        }
-        el.id = sprite.id;
-        sprite.el = Ext.get(el);
-        sprite.el.setStyle('zIndex', -me.zIndexShift);
-        me.el.appendChild(el);
-        if (type !== 'image') {
-            skew = me.createNode("skew");
-            skew.on = true;
-            el.appendChild(skew);
-            sprite.skew = skew;
-        }
-        sprite.matrix = new Ext.draw.Matrix();
-        sprite.bbox = {
-            plain: null,
-            transform: null
-        };
-
-        this.applyAttrs(sprite);
-        this.applyTransformations(sprite);        
-        sprite.fireEvent("render", sprite);
-        return sprite.el;
-    },
-
-    getBBoxText: function (sprite) {
-        var vml = sprite.vml;
-        return {
-            x: vml.X + (vml.bbx || 0) - vml.W / 2,
-            y: vml.Y - vml.H / 2,
-            width: vml.W,
-            height: vml.H
-        };
-    },
-
-    applyAttrs: function (sprite) {
-        var me = this,
-            vml = sprite.vml,
-            group = sprite.group,
-            spriteAttr = sprite.attr,
-            el = sprite.el,
-            dom = el.dom,
-            style, name, groups, i, ln, scrubbedAttrs, font, key,
-            cx, cy, rx, ry;
-
-        if (group) {
-            groups = [].concat(group);
-            ln = groups.length;
-            for (i = 0; i < ln; i++) {
-                group = groups[i];
-                me.getGroup(group).add(sprite);
-            }
-            delete sprite.group;
-        }
-        scrubbedAttrs = me.scrubAttrs(sprite) || {};
-
-        if (sprite.zIndexDirty) {
-            me.setZIndex(sprite);
-        }
-
-        // Apply minimum default attributes
-        Ext.applyIf(scrubbedAttrs, me.minDefaults[sprite.type]);
-
-        if (sprite.type == 'image') {
-            Ext.apply(sprite.attr, {
-                x: scrubbedAttrs.x,
-                y: scrubbedAttrs.y,
-                width: scrubbedAttrs.width,
-                height: scrubbedAttrs.height
-            });
-            el.setStyle({
-                width: scrubbedAttrs.width + 'px',
-                height: scrubbedAttrs.height + 'px'
-            });
-            dom.src = scrubbedAttrs.src;
-        }
-
-        if (dom.href) {
-            dom.href = scrubbedAttrs.href;
-        }
-        if (dom.title) {
-            dom.title = scrubbedAttrs.title;
-        }
-        if (dom.target) {
-            dom.target = scrubbedAttrs.target;
-        }
-        if (dom.cursor) {
-            dom.cursor = scrubbedAttrs.cursor;
-        }
-
-        // Change visibility
-        if (sprite.dirtyHidden) {
-            (scrubbedAttrs.hidden) ? me.hidePrim(sprite) : me.showPrim(sprite);
-            sprite.dirtyHidden = false;
-        }
-
-        // Update path
-        if (sprite.dirtyPath) {
-            if (sprite.type == "circle" || sprite.type == "ellipse") {
-                cx = scrubbedAttrs.x;
-                cy = scrubbedAttrs.y;
-                rx = scrubbedAttrs.rx || scrubbedAttrs.r || 0;
-                ry = scrubbedAttrs.ry || scrubbedAttrs.r || 0;
-                dom.path = Ext.String.format("ar{0},{1},{2},{3},{4},{1},{4},{1}",
-                    Math.round((cx - rx) * me.zoom),
-                    Math.round((cy - ry) * me.zoom),
-                    Math.round((cx + rx) * me.zoom),
-                    Math.round((cy + ry) * me.zoom),
-                    Math.round(cx * me.zoom));
-                sprite.dirtyPath = false;
-            }
-            else if (sprite.type !== "text" && sprite.type !== 'image') {
-                sprite.attr.path = scrubbedAttrs.path = me.setPaths(sprite, scrubbedAttrs) || scrubbedAttrs.path;
-                dom.path = me.path2vml(scrubbedAttrs.path);
-                sprite.dirtyPath = false;
-            }
-        }
-
-        // Apply clipping
-        if ("clip-rect" in scrubbedAttrs) {
-            me.setClip(sprite, scrubbedAttrs);
-        }
-
-        // Handle text (special handling required)
-        if (sprite.type == "text") {
-            me.setTextAttributes(sprite, scrubbedAttrs);
-        }
-
-        // Handle fill and opacity
-        if (scrubbedAttrs.opacity || scrubbedAttrs['stroke-opacity'] || scrubbedAttrs.fill) {
-            me.setFill(sprite, scrubbedAttrs);
-        }
-
-        // Handle stroke (all fills require a stroke element)
-        if (scrubbedAttrs.stroke || scrubbedAttrs['stroke-opacity'] || scrubbedAttrs.fill) {
-            me.setStroke(sprite, scrubbedAttrs);
-        }
-
-        //set styles
-        style = spriteAttr.style;
-        if (style) {
-            el.setStyle(style);
-        }
-
-        sprite.dirty = false;
-    },
-
-    setZIndex: function (sprite) {
-        var me = this,
-            zIndex = sprite.attr.zIndex,
-            shift = me.zIndexShift,
-            items, iLen, item, i;
-
-        if (zIndex < shift) {
-            // This means bad thing happened.
-            // The algorithm below will guarantee O(n) time.
-            items = me.items.items;
-            iLen = items.length;
-
-            for (i = 0; i < iLen; i++) {
-                if ((zIndex = items[i].attr.zIndex) && zIndex < shift) { // zIndex is no longer useful this case
-                    shift = zIndex;
-                }
-            }
-
-            me.zIndexShift = shift;
-            for (i = 0; i < iLen; i++) {
-                item = items[i];
-                if (item.el) {
-                    item.el.setStyle('zIndex', item.attr.zIndex - shift);
-                }
-                item.zIndexDirty = false;
-            }
-        } else if (sprite.el) {
-            sprite.el.setStyle('zIndex', zIndex - shift);
-            sprite.zIndexDirty = false;
-        }
-    },
-
-    // Normalize all virtualized types into paths.
-    setPaths: function (sprite, params) {
-        var spriteAttr = sprite.attr, thickness = sprite.attr['stroke-width'] || 1;
-        // Clear bbox cache
-        sprite.bbox.plain = null;
-        sprite.bbox.transform = null;
-        if (sprite.type == 'circle') {
-            spriteAttr.rx = spriteAttr.ry = params.r;
-            return Ext.draw.Draw.ellipsePath(sprite);
-        }
-        else if (sprite.type == 'ellipse') {
-            spriteAttr.rx = params.rx;
-            spriteAttr.ry = params.ry;
-            return Ext.draw.Draw.ellipsePath(sprite);
-        }
-        else if (sprite.type == 'rect') {
-            spriteAttr.rx = spriteAttr.ry = params.r;
-            return Ext.draw.Draw.rectPath(sprite);
-        }
-        else if (sprite.type == 'path' && spriteAttr.path) {
-            return Ext.draw.Draw.pathToAbsolute(spriteAttr.path);
-        }
-        return false;
-    },
-
-    setFill: function (sprite, params) {
-        var me = this,
-            el = sprite.el.dom,
-            fillEl = el.fill,
-            newfill = false,
-            opacity, gradient, fillUrl, rotation, angle;
-
-        if (!fillEl) {
-            // NOT an expando (but it sure looks like one)...
-            fillEl = el.fill = me.createNode("fill");
-            newfill = true;
-        }
-        if (Ext.isArray(params.fill)) {
-            params.fill = params.fill[0];
-        }
-        if (params.fill == "none") {
-            fillEl.on = false;
-        }
-        else {
-            if (typeof params.opacity == "number") {
-                fillEl.opacity = params.opacity;
-            }
-            if (typeof params["fill-opacity"] == "number") {
-                fillEl.opacity = params["fill-opacity"];
-            }
-            fillEl.on = true;
-            if (typeof params.fill == "string") {
-                fillUrl = params.fill.match(me.fillUrlRe);
-                if (fillUrl) {
-                    fillUrl = fillUrl[1];
-                    // If the URL matches one of the registered gradients, render that gradient
-                    if (fillUrl.charAt(0) == "#") {
-                        gradient = me.gradientsColl.getByKey(fillUrl.substring(1));
-                    }
-                    if (gradient) {
-                        // VML angle is offset and inverted from standard, and must be adjusted to match rotation transform
-                        rotation = params.rotation;
-                        angle = -(gradient.angle + 270 + (rotation ? rotation.degrees : 0)) % 360;
-                        // IE will flip the angle at 0 degrees...
-                        if (angle === 0) {
-                            angle = 180;
-                        }
-                        fillEl.angle = angle;
-                        fillEl.type = "gradient";
-                        fillEl.method = "sigma";
-                        if (fillEl.colors) {
-                            fillEl.colors.value = gradient.colors;
-                        } else {
-                            fillEl.colors = gradient.colors;
-                        }
-                    }
-                    // Otherwise treat it as an image
-                    else {
-                        fillEl.src = fillUrl;
-                        fillEl.type = "tile";
-                    }
-                }
-                else {
-                    fillEl.color = Ext.draw.Color.toHex(params.fill);
-                    fillEl.src = "";
-                    fillEl.type = "solid";
-                }
-            }
-        }
-        if (newfill) {
-            el.appendChild(fillEl);
-        }
-    },
-
-    setStroke: function (sprite, params) {
-        var me = this,
-            el = sprite.el.dom,
-            strokeEl = sprite.strokeEl,
-            newStroke = false,
-            width, opacity;
-
-        if (!strokeEl) {
-            strokeEl = sprite.strokeEl = me.createNode("stroke");
-            newStroke = true;
-        }
-        if (Ext.isArray(params.stroke)) {
-            params.stroke = params.stroke[0];
-        }
-        if (!params.stroke || params.stroke == "none" || params.stroke == 0 || params["stroke-width"] == 0) {
-            strokeEl.on = false;
-        }
-        else {
-            strokeEl.on = true;
-            if (params.stroke && !params.stroke.match(me.fillUrlRe)) {
-                // VML does NOT support a gradient stroke :(
-                strokeEl.color = Ext.draw.Color.toHex(params.stroke);
-            }
-            strokeEl.dashstyle = params["stroke-dasharray"] ? "dash" : "solid";
-            strokeEl.joinstyle = params["stroke-linejoin"];
-            strokeEl.endcap = params["stroke-linecap"] || "round";
-            strokeEl.miterlimit = params["stroke-miterlimit"] || 8;
-            width = parseFloat(params["stroke-width"] || 1) * 0.75;
-            opacity = params["stroke-opacity"] || 1;
-            // VML Does not support stroke widths under 1, so we're going to fiddle with stroke-opacity instead.
-            if (Ext.isNumber(width) && width < 1) {
-                strokeEl.weight = 1;
-                strokeEl.opacity = opacity * width;
-            }
-            else {
-                strokeEl.weight = width;
-                strokeEl.opacity = opacity;
-            }
-        }
-        if (newStroke) {
-            el.appendChild(strokeEl);
-        }
-    },
-
-    setClip: function (sprite, params) {
-        var me = this,
-            el = sprite.el,
-            clipEl = sprite.clipEl,
-            rect = String(params["clip-rect"]).split(me.separatorRe);
-        if (!clipEl) {
-            clipEl = sprite.clipEl = me.el.insertFirst(Ext.getDoc().dom.createElement("div"));
-            clipEl.addCls(Ext.baseCSSPrefix + 'vml-sprite');
-        }
-        if (rect.length == 4) {
-            rect[2] = +rect[2] + (+rect[0]);
-            rect[3] = +rect[3] + (+rect[1]);
-            clipEl.setStyle("clip", Ext.String.format("rect({1}px {2}px {3}px {0}px)", rect[0], rect[1], rect[2], rect[3]));
-            clipEl.setSize(me.el.width, me.el.height);
-        }
-        else {
-            clipEl.setStyle("clip", "");
-        }
-    },
-
-    setTextAttributes: function (sprite, params) {
-        var me = this,
-            vml = sprite.vml,
-            textStyle = vml.textpath.style,
-            spanCacheStyle = me.span.style,
-            zoom = me.zoom,
-            round = Math.round,
-            fontObj = {
-                fontSize: "font-size",
-                fontWeight: "font-weight",
-                fontStyle: "font-style"
-            },
-            fontProp,
-            paramProp;
-        if (sprite.dirtyFont) {
-            if (params.font) {
-                textStyle.font = spanCacheStyle.font = params.font;
-            }
-            if (params["font-family"]) {
-                textStyle.fontFamily = '"' + params["font-family"].split(",")[0].replace(me.fontFamilyRe, "") + '"';
-                spanCacheStyle.fontFamily = params["font-family"];
-            }
-
-            for (fontProp in fontObj) {
-                paramProp = params[fontObj[fontProp]];
-                if (paramProp) {
-                    textStyle[fontProp] = spanCacheStyle[fontProp] = paramProp;
-                }
-            }
-
-            me.setText(sprite, params.text);
-
-            if (vml.textpath.string) {
-                me.span.innerHTML = String(vml.textpath.string).replace(/</g, "&#60;").replace(/&/g, "&#38;").replace(/\n/g, "<br/>");
-            }
-            vml.W = me.span.offsetWidth;
-            vml.H = me.span.offsetHeight + 2; // TODO handle baseline differences and offset in VML Textpath
-
-            // text-anchor emulation
-            if (params["text-anchor"] == "middle") {
-                textStyle["v-text-align"] = "center";
-            }
-            else if (params["text-anchor"] == "end") {
-                textStyle["v-text-align"] = "right";
-                vml.bbx = -Math.round(vml.W / 2);
-            }
-            else {
-                textStyle["v-text-align"] = "left";
-                vml.bbx = Math.round(vml.W / 2);
-            }
-        }
-        vml.X = params.x;
-        vml.Y = params.y;
-        vml.path.v = Ext.String.format("m{0},{1}l{2},{1}", Math.round(vml.X * zoom), Math.round(vml.Y * zoom), Math.round(vml.X * zoom) + 1);
-        // Clear bbox cache
-        sprite.bbox.plain = null;
-        sprite.bbox.transform = null;
-        sprite.dirtyFont = false;
-    },
-
-    setText: function (sprite, text) {
-        sprite.vml.textpath.string = Ext.htmlDecode(text);
-    },
-
-    hide: function () {
-        this.el.hide();
-    },
-
-    show: function () {
-        this.el.show();
-    },
-
-    hidePrim: function (sprite) {
-        sprite.el.addCls(Ext.baseCSSPrefix + 'hide-visibility');
-    },
-
-    showPrim: function (sprite) {
-        sprite.el.removeCls(Ext.baseCSSPrefix + 'hide-visibility');
-    },
-
-    setSize: function (width, height) {
-        var me = this;
-        width = width || me.width;
-        height = height || me.height;
-        me.width = width;
-        me.height = height;
-
-        if (me.el) {
-            // Size outer div
-            if (width != undefined) {
-                me.el.setWidth(width);
-            }
-            if (height != undefined) {
-                me.el.setHeight(height);
-            }
-        }
-
-        me.callParent(arguments);
-    },
-
-    /**
-     * @private Using the current viewBox property and the surface's width and height, calculate the
-     * appropriate viewBoxShift that will be applied as a persistent transform to all sprites.
-     */
-    applyViewBox: function () {
-        var me = this,
-            viewBox = me.viewBox,
-            width = me.width,
-            height = me.height,
-            items,
-            iLen,
-            i;
-        
-        me.callParent();
-
-        if (viewBox && (width || height)) {
-            items = me.items.items;
-            iLen = items.length;
-
-            for (i = 0; i < iLen; i++) {
-                me.applyTransformations(items[i]);
-            }
-        }
-    },
-
-    onAdd: function (item) {
-        this.callParent(arguments);
-        if (this.el) {
-            this.renderItem(item);
-        }
-    },
-
-    onRemove: function (sprite) {
-        if (sprite.el) {
-            sprite.el.remove();
-            delete sprite.el;
-        }
-        this.callParent(arguments);
-    },
-
-    render: function (container) {
-        var me = this,
-            doc = Ext.getDoc().dom,
-            el;
-        // VML Node factory method (createNode)
-        if (!me.createNode) {
-            try {
-                if (!doc.namespaces.rvml) {
-                    doc.namespaces.add("rvml", "urn:schemas-microsoft-com:vml");
-                }
-                me.createNode = function (tagName) {
-                    return doc.createElement("<rvml:" + tagName + ' class="rvml">');
-                };
-            } catch (e) {
-                me.createNode = function (tagName) {
-                    return doc.createElement("<" + tagName + ' xmlns="urn:schemas-microsoft.com:vml" class="rvml">');
-                };
-            }
-        }
-
-        if (!me.el) {
-            el = doc.createElement("div");
-            me.el = Ext.get(el);
-            me.el.addCls(me.baseVmlCls);
-
-            // Measuring span (offscrren)
-            me.span = doc.createElement("span");
-            Ext.get(me.span).addCls(me.measureSpanCls);
-            el.appendChild(me.span);
-            me.el.setSize(me.width || 0, me.height || 0);
-            container.appendChild(el);
-            me.el.on({
-                scope: me,
-                mouseup: me.onMouseUp,
-                mousedown: me.onMouseDown,
-                mouseover: me.onMouseOver,
-                mouseout: me.onMouseOut,
-                mousemove: me.onMouseMove,
-                mouseenter: me.onMouseEnter,
-                mouseleave: me.onMouseLeave,
-                click: me.onClick,
-                dblclick: me.onDblClick
-            });
-        }
-        me.renderAll();
-    },
-
-    renderAll: function () {
-        this.items.each(this.renderItem, this);
-    },
-
-    redraw: function (sprite) {
-        sprite.dirty = true;
-        this.renderItem(sprite);
-    },
-
-    renderItem: function (sprite) {
-        // Does the surface element exist?
-        if (!this.el) {
-            return;
-        }
-
-        // Create sprite element if necessary
-        if (!sprite.el) {
-            this.createSpriteElement(sprite);
-        }
-
-        if (sprite.dirty) {
-            this.applyAttrs(sprite);
-            if (sprite.dirtyTransform) {
-                this.applyTransformations(sprite);
-            }
-        }
-    },
-
-    rotationCompensation: function (deg, dx, dy) {
-        var matrix = new Ext.draw.Matrix();
-        matrix.rotate(-deg, 0.5, 0.5);
-        return {
-            x: matrix.x(dx, dy),
-            y: matrix.y(dx, dy)
-        };
-    },
-
-    transform: function (sprite, matrixOnly) {
-        var me = this,
-            bbox = me.getBBox(sprite, true),
-            cx = bbox.x + bbox.width * 0.5,
-            cy = bbox.y + bbox.height * 0.5,
-            matrix = new Ext.draw.Matrix(),
-            transforms = sprite.transformations,
-            transformsLength = transforms.length,
-            i = 0,
-            deltaDegrees = 0,
-            deltaScaleX = 1,
-            deltaScaleY = 1,
-            flip = "",
-            el = sprite.el,
-            dom = el.dom,
-            domStyle = dom.style,
-            zoom = me.zoom,
-            skew = sprite.skew,
-            shift = me.viewBoxShift,
-            deltaX, deltaY, transform, type, compensate, y, fill, newAngle, zoomScaleX, zoomScaleY, newOrigin, offset;
-
-
-        for (; i < transformsLength; i++) {
-            transform = transforms[i];
-            type = transform.type;
-            if (type == "translate") {
-                matrix.translate(transform.x, transform.y);
-            }
-            else if (type == "rotate") {
-                matrix.rotate(transform.degrees, transform.x, transform.y);
-                deltaDegrees += transform.degrees;
-            }
-            else if (type == "scale") {
-                matrix.scale(transform.x, transform.y, transform.centerX, transform.centerY);
-                deltaScaleX *= transform.x;
-                deltaScaleY *= transform.y;
-            }
-        }
-
-        sprite.matrix = matrix.clone();
-
-        if (matrixOnly) {
-            return;
-        }
-
-        if (shift) {
-            matrix.prepend(shift.scale, 0, 0, shift.scale, shift.dx * shift.scale, shift.dy * shift.scale);
-        }
-
-        // Hide element while we transform
-        if (sprite.type != "image" && skew) {
-            skew.origin = "0,0";
-            // matrix transform via VML skew
-            skew.matrix = matrix.toString();
-            // skew.offset = '32767,1' OK
-            // skew.offset = '32768,1' Crash
-            // M$, R U kidding??
-            offset = matrix.offset();
-            if (offset[0] > 32767) {
-                offset[0] = 32767;
-            } else if (offset[0] < -32768) {
-                offset[0] = -32768;
-            }
-            if (offset[1] > 32767) {
-                offset[1] = 32767;
-            } else if (offset[1] < -32768) {
-                offset[1] = -32768;
-            }
-            skew.offset = offset;
-        }
-        else {
-            domStyle.filter = matrix.toFilter();
-            domStyle.left = Math.min(
-                matrix.x(bbox.x, bbox.y),
-                matrix.x(bbox.x + bbox.width, bbox.y),
-                matrix.x(bbox.x, bbox.y + bbox.height),
-                matrix.x(bbox.x + bbox.width, bbox.y + bbox.height)) + 'px';
-            domStyle.top = Math.min(
-                matrix.y(bbox.x, bbox.y),
-                matrix.y(bbox.x + bbox.width, bbox.y),
-                matrix.y(bbox.x, bbox.y + bbox.height),
-                matrix.y(bbox.x + bbox.width, bbox.y + bbox.height)) + 'px';
-        }
-    },
-
-    createItem: function (config) {
-        return Ext.create('Ext.draw.Sprite', config);
-    },
-
-    getRegion: function () {
-        return this.el.getRegion();
-    },
-
-    addCls: function (sprite, className) {
-        if (sprite && sprite.el) {
-            sprite.el.addCls(className);
-        }
-    },
-
-    removeCls: function (sprite, className) {
-        if (sprite && sprite.el) {
-            sprite.el.removeCls(className);
-        }
-    },
-
-    /**
-     * Adds a definition to this Surface for a linear gradient. We convert the gradient definition
-     * to its corresponding VML attributes and store it for later use by individual sprites.
-     * @param {Object} gradient
-     */
-    addGradient: function (gradient) {
-        var gradients = this.gradientsColl || (this.gradientsColl = Ext.create('Ext.util.MixedCollection')),
-            colors = [],
-            stops = Ext.create('Ext.util.MixedCollection'),
-            keys,
-            items,
-            iLen,
-            key,
-            item,
-            i;
-
-        // Build colors string
-        stops.addAll(gradient.stops);
-        stops.sortByKey("ASC", function (a, b) {
-            a = parseInt(a, 10);
-            b = parseInt(b, 10);
-            return a > b ? 1 : (a < b ? -1 : 0);
-        });
-
-        keys = stops.keys;
-        items = stops.items;
-        iLen = keys.length;
-
-        for (i = 0; i < iLen; i++) {
-            key = keys[i];
-            item = items[i];
-            colors.push(key + '% ' + item.color);
-        }
-
-        gradients.add(gradient.id, {
-            colors: colors.join(","),
-            angle: gradient.angle
-        });
-    },
-
-    destroy: function () {
-        var me = this;
-
-        me.callParent(arguments);
-        if (me.el) {
-            me.el.remove();
-        }
-        delete me.el;
-    }
-});