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