3 This file is part of Ext JS 4
5 Copyright (c) 2011 Sencha Inc
7 Contact: http://www.sencha.com/contact
9 GNU General Public License Usage
10 This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file. Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.
12 If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
16 * @class Ext.chart.Mask
18 * Defines a mask for a chart's series.
19 * The 'chart' member must be set prior to rendering.
21 * A Mask can be used to select a certain region in a chart.
22 * When enabled, the `select` event will be triggered when a
23 * region is selected by the mask, allowing the user to perform
24 * other tasks like zooming on that region, etc.
26 * In order to use the mask one has to set the Chart `mask` option to
27 * `true`, `vertical` or `horizontal`. Then a possible configuration for the
37 fn: function(me, selection) {
38 me.setZoom(selection);
44 * In this example we zoom the chart to that particular region. You can also get
45 * a handle to a mask instance from the chart object. The `chart.mask` element is a
49 Ext.define('Ext.chart.Mask', {
50 require: ['Ext.chart.MaskLayer'],
53 * @param {Object} config (optional) Config object.
55 constructor: function(config) {
58 me.addEvents('select');
61 Ext.apply(me, config);
64 me.on('afterrender', function() {
65 //create a mask layer component
66 var comp = Ext.create('Ext.chart.MaskLayer', {
70 'mousemove': function(e) {
73 'mouseup': function(e) {
77 //create a resize handler for the component
78 var resizeHandler = Ext.create('Ext.resizer.Resizer', {
84 'resize': function(e) {
89 me.maskType = me.mask;
91 me.maskSprite = me.surface.add({
99 }, me, { single: true });
103 resized: function(e) {
105 bbox = me.bbox || me.chartBBox,
109 height = bbox.height,
110 box = me.mask.getBox(true),
116 staticX = max(staticX, x);
117 staticY = max(staticY, y);
118 staticX = min(staticX, width);
119 staticY = min(staticY, height);
122 me.fireEvent('select', me, box);
125 onMouseUp: function(e) {
127 bbox = me.bbox || me.chartBBox,
128 sel = me.maskSelection;
129 me.maskMouseDown = false;
130 me.mouseDown = false;
133 me.mouseMoved = false;
134 me.fireEvent('select', me, {
143 onMouseDown: function(e) {
146 me.mouseMoved = false;
148 x: e.getPageX() - me.el.getX(),
149 y: e.getPageY() - me.el.getY()
153 onMouseMove: function(e) {
156 bbox = me.bbox || me.chartBBox,
164 height = floor(y + bbox.height),
165 width = floor(x + bbox.width),
168 staticX = posX - me.el.getX(),
169 staticY = posY - me.el.getY(),
170 maskMouseDown = me.maskMouseDown,
173 me.mouseMoved = me.mouseDown;
174 staticX = max(staticX, x);
175 staticY = max(staticY, y);
176 staticX = min(staticX, width);
177 staticY = min(staticY, height);
178 if (maskMouseDown && me.mouseDown) {
179 if (mask == 'horizontal') {
181 maskMouseDown.y = height;
182 posY = me.el.getY() + bbox.height + me.insetPadding;
184 else if (mask == 'vertical') {
186 maskMouseDown.x = width;
188 width = maskMouseDown.x - staticX;
189 height = maskMouseDown.y - staticY;
190 path = ['M', staticX, staticY, 'l', width, 0, 0, height, -width, 0, 'z'];
192 x: width > 0 ? staticX : staticX + width,
193 y: height > 0 ? staticY : staticY + height,
197 me.mask.updateBox(me.maskSelection);
199 me.maskSprite.setAttributes({
204 if (mask == 'horizontal') {
205 path = ['M', staticX, y, 'L', staticX, height];
207 else if (mask == 'vertical') {
208 path = ['M', x, staticY, 'L', width, staticY];
211 path = ['M', staticX, y, 'L', staticX, height, 'M', x, staticY, 'L', width, staticY];
213 me.maskSprite.setAttributes({
215 fill: me.maskMouseDown ? me.maskSprite.stroke : false,
216 'stroke-width': mask === true ? 1 : 3,
222 onMouseLeave: function(e) {
224 me.mouseMoved = false;
225 me.mouseDown = false;
226 me.maskMouseDown = false;
228 me.maskSprite.hide(true);