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