CompositeSprite2.html 9.9 KB

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