+<span id='Ext-draw-Sprite-cfg-type'> /**
+</span> * @cfg {String} type The type of the sprite. Possible options are 'circle', 'path', 'rect', 'text', 'square', 'image'
+ */
+
+<span id='Ext-draw-Sprite-cfg-width'> /**
+</span> * @cfg {Number} width Used in rectangle sprites, the width of the rectangle
+ */
+
+<span id='Ext-draw-Sprite-cfg-height'> /**
+</span> * @cfg {Number} height Used in rectangle sprites, the height of the rectangle
+ */
+
+<span id='Ext-draw-Sprite-cfg-size'> /**
+</span> * @cfg {Number} size Used in square sprites, the dimension of the square
+ */
+
+<span id='Ext-draw-Sprite-cfg-radius'> /**
+</span> * @cfg {Number} radius Used in circle sprites, the radius of the circle
+ */
+
+<span id='Ext-draw-Sprite-cfg-x'> /**
+</span> * @cfg {Number} x The position along the x-axis
+ */
+
+<span id='Ext-draw-Sprite-cfg-y'> /**
+</span> * @cfg {Number} y The position along the y-axis
+ */
+
+<span id='Ext-draw-Sprite-cfg-path'> /**
+</span> * @cfg {Array} path Used in path sprites, the path of the sprite written in SVG-like path syntax
+ */
+
+<span id='Ext-draw-Sprite-cfg-opacity'> /**
+</span> * @cfg {Number} opacity The opacity of the sprite
+ */
+
+<span id='Ext-draw-Sprite-cfg-fill'> /**
+</span> * @cfg {String} fill The fill color
+ */
+
+<span id='Ext-draw-Sprite-cfg-stroke'> /**
+</span> * @cfg {String} stroke The stroke color
+ */
+
+<span id='Ext-draw-Sprite-cfg-stroke'> /**
+</span> * @cfg {Number} stroke-width The width of the stroke
+ */
+
+<span id='Ext-draw-Sprite-cfg-font'> /**
+</span> * @cfg {String} font Used with text type sprites. The full font description. Uses the same syntax as the CSS font parameter
+ */
+
+<span id='Ext-draw-Sprite-cfg-text'> /**
+</span> * @cfg {String} text Used with text type sprites. The text itself
+ */
+
+<span id='Ext-draw-Sprite-cfg-group'> /**
+</span> * @cfg {String/String[]} group The group that this sprite belongs to, or an array of groups. Only relevant when added to a
+ * {@link Ext.draw.Surface}
+ */
+
+<span id='Ext-draw-Sprite-cfg-draggable'> /**
+</span> * @cfg {Boolean} draggable True to make the sprite draggable.
+ */
+
+ dirty: false,
+ dirtyHidden: false,
+ dirtyTransform: false,
+ dirtyPath: true,
+ dirtyFont: true,
+ zIndexDirty: true,
+ isSprite: true,
+ zIndex: 0,
+ fontProperties: [
+ 'font',
+ 'font-size',
+ 'font-weight',
+ 'font-style',
+ 'font-family',
+ 'text-anchor',
+ 'text'
+ ],
+ pathProperties: [
+ 'x',
+ 'y',
+ 'd',
+ 'path',
+ 'height',
+ 'width',
+ 'radius',
+ 'r',
+ 'rx',
+ 'ry',
+ 'cx',
+ 'cy'
+ ],
+ constructor: function(config) {
+ var me = this;
+ config = config || {};
+ me.id = Ext.id(null, 'ext-sprite-');
+ me.transformations = [];
+ Ext.copyTo(this, config, 'surface,group,type,draggable');
+ //attribute bucket
+ me.bbox = {};
+ me.attr = {
+ zIndex: 0,
+ translation: {
+ x: null,
+ y: null
+ },
+ rotation: {
+ degrees: null,
+ x: null,
+ y: null
+ },
+ scaling: {
+ x: null,
+ y: null,
+ cx: null,
+ cy: null
+ }
+ };
+ //delete not bucket attributes
+ delete config.surface;
+ delete config.group;
+ delete config.type;
+ delete config.draggable;
+ me.setAttributes(config);
+ me.addEvents(
+ 'beforedestroy',
+ 'destroy',
+ 'render',
+ 'mousedown',
+ 'mouseup',
+ 'mouseover',
+ 'mouseout',
+ 'mousemove',
+ 'click'
+ );
+ me.mixins.observable.constructor.apply(this, arguments);
+ },
+
+<span id='Ext-draw-Sprite-property-dd'> /**
+</span> * @property {Ext.dd.DragSource} dd
+ * If this Sprite is configured {@link #draggable}, this property will contain
+ * an instance of {@link Ext.dd.DragSource} which handles dragging the Sprite.
+ *
+ * The developer must provide implementations of the abstract methods of {@link Ext.dd.DragSource}
+ * in order to supply behaviour for each stage of the drag/drop process. See {@link #draggable}.
+ */
+
+ initDraggable: function() {
+ var me = this;
+ me.draggable = true;
+ //create element if it doesn't exist.
+ if (!me.el) {
+ me.surface.createSpriteElement(me);
+ }
+ me.dd = Ext.create('Ext.draw.SpriteDD', me, Ext.isBoolean(me.draggable) ? null : me.draggable);
+ me.on('beforedestroy', me.dd.destroy, me.dd);
+ },
+
+<span id='Ext-draw-Sprite-method-setAttributes'> /**
+</span> * Change the attributes of the sprite.
+ * @param {Object} attrs attributes to be changed on the sprite.
+ * @param {Boolean} redraw Flag to immediatly draw the change.
+ * @return {Ext.draw.Sprite} this
+ */
+ setAttributes: function(attrs, redraw) {
+ var me = this,
+ fontProps = me.fontProperties,
+ fontPropsLength = fontProps.length,
+ pathProps = me.pathProperties,
+ pathPropsLength = pathProps.length,
+ hasSurface = !!me.surface,
+ custom = hasSurface && me.surface.customAttributes || {},
+ spriteAttrs = me.attr,
+ attr, i, translate, translation, rotate, rotation, scale, scaling;
+
+ attrs = Ext.apply({}, attrs);
+ for (attr in custom) {
+ if (attrs.hasOwnProperty(attr) && typeof custom[attr] == "function") {
+ Ext.apply(attrs, custom[attr].apply(me, [].concat(attrs[attr])));
+ }
+ }
+
+ // Flag a change in hidden
+ if (!!attrs.hidden !== !!spriteAttrs.hidden) {
+ me.dirtyHidden = true;
+ }
+
+ // Flag path change
+ for (i = 0; i < pathPropsLength; i++) {
+ attr = pathProps[i];
+ if (attr in attrs && attrs[attr] !== spriteAttrs[attr]) {
+ me.dirtyPath = true;
+ break;
+ }
+ }