git.roojs.org Git - roojs1/blob - docs/symbols/src/Roo_Resizable.js.html

   1 <html><head><title>../roojs1/Roo/Resizable.js</title><link rel="stylesheet" type="text/css" href="../../../css/highlight-js.css"/></head><body class="highlightpage"><code class="jsdoc-pretty"><span class="jsdoc-comment">/*
   2  * Based on:
   3  * Ext JS Library 1.1.1
   4  * Copyright(c) 2006-2007, Ext JS, LLC.
   5  *
   6  * Originally Released Under LGPL - original licence link has changed is not relivant.
   7  *
   8  * Fork - LGPL
   9  * &lt;script type=&quot;text/javascript&quot;&gt;
  10  */
  11
  12 /**
  13  * @class Roo.Resizable
  14  * @extends Roo.util.Observable
  15  * &lt;p&gt;Applies drag handles to an element to make it resizable. The drag handles are inserted into the element
  16  * and positioned absolute. Some elements, such as a textarea or image, don't support this. To overcome that, you can wrap
  17  * the textarea in a div and set &quot;resizeChild&quot; to true (or to the id of the element), &lt;b&gt;or&lt;/b&gt; set wrap:true in your config and
  18  * the element will be wrapped for you automatically.&lt;/p&gt;
  19  * &lt;p&gt;Here is the list of valid resize handles:&lt;/p&gt;
  20  * &lt;pre&gt;
  21 Value   Description
  22 ------  -------------------
  23  'n'     north
  24  's'     south
  25  'e'     east
  26  'w'     west
  27  'nw'    northwest
  28  'sw'    southwest
  29  'se'    southeast
  30  'ne'    northeast
  31  'all'   all
  32 &lt;/pre&gt;
  33  * &lt;p&gt;Here's an example showing the creation of a typical Resizable:&lt;/p&gt;
  34  * &lt;pre&gt;&lt;code&gt;
  35 var resizer = new Roo.Resizable(&quot;element-id&quot;, {
  36     handles: 'all',
  37     minWidth: 200,
  38     minHeight: 100,
  39     maxWidth: 500,
  40     maxHeight: 400,
  41     pinned: true
  42 });
  43 resizer.on(&quot;resize&quot;, myHandler);
  44 &lt;/code&gt;&lt;/pre&gt;
  45  * &lt;p&gt;To hide a particular handle, set its display to none in CSS, or through script:&lt;br&gt;
  46  * resizer.east.setDisplayed(false);&lt;/p&gt;
  47  * @cfg {Boolean/String/Element} resizeChild True to resize the first child, or id/element to resize (defaults to false)
  48  * @cfg {Array/String} adjustments String &quot;auto&quot; or an array [width, height] with values to be &lt;b&gt;added&lt;/b&gt; to the
  49  * resize operation's new size (defaults to [0, 0])
  50  * @cfg {Number} minWidth The minimum width for the element (defaults to 5)
  51  * @cfg {Number} minHeight The minimum height for the element (defaults to 5)
  52  * @cfg {Number} maxWidth The maximum width for the element (defaults to 10000)
  53  * @cfg {Number} maxHeight The maximum height for the element (defaults to 10000)
  54  * @cfg {Boolean} enabled False to disable resizing (defaults to true)
  55  * @cfg {Boolean} wrap True to wrap an element with a div if needed (required for textareas and images, defaults to false)
  56  * @cfg {Number} width The width of the element in pixels (defaults to null)
  57  * @cfg {Number} height The height of the element in pixels (defaults to null)
  58  * @cfg {Boolean} animate True to animate the resize (not compatible with dynamic sizing, defaults to false)
  59  * @cfg {Number} duration Animation duration if animate = true (defaults to .35)
  60  * @cfg {Boolean} dynamic True to resize the element while dragging instead of using a proxy (defaults to false)
  61  * @cfg {String} handles String consisting of the resize handles to display (defaults to undefined)
  62  * @cfg {Boolean} multiDirectional &lt;b&gt;Deprecated&lt;/b&gt;.  The old style of adding multi-direction resize handles, deprecated
  63  * in favor of the handles config option (defaults to false)
  64  * @cfg {Boolean} disableTrackOver True to disable mouse tracking. This is only applied at config time. (defaults to false)
  65  * @cfg {String} easing Animation easing if animate = true (defaults to 'easingOutStrong')
  66  * @cfg {Number} widthIncrement The increment to snap the width resize in pixels (dynamic must be true, defaults to 0)
  67  * @cfg {Number} heightIncrement The increment to snap the height resize in pixels (dynamic must be true, defaults to 0)
  68  * @cfg {Boolean} pinned True to ensure that the resize handles are always visible, false to display them only when the
  69  * user mouses over the resizable borders. This is only applied at config time. (defaults to false)
  70  * @cfg {Boolean} preserveRatio True to preserve the original ratio between height and width during resize (defaults to false)
  71  * @cfg {Boolean} transparent True for transparent handles. This is only applied at config time. (defaults to false)
  72  * @cfg {Number} minX The minimum allowed page X for the element (only used for west resizing, defaults to 0)
  73  * @cfg {Number} minY The minimum allowed page Y for the element (only used for north resizing, defaults to 0)
  74  * @cfg {Boolean} draggable Convenience to initialize drag drop (defaults to false)
  75  * @constructor
  76  * Create a new resizable component
  77  * @param {String/HTMLElement/Roo.Element} el The id or element to resize
  78  * @param {Object} config configuration options
  79   */
  80 </span><span class="jsdoc-var">Roo.Resizable </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">){
  81     </span><span class="jsdoc-var">this.el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">);
  82
  83     </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">config </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">config.wrap</span><span class="jsdoc-syntax">){
  84         </span><span class="jsdoc-var">config.resizeChild </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">;
  85         </span><span class="jsdoc-var">this.el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.wrap</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">config.wrap </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;object&quot; </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">config.wrap </span><span class="jsdoc-syntax">: {</span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">&quot;xresizable-wrap&quot;</span><span class="jsdoc-syntax">});
  86         </span><span class="jsdoc-var">this.el.id </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.dom.id </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">config.resizeChild.id </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">&quot;-rzwrap&quot;</span><span class="jsdoc-syntax">;
  87         </span><span class="jsdoc-var">this.el.setStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;overflow&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;hidden&quot;</span><span class="jsdoc-syntax">);
  88         </span><span class="jsdoc-var">this.el.setPositioning</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">config.resizeChild.getPositioning</span><span class="jsdoc-syntax">());
  89         </span><span class="jsdoc-var">config.resizeChild.clearPositioning</span><span class="jsdoc-syntax">();
  90         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">config.width </span><span class="jsdoc-syntax">|| !</span><span class="jsdoc-var">config.height</span><span class="jsdoc-syntax">){
  91             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">csize </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">config.resizeChild.getSize</span><span class="jsdoc-syntax">();
  92             </span><span class="jsdoc-var">this.el.setSize</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">csize.width</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">csize.height</span><span class="jsdoc-syntax">);
  93         }
  94         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">config.pinned </span><span class="jsdoc-syntax">&amp;&amp; !</span><span class="jsdoc-var">config.adjustments</span><span class="jsdoc-syntax">){
  95             </span><span class="jsdoc-var">config.adjustments </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;auto&quot;</span><span class="jsdoc-syntax">;
  96         }
  97     }
  98
  99     </span><span class="jsdoc-var">this.proxy </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.createProxy</span><span class="jsdoc-syntax">({</span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;div&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;x-resizable-proxy&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.el.id </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">&quot;-rzproxy&quot;</span><span class="jsdoc-syntax">});
 100     </span><span class="jsdoc-var">this.proxy.unselectable</span><span class="jsdoc-syntax">();
 101     </span><span class="jsdoc-var">this.proxy.enableDisplayMode</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'block'</span><span class="jsdoc-syntax">);
 102
 103     </span><span class="jsdoc-var">Roo.apply</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">);
 104
 105     </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.pinned</span><span class="jsdoc-syntax">){
 106         </span><span class="jsdoc-var">this.disableTrackOver </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
 107         </span><span class="jsdoc-var">this.el.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;x-resizable-pinned&quot;</span><span class="jsdoc-syntax">);
 108     }
 109     </span><span class="jsdoc-comment">// if the element isn't positioned, make it relative
 110     </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">position </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.getStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;position&quot;</span><span class="jsdoc-syntax">);
 111     </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">position </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-string">&quot;absolute&quot; </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">position </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-string">&quot;fixed&quot;</span><span class="jsdoc-syntax">){
 112         </span><span class="jsdoc-var">this.el.setStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;position&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;relative&quot;</span><span class="jsdoc-syntax">);
 113     }
 114     </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.handles</span><span class="jsdoc-syntax">){ </span><span class="jsdoc-comment">// no handles passed, must be legacy style
 115         </span><span class="jsdoc-var">this.handles </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">'s,e,se'</span><span class="jsdoc-syntax">;
 116         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.multiDirectional</span><span class="jsdoc-syntax">){
 117             </span><span class="jsdoc-var">this.handles </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-string">',n,w'</span><span class="jsdoc-syntax">;
 118         }
 119     }
 120     </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.handles </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;all&quot;</span><span class="jsdoc-syntax">){
 121         </span><span class="jsdoc-var">this.handles </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;n s e w ne nw se sw&quot;</span><span class="jsdoc-syntax">;
 122     }
 123     </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">hs </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.handles.split</span><span class="jsdoc-syntax">(/\s*?[,;]\s*?| /);
 124     </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">ps </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.Resizable.positions</span><span class="jsdoc-syntax">;
 125     </span><span class="jsdoc-keyword">for</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">= 0, </span><span class="jsdoc-var">len </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">hs.length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">len</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++){
 126         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">hs</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">] &amp;&amp; </span><span class="jsdoc-var">ps</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">hs</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]]){
 127             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">pos </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">ps</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">hs</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]];
 128             </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">pos</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.Resizable.Handle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">pos</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.disableTrackOver</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.transparent</span><span class="jsdoc-syntax">);
 129         }
 130     }
 131     </span><span class="jsdoc-comment">// legacy
 132     </span><span class="jsdoc-var">this.corner </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.southeast</span><span class="jsdoc-syntax">;
 133
 134     </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.handles.indexOf</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;n&quot;</span><span class="jsdoc-syntax">) != -1 || </span><span class="jsdoc-var">this.handles.indexOf</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;w&quot;</span><span class="jsdoc-syntax">) != -1){
 135         </span><span class="jsdoc-var">this.updateBox </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
 136     }
 137
 138     </span><span class="jsdoc-var">this.activeHandle </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">;
 139
 140     </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.resizeChild</span><span class="jsdoc-syntax">){
 141         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">this.resizeChild </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;boolean&quot;</span><span class="jsdoc-syntax">){
 142             </span><span class="jsdoc-var">this.resizeChild </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.el.dom.firstChild</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
 143         }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
 144             </span><span class="jsdoc-var">this.resizeChild </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.resizeChild</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
 145         }
 146     }
 147
 148     </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.adjustments </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;auto&quot;</span><span class="jsdoc-syntax">){
 149         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">rc </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.resizeChild</span><span class="jsdoc-syntax">;
 150         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">hw </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.west</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">he </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.east</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">hn </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.north</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">hs </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.south</span><span class="jsdoc-syntax">;
 151         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">rc </span><span class="jsdoc-syntax">&amp;&amp; (</span><span class="jsdoc-var">hw </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">hn</span><span class="jsdoc-syntax">)){
 152             </span><span class="jsdoc-var">rc.position</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;relative&quot;</span><span class="jsdoc-syntax">);
 153             </span><span class="jsdoc-var">rc.setLeft</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">hw </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">hw.el.getWidth</span><span class="jsdoc-syntax">() : 0);
 154             </span><span class="jsdoc-var">rc.setTop</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">hn </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">hn.el.getHeight</span><span class="jsdoc-syntax">() : 0);
 155         }
 156         </span><span class="jsdoc-var">this.adjustments </span><span class="jsdoc-syntax">= [
 157             (</span><span class="jsdoc-var">he </span><span class="jsdoc-syntax">? -</span><span class="jsdoc-var">he.el.getWidth</span><span class="jsdoc-syntax">() : 0) + (</span><span class="jsdoc-var">hw </span><span class="jsdoc-syntax">? -</span><span class="jsdoc-var">hw.el.getWidth</span><span class="jsdoc-syntax">() : 0),
 158             (</span><span class="jsdoc-var">hn </span><span class="jsdoc-syntax">? -</span><span class="jsdoc-var">hn.el.getHeight</span><span class="jsdoc-syntax">() : 0) + (</span><span class="jsdoc-var">hs </span><span class="jsdoc-syntax">? -</span><span class="jsdoc-var">hs.el.getHeight</span><span class="jsdoc-syntax">() : 0) -1
 159         ];
 160     }
 161
 162     </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.draggable</span><span class="jsdoc-syntax">){
 163         </span><span class="jsdoc-var">this.dd </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.dynamic </span><span class="jsdoc-syntax">?
 164             </span><span class="jsdoc-var">this.el.initDD</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">) : </span><span class="jsdoc-var">this.el.initDDProxy</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">, {</span><span class="jsdoc-var">dragElId</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.proxy.id</span><span class="jsdoc-syntax">});
 165         </span><span class="jsdoc-var">this.dd.setHandleElId</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.resizeChild </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">this.resizeChild.id </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.el.id</span><span class="jsdoc-syntax">);
 166     }
 167
 168     </span><span class="jsdoc-comment">// public events
 169     </span><span class="jsdoc-var">this.addEvents</span><span class="jsdoc-syntax">({
 170         </span><span class="jsdoc-comment">/**
 171          * @event beforeresize
 172          * Fired before resize is allowed. Set enabled to false to cancel resize.
 173          * @param {Roo.Resizable} this
 174          * @param {Roo.EventObject} e The mousedown event
 175          */
 176         </span><span class="jsdoc-string">&quot;beforeresize&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
 177         </span><span class="jsdoc-comment">/**
 178          * @event resize
 179          * Fired after a resize.
 180          * @param {Roo.Resizable} this
 181          * @param {Number} width The new width
 182          * @param {Number} height The new height
 183          * @param {Roo.EventObject} e The mouseup event
 184          */
 185         </span><span class="jsdoc-string">&quot;resize&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true
 186     </span><span class="jsdoc-syntax">});
 187
 188     </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.width </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-keyword">null </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">this.height </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">){
 189         </span><span class="jsdoc-var">this.resizeTo</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.width</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.height</span><span class="jsdoc-syntax">);
 190     }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
 191         </span><span class="jsdoc-var">this.updateChildSize</span><span class="jsdoc-syntax">();
 192     }
 193     </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.isIE</span><span class="jsdoc-syntax">){
 194         </span><span class="jsdoc-var">this.el.dom.style.zoom </span><span class="jsdoc-syntax">= 1;
 195     }
 196     </span><span class="jsdoc-var">Roo.Resizable.superclass.constructor.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 197 };
 198
 199 </span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.Resizable</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.util.Observable</span><span class="jsdoc-syntax">, {
 200         </span><span class="jsdoc-var">resizeChild </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
 201         </span><span class="jsdoc-var">adjustments </span><span class="jsdoc-syntax">: [0, 0],
 202         </span><span class="jsdoc-var">minWidth </span><span class="jsdoc-syntax">: 5,
 203         </span><span class="jsdoc-var">minHeight </span><span class="jsdoc-syntax">: 5,
 204         </span><span class="jsdoc-var">maxWidth </span><span class="jsdoc-syntax">: 10000,
 205         </span><span class="jsdoc-var">maxHeight </span><span class="jsdoc-syntax">: 10000,
 206         </span><span class="jsdoc-var">enabled </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
 207         </span><span class="jsdoc-var">animate </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
 208         </span><span class="jsdoc-var">duration </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">.</span><span class="jsdoc-syntax">35,
 209         </span><span class="jsdoc-var">dynamic </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
 210         </span><span class="jsdoc-var">handles </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
 211         </span><span class="jsdoc-var">multiDirectional </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
 212         </span><span class="jsdoc-var">disableTrackOver </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
 213         </span><span class="jsdoc-var">easing </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'easeOutStrong'</span><span class="jsdoc-syntax">,
 214         </span><span class="jsdoc-var">widthIncrement </span><span class="jsdoc-syntax">: 0,
 215         </span><span class="jsdoc-var">heightIncrement </span><span class="jsdoc-syntax">: 0,
 216         </span><span class="jsdoc-var">pinned </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
 217         </span><span class="jsdoc-var">width </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">,
 218         </span><span class="jsdoc-var">height </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">,
 219         </span><span class="jsdoc-var">preserveRatio </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
 220         </span><span class="jsdoc-var">transparent</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
 221         </span><span class="jsdoc-var">minX</span><span class="jsdoc-syntax">: 0,
 222         </span><span class="jsdoc-var">minY</span><span class="jsdoc-syntax">: 0,
 223         </span><span class="jsdoc-var">draggable</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
 224
 225         </span><span class="jsdoc-comment">/**
 226          * @cfg {String/HTMLElement/Element} constrainTo Constrain the resize to a particular element
 227          */
 228         </span><span class="jsdoc-var">constrainTo</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">undefined</span><span class="jsdoc-syntax">,
 229         </span><span class="jsdoc-comment">/**
 230          * @cfg {Roo.lib.Region} resizeRegion Constrain the resize to a particular region
 231          */
 232         </span><span class="jsdoc-var">resizeRegion</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">undefined</span><span class="jsdoc-syntax">,
 233
 234
 235     </span><span class="jsdoc-comment">/**
 236      * Perform a manual resize
 237      * @param {Number} width
 238      * @param {Number} height
 239      */
 240     </span><span class="jsdoc-var">resizeTo </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">){
 241         </span><span class="jsdoc-var">this.el.setSize</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">);
 242         </span><span class="jsdoc-var">this.updateChildSize</span><span class="jsdoc-syntax">();
 243         </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;resize&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">);
 244     },
 245
 246     </span><span class="jsdoc-comment">// private
 247     </span><span class="jsdoc-var">startSizing </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">handle</span><span class="jsdoc-syntax">){
 248         </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;beforeresize&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
 249         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.enabled</span><span class="jsdoc-syntax">){ </span><span class="jsdoc-comment">// 2nd enabled check in case disabled before beforeresize handler
 250
 251             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.overlay</span><span class="jsdoc-syntax">){
 252                 </span><span class="jsdoc-var">this.overlay </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.createProxy</span><span class="jsdoc-syntax">({</span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;div&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;x-resizable-overlay&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">html</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;&amp;#160;&quot;</span><span class="jsdoc-syntax">});
 253                 </span><span class="jsdoc-var">this.overlay.unselectable</span><span class="jsdoc-syntax">();
 254                 </span><span class="jsdoc-var">this.overlay.enableDisplayMode</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;block&quot;</span><span class="jsdoc-syntax">);
 255                 </span><span class="jsdoc-var">this.overlay.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;mousemove&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onMouseMove</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 256                 </span><span class="jsdoc-var">this.overlay.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;mouseup&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onMouseUp</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 257             }
 258             </span><span class="jsdoc-var">this.overlay.setStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;cursor&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">handle.el.getStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;cursor&quot;</span><span class="jsdoc-syntax">));
 259
 260             </span><span class="jsdoc-var">this.resizing </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
 261             </span><span class="jsdoc-var">this.startBox </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.getBox</span><span class="jsdoc-syntax">();
 262             </span><span class="jsdoc-var">this.startPoint </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">e.getXY</span><span class="jsdoc-syntax">();
 263             </span><span class="jsdoc-var">this.offsets </span><span class="jsdoc-syntax">= [(</span><span class="jsdoc-var">this.startBox.x </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.startBox.width</span><span class="jsdoc-syntax">) - </span><span class="jsdoc-var">this.startPoint</span><span class="jsdoc-syntax">[0],
 264                             (</span><span class="jsdoc-var">this.startBox.y </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.startBox.height</span><span class="jsdoc-syntax">) - </span><span class="jsdoc-var">this.startPoint</span><span class="jsdoc-syntax">[1]];
 265
 266             </span><span class="jsdoc-var">this.overlay.setSize</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.lib.Dom.getViewWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">), </span><span class="jsdoc-var">Roo.lib.Dom.getViewHeight</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">));
 267             </span><span class="jsdoc-var">this.overlay.show</span><span class="jsdoc-syntax">();
 268
 269             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.constrainTo</span><span class="jsdoc-syntax">) {
 270                 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">ct </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.constrainTo</span><span class="jsdoc-syntax">);
 271                 </span><span class="jsdoc-var">this.resizeRegion </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">ct.getRegion</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.adjust</span><span class="jsdoc-syntax">(
 272                     </span><span class="jsdoc-var">ct.getFrameWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'t'</span><span class="jsdoc-syntax">),
 273                     </span><span class="jsdoc-var">ct.getFrameWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'l'</span><span class="jsdoc-syntax">),
 274                     -</span><span class="jsdoc-var">ct.getFrameWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'b'</span><span class="jsdoc-syntax">),
 275                     -</span><span class="jsdoc-var">ct.getFrameWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'r'</span><span class="jsdoc-syntax">)
 276                 );
 277             }
 278
 279             </span><span class="jsdoc-var">this.proxy.setStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'visibility'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'hidden'</span><span class="jsdoc-syntax">); </span><span class="jsdoc-comment">// workaround display none
 280             </span><span class="jsdoc-var">this.proxy.show</span><span class="jsdoc-syntax">();
 281             </span><span class="jsdoc-var">this.proxy.setBox</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.startBox</span><span class="jsdoc-syntax">);
 282             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.dynamic</span><span class="jsdoc-syntax">){
 283                 </span><span class="jsdoc-var">this.proxy.setStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'visibility'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'visible'</span><span class="jsdoc-syntax">);
 284             }
 285         }
 286     },
 287
 288     </span><span class="jsdoc-comment">// private
 289     </span><span class="jsdoc-var">onMouseDown </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">handle</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">){
 290         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.enabled</span><span class="jsdoc-syntax">){
 291             </span><span class="jsdoc-var">e.stopEvent</span><span class="jsdoc-syntax">();
 292             </span><span class="jsdoc-var">this.activeHandle </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">handle</span><span class="jsdoc-syntax">;
 293             </span><span class="jsdoc-var">this.startSizing</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">handle</span><span class="jsdoc-syntax">);
 294         }
 295     },
 296
 297     </span><span class="jsdoc-comment">// private
 298     </span><span class="jsdoc-var">onMouseUp </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">){
 299         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">size </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.resizeElement</span><span class="jsdoc-syntax">();
 300         </span><span class="jsdoc-var">this.resizing </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
 301         </span><span class="jsdoc-var">this.handleOut</span><span class="jsdoc-syntax">();
 302         </span><span class="jsdoc-var">this.overlay.hide</span><span class="jsdoc-syntax">();
 303         </span><span class="jsdoc-var">this.proxy.hide</span><span class="jsdoc-syntax">();
 304         </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;resize&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">size.width</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">size.height</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
 305     },
 306
 307     </span><span class="jsdoc-comment">// private
 308     </span><span class="jsdoc-var">updateChildSize </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 309         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.resizeChild</span><span class="jsdoc-syntax">){
 310             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">;
 311             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">child </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.resizeChild</span><span class="jsdoc-syntax">;
 312             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">adj </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.adjustments</span><span class="jsdoc-syntax">;
 313             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el.dom.offsetWidth</span><span class="jsdoc-syntax">){
 314                 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">b </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">el.getSize</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
 315                 </span><span class="jsdoc-var">child.setSize</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">b.width</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">adj</span><span class="jsdoc-syntax">[0], </span><span class="jsdoc-var">b.height</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">adj</span><span class="jsdoc-syntax">[1]);
 316             }
 317             </span><span class="jsdoc-comment">// Second call here for IE
 318             // The first call enables instant resizing and
 319             // the second call corrects scroll bars if they
 320             // exist
 321             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.isIE</span><span class="jsdoc-syntax">){
 322                 </span><span class="jsdoc-var">setTimeout</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 323                     </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el.dom.offsetWidth</span><span class="jsdoc-syntax">){
 324                         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">b </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">el.getSize</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
 325                         </span><span class="jsdoc-var">child.setSize</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">b.width</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">adj</span><span class="jsdoc-syntax">[0], </span><span class="jsdoc-var">b.height</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">adj</span><span class="jsdoc-syntax">[1]);
 326                     }
 327                 }, 10);
 328             }
 329         }
 330     },
 331
 332     </span><span class="jsdoc-comment">// private
 333     </span><span class="jsdoc-var">snap </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">value</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">inc</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">min</span><span class="jsdoc-syntax">){
 334         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">inc </span><span class="jsdoc-syntax">|| !</span><span class="jsdoc-var">value</span><span class="jsdoc-syntax">) </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">value</span><span class="jsdoc-syntax">;
 335         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">newValue </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">value</span><span class="jsdoc-syntax">;
 336         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">m </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">value </span><span class="jsdoc-syntax">% </span><span class="jsdoc-var">inc</span><span class="jsdoc-syntax">;
 337         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">m </span><span class="jsdoc-syntax">&gt; 0){
 338             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">m </span><span class="jsdoc-syntax">&gt; (</span><span class="jsdoc-var">inc</span><span class="jsdoc-syntax">/2)){
 339                 </span><span class="jsdoc-var">newValue </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">value </span><span class="jsdoc-syntax">+ (</span><span class="jsdoc-var">inc</span><span class="jsdoc-syntax">-</span><span class="jsdoc-var">m</span><span class="jsdoc-syntax">);
 340             }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
 341                 </span><span class="jsdoc-var">newValue </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">value </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">m</span><span class="jsdoc-syntax">;
 342             }
 343         }
 344         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">Math.max</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">min</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">newValue</span><span class="jsdoc-syntax">);
 345     },
 346
 347     </span><span class="jsdoc-comment">// private
 348     </span><span class="jsdoc-var">resizeElement </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 349         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">box </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.proxy.getBox</span><span class="jsdoc-syntax">();
 350         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.updateBox</span><span class="jsdoc-syntax">){
 351             </span><span class="jsdoc-var">this.el.setBox</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.animate</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.duration</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.easing</span><span class="jsdoc-syntax">);
 352         }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
 353             </span><span class="jsdoc-var">this.el.setSize</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">box.width</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">box.height</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.animate</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.duration</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.easing</span><span class="jsdoc-syntax">);
 354         }
 355         </span><span class="jsdoc-var">this.updateChildSize</span><span class="jsdoc-syntax">();
 356         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.dynamic</span><span class="jsdoc-syntax">){
 357             </span><span class="jsdoc-var">this.proxy.hide</span><span class="jsdoc-syntax">();
 358         }
 359         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">;
 360     },
 361
 362     </span><span class="jsdoc-comment">// private
 363     </span><span class="jsdoc-var">constrain </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">diff</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">m</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">mx</span><span class="jsdoc-syntax">){
 364         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">v </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">diff </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">m</span><span class="jsdoc-syntax">){
 365             </span><span class="jsdoc-var">diff </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">v </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">m</span><span class="jsdoc-syntax">;
 366         }</span><span class="jsdoc-keyword">else if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">v </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">diff </span><span class="jsdoc-syntax">&gt; </span><span class="jsdoc-var">mx</span><span class="jsdoc-syntax">){
 367             </span><span class="jsdoc-var">diff </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">mx </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">;
 368         }
 369         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">diff</span><span class="jsdoc-syntax">;
 370     },
 371
 372     </span><span class="jsdoc-comment">// private
 373     </span><span class="jsdoc-var">onMouseMove </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">){
 374         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.enabled</span><span class="jsdoc-syntax">){
 375             </span><span class="jsdoc-keyword">try</span><span class="jsdoc-syntax">{</span><span class="jsdoc-comment">// try catch so if something goes wrong the user doesn't get hung
 376
 377             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.resizeRegion </span><span class="jsdoc-syntax">&amp;&amp; !</span><span class="jsdoc-var">this.resizeRegion.contains</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e.getPoint</span><span class="jsdoc-syntax">())) {
 378                 </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
 379             }
 380
 381             </span><span class="jsdoc-comment">//var curXY = this.startPoint;
 382             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">curSize </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.curSize </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">this.startBox</span><span class="jsdoc-syntax">;
 383             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.startBox.x</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.startBox.y</span><span class="jsdoc-syntax">;
 384             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">ox </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">oy </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">y</span><span class="jsdoc-syntax">;
 385             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">curSize.width</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">curSize.height</span><span class="jsdoc-syntax">;
 386             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">ow </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">oh </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">;
 387             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">mw </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.minWidth</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">mh </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.minHeight</span><span class="jsdoc-syntax">;
 388             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">mxw </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.maxWidth</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">mxh </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.maxHeight</span><span class="jsdoc-syntax">;
 389             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">wi </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.widthIncrement</span><span class="jsdoc-syntax">;
 390             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">hi </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.heightIncrement</span><span class="jsdoc-syntax">;
 391
 392             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">eventXY </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">e.getXY</span><span class="jsdoc-syntax">();
 393             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">diffX </span><span class="jsdoc-syntax">= -(</span><span class="jsdoc-var">this.startPoint</span><span class="jsdoc-syntax">[0] - </span><span class="jsdoc-var">Math.max</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.minX</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">eventXY</span><span class="jsdoc-syntax">[0]));
 394             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">diffY </span><span class="jsdoc-syntax">= -(</span><span class="jsdoc-var">this.startPoint</span><span class="jsdoc-syntax">[1] - </span><span class="jsdoc-var">Math.max</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.minY</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">eventXY</span><span class="jsdoc-syntax">[1]));
 395
 396             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">pos </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.activeHandle.position</span><span class="jsdoc-syntax">;
 397
 398             </span><span class="jsdoc-keyword">switch</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">pos</span><span class="jsdoc-syntax">){
 399                 </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;east&quot;</span><span class="jsdoc-syntax">:
 400                     </span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-var">diffX</span><span class="jsdoc-syntax">;
 401                     </span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.min</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Math.max</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">mw</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">), </span><span class="jsdoc-var">mxw</span><span class="jsdoc-syntax">);
 402                     </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
 403                 </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;south&quot;</span><span class="jsdoc-syntax">:
 404                     </span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-var">diffY</span><span class="jsdoc-syntax">;
 405                     </span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.min</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Math.max</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">mh</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">), </span><span class="jsdoc-var">mxh</span><span class="jsdoc-syntax">);
 406                     </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
 407                 </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;southeast&quot;</span><span class="jsdoc-syntax">:
 408                     </span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-var">diffX</span><span class="jsdoc-syntax">;
 409                     </span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-var">diffY</span><span class="jsdoc-syntax">;
 410                     </span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.min</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Math.max</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">mw</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">), </span><span class="jsdoc-var">mxw</span><span class="jsdoc-syntax">);
 411                     </span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.min</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Math.max</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">mh</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">), </span><span class="jsdoc-var">mxh</span><span class="jsdoc-syntax">);
 412                     </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
 413                 </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;north&quot;</span><span class="jsdoc-syntax">:
 414                     </span><span class="jsdoc-var">diffY </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.constrain</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">diffY</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">mh</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">mxh</span><span class="jsdoc-syntax">);
 415                     </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-var">diffY</span><span class="jsdoc-syntax">;
 416                     </span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">-= </span><span class="jsdoc-var">diffY</span><span class="jsdoc-syntax">;
 417                     </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
 418                 </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;west&quot;</span><span class="jsdoc-syntax">:
 419                     </span><span class="jsdoc-var">diffX </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.constrain</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">diffX</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">mw</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">mxw</span><span class="jsdoc-syntax">);
 420                     </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-var">diffX</span><span class="jsdoc-syntax">;
 421                     </span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">-= </span><span class="jsdoc-var">diffX</span><span class="jsdoc-syntax">;
 422                     </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
 423                 </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;northeast&quot;</span><span class="jsdoc-syntax">:
 424                     </span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-var">diffX</span><span class="jsdoc-syntax">;
 425                     </span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.min</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Math.max</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">mw</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">), </span><span class="jsdoc-var">mxw</span><span class="jsdoc-syntax">);
 426                     </span><span class="jsdoc-var">diffY </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.constrain</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">diffY</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">mh</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">mxh</span><span class="jsdoc-syntax">);
 427                     </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-var">diffY</span><span class="jsdoc-syntax">;
 428                     </span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">-= </span><span class="jsdoc-var">diffY</span><span class="jsdoc-syntax">;
 429                     </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
 430                 </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;northwest&quot;</span><span class="jsdoc-syntax">:
 431                     </span><span class="jsdoc-var">diffX </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.constrain</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">diffX</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">mw</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">mxw</span><span class="jsdoc-syntax">);
 432                     </span><span class="jsdoc-var">diffY </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.constrain</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">diffY</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">mh</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">mxh</span><span class="jsdoc-syntax">);
 433                     </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-var">diffY</span><span class="jsdoc-syntax">;
 434                     </span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">-= </span><span class="jsdoc-var">diffY</span><span class="jsdoc-syntax">;
 435                     </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-var">diffX</span><span class="jsdoc-syntax">;
 436                     </span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">-= </span><span class="jsdoc-var">diffX</span><span class="jsdoc-syntax">;
 437                     </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
 438                </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;southwest&quot;</span><span class="jsdoc-syntax">:
 439                     </span><span class="jsdoc-var">diffX </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.constrain</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">diffX</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">mw</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">mxw</span><span class="jsdoc-syntax">);
 440                     </span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-var">diffY</span><span class="jsdoc-syntax">;
 441                     </span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.min</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Math.max</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">mh</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">), </span><span class="jsdoc-var">mxh</span><span class="jsdoc-syntax">);
 442                     </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-var">diffX</span><span class="jsdoc-syntax">;
 443                     </span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">-= </span><span class="jsdoc-var">diffX</span><span class="jsdoc-syntax">;
 444                     </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
 445             }
 446
 447             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">sw </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.snap</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">wi</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">mw</span><span class="jsdoc-syntax">);
 448             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">sh </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.snap</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">hi</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">mh</span><span class="jsdoc-syntax">);
 449             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">sw </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">sh </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">){
 450                 </span><span class="jsdoc-keyword">switch</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">pos</span><span class="jsdoc-syntax">){
 451                     </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;northeast&quot;</span><span class="jsdoc-syntax">:
 452                         </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">-= </span><span class="jsdoc-var">sh </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">;
 453                     </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
 454                     </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;north&quot;</span><span class="jsdoc-syntax">:
 455                         </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">-= </span><span class="jsdoc-var">sh </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">;
 456                         </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
 457                     </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;southwest&quot;</span><span class="jsdoc-syntax">:
 458                         </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">-= </span><span class="jsdoc-var">sw </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">;
 459                     </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
 460                     </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;west&quot;</span><span class="jsdoc-syntax">:
 461                         </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">-= </span><span class="jsdoc-var">sw </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">;
 462                         </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
 463                     </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;northwest&quot;</span><span class="jsdoc-syntax">:
 464                         </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">-= </span><span class="jsdoc-var">sw </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">;
 465                         </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">-= </span><span class="jsdoc-var">sh </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">;
 466                     </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
 467                 }
 468                 </span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">sw</span><span class="jsdoc-syntax">;
 469                 </span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">sh</span><span class="jsdoc-syntax">;
 470             }
 471
 472             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.preserveRatio</span><span class="jsdoc-syntax">){
 473                 </span><span class="jsdoc-keyword">switch</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">pos</span><span class="jsdoc-syntax">){
 474                     </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;southeast&quot;</span><span class="jsdoc-syntax">:
 475                     </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;east&quot;</span><span class="jsdoc-syntax">:
 476                         </span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">oh </span><span class="jsdoc-syntax">* (</span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">/</span><span class="jsdoc-var">ow</span><span class="jsdoc-syntax">);
 477                         </span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.min</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Math.max</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">mh</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">), </span><span class="jsdoc-var">mxh</span><span class="jsdoc-syntax">);
 478                         </span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">ow </span><span class="jsdoc-syntax">* (</span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">/</span><span class="jsdoc-var">oh</span><span class="jsdoc-syntax">);
 479                        </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
 480                     </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;south&quot;</span><span class="jsdoc-syntax">:
 481                         </span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">ow </span><span class="jsdoc-syntax">* (</span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">/</span><span class="jsdoc-var">oh</span><span class="jsdoc-syntax">);
 482                         </span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.min</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Math.max</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">mw</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">), </span><span class="jsdoc-var">mxw</span><span class="jsdoc-syntax">);
 483                         </span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">oh </span><span class="jsdoc-syntax">* (</span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">/</span><span class="jsdoc-var">ow</span><span class="jsdoc-syntax">);
 484                         </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
 485                     </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;northeast&quot;</span><span class="jsdoc-syntax">:
 486                         </span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">ow </span><span class="jsdoc-syntax">* (</span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">/</span><span class="jsdoc-var">oh</span><span class="jsdoc-syntax">);
 487                         </span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.min</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Math.max</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">mw</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">), </span><span class="jsdoc-var">mxw</span><span class="jsdoc-syntax">);
 488                         </span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">oh </span><span class="jsdoc-syntax">* (</span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">/</span><span class="jsdoc-var">ow</span><span class="jsdoc-syntax">);
 489                     </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
 490                     </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;north&quot;</span><span class="jsdoc-syntax">:
 491                         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">tw </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">;
 492                         </span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">ow </span><span class="jsdoc-syntax">* (</span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">/</span><span class="jsdoc-var">oh</span><span class="jsdoc-syntax">);
 493                         </span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.min</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Math.max</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">mw</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">), </span><span class="jsdoc-var">mxw</span><span class="jsdoc-syntax">);
 494                         </span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">oh </span><span class="jsdoc-syntax">* (</span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">/</span><span class="jsdoc-var">ow</span><span class="jsdoc-syntax">);
 495                         </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">+= (</span><span class="jsdoc-var">tw </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">) / 2;
 496                         </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
 497                     </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;southwest&quot;</span><span class="jsdoc-syntax">:
 498                         </span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">oh </span><span class="jsdoc-syntax">* (</span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">/</span><span class="jsdoc-var">ow</span><span class="jsdoc-syntax">);
 499                         </span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.min</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Math.max</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">mh</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">), </span><span class="jsdoc-var">mxh</span><span class="jsdoc-syntax">);
 500                         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">tw </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">;
 501                         </span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">ow </span><span class="jsdoc-syntax">* (</span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">/</span><span class="jsdoc-var">oh</span><span class="jsdoc-syntax">);
 502                         </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-var">tw </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">;
 503                         </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
 504                     </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;west&quot;</span><span class="jsdoc-syntax">:
 505                         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">th </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">;
 506                         </span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">oh </span><span class="jsdoc-syntax">* (</span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">/</span><span class="jsdoc-var">ow</span><span class="jsdoc-syntax">);
 507                         </span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.min</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Math.max</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">mh</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">), </span><span class="jsdoc-var">mxh</span><span class="jsdoc-syntax">);
 508                         </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">+= (</span><span class="jsdoc-var">th </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">) / 2;
 509                         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">tw </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">;
 510                         </span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">ow </span><span class="jsdoc-syntax">* (</span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">/</span><span class="jsdoc-var">oh</span><span class="jsdoc-syntax">);
 511                         </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-var">tw </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">;
 512                        </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
 513                     </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;northwest&quot;</span><span class="jsdoc-syntax">:
 514                         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">tw </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">;
 515                         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">th </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">;
 516                         </span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">oh </span><span class="jsdoc-syntax">* (</span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">/</span><span class="jsdoc-var">ow</span><span class="jsdoc-syntax">);
 517                         </span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.min</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Math.max</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">mh</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">), </span><span class="jsdoc-var">mxh</span><span class="jsdoc-syntax">);
 518                         </span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">ow </span><span class="jsdoc-syntax">* (</span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">/</span><span class="jsdoc-var">oh</span><span class="jsdoc-syntax">);
 519                         </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-var">th </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">;
 520                          </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-var">tw </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">;
 521                        </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
 522
 523                 }
 524             }
 525             </span><span class="jsdoc-var">this.proxy.setBounds</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">y</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">);
 526             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.dynamic</span><span class="jsdoc-syntax">){
 527                 </span><span class="jsdoc-var">this.resizeElement</span><span class="jsdoc-syntax">();
 528             }
 529             }</span><span class="jsdoc-keyword">catch</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">){}
 530         }
 531     },
 532
 533     </span><span class="jsdoc-comment">// private
 534     </span><span class="jsdoc-var">handleOver </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 535         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.enabled</span><span class="jsdoc-syntax">){
 536             </span><span class="jsdoc-var">this.el.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;x-resizable-over&quot;</span><span class="jsdoc-syntax">);
 537         }
 538     },
 539
 540     </span><span class="jsdoc-comment">// private
 541     </span><span class="jsdoc-var">handleOut </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 542         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.resizing</span><span class="jsdoc-syntax">){
 543             </span><span class="jsdoc-var">this.el.removeClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;x-resizable-over&quot;</span><span class="jsdoc-syntax">);
 544         }
 545     },
 546
 547     </span><span class="jsdoc-comment">/**
 548      * Returns the element this component is bound to.
 549      * @return {Roo.Element}
 550      */
 551     </span><span class="jsdoc-var">getEl </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 552         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">;
 553     },
 554
 555     </span><span class="jsdoc-comment">/**
 556      * Returns the resizeChild element (or null).
 557      * @return {Roo.Element}
 558      */
 559     </span><span class="jsdoc-var">getResizeChild </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 560         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.resizeChild</span><span class="jsdoc-syntax">;
 561     },
 562
 563     </span><span class="jsdoc-comment">/**
 564      * Destroys this resizable. If the element was wrapped and
 565      * removeEl is not true then the element remains.
 566      * @param {Boolean} removeEl (optional) true to remove the element from the DOM
 567      */
 568     </span><span class="jsdoc-var">destroy </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">removeEl</span><span class="jsdoc-syntax">){
 569         </span><span class="jsdoc-var">this.proxy.remove</span><span class="jsdoc-syntax">();
 570         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.overlay</span><span class="jsdoc-syntax">){
 571             </span><span class="jsdoc-var">this.overlay.removeAllListeners</span><span class="jsdoc-syntax">();
 572             </span><span class="jsdoc-var">this.overlay.remove</span><span class="jsdoc-syntax">();
 573         }
 574         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">ps </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.Resizable.positions</span><span class="jsdoc-syntax">;
 575         </span><span class="jsdoc-keyword">for</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">k </span><span class="jsdoc-keyword">in </span><span class="jsdoc-var">ps</span><span class="jsdoc-syntax">){
 576             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">ps</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">k</span><span class="jsdoc-syntax">] != </span><span class="jsdoc-string">&quot;function&quot; </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">ps</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">k</span><span class="jsdoc-syntax">]]){
 577                 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">ps</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">k</span><span class="jsdoc-syntax">]];
 578                 </span><span class="jsdoc-var">h.el.removeAllListeners</span><span class="jsdoc-syntax">();
 579                 </span><span class="jsdoc-var">h.el.remove</span><span class="jsdoc-syntax">();
 580             }
 581         }
 582         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">removeEl</span><span class="jsdoc-syntax">){
 583             </span><span class="jsdoc-var">this.el.update</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;&quot;</span><span class="jsdoc-syntax">);
 584             </span><span class="jsdoc-var">this.el.remove</span><span class="jsdoc-syntax">();
 585         }
 586     }
 587 });
 588
 589 </span><span class="jsdoc-comment">// private
 590 // hash to map config positions to true positions
 591 </span><span class="jsdoc-var">Roo.Resizable.positions </span><span class="jsdoc-syntax">= {
 592     </span><span class="jsdoc-var">n</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;north&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">s</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;south&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;east&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;west&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">se</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;southeast&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">sw</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;southwest&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">nw</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;northwest&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">ne</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;northeast&quot;
 593 </span><span class="jsdoc-syntax">};
 594
 595 </span><span class="jsdoc-comment">// private
 596 </span><span class="jsdoc-var">Roo.Resizable.Handle </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">rz</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">pos</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">disableTrackOver</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">transparent</span><span class="jsdoc-syntax">){
 597     </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.tpl</span><span class="jsdoc-syntax">){
 598         </span><span class="jsdoc-comment">// only initialize the template if resizable is used
 599         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">tpl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.DomHelper.createTemplate</span><span class="jsdoc-syntax">(
 600             {</span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;div&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;x-resizable-handle x-resizable-handle-{0}&quot;</span><span class="jsdoc-syntax">}
 601         );
 602         </span><span class="jsdoc-var">tpl.compile</span><span class="jsdoc-syntax">();
 603         </span><span class="jsdoc-var">Roo.Resizable.Handle.prototype.tpl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">tpl</span><span class="jsdoc-syntax">;
 604     }
 605     </span><span class="jsdoc-var">this.position </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">pos</span><span class="jsdoc-syntax">;
 606     </span><span class="jsdoc-var">this.rz </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">rz</span><span class="jsdoc-syntax">;
 607     </span><span class="jsdoc-var">this.el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.tpl.append</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">rz.el.dom</span><span class="jsdoc-syntax">, [</span><span class="jsdoc-var">this.position</span><span class="jsdoc-syntax">], </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
 608     </span><span class="jsdoc-var">this.el.unselectable</span><span class="jsdoc-syntax">();
 609     </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">transparent</span><span class="jsdoc-syntax">){
 610         </span><span class="jsdoc-var">this.el.setOpacity</span><span class="jsdoc-syntax">(0);
 611     }
 612     </span><span class="jsdoc-var">this.el.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;mousedown&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onMouseDown</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 613     </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">disableTrackOver</span><span class="jsdoc-syntax">){
 614         </span><span class="jsdoc-var">this.el.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;mouseover&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onMouseOver</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 615         </span><span class="jsdoc-var">this.el.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;mouseout&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onMouseOut</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 616     }
 617 };
 618
 619 </span><span class="jsdoc-comment">// private
 620 </span><span class="jsdoc-var">Roo.Resizable.Handle.prototype </span><span class="jsdoc-syntax">= {
 621     </span><span class="jsdoc-var">afterResize </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">rz</span><span class="jsdoc-syntax">){
 622         </span><span class="jsdoc-comment">// do nothing
 623     </span><span class="jsdoc-syntax">},
 624     </span><span class="jsdoc-comment">// private
 625     </span><span class="jsdoc-var">onMouseDown </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">){
 626         </span><span class="jsdoc-var">this.rz.onMouseDown</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
 627     },
 628     </span><span class="jsdoc-comment">// private
 629     </span><span class="jsdoc-var">onMouseOver </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">){
 630         </span><span class="jsdoc-var">this.rz.handleOver</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
 631     },
 632     </span><span class="jsdoc-comment">// private
 633     </span><span class="jsdoc-var">onMouseOut </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">){
 634         </span><span class="jsdoc-var">this.rz.handleOut</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
 635     }
 636 };</span></code></body></html>