Upgrade to ExtJS 4.0.7 - Released 10/19/2011
[extjs.git] / docs / source / Mask.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="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
7   <script type="text/javascript" src="../resources/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-chart-Mask'>/**
19 </span> * @class Ext.chart.Mask
20  *
21  * Defines a mask for a chart's series.
22  * The 'chart' member must be set prior to rendering.
23  *
24  * A Mask can be used to select a certain region in a chart.
25  * When enabled, the `select` event will be triggered when a
26  * region is selected by the mask, allowing the user to perform
27  * other tasks like zooming on that region, etc.
28  *
29  * In order to use the mask one has to set the Chart `mask` option to
30  * `true`, `vertical` or `horizontal`. Then a possible configuration for the
31  * listener could be:
32  *
33         items: {
34             xtype: 'chart',
35             animate: true,
36             store: store1,
37             mask: 'horizontal',
38             listeners: {
39                 select: {
40                     fn: function(me, selection) {
41                         me.setZoom(selection);
42                         me.mask.hide();
43                     }
44                 }
45             },
46
47  * In this example we zoom the chart to that particular region. You can also get
48  * a handle to a mask instance from the chart object. The `chart.mask` element is a
49  * `Ext.Panel`.
50  * 
51  */
52 Ext.define('Ext.chart.Mask', {
53     require: ['Ext.chart.MaskLayer'],
54 <span id='Ext-chart-Mask-method-constructor'>    /**
55 </span>     * Creates new Mask.
56      * @param {Object} config (optional) Config object.
57      */
58     constructor: function(config) {
59         var me = this;
60
61         me.addEvents('select');
62
63         if (config) {
64             Ext.apply(me, config);
65         }
66         if (me.mask) {
67             me.on('afterrender', function() {
68                 //create a mask layer component
69                 var comp = Ext.create('Ext.chart.MaskLayer', {
70                     renderTo: me.el
71                 });
72                 comp.el.on({
73                     'mousemove': function(e) {
74                         me.onMouseMove(e);
75                     },
76                     'mouseup': function(e) {
77                         me.resized(e);
78                     }
79                 });
80                 //create a resize handler for the component
81                 var resizeHandler = Ext.create('Ext.resizer.Resizer', {
82                     el: comp.el,
83                     handles: 'all',
84                     pinned: true
85                 });
86                 resizeHandler.on({
87                     'resize': function(e) {
88                         me.resized(e);    
89                     }    
90                 });
91                 comp.initDraggable();
92                 me.maskType = me.mask;
93                 me.mask = comp;
94                 me.maskSprite = me.surface.add({
95                     type: 'path',
96                     path: ['M', 0, 0],
97                     zIndex: 1001,
98                     opacity: 0.7,
99                     hidden: true,
100                     stroke: '#444'
101                 });
102             }, me, { single: true });
103         }
104     },
105     
106     resized: function(e) {
107         var me = this,
108             bbox = me.bbox || me.chartBBox,
109             x = bbox.x,
110             y = bbox.y,
111             width = bbox.width,
112             height = bbox.height,
113             box = me.mask.getBox(true),
114             max = Math.max,
115             min = Math.min,
116             staticX = box.x - x,
117             staticY = box.y - y;
118         
119         staticX = max(staticX, x);
120         staticY = max(staticY, y);
121         staticX = min(staticX, width);
122         staticY = min(staticY, height);
123         box.x = staticX;
124         box.y = staticY;
125         me.fireEvent('select', me, box);
126     },
127
128     onMouseUp: function(e) {
129         var me = this,
130             bbox = me.bbox || me.chartBBox,
131             sel = me.maskSelection;
132         me.maskMouseDown = false;
133         me.mouseDown = false;
134         if (me.mouseMoved) {
135             me.onMouseMove(e);
136             me.mouseMoved = false;
137             me.fireEvent('select', me, {
138                 x: sel.x - bbox.x,
139                 y: sel.y - bbox.y,
140                 width: sel.width,
141                 height: sel.height
142             });
143         }
144     },
145
146     onMouseDown: function(e) {
147         var me = this;
148         me.mouseDown = true;
149         me.mouseMoved = false;
150         me.maskMouseDown = {
151             x: e.getPageX() - me.el.getX(),
152             y: e.getPageY() - me.el.getY()
153         };
154     },
155
156     onMouseMove: function(e) {
157         var me = this,
158             mask = me.maskType,
159             bbox = me.bbox || me.chartBBox,
160             x = bbox.x,
161             y = bbox.y,
162             math = Math,
163             floor = math.floor,
164             abs = math.abs,
165             min = math.min,
166             max = math.max,
167             height = floor(y + bbox.height),
168             width = floor(x + bbox.width),
169             posX = e.getPageX(),
170             posY = e.getPageY(),
171             staticX = posX - me.el.getX(),
172             staticY = posY - me.el.getY(),
173             maskMouseDown = me.maskMouseDown,
174             path;
175         
176         me.mouseMoved = me.mouseDown;
177         staticX = max(staticX, x);
178         staticY = max(staticY, y);
179         staticX = min(staticX, width);
180         staticY = min(staticY, height);
181         if (maskMouseDown &amp;&amp; me.mouseDown) {
182             if (mask == 'horizontal') {
183                 staticY = y;
184                 maskMouseDown.y = height;
185                 posY = me.el.getY() + bbox.height + me.insetPadding;
186             }
187             else if (mask == 'vertical') {
188                 staticX = x;
189                 maskMouseDown.x = width;
190             }
191             width = maskMouseDown.x - staticX;
192             height = maskMouseDown.y - staticY;
193             path = ['M', staticX, staticY, 'l', width, 0, 0, height, -width, 0, 'z'];
194             me.maskSelection = {
195                 x: width &gt; 0 ? staticX : staticX + width,
196                 y: height &gt; 0 ? staticY : staticY + height,
197                 width: abs(width),
198                 height: abs(height)
199             };
200             me.mask.updateBox(me.maskSelection);
201             me.mask.show();
202             me.maskSprite.setAttributes({
203                 hidden: true    
204             }, true);
205         }
206         else {
207             if (mask == 'horizontal') {
208                 path = ['M', staticX, y, 'L', staticX, height];
209             }
210             else if (mask == 'vertical') {
211                 path = ['M', x, staticY, 'L', width, staticY];
212             }
213             else {
214                 path = ['M', staticX, y, 'L', staticX, height, 'M', x, staticY, 'L', width, staticY];
215             }
216             me.maskSprite.setAttributes({
217                 path: path,
218                 fill: me.maskMouseDown ? me.maskSprite.stroke : false,
219                 'stroke-width': mask === true ? 1 : 3,
220                 hidden: false
221             }, true);
222         }
223     },
224
225     onMouseLeave: function(e) {
226         var me = this;
227         me.mouseMoved = false;
228         me.mouseDown = false;
229         me.maskMouseDown = false;
230         me.mask.hide();
231         me.maskSprite.hide(true);
232     }
233 });
234     </pre>
235 </body>
236 </html>