/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. 

  2. <html>
    3. 

  3. <head>
    4. 

  4.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    5. 

  5.   <title>The source code</title>
    6. 

  6.   <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
    7. 

  7.   <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
    8. 

  8.   <style type="text/css">
    9. 

  9.     .highlight { display: block; background-color: #ddd; }
    10. 

  10.   </style>
    11. 

  11.   <script type="text/javascript">
    12. 

  12.     function highlight() {
    13. 

  13.       document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
    14. 

  14.     }
    15. 

  15.   </script>
    16. 

  16. </head>
    17. 

  17. <body onload="prettyPrint(); highlight();">
    18. 

  18.   <pre class="prettyprint lang-js"><span id='Ext-chart-Mask'>/**
    19. 

  19. </span> * Defines a mask for a chart's series.
    20. 

  20.  * The 'chart' member must be set prior to rendering.
    21. 

  21.  *
    22. 

  22.  * A Mask can be used to select a certain region in a chart.
    23. 

  23.  * When enabled, the `select` event will be triggered when a
    24. 

  24.  * region is selected by the mask, allowing the user to perform
    25. 

  25.  * other tasks like zooming on that region, etc.
    26. 

  26.  *
    27. 

  27.  * In order to use the mask one has to set the Chart `mask` option to
    28. 

  28.  * `true`, `vertical` or `horizontal`. Then a possible configuration for the
    29. 

  29.  * listener could be:
    30. 

  30.  *
    31. 

  31.  *     items: {
    32. 

  32.  *         xtype: 'chart',
    33. 

  33.  *         animate: true,
    34. 

  34.  *         store: store1,
    35. 

  35.  *         mask: 'horizontal',
    36. 

  36.  *         listeners: {
    37. 

  37.  *             select: {
    38. 

  38.  *                 fn: function(me, selection) {
    39. 

  39.  *                     me.setZoom(selection);
    40. 

  40.  *                     me.mask.hide();
    41. 

  41.  *                 }
    42. 

  42.  *             }
    43. 

  43.  *         }
    44. 

  44.  *     }
    45. 

  45.  *
    46. 

  46.  * In this example we zoom the chart to that particular region. You can also get
    47. 

  47.  * a handle to a mask instance from the chart object. The `chart.mask` element is a
    48. 

  48.  * `Ext.Panel`.
    49. 

  49.  * 
    50. 

  50.  */
    51. 

  51. Ext.define('Ext.chart.Mask', {
    52. 

  52.     requires: [
    53. 

  53.         'Ext.chart.MaskLayer'
    54. 

  54.     ],
    55. 

  55.     
    56. 

  56. <span id='Ext-chart-Mask-cfg-mask'>    /**
    57. 

  57. </span>     * @cfg {Boolean/String} mask
    58. 

  58.      * Enables selecting a region on chart. True to enable any selection,
    59. 

  59.      * 'horizontal' or 'vertical' to restrict the selection to X or Y axis.
    60. 

  60.      *
    61. 

  61.      * The mask in itself will do nothing but fire 'select' event.
    62. 

  62.      * See {@link Ext.chart.Mask} for example.
    63. 

  63.      */
    64. 

  64. 

  65. <span id='Ext-chart-Mask-method-constructor'>    /**
    66. 

  66. </span>     * Creates new Mask.
    67. 

  67.      * @param {Object} [config] Config object.
    68. 

  68.      */
    69. 

  69.     constructor: function(config) {
    70. 

  70.         var me = this;
    71. 

  71. 

  72.         me.addEvents('select');
    73. 

  73. 

  74.         if (config) {
    75. 

  75.             Ext.apply(me, config);
    76. 

  76.         }
    77. 

  77.         if (me.enableMask) {
    78. 

  78.             me.on('afterrender', function() {
    79. 

  79.                 //create a mask layer component
    80. 

  80.                 var comp = new Ext.chart.MaskLayer({
    81. 

  81.                     renderTo: me.el,
    82. 

  82.                     hidden: true
    83. 

  83.                 });
    84. 

  84.                 comp.el.on({
    85. 

  85.                     'mousemove': function(e) {
    86. 

  86.                         me.onMouseMove(e);
    87. 

  87.                     },
    88. 

  88.                     'mouseup': function(e) {
    89. 

  89.                         me.resized(e);
    90. 

  90.                     }
    91. 

  91.                 });
    92. 

  92.                 //create a resize handler for the component
    93. 

  93.                 var resizeHandler = new Ext.resizer.Resizer({
    94. 

  94.                     el: comp.el,
    95. 

  95.                     handles: 'all',
    96. 

  96.                     pinned: true
    97. 

  97.                 });
    98. 

  98.                 resizeHandler.on({
    99. 

  99.                     'resize': function(e) {
    100. 

  100.                         me.resized(e);    
    101. 

  101.                     }    
    102. 

  102.                 });
    103. 

  103.                 comp.initDraggable();
    104. 

  104.                 me.maskType = me.mask;
    105. 

  105.                 me.mask = comp;
    106. 

  106.                 me.maskSprite = me.surface.add({
    107. 

  107.                     type: 'path',
    108. 

  108.                     path: ['M', 0, 0],
    109. 

  109.                     zIndex: 1001,
    110. 

  110.                     opacity: 0.7,
    111. 

  111.                     hidden: true,
    112. 

  112.                     stroke: '#444'
    113. 

  113.                 });
    114. 

  114.             }, me, { single: true });
    115. 

  115.         }
    116. 

  116.     },
    117. 

  117.     
    118. 

  118.     resized: function(e) {
    119. 

  119.         var me = this,
    120. 

  120.             bbox = me.bbox || me.chartBBox,
    121. 

  121.             x = bbox.x,
    122. 

  122.             y = bbox.y,
    123. 

  123.             width = bbox.width,
    124. 

  124.             height = bbox.height,
    125. 

  125.             box = me.mask.getBox(true),
    126. 

  126.             max = Math.max,
    127. 

  127.             min = Math.min,
    128. 

  128.             staticX = box.x - x,
    129. 

  129.             staticY = box.y - y;
    130. 

  130.         
    131. 

  131.         staticX = max(staticX, x);
    132. 

  132.         staticY = max(staticY, y);
    133. 

  133.         staticX = min(staticX, width);
    134. 

  134.         staticY = min(staticY, height);
    135. 

  135.         box.x = staticX;
    136. 

  136.         box.y = staticY;
    137. 

  137.         me.fireEvent('select', me, box);
    138. 

  138.     },
    139. 

  139. 

  140.     onMouseUp: function(e) {
    141. 

  141.         var me = this,
    142. 

  142.             bbox = me.bbox || me.chartBBox,
    143. 

  143.             sel = me.maskSelection;
    144. 

  144.         me.maskMouseDown = false;
    145. 

  145.         me.mouseDown = false;
    146. 

  146.         if (me.mouseMoved) {
    147. 

  147.             me.onMouseMove(e);
    148. 

  148.             me.mouseMoved = false;
    149. 

  149.             me.fireEvent('select', me, {
    150. 

  150.                 x: sel.x - bbox.x,
    151. 

  151.                 y: sel.y - bbox.y,
    152. 

  152.                 width: sel.width,
    153. 

  153.                 height: sel.height
    154. 

  154.             });
    155. 

  155.         }
    156. 

  156.     },
    157. 

  157. 

  158.     onMouseDown: function(e) {
    159. 

  159.         var me = this;
    160. 

  160.         me.mouseDown = true;
    161. 

  161.         me.mouseMoved = false;
    162. 

  162.         me.maskMouseDown = {
    163. 

  163.             x: e.getPageX() - me.el.getX(),
    164. 

  164.             y: e.getPageY() - me.el.getY()
    165. 

  165.         };
    166. 

  166.     },
    167. 

  167. 

  168.     onMouseMove: function(e) {
    169. 

  169.         var me = this,
    170. 

  170.             mask = me.maskType,
    171. 

  171.             bbox = me.bbox || me.chartBBox,
    172. 

  172.             x = bbox.x,
    173. 

  173.             y = bbox.y,
    174. 

  174.             math = Math,
    175. 

  175.             floor = math.floor,
    176. 

  176.             abs = math.abs,
    177. 

  177.             min = math.min,
    178. 

  178.             max = math.max,
    179. 

  179.             height = floor(y + bbox.height),
    180. 

  180.             width = floor(x + bbox.width),
    181. 

  181.             posX = e.getPageX(),
    182. 

  182.             posY = e.getPageY(),
    183. 

  183.             staticX = posX - me.el.getX(),
    184. 

  184.             staticY = posY - me.el.getY(),
    185. 

  185.             maskMouseDown = me.maskMouseDown,
    186. 

  186.             path;
    187. 

  187.         
    188. 

  188.         me.mouseMoved = me.mouseDown;
    189. 

  189.         staticX = max(staticX, x);
    190. 

  190.         staticY = max(staticY, y);
    191. 

  191.         staticX = min(staticX, width);
    192. 

  192.         staticY = min(staticY, height);
    193. 

  193.         if (maskMouseDown &amp;&amp; me.mouseDown) {
    194. 

  194.             if (mask == 'horizontal') {
    195. 

  195.                 staticY = y;
    196. 

  196.                 maskMouseDown.y = height;
    197. 

  197.                 posY = me.el.getY() + bbox.height + me.insetPadding;
    198. 

  198.             }
    199. 

  199.             else if (mask == 'vertical') {
    200. 

  200.                 staticX = x;
    201. 

  201.                 maskMouseDown.x = width;
    202. 

  202.             }
    203. 

  203.             width = maskMouseDown.x - staticX;
    204. 

  204.             height = maskMouseDown.y - staticY;
    205. 

  205.             path = ['M', staticX, staticY, 'l', width, 0, 0, height, -width, 0, 'z'];
    206. 

  206.             me.maskSelection = {
    207. 

  207.                 x: width &gt; 0 ? staticX : staticX + width,
    208. 

  208.                 y: height &gt; 0 ? staticY : staticY + height,
    209. 

  209.                 width: abs(width),
    210. 

  210.                 height: abs(height)
    211. 

  211.             };
    212. 

  212.             me.mask.updateBox(me.maskSelection);
    213. 

  213.             me.mask.show();
    214. 

  214.             me.maskSprite.setAttributes({
    215. 

  215.                 hidden: true    
    216. 

  216.             }, true);
    217. 

  217.         }
    218. 

  218.         else {
    219. 

  219.             if (mask == 'horizontal') {
    220. 

  220.                 path = ['M', staticX, y, 'L', staticX, height];
    221. 

  221.             }
    222. 

  222.             else if (mask == 'vertical') {
    223. 

  223.                 path = ['M', x, staticY, 'L', width, staticY];
    224. 

  224.             }
    225. 

  225.             else {
    226. 

  226.                 path = ['M', staticX, y, 'L', staticX, height, 'M', x, staticY, 'L', width, staticY];
    227. 

  227.             }
    228. 

  228.             me.maskSprite.setAttributes({
    229. 

  229.                 path: path,
    230. 

  230.                 fill: me.maskMouseDown ? me.maskSprite.stroke : false,
    231. 

  231.                 'stroke-width': mask === true ? 1 : 3,
    232. 

  232.                 hidden: false
    233. 

  233.             }, true);
    234. 

  234.         }
    235. 

  235.     },
    236. 

  236. 

  237.     onMouseLeave: function(e) {
    238. 

  238.         var me = this;
    239. 

  239.         me.mouseMoved = false;
    240. 

  240.         me.mouseDown = false;
    241. 

  241.         me.maskMouseDown = false;
    242. 

  242.         me.mask.hide();
    243. 

  243.         me.maskSprite.hide(true);
    244. 

  244.     }
    245. 

  245. });
    246. 

  246.     
    247. 

  247. </pre>
    248. 

  248. </body>
    249. 

  249. </html>
    250.