/* * @class Ext.draw.Sprite * @extends Object * Base drawing spriteitive class. Provides bucket for all spriteitive attributes and basic methods for updating them. */ Ext.define('Ext.draw.Sprite', { /* Begin Definitions */ mixins: { observable: 'Ext.util.Observable' }, /* End Definitions */ 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) { config = config || {}; this.id = Ext.id(null, 'ext-sprite-'); this.transformations = []; Ext.copyTo(this, config, 'surface,group,type'); //attribute bucket this.bbox = {}; this.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; this.setAttributes(config); this.addEvents( 'render', 'mousedown', 'mouseup', 'mouseover', 'mouseout', 'click' ); this.mixins.observable.constructor.apply(this, arguments); }, setAttributes: function(attrs, redraw) { var me = this, fontProps = me.fontProperties, fontPropsLength = fontProps.length, pathProps = me.pathProperties, pathPropsLength = pathProps.length, custom = me.surface.customAttributes, spriteAttrs = me.attr, attr, i, translate, translation, rotate, rotation, scale, scaling; 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; } } // Flag zIndex change if ('zIndex' in attrs) { me.zIndexDirty = true; } // Flag font/text change for (i = 0; i < fontPropsLength; i++) { attr = fontProps[i]; if (attr in attrs && attrs[attr] !== spriteAttrs[attr]) { me.dirtyFont = true; break; } } translate = attrs.translate; translation = spriteAttrs.translation; if (translate) { if ((translate.x && translate.x !== translation.x) || (translate.y && translate.y !== translation.y)) { Ext.apply(translation, translate); me.dirtyTransform = true; } delete attrs.translate; } rotate = attrs.rotate; rotation = spriteAttrs.rotation; if (rotate) { if ((rotate.x && rotate.x !== rotation.x) || (rotate.y && rotate.y !== rotation.y) || (rotate.degrees && rotate.degrees !== rotation.degrees)) { Ext.apply(rotation, rotate); me.dirtyTransform = true; } delete attrs.rotate; } scale = attrs.scale; scaling = spriteAttrs.scaling; if (scale) { if ((scale.x && scale.x !== scaling.x) || (scale.y && scale.y !== scaling.y) || (scale.cx && scale.cx !== scaling.cx) || (scale.cy && scale.cy !== scaling.cy)) { Ext.apply(scaling, scale); me.dirtyTransform = true; } delete attrs.scale; } Ext.apply(spriteAttrs, attrs); me.dirty = true; if (redraw === true) { me.redraw(); } }, getBBox: function() { return this.surface.getBBox(this); }, hide: function(redraw) { this.setAttributes({ hidden: true }, redraw); }, show: function(redraw) { this.setAttributes({ hidden: false }, redraw); }, redraw: function() { this.surface.renderItem(this); }, /** * Wrapper for setting style properties, also takes single object parameter of multiple styles. * @param {String/Object} property The style property to be set, or an object of multiple styles. * @param {String} value (optional) The value to apply to the given property, or null if an object was passed. * @return {Ext.draw.Sprite} this */ setStyle: function() { this.el.setStyle.apply(this.el, arguments); return this; }, /** * Adds one or more CSS classes to the element. Duplicate classes are automatically filtered out. * @param {String/Array} className The CSS class to add, or an array of classes * @return {Ext.draw.Sprite} this */ addCls: function(obj) { this.surface.addCls(this, obj); }, /** * Removes one or more CSS classes from the element. * @param {String/Array} className The CSS class to remove, or an array of classes * @return {Ext.draw.Sprite} this */ removeCls: function(obj) { this.surface.removeCls(this, obj); } });