docs/source/Sprite.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-Sprite'>/**
  19 </span> * @class Ext.draw.Sprite
  20  * @extends Object
  21  *
  22  * A Sprite is an object rendered in a Drawing surface. There are different options and types of sprites.
  23  * The configuration of a Sprite is an object with the following properties:
  24  *
  25  * - **type** - (String) The type of the sprite. Possible options are 'circle', 'path', 'rect', 'text', 'square', 'image'.
  26  * - **width** - (Number) Used in rectangle sprites, the width of the rectangle.
  27  * - **height** - (Number) Used in rectangle sprites, the height of the rectangle.
  28  * - **size** - (Number) Used in square sprites, the dimension of the square.
  29  * - **radius** - (Number) Used in circle sprites, the radius of the circle.
  30  * - **x** - (Number) The position along the x-axis.
  31  * - **y** - (Number) The position along the y-axis.
  32  * - **path** - (Array) Used in path sprites, the path of the sprite written in SVG-like path syntax.
  33  * - **opacity** - (Number) The opacity of the sprite.
  34  * - **fill** - (String) The fill color.
  35  * - **stroke** - (String) The stroke color.
  36  * - **stroke-width** - (Number) The width of the stroke.
  37  * - **font** - (String) Used with text type sprites. The full font description. Uses the same syntax as the CSS `font` parameter.
  38  * - **text** - (String) Used with text type sprites. The text itself.
  39  *
  40  * Additionally there are three transform objects that can be set with `setAttributes` which are `translate`, `rotate` and
  41  * `scale`.
  42  *
  43  * For translate, the configuration object contains x and y attributes that indicate where to
  44  * translate the object. For example:
  45  *
  46  *     sprite.setAttributes({
  47  *       translate: {
  48  *        x: 10,
  49  *        y: 10
  50  *       }
  51  *     }, true);
  52  *
  53  * For rotation, the configuration object contains x and y attributes for the center of the rotation (which are optional),
  54  * and a `degrees` attribute that specifies the rotation in degrees. For example:
  55  *
  56  *     sprite.setAttributes({
  57  *       rotate: {
  58  *        degrees: 90
  59  *       }
  60  *     }, true);
  61  *
  62  * For scaling, the configuration object contains x and y attributes for the x-axis and y-axis scaling. For example:
  63  *
  64  *     sprite.setAttributes({
  65  *       scale: {
  66  *        x: 10,
  67  *        y: 3
  68  *       }
  69  *     }, true);
  70  *
  71  * Sprites can be created with a reference to a {@link Ext.draw.Surface}
  72  *
  73  *      var drawComponent = Ext.create('Ext.draw.Component', options here...);
  74  *
  75  *      var sprite = Ext.create('Ext.draw.Sprite', {
  76  *          type: 'circle',
  77  *          fill: '#ff0',
  78  *          surface: drawComponent.surface,
  79  *          radius: 5
  80  *      });
  81  *
  82  * Sprites can also be added to the surface as a configuration object:
  83  *
  84  *      var sprite = drawComponent.surface.add({
  85  *          type: 'circle',
  86  *          fill: '#ff0',
  87  *          radius: 5
  88  *      });
  89  *
  90  * In order to properly apply properties and render the sprite we have to
  91  * `show` the sprite setting the option `redraw` to `true`:
  92  *
  93  *      sprite.show(true);
  94  *
  95  * The constructor configuration object of the Sprite can also be used and passed into the {@link Ext.draw.Surface}
  96  * add method to append a new sprite to the canvas. For example:
  97  *
  98  *     drawComponent.surface.add({
  99  *         type: 'circle',
 100  *         fill: '#ffc',
 101  *         radius: 100,
 102  *         x: 100,
 103  *         y: 100
 104  *     });
 105  */
 106 Ext.define('Ext.draw.Sprite', {
 107     /* Begin Definitions */
 108
 109     mixins: {
 110         observable: 'Ext.util.Observable',
 111         animate: 'Ext.util.Animate'
 112     },
 113
 114     requires: ['Ext.draw.SpriteDD'],
 115
 116     /* End Definitions */
 117
 118     dirty: false,
 119     dirtyHidden: false,
 120     dirtyTransform: false,
 121     dirtyPath: true,
 122     dirtyFont: true,
 123     zIndexDirty: true,
 124     isSprite: true,
 125     zIndex: 0,
 126     fontProperties: [
 127         'font',
 128         'font-size',
 129         'font-weight',
 130         'font-style',
 131         'font-family',
 132         'text-anchor',
 133         'text'
 134     ],
 135     pathProperties: [
 136         'x',
 137         'y',
 138         'd',
 139         'path',
 140         'height',
 141         'width',
 142         'radius',
 143         'r',
 144         'rx',
 145         'ry',
 146         'cx',
 147         'cy'
 148     ],
 149     constructor: function(config) {
 150         var me = this;
 151         config = config || {};
 152         me.id = Ext.id(null, 'ext-sprite-');
 153         me.transformations = [];
 154         Ext.copyTo(this, config, 'surface,group,type,draggable');
 155         //attribute bucket
 156         me.bbox = {};
 157         me.attr = {
 158             zIndex: 0,
 159             translation: {
 160                 x: null,
 161                 y: null
 162             },
 163             rotation: {
 164                 degrees: null,
 165                 x: null,
 166                 y: null
 167             },
 168             scaling: {
 169                 x: null,
 170                 y: null,
 171                 cx: null,
 172                 cy: null
 173             }
 174         };
 175         //delete not bucket attributes
 176         delete config.surface;
 177         delete config.group;
 178         delete config.type;
 179         delete config.draggable;
 180         me.setAttributes(config);
 181         me.addEvents(
 182             'beforedestroy',
 183             'destroy',
 184             'render',
 185             'mousedown',
 186             'mouseup',
 187             'mouseover',
 188             'mouseout',
 189             'mousemove',
 190             'click'
 191         );
 192         me.mixins.observable.constructor.apply(this, arguments);
 193     },
 194
 195 <span id='Ext-draw-Sprite-property-dd'>    /**
 196 </span>     * &lt;p&gt;If this Sprite is configured {@link #draggable}, this property will contain
 197      * an instance of {@link Ext.dd.DragSource} which handles dragging the Sprite.&lt;/p&gt;
 198      * The developer must provide implementations of the abstract methods of {@link Ext.dd.DragSource}
 199      * in order to supply behaviour for each stage of the drag/drop process. See {@link #draggable}.
 200      * @type Ext.dd.DragSource.
 201      * @property dd
 202      */
 203     initDraggable: function() {
 204         var me = this;
 205         me.draggable = true;
 206         //create element if it doesn't exist.
 207         if (!me.el) {
 208             me.surface.createSpriteElement(me);
 209         }
 210         me.dd = Ext.create('Ext.draw.SpriteDD', me, Ext.isBoolean(me.draggable) ? null : me.draggable);
 211         me.on('beforedestroy', me.dd.destroy, me.dd);
 212     },
 213
 214 <span id='Ext-draw-Sprite-method-setAttributes'>    /**
 215 </span>     * Change the attributes of the sprite.
 216      * @param {Object} attrs attributes to be changed on the sprite.
 217      * @param {Boolean} redraw Flag to immediatly draw the change.
 218      * @return {Ext.draw.Sprite} this
 219      */
 220     setAttributes: function(attrs, redraw) {
 221         var me = this,
 222             fontProps = me.fontProperties,
 223             fontPropsLength = fontProps.length,
 224             pathProps = me.pathProperties,
 225             pathPropsLength = pathProps.length,
 226             hasSurface = !!me.surface,
 227             custom = hasSurface &amp;&amp; me.surface.customAttributes || {},
 228             spriteAttrs = me.attr,
 229             attr, i, translate, translation, rotate, rotation, scale, scaling;
 230
 231         attrs = Ext.apply({}, attrs);
 232         for (attr in custom) {
 233             if (attrs.hasOwnProperty(attr) &amp;&amp; typeof custom[attr] == &quot;function&quot;) {
 234                 Ext.apply(attrs, custom[attr].apply(me, [].concat(attrs[attr])));
 235             }
 236         }
 237
 238         // Flag a change in hidden
 239         if (!!attrs.hidden !== !!spriteAttrs.hidden) {
 240             me.dirtyHidden = true;
 241         }
 242
 243         // Flag path change
 244         for (i = 0; i &lt; pathPropsLength; i++) {
 245             attr = pathProps[i];
 246             if (attr in attrs &amp;&amp; attrs[attr] !== spriteAttrs[attr]) {
 247                 me.dirtyPath = true;
 248                 break;
 249             }
 250         }
 251
 252         // Flag zIndex change
 253         if ('zIndex' in attrs) {
 254             me.zIndexDirty = true;
 255         }
 256
 257         // Flag font/text change
 258         for (i = 0; i &lt; fontPropsLength; i++) {
 259             attr = fontProps[i];
 260             if (attr in attrs &amp;&amp; attrs[attr] !== spriteAttrs[attr]) {
 261                 me.dirtyFont = true;
 262                 break;
 263             }
 264         }
 265
 266         translate = attrs.translate;
 267         translation = spriteAttrs.translation;
 268         if (translate) {
 269             if ((translate.x &amp;&amp; translate.x !== translation.x) ||
 270                 (translate.y &amp;&amp; translate.y !== translation.y)) {
 271                 Ext.apply(translation, translate);
 272                 me.dirtyTransform = true;
 273             }
 274             delete attrs.translate;
 275         }
 276
 277         rotate = attrs.rotate;
 278         rotation = spriteAttrs.rotation;
 279         if (rotate) {
 280             if ((rotate.x &amp;&amp; rotate.x !== rotation.x) ||
 281                 (rotate.y &amp;&amp; rotate.y !== rotation.y) ||
 282                 (rotate.degrees &amp;&amp; rotate.degrees !== rotation.degrees)) {
 283                 Ext.apply(rotation, rotate);
 284                 me.dirtyTransform = true;
 285             }
 286             delete attrs.rotate;
 287         }
 288
 289         scale = attrs.scale;
 290         scaling = spriteAttrs.scaling;
 291         if (scale) {
 292             if ((scale.x &amp;&amp; scale.x !== scaling.x) ||
 293                 (scale.y &amp;&amp; scale.y !== scaling.y) ||
 294                 (scale.cx &amp;&amp; scale.cx !== scaling.cx) ||
 295                 (scale.cy &amp;&amp; scale.cy !== scaling.cy)) {
 296                 Ext.apply(scaling, scale);
 297                 me.dirtyTransform = true;
 298             }
 299             delete attrs.scale;
 300         }
 301
 302         Ext.apply(spriteAttrs, attrs);
 303         me.dirty = true;
 304
 305         if (redraw === true &amp;&amp; hasSurface) {
 306             me.redraw();
 307         }
 308         return this;
 309     },
 310
 311 <span id='Ext-draw-Sprite-method-getBBox'>    /**
 312 </span>     * Retrieve the bounding box of the sprite. This will be returned as an object with x, y, width, and height properties.
 313      * @return {Object} bbox
 314      */
 315     getBBox: function() {
 316         return this.surface.getBBox(this);
 317     },
 318
 319     setText: function(text) {
 320         return this.surface.setText(this, text);
 321     },
 322
 323 <span id='Ext-draw-Sprite-method-hide'>    /**
 324 </span>     * Hide the sprite.
 325      * @param {Boolean} redraw Flag to immediatly draw the change.
 326      * @return {Ext.draw.Sprite} this
 327      */
 328     hide: function(redraw) {
 329         this.setAttributes({
 330             hidden: true
 331         }, redraw);
 332         return this;
 333     },
 334
 335 <span id='Ext-draw-Sprite-method-show'>    /**
 336 </span>     * Show the sprite.
 337      * @param {Boolean} redraw Flag to immediatly draw the change.
 338      * @return {Ext.draw.Sprite} this
 339      */
 340     show: function(redraw) {
 341         this.setAttributes({
 342             hidden: false
 343         }, redraw);
 344         return this;
 345     },
 346
 347 <span id='Ext-draw-Sprite-method-remove'>    /**
 348 </span>     * Remove the sprite.
 349      */
 350     remove: function() {
 351         if (this.surface) {
 352             this.surface.remove(this);
 353             return true;
 354         }
 355         return false;
 356     },
 357
 358     onRemove: function() {
 359         this.surface.onRemove(this);
 360     },
 361
 362 <span id='Ext-draw-Sprite-method-destroy'>    /**
 363 </span>     * Removes the sprite and clears all listeners.
 364      */
 365     destroy: function() {
 366         var me = this;
 367         if (me.fireEvent('beforedestroy', me) !== false) {
 368             me.remove();
 369             me.surface.onDestroy(me);
 370             me.clearListeners();
 371             me.fireEvent('destroy');
 372         }
 373     },
 374
 375 <span id='Ext-draw-Sprite-method-redraw'>    /**
 376 </span>     * Redraw the sprite.
 377      * @return {Ext.draw.Sprite} this
 378      */
 379     redraw: function() {
 380         this.surface.renderItem(this);
 381         return this;
 382     },
 383
 384 <span id='Ext-draw-Sprite-method-setStyle'>    /**
 385 </span>     * Wrapper for setting style properties, also takes single object parameter of multiple styles.
 386      * @param {String/Object} property The style property to be set, or an object of multiple styles.
 387      * @param {String} value (optional) The value to apply to the given property, or null if an object was passed.
 388      * @return {Ext.draw.Sprite} this
 389      */
 390     setStyle: function() {
 391         this.el.setStyle.apply(this.el, arguments);
 392         return this;
 393     },
 394
 395 <span id='Ext-draw-Sprite-method-addCls'>    /**
 396 </span>     * Adds one or more CSS classes to the element. Duplicate classes are automatically filtered out.  Note this method
 397      * is severly limited in VML.
 398      * @param {String/Array} className The CSS class to add, or an array of classes
 399      * @return {Ext.draw.Sprite} this
 400      */
 401     addCls: function(obj) {
 402         this.surface.addCls(this, obj);
 403         return this;
 404     },
 405
 406 <span id='Ext-draw-Sprite-method-removeCls'>    /**
 407 </span>     * Removes one or more CSS classes from the element.
 408      * @param {String/Array} className The CSS class to remove, or an array of classes.  Note this method
 409      * is severly limited in VML.
 410      * @return {Ext.draw.Sprite} this
 411      */
 412     removeCls: function(obj) {
 413         this.surface.removeCls(this, obj);
 414         return this;
 415     }
 416 });
 417 </pre>
 418 </body>
 419 </html>