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