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="../prettify/prettify.css" type="text/css" rel="stylesheet" />
   7   <script type="text/javascript" src="../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 <span id='Ext-draw-CompositeSprite-method-add'>    /** Add a Sprite to the Group */
 115 </span>    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 <span id='Ext-draw-CompositeSprite-method-remove'>    /** Remove a Sprite from the Group */
 126 </span>    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         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     */
 144     getBBox: function() {
 145         var i = 0,
 146             sprite,
 147             bb,
 148             items = this.items,
 149             len = this.length,
 150             infinity = Infinity,
 151             minX = infinity,
 152             maxHeight = -infinity,
 153             minY = infinity,
 154             maxWidth = -infinity,
 155             maxWidthBBox, maxHeightBBox;
 156
 157         for (; i &lt; len; i++) {
 158             sprite = items[i];
 159             if (sprite.el) {
 160                 bb = sprite.getBBox();
 161                 minX = Math.min(minX, bb.x);
 162                 minY = Math.min(minY, bb.y);
 163                 maxHeight = Math.max(maxHeight, bb.height + bb.y);
 164                 maxWidth = Math.max(maxWidth, bb.width + bb.x);
 165             }
 166         }
 167
 168         return {
 169             x: minX,
 170             y: minY,
 171             height: maxHeight - minY,
 172             width: maxWidth - minX
 173         };
 174     },
 175
 176 <span id='Ext-draw-CompositeSprite-method-setAttributes'>    /**
 177 </span>     *  Iterates through all sprites calling
 178      *  `setAttributes` on each one. For more information
 179      *  {@link Ext.draw.Sprite} provides a description of the
 180      *  attributes that can be set with this method.
 181      */
 182     setAttributes: function(attrs, redraw) {
 183         var i = 0,
 184             items = this.items,
 185             len = this.length;
 186
 187         for (; i &lt; len; i++) {
 188             items[i].setAttributes(attrs, redraw);
 189         }
 190         return this;
 191     },
 192
 193 <span id='Ext-draw-CompositeSprite-method-hide'>    /**
 194 </span>     * Hides all sprites. If the first parameter of the method is true
 195      * then a redraw will be forced for each sprite.
 196      */
 197     hide: function(redraw) {
 198         var i = 0,
 199             items = this.items,
 200             len = this.length;
 201
 202         for (; i &lt; len; i++) {
 203             items[i].hide(redraw);
 204         }
 205         return this;
 206     },
 207
 208 <span id='Ext-draw-CompositeSprite-method-show'>    /**
 209 </span>     * Shows all sprites. If the first parameter of the method is true
 210      * then a redraw will be forced for each sprite.
 211      */
 212     show: function(redraw) {
 213         var i = 0,
 214             items = this.items,
 215             len = this.length;
 216
 217         for (; i &lt; len; i++) {
 218             items[i].show(redraw);
 219         }
 220         return this;
 221     },
 222
 223     redraw: function() {
 224         var me = this,
 225             i = 0,
 226             items = me.items,
 227             surface = me.getSurface(),
 228             len = me.length;
 229
 230         if (surface) {
 231             for (; i &lt; len; i++) {
 232                 surface.renderItem(items[i]);
 233             }
 234         }
 235         return me;
 236     },
 237
 238     setStyle: function(obj) {
 239         var i = 0,
 240             items = this.items,
 241             len = this.length,
 242             item, el;
 243
 244         for (; i &lt; len; i++) {
 245             item = items[i];
 246             el = item.el;
 247             if (el) {
 248                 el.setStyle(obj);
 249             }
 250         }
 251     },
 252
 253     addCls: function(obj) {
 254         var i = 0,
 255             items = this.items,
 256             surface = this.getSurface(),
 257             len = this.length;
 258
 259         if (surface) {
 260             for (; i &lt; len; i++) {
 261                 surface.addCls(items[i], obj);
 262             }
 263         }
 264     },
 265
 266     removeCls: function(obj) {
 267         var i = 0,
 268             items = this.items,
 269             surface = this.getSurface(),
 270             len = this.length;
 271
 272         if (surface) {
 273             for (; i &lt; len; i++) {
 274                 surface.removeCls(items[i], obj);
 275             }
 276         }
 277     },
 278
 279 <span id='Ext-draw-CompositeSprite-method-getSurface'>    /**
 280 </span>     * Grab the surface from the items
 281      * @private
 282      * @return {Ext.draw.Surface} The surface, null if not found
 283      */
 284     getSurface: function(){
 285         var first = this.first();
 286         if (first) {
 287             return first.surface;
 288         }
 289         return null;
 290     },
 291
 292 <span id='Ext-draw-CompositeSprite-method-destroy'>    /**
 293 </span>     * Destroys the SpriteGroup
 294      */
 295     destroy: function(){
 296         var me = this,
 297             surface = me.getSurface(),
 298             item;
 299
 300         if (surface) {
 301             while (me.getCount() &gt; 0) {
 302                 item = me.first();
 303                 me.remove(item);
 304                 surface.remove(item);
 305             }
 306         }
 307         me.clearListeners();
 308     }
 309 });
 310 </pre>
 311 </body>
 312 </html>