Region.html 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408
  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-util-Region'>/**
  19. </span> * This class represents a rectangular region in X,Y space, and performs geometric
  20. * transformations or tests upon the region.
  21. *
  22. * This class may be used to compare the document regions occupied by elements.
  23. */
  24. Ext.define('Ext.util.Region', {
  25. /* Begin Definitions */
  26. requires: ['Ext.util.Offset'],
  27. statics: {
  28. <span id='Ext-util-Region-static-method-getRegion'> /**
  29. </span> * @static
  30. * Retrieves an Ext.util.Region for a particular element.
  31. * @param {String/HTMLElement/Ext.Element} el An element ID, htmlElement or Ext.Element representing an element in the document.
  32. * @returns {Ext.util.Region} region
  33. */
  34. getRegion: function(el) {
  35. return Ext.fly(el).getPageBox(true);
  36. },
  37. <span id='Ext-util-Region-static-method-from'> /**
  38. </span> * @static
  39. * Creates a Region from a &quot;box&quot; Object which contains four numeric properties `top`, `right`, `bottom` and `left`.
  40. * @param {Object} o An object with `top`, `right`, `bottom` and `left` properties.
  41. * @return {Ext.util.Region} region The Region constructed based on the passed object
  42. */
  43. from: function(o) {
  44. return new this(o.top, o.right, o.bottom, o.left);
  45. }
  46. },
  47. /* End Definitions */
  48. <span id='Ext-util-Region-method-constructor'> /**
  49. </span> * Creates a region from the bounding sides.
  50. * @param {Number} top Top The topmost pixel of the Region.
  51. * @param {Number} right Right The rightmost pixel of the Region.
  52. * @param {Number} bottom Bottom The bottom pixel of the Region.
  53. * @param {Number} left Left The leftmost pixel of the Region.
  54. */
  55. constructor : function(t, r, b, l) {
  56. var me = this;
  57. me.y = me.top = me[1] = t;
  58. me.right = r;
  59. me.bottom = b;
  60. me.x = me.left = me[0] = l;
  61. },
  62. <span id='Ext-util-Region-method-contains'> /**
  63. </span> * Checks if this region completely contains the region that is passed in.
  64. * @param {Ext.util.Region} region
  65. * @return {Boolean}
  66. */
  67. contains : function(region) {
  68. var me = this;
  69. return (region.x &gt;= me.x &amp;&amp;
  70. region.right &lt;= me.right &amp;&amp;
  71. region.y &gt;= me.y &amp;&amp;
  72. region.bottom &lt;= me.bottom);
  73. },
  74. <span id='Ext-util-Region-method-intersect'> /**
  75. </span> * Checks if this region intersects the region passed in.
  76. * @param {Ext.util.Region} region
  77. * @return {Ext.util.Region/Boolean} Returns the intersected region or false if there is no intersection.
  78. */
  79. intersect : function(region) {
  80. var me = this,
  81. t = Math.max(me.y, region.y),
  82. r = Math.min(me.right, region.right),
  83. b = Math.min(me.bottom, region.bottom),
  84. l = Math.max(me.x, region.x);
  85. if (b &gt; t &amp;&amp; r &gt; l) {
  86. return new this.self(t, r, b, l);
  87. }
  88. else {
  89. return false;
  90. }
  91. },
  92. <span id='Ext-util-Region-method-union'> /**
  93. </span> * Returns the smallest region that contains the current AND targetRegion.
  94. * @param {Ext.util.Region} region
  95. * @return {Ext.util.Region} a new region
  96. */
  97. union : function(region) {
  98. var me = this,
  99. t = Math.min(me.y, region.y),
  100. r = Math.max(me.right, region.right),
  101. b = Math.max(me.bottom, region.bottom),
  102. l = Math.min(me.x, region.x);
  103. return new this.self(t, r, b, l);
  104. },
  105. <span id='Ext-util-Region-method-constrainTo'> /**
  106. </span> * Modifies the current region to be constrained to the targetRegion.
  107. * @param {Ext.util.Region} targetRegion
  108. * @return {Ext.util.Region} this
  109. */
  110. constrainTo : function(r) {
  111. var me = this,
  112. constrain = Ext.Number.constrain;
  113. me.top = me.y = constrain(me.top, r.y, r.bottom);
  114. me.bottom = constrain(me.bottom, r.y, r.bottom);
  115. me.left = me.x = constrain(me.left, r.x, r.right);
  116. me.right = constrain(me.right, r.x, r.right);
  117. return me;
  118. },
  119. <span id='Ext-util-Region-method-adjust'> /**
  120. </span> * Modifies the current region to be adjusted by offsets.
  121. * @param {Number} top top offset
  122. * @param {Number} right right offset
  123. * @param {Number} bottom bottom offset
  124. * @param {Number} left left offset
  125. * @return {Ext.util.Region} this
  126. */
  127. adjust : function(t, r, b, l) {
  128. var me = this;
  129. me.top = me.y += t;
  130. me.left = me.x += l;
  131. me.right += r;
  132. me.bottom += b;
  133. return me;
  134. },
  135. <span id='Ext-util-Region-method-getOutOfBoundOffset'> /**
  136. </span> * Get the offset amount of a point outside the region
  137. * @param {String} [axis]
  138. * @param {Ext.util.Point} [p] the point
  139. * @return {Ext.util.Offset}
  140. */
  141. getOutOfBoundOffset: function(axis, p) {
  142. if (!Ext.isObject(axis)) {
  143. if (axis == 'x') {
  144. return this.getOutOfBoundOffsetX(p);
  145. } else {
  146. return this.getOutOfBoundOffsetY(p);
  147. }
  148. } else {
  149. p = axis;
  150. var d = new Ext.util.Offset();
  151. d.x = this.getOutOfBoundOffsetX(p.x);
  152. d.y = this.getOutOfBoundOffsetY(p.y);
  153. return d;
  154. }
  155. },
  156. <span id='Ext-util-Region-method-getOutOfBoundOffsetX'> /**
  157. </span> * Get the offset amount on the x-axis
  158. * @param {Number} p the offset
  159. * @return {Number}
  160. */
  161. getOutOfBoundOffsetX: function(p) {
  162. if (p &lt;= this.x) {
  163. return this.x - p;
  164. } else if (p &gt;= this.right) {
  165. return this.right - p;
  166. }
  167. return 0;
  168. },
  169. <span id='Ext-util-Region-method-getOutOfBoundOffsetY'> /**
  170. </span> * Get the offset amount on the y-axis
  171. * @param {Number} p the offset
  172. * @return {Number}
  173. */
  174. getOutOfBoundOffsetY: function(p) {
  175. if (p &lt;= this.y) {
  176. return this.y - p;
  177. } else if (p &gt;= this.bottom) {
  178. return this.bottom - p;
  179. }
  180. return 0;
  181. },
  182. <span id='Ext-util-Region-method-isOutOfBound'> /**
  183. </span> * Check whether the point / offset is out of bound
  184. * @param {String} [axis]
  185. * @param {Ext.util.Point/Number} [p] the point / offset
  186. * @return {Boolean}
  187. */
  188. isOutOfBound: function(axis, p) {
  189. if (!Ext.isObject(axis)) {
  190. if (axis == 'x') {
  191. return this.isOutOfBoundX(p);
  192. } else {
  193. return this.isOutOfBoundY(p);
  194. }
  195. } else {
  196. p = axis;
  197. return (this.isOutOfBoundX(p.x) || this.isOutOfBoundY(p.y));
  198. }
  199. },
  200. <span id='Ext-util-Region-method-isOutOfBoundX'> /**
  201. </span> * Check whether the offset is out of bound in the x-axis
  202. * @param {Number} p the offset
  203. * @return {Boolean}
  204. */
  205. isOutOfBoundX: function(p) {
  206. return (p &lt; this.x || p &gt; this.right);
  207. },
  208. <span id='Ext-util-Region-method-isOutOfBoundY'> /**
  209. </span> * Check whether the offset is out of bound in the y-axis
  210. * @param {Number} p the offset
  211. * @return {Boolean}
  212. */
  213. isOutOfBoundY: function(p) {
  214. return (p &lt; this.y || p &gt; this.bottom);
  215. },
  216. <span id='Ext-util-Region-method-restrict'> /**
  217. </span> * Restrict a point within the region by a certain factor.
  218. * @param {String} [axis]
  219. * @param {Ext.util.Point/Ext.util.Offset/Object} [p]
  220. * @param {Number} [factor]
  221. * @return {Ext.util.Point/Ext.util.Offset/Object/Number}
  222. * @private
  223. */
  224. restrict: function(axis, p, factor) {
  225. if (Ext.isObject(axis)) {
  226. var newP;
  227. factor = p;
  228. p = axis;
  229. if (p.copy) {
  230. newP = p.copy();
  231. }
  232. else {
  233. newP = {
  234. x: p.x,
  235. y: p.y
  236. };
  237. }
  238. newP.x = this.restrictX(p.x, factor);
  239. newP.y = this.restrictY(p.y, factor);
  240. return newP;
  241. } else {
  242. if (axis == 'x') {
  243. return this.restrictX(p, factor);
  244. } else {
  245. return this.restrictY(p, factor);
  246. }
  247. }
  248. },
  249. <span id='Ext-util-Region-method-restrictX'> /**
  250. </span> * Restrict an offset within the region by a certain factor, on the x-axis
  251. * @param {Number} p
  252. * @param {Number} [factor=1] The factor.
  253. * @return {Number}
  254. * @private
  255. */
  256. restrictX : function(p, factor) {
  257. if (!factor) {
  258. factor = 1;
  259. }
  260. if (p &lt;= this.x) {
  261. p -= (p - this.x) * factor;
  262. }
  263. else if (p &gt;= this.right) {
  264. p -= (p - this.right) * factor;
  265. }
  266. return p;
  267. },
  268. <span id='Ext-util-Region-method-restrictY'> /**
  269. </span> * Restrict an offset within the region by a certain factor, on the y-axis
  270. * @param {Number} p
  271. * @param {Number} [factor] The factor, defaults to 1
  272. * @return {Number}
  273. * @private
  274. */
  275. restrictY : function(p, factor) {
  276. if (!factor) {
  277. factor = 1;
  278. }
  279. if (p &lt;= this.y) {
  280. p -= (p - this.y) * factor;
  281. }
  282. else if (p &gt;= this.bottom) {
  283. p -= (p - this.bottom) * factor;
  284. }
  285. return p;
  286. },
  287. <span id='Ext-util-Region-method-getSize'> /**
  288. </span> * Get the width / height of this region
  289. * @return {Object} an object with width and height properties
  290. * @private
  291. */
  292. getSize: function() {
  293. return {
  294. width: this.right - this.x,
  295. height: this.bottom - this.y
  296. };
  297. },
  298. <span id='Ext-util-Region-method-copy'> /**
  299. </span> * Create a copy of this Region.
  300. * @return {Ext.util.Region}
  301. */
  302. copy: function() {
  303. return new this.self(this.y, this.right, this.bottom, this.x);
  304. },
  305. <span id='Ext-util-Region-method-copyFrom'> /**
  306. </span> * Copy the values of another Region to this Region
  307. * @param {Ext.util.Region} p The region to copy from.
  308. * @return {Ext.util.Region} This Region
  309. */
  310. copyFrom: function(p) {
  311. var me = this;
  312. me.top = me.y = me[1] = p.y;
  313. me.right = p.right;
  314. me.bottom = p.bottom;
  315. me.left = me.x = me[0] = p.x;
  316. return this;
  317. },
  318. /*
  319. * Dump this to an eye-friendly string, great for debugging
  320. * @return {String}
  321. */
  322. toString: function() {
  323. return &quot;Region[&quot; + this.top + &quot;,&quot; + this.right + &quot;,&quot; + this.bottom + &quot;,&quot; + this.left + &quot;]&quot;;
  324. },
  325. <span id='Ext-util-Region-method-translateBy'> /**
  326. </span> * Translate this region by the given offset amount
  327. * @param {Ext.util.Offset/Object} x Object containing the `x` and `y` properties.
  328. * Or the x value is using the two argument form.
  329. * @param {Number} y The y value unless using an Offset object.
  330. * @return {Ext.util.Region} this This Region
  331. */
  332. translateBy: function(x, y) {
  333. if (arguments.length == 1) {
  334. y = x.y;
  335. x = x.x;
  336. }
  337. var me = this;
  338. me.top = me.y += y;
  339. me.right += x;
  340. me.bottom += y;
  341. me.left = me.x += x;
  342. return me;
  343. },
  344. <span id='Ext-util-Region-method-round'> /**
  345. </span> * Round all the properties of this region
  346. * @return {Ext.util.Region} this This Region
  347. */
  348. round: function() {
  349. var me = this;
  350. me.top = me.y = Math.round(me.y);
  351. me.right = Math.round(me.right);
  352. me.bottom = Math.round(me.bottom);
  353. me.left = me.x = Math.round(me.x);
  354. return me;
  355. },
  356. <span id='Ext-util-Region-method-equals'> /**
  357. </span> * Check whether this region is equivalent to the given region
  358. * @param {Ext.util.Region} region The region to compare with
  359. * @return {Boolean}
  360. */
  361. equals: function(region) {
  362. return (this.top == region.top &amp;&amp; this.right == region.right &amp;&amp; this.bottom == region.bottom &amp;&amp; this.left == region.left);
  363. }
  364. });
  365. </pre>
  366. </body>
  367. </html>