/**
* @class Ext.draw.Surface
* @extends Object
*
@@ -38,11 +55,81 @@
*
* For example:
*
- drawComponent.surface.on({
- 'mousemove': function() {
- console.log('moving the mouse over the surface');
- }
- });
+ * drawComponent.surface.on({
+ * 'mousemove': function() {
+ * console.log('moving the mouse over the surface');
+ * }
+ * });
+ *
+ * ## Example
+ *
+ * drawComponent.surface.add([
+ * {
+ * type: 'circle',
+ * radius: 10,
+ * fill: '#f00',
+ * x: 10,
+ * y: 10,
+ * group: 'circles'
+ * },
+ * {
+ * type: 'circle',
+ * radius: 10,
+ * fill: '#0f0',
+ * x: 50,
+ * y: 50,
+ * group: 'circles'
+ * },
+ * {
+ * type: 'circle',
+ * radius: 10,
+ * fill: '#00f',
+ * x: 100,
+ * y: 100,
+ * group: 'circles'
+ * },
+ * {
+ * type: 'rect',
+ * radius: 10,
+ * x: 10,
+ * y: 10,
+ * group: 'rectangles'
+ * },
+ * {
+ * type: 'rect',
+ * radius: 10,
+ * x: 50,
+ * y: 50,
+ * group: 'rectangles'
+ * },
+ * {
+ * type: 'rect',
+ * radius: 10,
+ * x: 100,
+ * y: 100,
+ * group: 'rectangles'
+ * }
+ * ]);
+ *
+ * // Get references to my groups
+ * my circles = surface.getGroup('circles');
+ * my rectangles = surface.getGroup('rectangles');
+ *
+ * // Animate the circles down
+ * circles.animate({
+ * duration: 1000,
+ * translate: {
+ * y: 200
+ * }
+ * });
+ *
+ * // Animate the rectangles across
+ * rectangles.animate({
+ * duration: 1000,
+ * translate: {
+ * x: 200
+ * }
+ * });
*/
Ext.define('Ext.draw.Surface', {
@@ -58,7 +145,7 @@ Ext.define('Ext.draw.Surface', {
separatorRe: /[, ]+/,
statics: {
- /**
+ /**
* Create and return a new concrete Surface instance appropriate for the current environment.
* @param {Object} config Initial configuration for the Surface instance
* @param {Array} enginePriority Optional order of implementations to use; the first one that is
@@ -126,12 +213,12 @@ Ext.define('Ext.draw.Surface', {
zIndex: 0
},
- /**
+ /**
* @cfg {Number} height
* The height of this component in pixels (defaults to auto).
* <b>Note</b> to express this dimension as a percentage or offset see {@link Ext.Component#anchor}.
*/
- /**
+ /**
* @cfg {Number} width
* The width of this component in pixels (defaults to auto).
* <b>Note</b> to express this dimension as a percentage or offset see {@link Ext.Component#anchor}.
@@ -188,7 +275,7 @@ Ext.define('Ext.draw.Surface', {
// @private
setViewBox: Ext.emptyFn,
- /**
+ /**
* Adds one or more CSS classes to the element. Duplicate classes are automatically filtered out.
*
* For example:
@@ -197,10 +284,11 @@ Ext.define('Ext.draw.Surface', {
*
* @param {Object} sprite The sprite to add the class to.
* @param {String/Array} className The CSS class to add, or an array of classes
+ * @method
*/
addCls: Ext.emptyFn,
- /**
+ /**
* Removes one or more CSS classes from the element.
*
* For example:
@@ -209,10 +297,11 @@ Ext.define('Ext.draw.Surface', {
*
* @param {Object} sprite The sprite to remove the class from.
* @param {String/Array} className The CSS class to remove, or an array of classes
+ * @method
*/
removeCls: Ext.emptyFn,
- /**
+ /**
* Sets CSS style attributes to an element.
*
* For example:
@@ -223,6 +312,7 @@ Ext.define('Ext.draw.Surface', {
*
* @param {Object} sprite The sprite to add, or an array of classes to
* @param {Object} styles An Object with CSS styles.
+ * @method
*/
setStyle: Ext.emptyFn,
@@ -246,17 +336,16 @@ Ext.define('Ext.draw.Surface', {
// @private
initBackground: function(config) {
- var gradientId,
- gradient,
- backgroundSprite,
- width = this.width,
- height = this.height;
+ var me = this,
+ width = me.width,
+ height = me.height,
+ gradientId, gradient, backgroundSprite;
if (config) {
if (config.gradient) {
gradient = config.gradient;
gradientId = gradient.id;
- this.addGradient(gradient);
- this.background = this.add({
+ me.addGradient(gradient);
+ me.background = me.add({
type: 'rect',
x: 0,
y: 0,
@@ -265,7 +354,7 @@ Ext.define('Ext.draw.Surface', {
fill: 'url(#' + gradientId + ')'
});
} else if (config.fill) {
- this.background = this.add({
+ me.background = me.add({
type: 'rect',
x: 0,
y: 0,
@@ -274,7 +363,7 @@ Ext.define('Ext.draw.Surface', {
fill: config.fill
});
} else if (config.image) {
- this.background = this.add({
+ me.background = me.add({
type: 'image',
x: 0,
y: 0,
@@ -286,7 +375,7 @@ Ext.define('Ext.draw.Surface', {
}
},
- /**
+ /**
* Sets the size of the surface. Accomodates the background (if any) to fit the new size too.
*
* For example:
@@ -365,7 +454,7 @@ Ext.define('Ext.draw.Surface', {
// @private
onMouseLeave: Ext.emptyFn,
- /**
+ /**
* Add a gradient definition to the Surface. Note that in some surface engines, adding
* a gradient via this method will not take effect if the surface has already been rendered.
* Therefore, it is preferred to pass the gradients as an item to the surface config, rather
@@ -394,10 +483,12 @@ Ext.define('Ext.draw.Surface', {
}
}
});
+ *
+ * @method
*/
addGradient: Ext.emptyFn,
- /**
+ /**
* Add a Sprite to the surface. See {@link Ext.draw.Sprite} for the configuration object to be passed into this method.
*
* For example:
@@ -436,7 +527,7 @@ Ext.define('Ext.draw.Surface', {
return sprite;
},
- /**
+ /**
* @private
* Insert or move a given sprite into the correct position in the items
* MixedCollection, according to its zIndex. Will be inserted at the end of
@@ -484,7 +575,7 @@ Ext.define('Ext.draw.Surface', {
}
},
- /**
+ /**
* Remove a given sprite from the surface, optionally destroying the sprite in the process.
* You can also call the sprite own `remove` method.
*
@@ -511,7 +602,7 @@ Ext.define('Ext.draw.Surface', {
}
},
- /**
+ /**
* Remove all sprites from the surface, optionally destroying the sprites in the process.
*
* For example:
@@ -644,7 +735,9 @@ Ext.define('Ext.draw.Surface', {
// @private
getPathellipse: function (el) {
var a = el.attr;
- return this.ellipsePath(a.x, a.y, a.radiusX, a.radiusY);
+ return this.ellipsePath(a.x, a.y,
+ a.radiusX || (a.width / 2) || 0,
+ a.radiusY || (a.height / 2) || 0);
},
// @private
@@ -677,7 +770,7 @@ Ext.define('Ext.draw.Surface', {
return group;
},
- /**
+ /**
* Returns a new group or an existent group associated with the current surface.
* The group returned is a {@link Ext.draw.CompositeSprite} group.
*
@@ -718,7 +811,7 @@ Ext.define('Ext.draw.Surface', {
return items;
},
- /**
+ /**
* Changes the text in the sprite element. The sprite must be a `text` sprite.
* This method can also be called from {@link Ext.draw.Sprite}.
*
@@ -728,6 +821,7 @@ Ext.define('Ext.draw.Surface', {
*
* @param {Object} sprite The Sprite to change the text.
* @param {String} text The new text to be set.
+ * @method
*/
setText: Ext.emptyFn,
@@ -735,7 +829,7 @@ Ext.define('Ext.draw.Surface', {
//as an internal method when calling `add`.
createItem: Ext.emptyFn,
- /**
+ /**
* Retrieves the id of this component.
* Will autogenerate an id if one has not already been set.
*/
@@ -743,7 +837,7 @@ Ext.define('Ext.draw.Surface', {
return this.id || (this.id = Ext.id(null, 'ext-surface-'));
},
- /**
+ /**
* Destroys the surface. This is done by removing all components from it and
* also removing its reference to a DOM element.
*
@@ -755,4 +849,6 @@ Ext.define('Ext.draw.Surface', {
delete this.domRef;
this.removeAll();
}
-});