/*
|
This file is part of Ext JS 4.2
|
|
Copyright (c) 2011-2013 Sencha Inc
|
|
Contact: http://www.sencha.com/contact
|
|
GNU General Public License Usage
|
This file may be used under the terms of the GNU General Public License version 3.0 as
|
published by the Free Software Foundation and appearing in the file LICENSE included in the
|
packaging of this file.
|
|
Please review the following information to ensure the GNU General Public License version 3.0
|
requirements will be met: http://www.gnu.org/copyleft/gpl.html.
|
|
If you are unsure which license is appropriate for your use, please contact the sales department
|
at http://www.sencha.com/contact.
|
|
Build date: 2013-05-16 14:36:50 (f9be68accb407158ba2b1be2c226a6ce1f649314)
|
*/
|
/**
|
* A composite Sprite handles a group of sprites with common methods to a sprite
|
* such as `hide`, `show`, `setAttributes`. These methods are applied to the set of sprites
|
* added to the group.
|
*
|
* CompositeSprite extends {@link Ext.util.MixedCollection} so you can use the same methods
|
* in `MixedCollection` to iterate through sprites, add and remove elements, etc.
|
*
|
* In order to create a CompositeSprite, one has to provide a handle to the surface where it is
|
* rendered:
|
*
|
* var group = Ext.create('Ext.draw.CompositeSprite', {
|
* surface: drawComponent.surface
|
* });
|
*
|
* Then just by using `MixedCollection` methods it's possible to add {@link Ext.draw.Sprite}s:
|
*
|
* group.add(sprite1);
|
* group.add(sprite2);
|
* group.add(sprite3);
|
*
|
* And then apply common Sprite methods to them:
|
*
|
* group.setAttributes({
|
* fill: '#f00'
|
* }, true);
|
*/
|
Ext.define('Ext.draw.CompositeSprite', {
|
|
/* Begin Definitions */
|
|
extend: 'Ext.util.MixedCollection',
|
mixins: {
|
animate: 'Ext.util.Animate'
|
},
|
autoDestroy: false,
|
|
/* End Definitions */
|
isCompositeSprite: true,
|
constructor: function(config) {
|
var me = this;
|
|
config = config || {};
|
Ext.apply(me, config);
|
|
me.addEvents(
|
/**
|
* @event
|
* @inheritdoc Ext.draw.Sprite#mousedown
|
*/
|
'mousedown',
|
/**
|
* @event
|
* @inheritdoc Ext.draw.Sprite#mouseup
|
*/
|
'mouseup',
|
/**
|
* @event
|
* @inheritdoc Ext.draw.Sprite#mouseover
|
*/
|
'mouseover',
|
/**
|
* @event
|
* @inheritdoc Ext.draw.Sprite#mouseout
|
*/
|
'mouseout',
|
/**
|
* @event
|
* @inheritdoc Ext.draw.Sprite#click
|
*/
|
'click'
|
);
|
me.id = Ext.id(null, 'ext-sprite-group-');
|
me.callParent();
|
},
|
|
// @private
|
onClick: function(e) {
|
this.fireEvent('click', e);
|
},
|
|
// @private
|
onMouseUp: function(e) {
|
this.fireEvent('mouseup', e);
|
},
|
|
// @private
|
onMouseDown: function(e) {
|
this.fireEvent('mousedown', e);
|
},
|
|
// @private
|
onMouseOver: function(e) {
|
this.fireEvent('mouseover', e);
|
},
|
|
// @private
|
onMouseOut: function(e) {
|
this.fireEvent('mouseout', e);
|
},
|
|
attachEvents: function(o) {
|
var me = this;
|
|
o.on({
|
scope: me,
|
mousedown: me.onMouseDown,
|
mouseup: me.onMouseUp,
|
mouseover: me.onMouseOver,
|
mouseout: me.onMouseOut,
|
click: me.onClick
|
});
|
},
|
|
// Inherit docs from MixedCollection
|
add: function(key, o) {
|
var result = this.callParent(arguments);
|
this.attachEvents(result);
|
return result;
|
},
|
|
insert: function(index, key, o) {
|
return this.callParent(arguments);
|
},
|
|
// Inherit docs from MixedCollection
|
remove: function(o) {
|
var me = this;
|
|
o.un({
|
scope: me,
|
mousedown: me.onMouseDown,
|
mouseup: me.onMouseUp,
|
mouseover: me.onMouseOver,
|
mouseout: me.onMouseOut,
|
click: me.onClick
|
});
|
return me.callParent(arguments);
|
},
|
|
/**
|
* Returns the group bounding box.
|
* Behaves like {@link Ext.draw.Sprite#getBBox} method.
|
* @return {Object} an object with x, y, width, and height properties.
|
*/
|
getBBox: function() {
|
var i = 0,
|
sprite,
|
bb,
|
items = this.items,
|
len = this.length,
|
infinity = Infinity,
|
minX = infinity,
|
maxHeight = -infinity,
|
minY = infinity,
|
maxWidth = -infinity,
|
maxWidthBBox, maxHeightBBox;
|
|
for (; i < len; i++) {
|
sprite = items[i];
|
if (sprite.el && ! sprite.bboxExcluded) {
|
bb = sprite.getBBox();
|
minX = Math.min(minX, bb.x);
|
minY = Math.min(minY, bb.y);
|
maxHeight = Math.max(maxHeight, bb.height + bb.y);
|
maxWidth = Math.max(maxWidth, bb.width + bb.x);
|
}
|
}
|
|
return {
|
x: minX,
|
y: minY,
|
height: maxHeight - minY,
|
width: maxWidth - minX
|
};
|
},
|
|
/**
|
* Iterates through all sprites calling `setAttributes` on each one. For more information {@link Ext.draw.Sprite}
|
* provides a description of the attributes that can be set with this method.
|
* @param {Object} attrs Attributes to be changed on the sprite.
|
* @param {Boolean} redraw Flag to immediately draw the change.
|
* @return {Ext.draw.CompositeSprite} this
|
*/
|
setAttributes: function(attrs, redraw) {
|
var i = 0,
|
items = this.items,
|
len = this.length;
|
|
for (; i < len; i++) {
|
items[i].setAttributes(attrs, redraw);
|
}
|
return this;
|
},
|
|
/**
|
* Hides all sprites. If `true` is passed then a redraw will be forced for each sprite.
|
* @param {Boolean} redraw Flag to immediately draw the change.
|
* @return {Ext.draw.CompositeSprite} this
|
*/
|
hide: function(redraw) {
|
var i = 0,
|
items = this.items,
|
len = this.length;
|
|
for (; i < len; i++) {
|
items[i].hide(redraw);
|
}
|
return this;
|
},
|
|
/**
|
* Shows all sprites. If `true` is passed then a redraw will be forced for each sprite.
|
* @param {Boolean} redraw Flag to immediately draw the change.
|
* @return {Ext.draw.CompositeSprite} this
|
*/
|
show: function(redraw) {
|
var i = 0,
|
items = this.items,
|
len = this.length;
|
|
for (; i < len; i++) {
|
items[i].show(redraw);
|
}
|
return this;
|
},
|
|
/**
|
* Force redraw of all sprites.
|
*/
|
redraw: function() {
|
var me = this,
|
i = 0,
|
items = me.items,
|
surface = me.getSurface(),
|
len = me.length;
|
|
if (surface) {
|
for (; i < len; i++) {
|
surface.renderItem(items[i]);
|
}
|
}
|
return me;
|
},
|
|
/**
|
* Sets style for all sprites.
|
* @param {String} style CSS Style definition.
|
*/
|
setStyle: function(obj) {
|
var i = 0,
|
items = this.items,
|
len = this.length,
|
item, el;
|
|
for (; i < len; i++) {
|
item = items[i];
|
el = item.el;
|
if (el) {
|
el.setStyle(obj);
|
}
|
}
|
},
|
|
/**
|
* Adds class to all sprites.
|
* @param {String} cls CSS class name
|
*/
|
addCls: function(obj) {
|
var i = 0,
|
items = this.items,
|
surface = this.getSurface(),
|
len = this.length;
|
|
if (surface) {
|
for (; i < len; i++) {
|
surface.addCls(items[i], obj);
|
}
|
}
|
},
|
|
/**
|
* Removes class from all sprites.
|
* @param {String} cls CSS class name
|
*/
|
removeCls: function(obj) {
|
var i = 0,
|
items = this.items,
|
surface = this.getSurface(),
|
len = this.length;
|
|
if (surface) {
|
for (; i < len; i++) {
|
surface.removeCls(items[i], obj);
|
}
|
}
|
},
|
|
/**
|
* Grab the surface from the items
|
* @private
|
* @return {Ext.draw.Surface} The surface, null if not found
|
*/
|
getSurface: function(){
|
var first = this.first();
|
if (first) {
|
return first.surface;
|
}
|
return null;
|
},
|
|
/**
|
* Destroys this CompositeSprite.
|
*/
|
destroy: function(){
|
var me = this,
|
surface = me.getSurface(),
|
destroySprites = me.autoDestroy,
|
item;
|
|
if (surface) {
|
while (me.getCount() > 0) {
|
item = me.first();
|
me.remove(item);
|
surface.remove(item, destroySprites);
|
}
|
}
|
me.clearListeners();
|
}
|
});
|
