extjs-rails 4.1.0.alpha1

data/app/assets/javascripts/extjs-rails/src/draw/engine/SvgExporter.js

@@ -0,0 +1,280 @@
+/**
+ * @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/extjs-rails/src/draw/engine/Vml.js

@@ -0,0 +1,916 @@
+/**
+ * @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;
+    }
+});