/**
* @class Ext.draw.Component
* @extends Ext.Component
*
@@ -6,9 +23,10 @@
* manages and holds a `Surface` instance: an interface that has
* an SVG or VML implementation depending on the browser capabilities and where
* Sprites can be appended.
- * {@img Ext.draw.Component/Ext.draw.Component.png Ext.draw.Component component}
+ *
* One way to create a draw component is:
- *
+ *
+ * @example
* var drawComponent = Ext.create('Ext.draw.Component', {
* viewBox: false,
* items: [{
@@ -19,21 +37,21 @@
* y: 100
* }]
* });
- *
+ *
* Ext.create('Ext.Window', {
* width: 215,
* height: 235,
* layout: 'fit',
* items: [drawComponent]
* }).show();
- *
+ *
* In this case we created a draw component and added a sprite to it.
* The *type* of the sprite is *circle* so if you run this code you'll see a yellow-ish
* circle in a Window. When setting `viewBox` to `false` we are responsible for setting the object's position and
- * dimensions accordingly.
- *
+ * dimensions accordingly.
+ *
* You can also add sprites by using the surface's add method:
- *
+ *
* drawComponent.surface.add({
* type: 'circle',
* fill: '#79BB3F',
@@ -41,7 +59,7 @@
* x: 100,
* y: 100
* });
- *
+ *
* For more information on Sprites, the core elements added to a draw component's surface,
* refer to the Ext.draw.Sprite documentation.
*/
@@ -60,8 +78,8 @@ Ext.define('Ext.draw.Component', {
/* End Definitions */
- /**
- * @cfg {Array} enginePriority
+ /**
+ * @cfg {String[]} enginePriority
* Defines the priority order for which Surface implementation to use. The first
* one supported by the current environment will be used.
*/
@@ -71,72 +89,62 @@ Ext.define('Ext.draw.Component', {
componentLayout: 'draw',
- /**
+ /**
* @cfg {Boolean} viewBox
* Turn on view box support which will scale and position items in the draw component to fit to the component while
* maintaining aspect ratio. Note that this scaling can override other sizing settings on yor items. Defaults to true.
*/
viewBox: true,
- /**
+ /**
* @cfg {Boolean} autoSize
* Turn on autoSize support which will set the bounding div's size to the natural size of the contents. Defaults to false.
*/
autoSize: false,
-
- /**
- * @cfg {Array} gradients (optional) Define a set of gradients that can be used as `fill` property in sprites.
+
+ /**
+ * @cfg {Object[]} gradients (optional) Define a set of gradients that can be used as `fill` property in sprites.
* The gradients array is an array of objects with the following properties:
*
- * <ul>
- * <li><strong>id</strong> - string - The unique name of the gradient.</li>
- * <li><strong>angle</strong> - number, optional - The angle of the gradient in degrees.</li>
- * <li><strong>stops</strong> - object - An object with numbers as keys (from 0 to 100) and style objects
- * as values</li>
- * </ul>
- *
-
- For example:
-
- <pre><code>
- gradients: [{
- id: 'gradientId',
- angle: 45,
- stops: {
- 0: {
- color: '#555'
- },
- 100: {
- color: '#ddd'
- }
- }
- }, {
- id: 'gradientId2',
- angle: 0,
- stops: {
- 0: {
- color: '#590'
- },
- 20: {
- color: '#599'
- },
- 100: {
- color: '#ddd'
- }
- }
- }]
- </code></pre>
-
- Then the sprites can use `gradientId` and `gradientId2` by setting the fill attributes to those ids, for example:
-
- <pre><code>
- sprite.setAttributes({
- fill: 'url(#gradientId)'
- }, true);
- </code></pre>
-
+ * - `id` - string - The unique name of the gradient.
+ * - `angle` - number, optional - The angle of the gradient in degrees.
+ * - `stops` - object - An object with numbers as keys (from 0 to 100) and style objects as values
+ *
+ * ## Example
+ *
+ * gradients: [{
+ * id: 'gradientId',
+ * angle: 45,
+ * stops: {
+ * 0: {
+ * color: '#555'
+ * },
+ * 100: {
+ * color: '#ddd'
+ * }
+ * }
+ * }, {
+ * id: 'gradientId2',
+ * angle: 0,
+ * stops: {
+ * 0: {
+ * color: '#590'
+ * },
+ * 20: {
+ * color: '#599'
+ * },
+ * 100: {
+ * color: '#ddd'
+ * }
+ * }
+ * }]
+ *
+ * Then the sprites can use `gradientId` and `gradientId2` by setting the fill attributes to those ids, for example:
+ *
+ * sprite.setAttributes({
+ * fill: 'url(#gradientId)'
+ * }, true);
*/
-
initComponent: function() {
this.callParent(arguments);
@@ -150,7 +158,7 @@ Ext.define('Ext.draw.Component', {
);
},
- /**
+ /**
* @private
*
* Create the Surface on initial render
@@ -162,22 +170,22 @@ Ext.define('Ext.draw.Component', {
bbox, items, width, height, x, y;
me.callParent(arguments);
- me.createSurface();
-
- items = me.surface.items;
+ if (me.createSurface() !== false) {
+ items = me.surface.items;
- if (viewBox || autoSize) {
- bbox = items.getBBox();
- width = bbox.width;
- height = bbox.height;
- x = bbox.x;
- y = bbox.y;
- if (me.viewBox) {
- me.surface.setViewBox(x, y, width, height);
- }
- else {
- // AutoSized
- me.autoSizeSurface();
+ if (viewBox || autoSize) {
+ bbox = items.getBBox();
+ width = bbox.width;
+ height = bbox.height;
+ x = bbox.x;
+ y = bbox.y;
+ if (me.viewBox) {
+ me.surface.setViewBox(x, y, width, height);
+ }
+ else {
+ // AutoSized
+ me.autoSizeSurface();
+ }
}
}
},
@@ -198,6 +206,7 @@ Ext.define('Ext.draw.Component', {
}, true);
if (me.rendered) {
me.setSize(width, height);
+ me.surface.setSize(width, height);
}
else {
me.surface.setSize(width, height);
@@ -205,14 +214,12 @@ Ext.define('Ext.draw.Component', {
me.el.setSize(width, height);
},
- /**
+ /**
* Create the Surface instance. Resolves the correct Surface implementation to
* instantiate based on the 'enginePriority' config. Once the Surface instance is
* created you can use the handle to that instance to add sprites. For example:
*
- <pre><code>
- drawComponent.surface.add(sprite);
- </code></pre>
+ * drawComponent.surface.add(sprite);
*/
createSurface: function() {
var surface = Ext.draw.Surface.create(Ext.apply({}, {
@@ -220,8 +227,13 @@ Ext.define('Ext.draw.Component', {
height: this.height,
renderTo: this.el
}, this.initialConfig));
+ if (!surface) {
+ // In case we cannot create a surface, return false so we can stop
+ return false;
+ }
this.surface = surface;
+
function refire(eventName) {
return function(e) {
this.fireEvent(eventName, e);
@@ -240,9 +252,9 @@ Ext.define('Ext.draw.Component', {
},
- /**
+ /**
* @private
- *
+ *
* Clean up the Surface instance on component destruction
*/
onDestroy: function() {
@@ -254,4 +266,6 @@ Ext.define('Ext.draw.Component', {
}
});
-