extjs-rails 4.1.0.alpha1

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

@@ -0,0 +1,175 @@
+/**
+ * This class encapsulates a drawn text item as rendered by the Ext.draw package within a Component which can be
+ * then used anywhere in an ExtJS application just like any other Component.
+ *
+ * ## Example usage
+ *
+ *     @example
+ *     Ext.create('Ext.panel.Panel', {
+ *         title: 'Panel with VerticalTextItem',
+ *         width: 300,
+ *         height: 200,
+ *         lbar: {
+ *             layout: {
+ *                 align: 'center'
+ *             },
+ *             items: [{
+ *                 xtype: 'text',
+ *                 text: 'Sample VerticalTextItem',
+ *                 degrees: 90
+ *             }]
+ *         },
+ *         renderTo: Ext.getBody()
+ *     });
+ *
+ * @constructor
+ * Creates a new Text Component
+ * @param {Object} text A config object containing a `text` property, a `degrees` property,
+ * and, optionally, a `styleSelector` property which specifies a selector which provides CSS rules to
+ * give font family, size and color to the drawn text.
+ */
+Ext.define('Ext.draw.Text', {
+    extend: 'Ext.draw.Component',
+    uses: ['Ext.util.CSS'],
+    alias: 'widget.text',
+
+    /**
+     * @cfg {String} text
+     * The text to display (html tags are <b>not</b> accepted)
+     */
+    text: '',
+
+    /**
+     * @cfg {String} styleSelector
+     * A CSS selector string which matches a style rule in the document stylesheet from which
+     * the text's font properties are read.
+     *
+     * **Drawn** text is not styled by CSS, but by properties set during its construction, so these styles
+     * must be programatically read from a stylesheet rule found via a selector at construction time.
+     */
+
+    /**
+     * @cfg {Number} degrees
+     * The angle by which to initially rotate the text clockwise. Defaults to zero.
+     */
+
+    focusable: false,
+    viewBox: false,
+    autoSize: true,
+    baseCls: Ext.baseCSSPrefix + 'surface ' + Ext.baseCSSPrefix + 'draw-text',
+
+    initComponent: function() {
+        var me = this;
+
+        me.textConfig = Ext.apply({
+            type: 'text',
+            text: me.text,
+            rotate: {
+                degrees: me.degrees || 0
+            }
+        }, me.textStyle);
+        Ext.apply(me.textConfig, me.getStyles(me.styleSelectors || me.styleSelector));
+
+        // Surface is created from the *initialConfig*, not the current object state,
+        // So the generated items must go into the initialConfig
+        me.initialConfig.items = [me.textConfig];
+        me.callParent(arguments);
+    },
+
+    /**
+     * @private
+     * Accumulates a style object based upon the styles specified in document stylesheets
+     * by an array of CSS selectors
+     */
+    getStyles: function(selectors) {
+        selectors = Ext.Array.from(selectors);
+        var i = 0,
+            len = selectors.length,
+            rule,
+            style,
+            prop,
+            result = {};
+
+        for (; i < len; i++) {
+            // Get the style rule which exactly matches the selector.
+            rule = Ext.util.CSS.getRule(selectors[i]);
+            if (rule) {
+                style = rule.style;
+                if (style) {
+                    Ext.apply(result, {
+                        'font-family': style.fontFamily,
+                        'font-weight': style.fontWeight,
+                        'line-height': style.lineHeight,
+                        'font-size': style.fontSize,
+                        fill: style.color
+                    });
+                }
+            }
+        }
+        return result;
+    },
+
+    /**
+     * Sets the clockwise rotation angle relative to the horizontal axis.
+     * @param {Number} degrees The clockwise angle (in degrees) from the horizontal axis
+     * by which the text should be rotated.
+     */
+    setAngle: function(degrees) {
+        var me = this,
+            surface,
+            sprite;
+            
+        if (me.rendered) {
+            surface = me.surface;
+            sprite = surface.items.items[0];
+
+            me.degrees = degrees;
+            sprite.setAttributes({
+                rotate: {
+                    degrees: degrees
+                }
+            }, true);
+            if (me.autoSize || me.viewBox) {
+                me.updateLayout();
+            }
+        } else {
+            me.degrees = degrees;
+        }
+    },
+
+    /**
+     * Updates this item's text.
+     * @param {String} t The text to display (html **not** accepted).
+     */
+    setText: function(text) {
+        var me = this,
+            surface,
+            sprite;
+            
+        if (me.rendered) {
+            surface = me.surface;
+            sprite = surface.items.items[0];
+
+            me.text = text || '';
+            surface.remove(sprite);
+            me.textConfig.type = 'text';
+            me.textConfig.text = me.text;
+            sprite = surface.add(me.textConfig);
+            sprite.setAttributes({
+                rotate: {
+                    degrees: me.degrees
+                }
+            }, true);
+            if (me.autoSize || me.viewBox) {
+                me.updateLayout();
+            }
+        } else {
+            me.on({
+                render: function() {
+                    me.setText(text);
+                },
+                single: true
+            });
+        }
+    }
+});

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

@@ -0,0 +1,106 @@
+/**
+ * @private
+ */
+Ext.define('Ext.draw.engine.ImageExporter', {
+    singleton: true,
+   
+    statics: (function(){
+        var exportTypes = {
+            "image/png": 1,
+            "image/jpeg": 1
+            },
+            init = function(config){
+            
+                if(config.hasOwnProperty('width')){
+                    width = config['width'];
+                }
+                if(config.hasOwnProperty('height')){
+                    height = config['height'];
+                }
+                if(config.hasOwnProperty('type') && exportTypes[config['type']]){
+                    type = config['type'];
+                }else{
+                    return false;
+                }
+                
+                // if all the elements were set up before
+                // we don't need to reset their values and reappend them to the form
+                if(formEl && svgEl && typeEl && widthEl && heightEl){
+                    return true;
+                }
+                
+                formEl = formEl || Ext.get(document.createElement('form'));
+                formEl.set({
+                    action: 'http://svg.sencha.io',
+                    method: 'POST'
+                });
+                
+                svgEl = svgEl || Ext.get(document.createElement('input'));
+                svgEl.set({
+                    name: 'svg',
+                    type: 'hidden'
+                });
+                
+                typeEl = typeEl || Ext.get(document.createElement('input'));
+                typeEl.set({ 
+                    name: 'type',
+                    type: 'hidden'
+                });
+                widthEl = widthEl || Ext.get(document.createElement('input'));
+                widthEl.set({
+                    name: 'width',
+                    type: 'hidden'
+                });
+                heightEl = heightEl || Ext.get(document.createElement('input'));
+                heightEl.set({
+                    name: 'height',
+                    type: 'hidden'
+                });
+                
+                formEl.appendChild(svgEl);
+                formEl.appendChild(typeEl);
+                formEl.appendChild(widthEl);
+                formEl.appendChild(heightEl);
+                
+                Ext.getBody().appendChild(formEl);
+                
+                return true;
+            },
+            process = function(surface){
+
+                var svgString = Ext.draw.engine.SvgExporter.self.generate({}, surface);
+
+                widthEl.set({
+                    value: width || surface.width
+                });
+                
+                heightEl.set({
+                    value: height || surface.height
+                });
+ 
+                if(type){
+                    typeEl.set({
+                        value: type
+                    });
+                }
+                svgEl.set({
+                    value: svgString
+                });
+                
+                formEl.dom.submit();
+                
+            },
+            formEl, typeEl, svgEl, widthEl, heightEl, type, width, height;
+
+        return {
+            generate: function(config, surface){
+                if(init(config)){
+                    process(surface);
+                }else{
+                    return false;
+                }
+            }
+        };
+    }())
+
+});

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

@@ -0,0 +1,734 @@
+/**
+ * @class Ext.draw.engine.Svg
+ * Provides specific methods to draw with SVG.
+ */
+Ext.define('Ext.draw.engine.Svg', {
+
+    /* Begin Definitions */
+
+    extend: 'Ext.draw.Surface',
+
+    requires: ['Ext.draw.Draw', 'Ext.draw.Sprite', 'Ext.draw.Matrix', 'Ext.Element'],
+
+    /* End Definitions */
+
+    engine: 'Svg',
+
+    trimRe: /^\s+|\s+$/g,
+    spacesRe: /\s+/,
+    xlink: "http:/" + "/www.w3.org/1999/xlink",
+
+    translateAttrs: {
+        radius: "r",
+        radiusX: "rx",
+        radiusY: "ry",
+        path: "d",
+        lineWidth: "stroke-width",
+        fillOpacity: "fill-opacity",
+        strokeOpacity: "stroke-opacity",
+        strokeLinejoin: "stroke-linejoin"
+    },
+
+    parsers: {},
+
+    minDefaults: {
+        circle: {
+            cx: 0,
+            cy: 0,
+            r: 0,
+            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-family": null,
+            "font-size": null,
+            "font-weight": null,
+            "font-style": null,
+            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
+        }
+    },
+
+    createSvgElement: function(type, attrs) {
+        var el = this.domRef.createElementNS("http:/" + "/www.w3.org/2000/svg", type),
+            key;
+        if (attrs) {
+            for (key in attrs) {
+                el.setAttribute(key, String(attrs[key]));
+            }
+        }
+        return el;
+    },
+
+    createSpriteElement: function(sprite) {
+        // Create svg element and append to the DOM.
+        var el = this.createSvgElement(sprite.type);
+        el.id = sprite.id;
+        if (el.style) {
+            el.style.webkitTapHighlightColor = "rgba(0,0,0,0)";
+        }
+        sprite.el = Ext.get(el);
+        this.applyZIndex(sprite); //performs the insertion
+        sprite.matrix = new Ext.draw.Matrix();
+        sprite.bbox = {
+            plain: 0,
+            transform: 0
+        };
+        this.applyAttrs(sprite);
+        this.applyTransformations(sprite);
+        sprite.fireEvent("render", sprite);
+        return el;
+    },
+    
+    getBBoxText: function (sprite) {
+        var bbox = {},
+            bb, height, width, i, ln, el;
+
+        if (sprite && sprite.el) {
+            el = sprite.el.dom;
+            try {
+                bbox = el.getBBox();
+                return bbox;
+            } catch(e) {
+                // Firefox 3.0.x plays badly here
+            }
+            bbox = {x: bbox.x, y: Infinity, width: 0, height: 0};
+            ln = el.getNumberOfChars();
+            for (i = 0; i < ln; i++) {
+                bb = el.getExtentOfChar(i);
+                bbox.y = Math.min(bb.y, bbox.y);
+                height = bb.y + bb.height - bbox.y;
+                bbox.height = Math.max(bbox.height, height);
+                width = bb.x + bb.width - bbox.x;
+                bbox.width = Math.max(bbox.width, width);
+            }
+            return bbox;
+        }
+    },
+
+    hide: function() {
+        Ext.get(this.el).hide();
+    },
+
+    show: function() {
+        Ext.get(this.el).show();
+    },
+
+    hidePrim: function(sprite) {
+        this.addCls(sprite, Ext.baseCSSPrefix + 'hide-visibility');
+    },
+
+    showPrim: function(sprite) {
+        this.removeCls(sprite, Ext.baseCSSPrefix + 'hide-visibility');
+    },
+
+    getDefs: function() {
+        return this._defs || (this._defs = this.createSvgElement("defs"));
+    },
+
+    transform: function(sprite, matrixOnly) {
+        var me = this,
+            matrix = new Ext.draw.Matrix(),
+            transforms = sprite.transformations,
+            transformsLength = transforms.length,
+            i = 0,
+            transform, type;
+            
+        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);
+            }
+            else if (type == "scale") {
+                matrix.scale(transform.x, transform.y, transform.centerX, transform.centerY);
+            }
+        }
+        sprite.matrix = matrix;
+        if (!matrixOnly) {
+            sprite.el.set({transform: matrix.toSvg()});
+        }
+    },
+
+    setSize: function(width, height) {
+        var me = this,
+            el = me.el;
+        
+        width = +width || me.width;
+        height = +height || me.height;
+        me.width = width;
+        me.height = height;
+
+        el.setSize(width, height);
+        el.set({
+            width: width,
+            height: height
+        });
+        me.callParent([width, height]);
+    },
+
+    /**
+     * Get the region for the surface's canvas area
+     * @returns {Ext.util.Region}
+     */
+    getRegion: function() {
+        // Mozilla requires using the background rect because the svg element returns an
+        // incorrect region. Webkit gives no region for the rect and must use the svg element.
+        var svgXY = this.el.getXY(),
+            rectXY = this.bgRect.getXY(),
+            max = Math.max,
+            x = max(svgXY[0], rectXY[0]),
+            y = max(svgXY[1], rectXY[1]);
+        return {
+            left: x,
+            top: y,
+            right: x + this.width,
+            bottom: y + this.height
+        };
+    },
+
+    onRemove: function(sprite) {
+        if (sprite.el) {
+            sprite.el.destroy();
+            delete sprite.el;
+        }
+        this.callParent(arguments);
+    },
+    
+    setViewBox: function(x, y, width, height) {
+        if (isFinite(x) && isFinite(y) && isFinite(width) && isFinite(height)) {
+            this.callParent(arguments);
+            this.el.dom.setAttribute("viewBox", [x, y, width, height].join(" "));
+        }
+    },
+
+    render: function (container) {
+        var me = this,
+            width,
+            height,
+            el,
+            defs,
+            bgRect,
+            webkitRect;
+        if (!me.el) {
+            width = me.width || 0;
+            height = me.height || 0;
+            el = me.createSvgElement('svg', {
+                xmlns: "http:/" + "/www.w3.org/2000/svg",
+                version: 1.1,
+                width: width,
+                height: height
+            });
+            defs = me.getDefs();
+
+            // Create a rect that is always the same size as the svg root; this serves 2 purposes:
+            // (1) It allows mouse events to be fired over empty areas in Webkit, and (2) we can
+            // use it rather than the svg element for retrieving the correct client rect of the
+            // surface in Mozilla (see https://bugzilla.mozilla.org/show_bug.cgi?id=530985)
+            bgRect = me.createSvgElement("rect", {
+                width: "100%",
+                height: "100%",
+                fill: "#000",
+                stroke: "none",
+                opacity: 0
+            });
+            
+            if (Ext.isSafari3) {
+                // Rect that we will show/hide to fix old WebKit bug with rendering issues.
+                webkitRect = me.createSvgElement("rect", {
+                    x: -10,
+                    y: -10,
+                    width: "110%",
+                    height: "110%",
+                    fill: "none",
+                    stroke: "#000"
+                });
+            }
+            el.appendChild(defs);
+            if (Ext.isSafari3) {
+                el.appendChild(webkitRect);
+            }
+            el.appendChild(bgRect);
+            container.appendChild(el);
+            me.el = Ext.get(el);
+            me.bgRect = Ext.get(bgRect);
+            if (Ext.isSafari3) {
+                me.webkitRect = Ext.get(webkitRect);
+                me.webkitRect.hide();
+            }
+            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();
+    },
+
+    // private
+    onMouseEnter: function(e) {
+        if (this.el.parent().getRegion().contains(e.getPoint())) {
+            this.fireEvent('mouseenter', e);
+        }
+    },
+
+    // private
+    onMouseLeave: function(e) {
+        if (!this.el.parent().getRegion().contains(e.getPoint())) {
+            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);
+        // We wrap text types in a tspan, sprite is the parent.
+        if (target.nodeName == "tspan" && target.parentNode) {
+            target = target.parentNode;
+        }
+        sprite = this.items.get(target.id);
+        if (sprite) {
+            sprite.fireEvent(name, sprite, e);
+        }
+    },
+
+    /* @private - Wrap SVG text inside a tspan to allow for line wrapping.  In addition this normallizes
+     * the baseline for text the vertical middle of the text to be the same as VML.
+     */
+    tuneText: function (sprite, attrs) {
+        var el = sprite.el.dom,
+            tspans = [],
+            height, tspan, text, i, ln, texts, factor, x;
+
+        if (attrs.hasOwnProperty("text")) {
+            //only create new tspans for text lines if the text has been 
+            //updated or if it's the first time we're setting the text
+            //into the sprite.
+
+            //get the actual rendered text.
+            text = sprite.tspans && Ext.Array.map(sprite.tspans, function(t) { return t.textContent; }).join('');
+
+            if (!sprite.tspans || attrs.text != text) {
+                tspans = this.setText(sprite, attrs.text);
+                sprite.tspans = tspans;
+            //for all other cases reuse the tspans previously created.
+            } else {
+                tspans = sprite.tspans || [];
+            }
+        }
+        // Normalize baseline via a DY shift of first tspan. Shift other rows by height * line height (1.2)
+        if (tspans.length) {
+            height = this.getBBoxText(sprite).height;
+            x = sprite.el.dom.getAttribute("x");
+            for (i = 0, ln = tspans.length; i < ln; i++) {
+                // The text baseline for FireFox 3.0 and 3.5 is different than other SVG implementations
+                // so we are going to normalize that here
+                factor = (Ext.isFF3_0 || Ext.isFF3_5) ? 2 : 4;
+                tspans[i].setAttribute("x", x);
+                tspans[i].setAttribute("dy", i ? height * 1.2 : height / factor);
+            }
+            sprite.dirty = true;
+        }
+    },
+
+    setText: function(sprite, textString) {
+         var me = this,
+             el = sprite.el.dom,
+             tspans = [],
+             height, tspan, text, i, ln, texts;
+        
+        while (el.firstChild) {
+            el.removeChild(el.firstChild);
+        }
+        // Wrap each row into tspan to emulate rows
+        texts = String(textString).split("\n");
+        for (i = 0, ln = texts.length; i < ln; i++) {
+            text = texts[i];
+            if (text) {
+                tspan = me.createSvgElement("tspan");
+                tspan.appendChild(document.createTextNode(Ext.htmlDecode(text)));
+                el.appendChild(tspan);
+                tspans[i] = tspan;
+            }
+        }
+        return tspans;
+    },
+
+    renderAll: function() {
+        this.items.each(this.renderItem, this);
+    },
+
+    renderItem: function (sprite) {
+        if (!this.el) {
+            return;
+        }
+        if (!sprite.el) {
+            this.createSpriteElement(sprite);
+        }
+        if (sprite.zIndexDirty) {
+            this.applyZIndex(sprite);
+        }
+        if (sprite.dirty) {
+            this.applyAttrs(sprite);
+            if (sprite.dirtyTransform) {
+                this.applyTransformations(sprite);
+            }
+        }
+    },
+
+    redraw: function(sprite) {
+        sprite.dirty = sprite.zIndexDirty = true;
+        this.renderItem(sprite);
+    },
+
+    applyAttrs: function (sprite) {
+        var me = this,
+            el = sprite.el,
+            group = sprite.group,
+            sattr = sprite.attr,
+            parsers = me.parsers,
+            //Safari does not handle linear gradients correctly in quirksmode
+            //ref: https://bugs.webkit.org/show_bug.cgi?id=41952
+            //ref: EXTJSIV-1472
+            gradientsMap = me.gradientsMap || {},
+            safariFix = Ext.isSafari && !Ext.isStrict,
+            groups, i, ln, attrs, font, key, style, name, rect;
+
+        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;
+        }
+        attrs = me.scrubAttrs(sprite) || {};
+
+        // if (sprite.dirtyPath) {
+            sprite.bbox.plain = 0;
+            sprite.bbox.transform = 0;
+            if (sprite.type == "circle" || sprite.type == "ellipse") {
+                attrs.cx = attrs.cx || attrs.x;
+                attrs.cy = attrs.cy || attrs.y;
+            }
+            else if (sprite.type == "rect") {
+                attrs.rx = attrs.ry = attrs.r;
+            }
+            else if (sprite.type == "path" && attrs.d) {
+                attrs.d = Ext.draw.Draw.pathToString(Ext.draw.Draw.pathToAbsolute(attrs.d));
+            }
+            sprite.dirtyPath = false;
+        // }
+        // else {
+        //     delete attrs.d;
+        // }
+
+        if (attrs['clip-rect']) {
+            me.setClip(sprite, attrs);
+            delete attrs['clip-rect'];
+        }
+        if (sprite.type == 'text' && attrs.font && sprite.dirtyFont) {
+            el.set({ style: "font: " + attrs.font});
+        }
+        if (sprite.type == "image") {
+            el.dom.setAttributeNS(me.xlink, "href", attrs.src);
+        }
+        Ext.applyIf(attrs, me.minDefaults[sprite.type]);
+
+        if (sprite.dirtyHidden) {
+            (sattr.hidden) ? me.hidePrim(sprite) : me.showPrim(sprite);
+            sprite.dirtyHidden = false;
+        }
+        for (key in attrs) {
+            if (attrs.hasOwnProperty(key) && attrs[key] != null) {
+                //Safari does not handle linear gradients correctly in quirksmode
+                //ref: https://bugs.webkit.org/show_bug.cgi?id=41952
+                //ref: EXTJSIV-1472
+                //if we're Safari in QuirksMode and we're applying some color attribute and the value of that
+                //attribute is a reference to a gradient then assign a plain color to that value instead of the gradient.
+                if (safariFix && ('color|stroke|fill'.indexOf(key) > -1) && (attrs[key] in gradientsMap)) {
+                    attrs[key] = gradientsMap[attrs[key]];
+                }
+                //hidden is not a proper SVG attribute.
+                if (key == 'hidden' && sprite.type == 'text') {
+                    continue;
+                }
+                if (key in parsers) {
+                    el.dom.setAttribute(key, parsers[key](attrs[key], sprite, me));
+                } else {
+                    el.dom.setAttribute(key, attrs[key]);
+                }
+            }
+        }
+        
+        if (sprite.type == 'text') {
+            me.tuneText(sprite, attrs);
+        }
+        sprite.dirtyFont = false;
+
+        //set styles
+        style = sattr.style;
+        if (style) {
+            el.setStyle(style);
+        }
+
+        sprite.dirty = false;
+
+        if (Ext.isSafari3) {
+            // Refreshing the view to fix bug EXTJSIV-1: rendering issue in old Safari 3
+            me.webkitRect.show();
+            setTimeout(function () {
+                me.webkitRect.hide();
+            });
+        }
+    },
+
+    setClip: function(sprite, params) {
+        var me = this,
+            rect = params["clip-rect"],
+            clipEl, clipPath;
+        if (rect) {
+            if (sprite.clip) {
+                sprite.clip.parentNode.parentNode.removeChild(sprite.clip.parentNode);
+            }
+            clipEl = me.createSvgElement('clipPath');
+            clipPath = me.createSvgElement('rect');
+            clipEl.id = Ext.id(null, 'ext-clip-');
+            clipPath.setAttribute("x", rect.x);
+            clipPath.setAttribute("y", rect.y);
+            clipPath.setAttribute("width", rect.width);
+            clipPath.setAttribute("height", rect.height);
+            clipEl.appendChild(clipPath);
+            me.getDefs().appendChild(clipEl);
+            sprite.el.dom.setAttribute("clip-path", "url(#" + clipEl.id + ")");
+            sprite.clip = clipPath;
+        } 
+        // if (!attrs[key]) {
+        //     var clip = Ext.getDoc().dom.getElementById(sprite.el.getAttribute("clip-path").replace(/(^url\(#|\)$)/g, ""));
+        //     clip && clip.parentNode.removeChild(clip);
+        //     sprite.el.setAttribute("clip-path", "");
+        //     delete attrss.clip;
+        // }
+    },
+
+    /**
+     * Insert or move a given sprite's element to the correct place in the DOM list for its zIndex
+     * @param {Ext.draw.Sprite} sprite
+     */
+    applyZIndex: function(sprite) {
+        var me = this,
+            items = me.items,
+            idx = items.indexOf(sprite),
+            el = sprite.el,
+            prevEl;
+        if (me.el.dom.childNodes[idx + 2] !== el.dom) { //shift by 2 to account for defs and bg rect
+            if (idx > 0) {
+                // Find the first previous sprite which has its DOM element created already
+                do {
+                    prevEl = items.getAt(--idx).el;
+                } while (!prevEl && idx > 0);
+            }
+            el.insertAfter(prevEl || me.bgRect);
+        }
+        sprite.zIndexDirty = false;
+    },
+
+    createItem: function (config) {
+        var sprite = new Ext.draw.Sprite(config);
+        sprite.surface = this;
+        return sprite;
+    },
+
+    addGradient: function(gradient) {
+        gradient = Ext.draw.Draw.parseGradient(gradient);
+        var me = this,
+            ln = gradient.stops.length,
+            vector = gradient.vector,
+            //Safari does not handle linear gradients correctly in quirksmode
+            //ref: https://bugs.webkit.org/show_bug.cgi?id=41952
+            //ref: EXTJSIV-1472
+            usePlain = Ext.isSafari && !Ext.isStrict,
+            gradientEl, stop, stopEl, i, gradientsMap;
+            
+        gradientsMap = me.gradientsMap || {};
+        
+        if (!usePlain) {
+            if (gradient.type == "linear") {
+                gradientEl = me.createSvgElement("linearGradient");
+                gradientEl.setAttribute("x1", vector[0]);
+                gradientEl.setAttribute("y1", vector[1]);
+                gradientEl.setAttribute("x2", vector[2]);
+                gradientEl.setAttribute("y2", vector[3]);
+            }
+            else {
+                gradientEl = me.createSvgElement("radialGradient");
+                gradientEl.setAttribute("cx", gradient.centerX);
+                gradientEl.setAttribute("cy", gradient.centerY);
+                gradientEl.setAttribute("r", gradient.radius);
+                if (Ext.isNumber(gradient.focalX) && Ext.isNumber(gradient.focalY)) {
+                    gradientEl.setAttribute("fx", gradient.focalX);
+                    gradientEl.setAttribute("fy", gradient.focalY);
+                }
+            }
+            gradientEl.id = gradient.id;
+            me.getDefs().appendChild(gradientEl);
+            for (i = 0; i < ln; i++) {
+                stop = gradient.stops[i];
+                stopEl = me.createSvgElement("stop");
+                stopEl.setAttribute("offset", stop.offset + "%");
+                stopEl.setAttribute("stop-color", stop.color);
+                stopEl.setAttribute("stop-opacity",stop.opacity);
+                gradientEl.appendChild(stopEl);
+            }
+        } else {
+            gradientsMap['url(#' + gradient.id + ')'] = gradient.stops[0].color;
+        }
+        me.gradientsMap = gradientsMap;
+    },
+
+    /**
+     * Checks if the specified CSS class exists on this element's DOM node.
+     * @param {String} className The CSS class to check for
+     * @return {Boolean} True if the class exists, else false
+     */
+    hasCls: function(sprite, className) {
+        return className && (' ' + (sprite.el.dom.getAttribute('class') || '') + ' ').indexOf(' ' + className + ' ') != -1;
+    },
+
+    addCls: function(sprite, className) {
+        var el = sprite.el,
+            i,
+            len,
+            v,
+            cls = [],
+            curCls =  el.getAttribute('class') || '';
+        // Separate case is for speed
+        if (!Ext.isArray(className)) {
+            if (typeof className == 'string' && !this.hasCls(sprite, className)) {
+                el.set({ 'class': curCls + ' ' + className });
+            }
+        }
+        else {
+            for (i = 0, len = className.length; i < len; i++) {
+                v = className[i];
+                if (typeof v == 'string' && (' ' + curCls + ' ').indexOf(' ' + v + ' ') == -1) {
+                    cls.push(v);
+                }
+            }
+            if (cls.length) {
+                el.set({ 'class': ' ' + cls.join(' ') });
+            }
+        }
+    },
+
+    removeCls: function(sprite, className) {
+        var me = this,
+            el = sprite.el,
+            curCls =  el.getAttribute('class') || '',
+            i, idx, len, cls, elClasses;
+        if (!Ext.isArray(className)){
+            className = [className];
+        }
+        if (curCls) {
+            elClasses = curCls.replace(me.trimRe, ' ').split(me.spacesRe);
+            for (i = 0, len = className.length; i < len; i++) {
+                cls = className[i];
+                if (typeof cls == 'string') {
+                    cls = cls.replace(me.trimRe, '');
+                    idx = Ext.Array.indexOf(elClasses, cls);
+                    if (idx != -1) {
+                        Ext.Array.erase(elClasses, idx, 1);
+                    }
+                }
+            }
+            el.set({ 'class': elClasses.join(' ') });
+        }
+    },
+
+    destroy: function() {
+        var me = this;
+        
+        me.callParent();
+        if (me.el) {
+            me.el.remove();
+        }
+        if (me._defs) {
+            Ext.get(me._defs).destroy();
+        }
+        if (me.bgRect) {
+            Ext.get(me.bgRect).destroy();
+        }
+        if (me.webkitRect) {
+            Ext.get(me.webkitRect).destroy();
+        }
+        delete me.el;
+    }
+});