docs/source/CompositeSprite.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   5   <title>The source code</title>
   6   <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
   7   <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
   8   <style type="text/css">
   9     .highlight { display: block; background-color: #ddd; }
  10   </style>
  11   <script type="text/javascript">
  12     function highlight() {
  13       document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
  14     }
  15   </script>
  16 </head>
  17 <body onload="prettyPrint(); highlight();">
  18   <pre class="prettyprint lang-js"><span id='Ext-draw-CompositeSprite'>/**
  19 </span> * @class Ext.draw.CompositeSprite
  20  * @extends Ext.util.MixedCollection
  21  *
  22  * A composite Sprite handles a group of sprites with common methods to a sprite
  23  * such as `hide`, `show`, `setAttributes`. These methods are applied to the set of sprites
  24  * added to the group.
  25  *
  26  * CompositeSprite extends {@link Ext.util.MixedCollection} so you can use the same methods
  27  * in `MixedCollection` to iterate through sprites, add and remove elements, etc.
  28  *
  29  * In order to create a CompositeSprite, one has to provide a handle to the surface where it is
  30  * rendered:
  31  *
  32  *     var group = Ext.create('Ext.draw.CompositeSprite', {
  33  *         surface: drawComponent.surface
  34  *     });
  35  *
  36  * Then just by using `MixedCollection` methods it's possible to add {@link Ext.draw.Sprite}s:
  37  *
  38  *     group.add(sprite1);
  39  *     group.add(sprite2);
  40  *     group.add(sprite3);
  41  *
  42  * And then apply common Sprite methods to them:
  43  *
  44  *     group.setAttributes({
  45  *         fill: '#f00'
  46  *     }, true);
  47  */
  48 Ext.define('Ext.draw.CompositeSprite', {
  49
  50     /* Begin Definitions */
  51
  52     extend: 'Ext.util.MixedCollection',
  53     mixins: {
  54         animate: 'Ext.util.Animate'
  55     },
  56
  57     /* End Definitions */
  58     isCompositeSprite: true,
  59     constructor: function(config) {
  60         var me = this;
  61
  62         config = config || {};
  63         Ext.apply(me, config);
  64
  65         me.addEvents(
  66             'mousedown',
  67             'mouseup',
  68             'mouseover',
  69             'mouseout',
  70             'click'
  71         );
  72         me.id = Ext.id(null, 'ext-sprite-group-');
  73         me.callParent();
  74     },
  75
  76     // @private
  77     onClick: function(e) {
  78         this.fireEvent('click', e);
  79     },
  80
  81     // @private
  82     onMouseUp: function(e) {
  83         this.fireEvent('mouseup', e);
  84     },
  85
  86     // @private
  87     onMouseDown: function(e) {
  88         this.fireEvent('mousedown', e);
  89     },
  90
  91     // @private
  92     onMouseOver: function(e) {
  93         this.fireEvent('mouseover', e);
  94     },
  95
  96     // @private
  97     onMouseOut: function(e) {
  98         this.fireEvent('mouseout', e);
  99     },
 100
 101     attachEvents: function(o) {
 102         var me = this;
 103
 104         o.on({
 105             scope: me,
 106             mousedown: me.onMouseDown,
 107             mouseup: me.onMouseUp,
 108             mouseover: me.onMouseOver,
 109             mouseout: me.onMouseOut,
 110             click: me.onClick
 111         });
 112     },
 113
 114     // Inherit docs from MixedCollection
 115     add: function(key, o) {
 116         var result = this.callParent(arguments);
 117         this.attachEvents(result);
 118         return result;
 119     },
 120
 121     insert: function(index, key, o) {
 122         return this.callParent(arguments);
 123     },
 124
 125     // Inherit docs from MixedCollection
 126     remove: function(o) {
 127         var me = this;
 128
 129         o.un({
 130             scope: me,
 131             mousedown: me.onMouseDown,
 132             mouseup: me.onMouseUp,
 133             mouseover: me.onMouseOver,
 134             mouseout: me.onMouseOut,
 135             click: me.onClick
 136         });
 137         return me.callParent(arguments);
 138     },
 139
 140 <span id='Ext-draw-CompositeSprite-method-getBBox'>    /**
 141 </span>     * Returns the group bounding box.
 142      * Behaves like {@link Ext.draw.Sprite#getBBox} method.
 143      * @return {Object} an object with x, y, width, and height properties.
 144      */
 145     getBBox: function() {
 146         var i = 0,
 147             sprite,
 148             bb,
 149             items = this.items,
 150             len = this.length,
 151             infinity = Infinity,
 152             minX = infinity,
 153             maxHeight = -infinity,
 154             minY = infinity,
 155             maxWidth = -infinity,
 156             maxWidthBBox, maxHeightBBox;
 157
 158         for (; i &lt; len; i++) {
 159             sprite = items[i];
 160             if (sprite.el) {
 161                 bb = sprite.getBBox();
 162                 minX = Math.min(minX, bb.x);
 163                 minY = Math.min(minY, bb.y);
 164                 maxHeight = Math.max(maxHeight, bb.height + bb.y);
 165                 maxWidth = Math.max(maxWidth, bb.width + bb.x);
 166             }
 167         }
 168
 169         return {
 170             x: minX,
 171             y: minY,
 172             height: maxHeight - minY,
 173             width: maxWidth - minX
 174         };
 175     },
 176
 177 <span id='Ext-draw-CompositeSprite-method-setAttributes'>    /**
 178 </span>     * Iterates through all sprites calling `setAttributes` on each one. For more information {@link Ext.draw.Sprite}
 179      * provides a description of the attributes that can be set with this method.
 180      * @param {Object} attrs Attributes to be changed on the sprite.
 181      * @param {Boolean} redraw Flag to immediatly draw the change.
 182      * @return {Ext.draw.CompositeSprite} this
 183      */
 184     setAttributes: function(attrs, redraw) {
 185         var i = 0,
 186             items = this.items,
 187             len = this.length;
 188
 189         for (; i &lt; len; i++) {
 190             items[i].setAttributes(attrs, redraw);
 191         }
 192         return this;
 193     },
 194
 195 <span id='Ext-draw-CompositeSprite-method-hide'>    /**
 196 </span>     * Hides all sprites. If the first parameter of the method is true
 197      * then a redraw will be forced for each sprite.
 198      * @param {Boolean} redraw Flag to immediatly draw the change.
 199      * @return {Ext.draw.CompositeSprite} this
 200      */
 201     hide: function(redraw) {
 202         var i = 0,
 203             items = this.items,
 204             len = this.length;
 205
 206         for (; i &lt; len; i++) {
 207             items[i].hide(redraw);
 208         }
 209         return this;
 210     },
 211
 212 <span id='Ext-draw-CompositeSprite-method-show'>    /**
 213 </span>     * Shows all sprites. If the first parameter of the method is true
 214      * then a redraw will be forced for each sprite.
 215      * @param {Boolean} redraw Flag to immediatly draw the change.
 216      * @return {Ext.draw.CompositeSprite} this
 217      */
 218     show: function(redraw) {
 219         var i = 0,
 220             items = this.items,
 221             len = this.length;
 222
 223         for (; i &lt; len; i++) {
 224             items[i].show(redraw);
 225         }
 226         return this;
 227     },
 228
 229     redraw: function() {
 230         var me = this,
 231             i = 0,
 232             items = me.items,
 233             surface = me.getSurface(),
 234             len = me.length;
 235
 236         if (surface) {
 237             for (; i &lt; len; i++) {
 238                 surface.renderItem(items[i]);
 239             }
 240         }
 241         return me;
 242     },
 243
 244     setStyle: function(obj) {
 245         var i = 0,
 246             items = this.items,
 247             len = this.length,
 248             item, el;
 249
 250         for (; i &lt; len; i++) {
 251             item = items[i];
 252             el = item.el;
 253             if (el) {
 254                 el.setStyle(obj);
 255             }
 256         }
 257     },
 258
 259     addCls: function(obj) {
 260         var i = 0,
 261             items = this.items,
 262             surface = this.getSurface(),
 263             len = this.length;
 264
 265         if (surface) {
 266             for (; i &lt; len; i++) {
 267                 surface.addCls(items[i], obj);
 268             }
 269         }
 270     },
 271
 272     removeCls: function(obj) {
 273         var i = 0,
 274             items = this.items,
 275             surface = this.getSurface(),
 276             len = this.length;
 277
 278         if (surface) {
 279             for (; i &lt; len; i++) {
 280                 surface.removeCls(items[i], obj);
 281             }
 282         }
 283     },
 284
 285 <span id='Ext-draw-CompositeSprite-method-getSurface'>    /**
 286 </span>     * Grab the surface from the items
 287      * @private
 288      * @return {Ext.draw.Surface} The surface, null if not found
 289      */
 290     getSurface: function(){
 291         var first = this.first();
 292         if (first) {
 293             return first.surface;
 294         }
 295         return null;
 296     },
 297
 298 <span id='Ext-draw-CompositeSprite-method-destroy'>    /**
 299 </span>     * Destroys the SpriteGroup
 300      */
 301     destroy: function(){
 302         var me = this,
 303             surface = me.getSurface(),
 304             item;
 305
 306         if (surface) {
 307             while (me.getCount() &gt; 0) {
 308                 item = me.first();
 309                 me.remove(item);
 310                 surface.remove(item);
 311             }
 312         }
 313         me.clearListeners();
 314     }
 315 });
 316 </pre>
 317 </body>
 318 </html>