2 * @class Ext.draw.Component
3 * @extends Ext.Component
5 * The Draw Component is a surface in which sprites can be rendered. The Draw Component
6 * manages and holds a `Surface` instance: an interface that has
7 * an SVG or VML implementation depending on the browser capabilities and where
8 * Sprites can be appended.
9 * {@img Ext.draw.Component/Ext.draw.Component.png Ext.draw.Component component}
10 * One way to create a draw component is:
12 * var drawComponent = Ext.create('Ext.draw.Component', {
23 * Ext.create('Ext.Window', {
27 * items: [drawComponent]
30 * In this case we created a draw component and added a sprite to it.
31 * The *type* of the sprite is *circle* so if you run this code you'll see a yellow-ish
32 * circle in a Window. When setting `viewBox` to `false` we are responsible for setting the object's position and
33 * dimensions accordingly.
35 * You can also add sprites by using the surface's add method:
37 * drawComponent.surface.add({
45 * For more information on Sprites, the core elements added to a draw component's surface,
46 * refer to the Ext.draw.Sprite documentation.
48 Ext.define('Ext.draw.Component', {
50 /* Begin Definitions */
54 extend: 'Ext.Component',
58 'Ext.layout.component.Draw'
64 * @cfg {Array} enginePriority
65 * Defines the priority order for which Surface implementation to use. The first
66 * one supported by the current environment will be used.
68 enginePriority: ['Svg', 'Vml'],
70 baseCls: Ext.baseCSSPrefix + 'surface',
72 componentLayout: 'draw',
75 * @cfg {Boolean} viewBox
76 * Turn on view box support which will scale and position items in the draw component to fit to the component while
77 * maintaining aspect ratio. Note that this scaling can override other sizing settings on yor items. Defaults to true.
82 * @cfg {Boolean} autoSize
83 * Turn on autoSize support which will set the bounding div's size to the natural size of the contents. Defaults to false.
88 * @cfg {Array} gradients (optional) Define a set of gradients that can be used as `fill` property in sprites.
89 * The gradients array is an array of objects with the following properties:
92 * <li><strong>id</strong> - string - The unique name of the gradient.</li>
93 * <li><strong>angle</strong> - number, optional - The angle of the gradient in degrees.</li>
94 * <li><strong>stops</strong> - object - An object with numbers as keys (from 0 to 100) and style objects
130 Then the sprites can use `gradientId` and `gradientId2` by setting the fill attributes to those ids, for example:
133 sprite.setAttributes({
134 fill: 'url(#gradientId)'
140 initComponent: function() {
141 this.callParent(arguments);
156 * Create the Surface on initial render
158 onRender: function() {
160 viewBox = me.viewBox,
161 autoSize = me.autoSize,
162 bbox, items, width, height, x, y;
163 me.callParent(arguments);
167 items = me.surface.items;
169 if (viewBox || autoSize) {
170 bbox = items.getBBox();
172 height = bbox.height;
176 me.surface.setViewBox(x, y, width, height);
180 me.autoSizeSurface();
186 autoSizeSurface: function() {
188 items = me.surface.items,
189 bbox = items.getBBox(),
191 height = bbox.height;
192 items.setAttributes({
195 //Opera has a slight offset in the y axis.
196 y: -bbox.y + (+Ext.isOpera)
200 me.setSize(width, height);
201 me.surface.setSize(width, height);
204 me.surface.setSize(width, height);
206 me.el.setSize(width, height);
210 * Create the Surface instance. Resolves the correct Surface implementation to
211 * instantiate based on the 'enginePriority' config. Once the Surface instance is
212 * created you can use the handle to that instance to add sprites. For example:
215 drawComponent.surface.add(sprite);
218 createSurface: function() {
219 var surface = Ext.draw.Surface.create(Ext.apply({}, {
223 }, this.initialConfig));
224 this.surface = surface;
226 function refire(eventName) {
228 this.fireEvent(eventName, e);
234 mouseup: refire('mouseup'),
235 mousedown: refire('mousedown'),
236 mousemove: refire('mousemove'),
237 mouseenter: refire('mouseenter'),
238 mouseleave: refire('mouseleave'),
239 click: refire('click')
247 * Clean up the Surface instance on component destruction
249 onDestroy: function() {
250 var surface = this.surface;
254 this.callParent(arguments);