/**
+ * A Sprite is an object rendered in a Drawing surface.
*
- * A Sprite is an object rendered in a Drawing surface. There are different options and types of sprites.
- * The configuration of a Sprite is an object with the following properties:
+ * # Translation
*
- * - **type** - (String) The type of the sprite. Possible options are 'circle', 'path', 'rect', 'text', 'square'.
- * - **width** - (Number) Used in rectangle sprites, the width of the rectangle.
- * - **height** - (Number) Used in rectangle sprites, the height of the rectangle.
- * - **size** - (Number) Used in square sprites, the dimension of the square.
- * - **radius** - (Number) Used in circle sprites, the radius of the circle.
- * - **x** - (Number) The position along the x-axis.
- * - **y** - (Number) The position along the y-axis.
- * - **path** - (Array) Used in path sprites, the path of the sprite written in SVG-like path syntax.
- * - **opacity** - (Number) The opacity of the sprite.
- * - **fill** - (String) The fill color.
- * - **stroke** - (String) The stroke color.
- * - **stroke-width** - (Number) The width of the stroke.
- * - **font** - (String) Used with text type sprites. The full font description. Uses the same syntax as the CSS `font` parameter.
- * - **text** - (String) Used with text type sprites. The text itself.
- *
- * Additionally there are three transform objects that can be set with `setAttributes` which are `translate`, `rotate` and
- * `scale`.
- *
* For translate, the configuration object contains x and y attributes that indicate where to
* translate the object. For example:
- *
+ *
* sprite.setAttributes({
* translate: {
* x: 10,
* y: 10
* }
* }, true);
- *
+ *
+ *
+ * # Rotation
+ *
* For rotation, the configuration object contains x and y attributes for the center of the rotation (which are optional),
* and a `degrees` attribute that specifies the rotation in degrees. For example:
- *
+ *
* sprite.setAttributes({
* rotate: {
* degrees: 90
* }
* }, true);
- *
+ *
+ * That example will create a 90 degrees rotation using the centroid of the Sprite as center of rotation, whereas:
+ *
+ * sprite.setAttributes({
+ * rotate: {
+ * x: 0,
+ * y: 0,
+ * degrees: 90
+ * }
+ * }, true);
+ *
+ * will create a rotation around the `(0, 0)` axis.
+ *
+ *
+ * # Scaling
+ *
* For scaling, the configuration object contains x and y attributes for the x-axis and y-axis scaling. For example:
- *
+ *
+ * sprite.setAttributes({
+ * scale: {
+ * x: 10,
+ * y: 3
+ * }
+ * }, true);
+ *
+ * You can also specify the center of scaling by adding `cx` and `cy` as properties:
+ *
* sprite.setAttributes({
* scale: {
+ * cx: 0,
+ * cy: 0,
* x: 10,
* y: 3
* }
* }, true);
*
+ * That last example will scale a sprite taking as centers of scaling the `(0, 0)` coordinate.
+ *
+ *
+ * # Creating and adding a Sprite to a Surface
+ *
* Sprites can be created with a reference to a {@link Ext.draw.Surface}
*
- * var drawComponent = Ext.create('Ext.draw.Component', options here...);
+ * var drawComponent = Ext.create('Ext.draw.Component', options here...);
*
- * var sprite = Ext.create('Ext.draw.Sprite', {
- * type: 'circle',
- * fill: '#ff0',
- * surface: drawComponent.surface,
- * radius: 5
- * });
+ * var sprite = Ext.create('Ext.draw.Sprite', {
+ * type: 'circle',
+ * fill: '#ff0',
+ * surface: drawComponent.surface,
+ * radius: 5
+ * });
*
* Sprites can also be added to the surface as a configuration object:
*
- * var sprite = drawComponent.surface.add({
- * type: 'circle',
- * fill: '#ff0',
- * radius: 5
- * });
+ * var sprite = drawComponent.surface.add({
+ * type: 'circle',
+ * fill: '#ff0',
+ * radius: 5
+ * });
*
* In order to properly apply properties and render the sprite we have to
* `show` the sprite setting the option `redraw` to `true`:
*
- * sprite.show(true);
+ * sprite.show(true);
*
* The constructor configuration object of the Sprite can also be used and passed into the {@link Ext.draw.Surface}
* add method to append a new sprite to the canvas. For example:
@@ -87,6 +118,7 @@
* });
*/
Ext.define('Ext.draw.Sprite', {
+
/* Begin Definitions */
mixins: {
@@ -98,6 +130,71 @@ Ext.define('Ext.draw.Sprite', {
/* End Definitions */
+ /**
+ * @cfg {String} type The type of the sprite. Possible options are 'circle', 'path', 'rect', 'text', 'square', 'image'
+ */
+
+ /**
+ * @cfg {Number} width Used in rectangle sprites, the width of the rectangle
+ */
+
+ /**
+ * @cfg {Number} height Used in rectangle sprites, the height of the rectangle
+ */
+
+ /**
+ * @cfg {Number} size Used in square sprites, the dimension of the square
+ */
+
+ /**
+ * @cfg {Number} radius Used in circle sprites, the radius of the circle
+ */
+
+ /**
+ * @cfg {Number} x The position along the x-axis
+ */
+
+ /**
+ * @cfg {Number} y The position along the y-axis
+ */
+
+ /**
+ * @cfg {Array} path Used in path sprites, the path of the sprite written in SVG-like path syntax
+ */
+
+ /**
+ * @cfg {Number} opacity The opacity of the sprite
+ */
+
+ /**
+ * @cfg {String} fill The fill color
+ */
+
+ /**
+ * @cfg {String} stroke The stroke color
+ */
+
+ /**
+ * @cfg {Number} stroke-width The width of the stroke
+ */
+
+ /**
+ * @cfg {String} font Used with text type sprites. The full font description. Uses the same syntax as the CSS font parameter
+ */
+
+ /**
+ * @cfg {String} text Used with text type sprites. The text itself
+ */
+
+ /**
+ * @cfg {String/String[]} group The group that this sprite belongs to, or an array of groups. Only relevant when added to a
+ * {@link Ext.draw.Surface}
+ */
+
+ /**
+ * @cfg {Boolean} draggable True to make the sprite draggable.
+ */
+
dirty: false,
dirtyHidden: false,
dirtyTransform: false,
@@ -175,26 +272,27 @@ Ext.define('Ext.draw.Sprite', {
me.mixins.observable.constructor.apply(this, arguments);
},
- /**
- * <p>If this Sprite is configured {@link #draggable}, this property will contain
- * an instance of {@link Ext.dd.DragSource} which handles dragging the Sprite.</p>
+ /**
+ * @property {Ext.dd.DragSource} dd
+ * If this Sprite is configured {@link #draggable}, this property will contain
+ * an instance of {@link Ext.dd.DragSource} which handles dragging the Sprite.
+ *
* The developer must provide implementations of the abstract methods of {@link Ext.dd.DragSource}
* in order to supply behaviour for each stage of the drag/drop process. See {@link #draggable}.
- * @type Ext.dd.DragSource.
- * @property dd
*/
+
initDraggable: function() {
var me = this;
me.draggable = true;
//create element if it doesn't exist.
if (!me.el) {
- me.surface.createSprite(me);
+ me.surface.createSpriteElement(me);
}
me.dd = Ext.create('Ext.draw.SpriteDD', me, Ext.isBoolean(me.draggable) ? null : me.draggable);
me.on('beforedestroy', me.dd.destroy, me.dd);
},
- /**
+ /**
* Change the attributes of the sprite.
* @param {Object} attrs attributes to be changed on the sprite.
* @param {Boolean} redraw Flag to immediatly draw the change.
@@ -211,6 +309,7 @@ Ext.define('Ext.draw.Sprite', {
spriteAttrs = me.attr,
attr, i, translate, translation, rotate, rotation, scale, scaling;
+ attrs = Ext.apply({}, attrs);
for (attr in custom) {
if (attrs.hasOwnProperty(attr) && typeof custom[attr] == "function") {
Ext.apply(attrs, custom[attr].apply(me, [].concat(attrs[attr])));
@@ -259,7 +358,7 @@ Ext.define('Ext.draw.Sprite', {
rotate = attrs.rotate;
rotation = spriteAttrs.rotation;
if (rotate) {
- if ((rotate.x && rotate.x !== rotation.x) ||
+ if ((rotate.x && rotate.x !== rotation.x) ||
(rotate.y && rotate.y !== rotation.y) ||
(rotate.degrees && rotate.degrees !== rotation.degrees)) {
Ext.apply(rotation, rotate);
@@ -271,7 +370,7 @@ Ext.define('Ext.draw.Sprite', {
scale = attrs.scale;
scaling = spriteAttrs.scaling;
if (scale) {
- if ((scale.x && scale.x !== scaling.x) ||
+ if ((scale.x && scale.x !== scaling.x) ||
(scale.y && scale.y !== scaling.y) ||
(scale.cx && scale.cx !== scaling.cx) ||
(scale.cy && scale.cy !== scaling.cy)) {
@@ -290,20 +389,21 @@ Ext.define('Ext.draw.Sprite', {
return this;
},
- /**
- * Retrieve the bounding box of the sprite. This will be returned as an object with x, y, width, and height properties.
+ /**
+ * Retrieves the bounding box of the sprite.
+ * This will be returned as an object with x, y, width, and height properties.
* @return {Object} bbox
*/
getBBox: function() {
return this.surface.getBBox(this);
},
-
+
setText: function(text) {
return this.surface.setText(this, text);
},
- /**
- * Hide the sprite.
+ /**
+ * Hides the sprite.
* @param {Boolean} redraw Flag to immediatly draw the change.
* @return {Ext.draw.Sprite} this
*/
@@ -314,8 +414,8 @@ Ext.define('Ext.draw.Sprite', {
return this;
},
- /**
- * Show the sprite.
+ /**
+ * Shows the sprite.
* @param {Boolean} redraw Flag to immediatly draw the change.
* @return {Ext.draw.Sprite} this
*/
@@ -326,8 +426,8 @@ Ext.define('Ext.draw.Sprite', {
return this;
},
- /**
- * Remove the sprite.
+ /**
+ * Removes the sprite.
*/
remove: function() {
if (this.surface) {
@@ -341,7 +441,7 @@ Ext.define('Ext.draw.Sprite', {
this.surface.onRemove(this);
},
- /**
+ /**
* Removes the sprite and clears all listeners.
*/
destroy: function() {
@@ -354,8 +454,8 @@ Ext.define('Ext.draw.Sprite', {
}
},
- /**
- * Redraw the sprite.
+ /**
+ * Redraws the sprite.
* @return {Ext.draw.Sprite} this
*/
redraw: function() {
@@ -363,7 +463,7 @@ Ext.define('Ext.draw.Sprite', {
return this;
},
- /**
+ /**
* Wrapper for setting style properties, also takes single object parameter of multiple styles.
* @param {String/Object} property The style property to be set, or an object of multiple styles.
* @param {String} value (optional) The value to apply to the given property, or null if an object was passed.
@@ -374,10 +474,10 @@ Ext.define('Ext.draw.Sprite', {
return this;
},
- /**
+ /**
* Adds one or more CSS classes to the element. Duplicate classes are automatically filtered out. Note this method
* is severly limited in VML.
- * @param {String/Array} className The CSS class to add, or an array of classes
+ * @param {String/String[]} className The CSS class to add, or an array of classes
* @return {Ext.draw.Sprite} this
*/
addCls: function(obj) {
@@ -385,9 +485,9 @@ Ext.define('Ext.draw.Sprite', {
return this;
},
- /**
+ /**
* Removes one or more CSS classes from the element.
- * @param {String/Array} className The CSS class to remove, or an array of classes. Note this method
+ * @param {String/String[]} className The CSS class to remove, or an array of classes. Note this method
* is severly limited in VML.
* @return {Ext.draw.Sprite} this
*/
@@ -396,4 +496,6 @@ Ext.define('Ext.draw.Sprite', {
return this;
}
});
-