PageRenderTime 51ms CodeModel.GetById 20ms app.highlight 22ms RepoModel.GetById 0ms app.codeStats 0ms

/ext-4.1.0_b3/docs/source/Mask.html

https://bitbucket.org/srogerf/javascript
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 &amp;&amp; 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 &gt; 0 ? staticX : staticX + width,
208                y: height &gt; 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>