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="../prettify/prettify.css" type="text/css" rel="stylesheet" />
   7   <script type="text/javascript" src="../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 <span id='Ext-chart-Mask-method-constructor'>    /**
  54 </span>     * Creates new Mask.
  55      * @param {Object} config (optional) Config object.
  56      */
  57     constructor: function(config) {
  58         var me = this;
  59
  60         me.addEvents('select');
  61
  62         if (config) {
  63             Ext.apply(me, config);
  64         }
  65         if (me.mask) {
  66             me.on('afterrender', function() {
  67                 //create a mask layer component
  68                 var comp = Ext.create('Ext.chart.MaskLayer', {
  69                     renderTo: me.el
  70                 });
  71                 comp.el.on({
  72                     'mousemove': function(e) {
  73                         me.onMouseMove(e);
  74                     },
  75                     'mouseup': function(e) {
  76                         me.resized(e);
  77                     }
  78                 });
  79                 //create a resize handler for the component
  80                 var resizeHandler = Ext.create('Ext.resizer.Resizer', {
  81                     el: comp.el,
  82                     handles: 'all',
  83                     pinned: true
  84                 });
  85                 resizeHandler.on({
  86                     'resize': function(e) {
  87                         me.resized(e);
  88                     }
  89                 });
  90                 comp.initDraggable();
  91                 me.maskType = me.mask;
  92                 me.mask = comp;
  93                 me.maskSprite = me.surface.add({
  94                     type: 'path',
  95                     path: ['M', 0, 0],
  96                     zIndex: 1001,
  97                     opacity: 0.7,
  98                     hidden: true,
  99                     stroke: '#444'
 100                 });
 101             }, me, { single: true });
 102         }
 103     },
 104
 105     resized: function(e) {
 106         var me = this,
 107             bbox = me.bbox || me.chartBBox,
 108             x = bbox.x,
 109             y = bbox.y,
 110             width = bbox.width,
 111             height = bbox.height,
 112             box = me.mask.getBox(true),
 113             max = Math.max,
 114             min = Math.min,
 115             staticX = box.x - x,
 116             staticY = box.y - y;
 117
 118         staticX = max(staticX, x);
 119         staticY = max(staticY, y);
 120         staticX = min(staticX, width);
 121         staticY = min(staticY, height);
 122         box.x = staticX;
 123         box.y = staticY;
 124         me.fireEvent('select', me, box);
 125     },
 126
 127     onMouseUp: function(e) {
 128         var me = this,
 129             bbox = me.bbox || me.chartBBox,
 130             sel = me.maskSelection;
 131         me.maskMouseDown = false;
 132         me.mouseDown = false;
 133         if (me.mouseMoved) {
 134             me.onMouseMove(e);
 135             me.mouseMoved = false;
 136             me.fireEvent('select', me, {
 137                 x: sel.x - bbox.x,
 138                 y: sel.y - bbox.y,
 139                 width: sel.width,
 140                 height: sel.height
 141             });
 142         }
 143     },
 144
 145     onMouseDown: function(e) {
 146         var me = this;
 147         me.mouseDown = true;
 148         me.mouseMoved = false;
 149         me.maskMouseDown = {
 150             x: e.getPageX() - me.el.getX(),
 151             y: e.getPageY() - me.el.getY()
 152         };
 153     },
 154
 155     onMouseMove: function(e) {
 156         var me = this,
 157             mask = me.maskType,
 158             bbox = me.bbox || me.chartBBox,
 159             x = bbox.x,
 160             y = bbox.y,
 161             math = Math,
 162             floor = math.floor,
 163             abs = math.abs,
 164             min = math.min,
 165             max = math.max,
 166             height = floor(y + bbox.height),
 167             width = floor(x + bbox.width),
 168             posX = e.getPageX(),
 169             posY = e.getPageY(),
 170             staticX = posX - me.el.getX(),
 171             staticY = posY - me.el.getY(),
 172             maskMouseDown = me.maskMouseDown,
 173             path;
 174
 175         me.mouseMoved = me.mouseDown;
 176         staticX = max(staticX, x);
 177         staticY = max(staticY, y);
 178         staticX = min(staticX, width);
 179         staticY = min(staticY, height);
 180         if (maskMouseDown &amp;&amp; me.mouseDown) {
 181             if (mask == 'horizontal') {
 182                 staticY = y;
 183                 maskMouseDown.y = height;
 184                 posY = me.el.getY() + bbox.height + me.insetPadding;
 185             }
 186             else if (mask == 'vertical') {
 187                 staticX = x;
 188                 maskMouseDown.x = width;
 189             }
 190             width = maskMouseDown.x - staticX;
 191             height = maskMouseDown.y - staticY;
 192             path = ['M', staticX, staticY, 'l', width, 0, 0, height, -width, 0, 'z'];
 193             me.maskSelection = {
 194                 x: width &gt; 0 ? staticX : staticX + width,
 195                 y: height &gt; 0 ? staticY : staticY + height,
 196                 width: abs(width),
 197                 height: abs(height)
 198             };
 199             me.mask.updateBox({
 200                 x: posX - abs(width),
 201                 y: posY - abs(height),
 202                 width: abs(width),
 203                 height: abs(height)
 204             });
 205             me.mask.show();
 206             me.maskSprite.setAttributes({
 207                 hidden: true
 208             }, true);
 209         }
 210         else {
 211             if (mask == 'horizontal') {
 212                 path = ['M', staticX, y, 'L', staticX, height];
 213             }
 214             else if (mask == 'vertical') {
 215                 path = ['M', x, staticY, 'L', width, staticY];
 216             }
 217             else {
 218                 path = ['M', staticX, y, 'L', staticX, height, 'M', x, staticY, 'L', width, staticY];
 219             }
 220             me.maskSprite.setAttributes({
 221                 path: path,
 222                 fill: me.maskMouseDown ? me.maskSprite.stroke : false,
 223                 'stroke-width': mask === true ? 1 : 3,
 224                 hidden: false
 225             }, true);
 226         }
 227     },
 228
 229     onMouseLeave: function(e) {
 230         var me = this;
 231         me.mouseMoved = false;
 232         me.mouseDown = false;
 233         me.maskMouseDown = false;
 234         me.mask.hide();
 235         me.maskSprite.hide(true);
 236     }
 237 });
 238     </pre>
 239 </body>
 240 </html>