docs/source/Mask.html

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