1 <html><head><title>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">/*
4 * Copyright(c) 2006-2007, Ext JS, LLC.
6 * Originally Released Under LGPL - original licence link has changed is not relivant.
9 * <script type="text/javascript">
13 * @class Roo.Resizable
14 * @extends Roo.util.Observable
15 * <p>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 "resizeChild" to true (or to the id of the element), <b>or</b> set wrap:true in your config and
18 * the element will be wrapped for you automatically.</p>
19 * <p>Here is the list of valid resize handles:</p>
22 ------ -------------------
34 * <p>Here's an example showing the creation of a typical Resizable:</p>
35 * <pre><code>
36 var resizer = new Roo.Resizable("element-id", {
44 resizer.on("resize", myHandler);
45 </code></pre>
46 * <p>To hide a particular handle, set its display to none in CSS, or through script:<br>
47 * resizer.east.setDisplayed(false);</p>
48 * @cfg {Boolean/String/Element} resizeChild True to resize the first child, or id/element to resize (defaults to false)
49 * @cfg {Array/String} adjustments String "auto" or an array [width, height] with values to be <b>added</b> to the
50 * resize operation's new size (defaults to [0, 0])
51 * @cfg {Number} minWidth The minimum width for the element (defaults to 5)
52 * @cfg {Number} minHeight The minimum height for the element (defaults to 5)
53 * @cfg {Number} maxWidth The maximum width for the element (defaults to 10000)
54 * @cfg {Number} maxHeight The maximum height for the element (defaults to 10000)
55 * @cfg {Boolean} enabled False to disable resizing (defaults to true)
56 * @cfg {Boolean} wrap True to wrap an element with a div if needed (required for textareas and images, defaults to false)
57 * @cfg {Number} width The width of the element in pixels (defaults to null)
58 * @cfg {Number} height The height of the element in pixels (defaults to null)
59 * @cfg {Boolean} animate True to animate the resize (not compatible with dynamic sizing, defaults to false)
60 * @cfg {Number} duration Animation duration if animate = true (defaults to .35)
61 * @cfg {Boolean} dynamic True to resize the element while dragging instead of using a proxy (defaults to false)
62 * @cfg {String} handles String consisting of the resize handles to display (defaults to undefined)
63 * @cfg {Boolean} multiDirectional <b>Deprecated</b>. The old style of adding multi-direction resize handles, deprecated
64 * in favor of the handles config option (defaults to false)
65 * @cfg {Boolean} disableTrackOver True to disable mouse tracking. This is only applied at config time. (defaults to false)
66 * @cfg {String} easing Animation easing if animate = true (defaults to 'easingOutStrong')
67 * @cfg {Number} widthIncrement The increment to snap the width resize in pixels (dynamic must be true, defaults to 0)
68 * @cfg {Number} heightIncrement The increment to snap the height resize in pixels (dynamic must be true, defaults to 0)
69 * @cfg {Boolean} pinned True to ensure that the resize handles are always visible, false to display them only when the
70 * user mouses over the resizable borders. This is only applied at config time. (defaults to false)
71 * @cfg {Boolean} preserveRatio True to preserve the original ratio between height and width during resize (defaults to false)
72 * @cfg {Boolean} transparent True for transparent handles. This is only applied at config time. (defaults to false)
73 * @cfg {Number} minX The minimum allowed page X for the element (only used for west resizing, defaults to 0)
74 * @cfg {Number} minY The minimum allowed page Y for the element (only used for north resizing, defaults to 0)
75 * @cfg {Boolean} draggable Convenience to initialize drag drop (defaults to false)
77 * Create a new resizable component
78 * @param {String/HTMLElement/Roo.Element} el The id or element to resize
79 * @param {Object} config configuration options
81 </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">)
83 </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">);
85 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">config </span><span class="jsdoc-syntax">&& </span><span class="jsdoc-var">config.wrap</span><span class="jsdoc-syntax">){
86 </span><span class="jsdoc-var">config.resizeChild </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">;
87 </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">"object" </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">"xresizable-wrap"</span><span class="jsdoc-syntax">});
88 </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">"-rzwrap"</span><span class="jsdoc-syntax">;
89 </span><span class="jsdoc-var">this.el.setStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">"overflow"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">"hidden"</span><span class="jsdoc-syntax">);
90 </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">());
91 </span><span class="jsdoc-var">config.resizeChild.clearPositioning</span><span class="jsdoc-syntax">();
92 </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">){
93 </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">();
94 </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">);
96 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">config.pinned </span><span class="jsdoc-syntax">&& !</span><span class="jsdoc-var">config.adjustments</span><span class="jsdoc-syntax">){
97 </span><span class="jsdoc-var">config.adjustments </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">"auto"</span><span class="jsdoc-syntax">;
101 </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">"div"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">"x-resizable-proxy"</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">"-rzproxy"</span><span class="jsdoc-syntax">});
102 </span><span class="jsdoc-var">this.proxy.unselectable</span><span class="jsdoc-syntax">();
103 </span><span class="jsdoc-var">this.proxy.enableDisplayMode</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'block'</span><span class="jsdoc-syntax">);
105 </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">);
107 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.pinned</span><span class="jsdoc-syntax">){
108 </span><span class="jsdoc-var">this.disableTrackOver </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
109 </span><span class="jsdoc-var">this.el.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">"x-resizable-pinned"</span><span class="jsdoc-syntax">);
111 </span><span class="jsdoc-comment">// if the element isn't positioned, make it relative
112 </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">"position"</span><span class="jsdoc-syntax">);
113 </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">"absolute" </span><span class="jsdoc-syntax">&& </span><span class="jsdoc-var">position </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-string">"fixed"</span><span class="jsdoc-syntax">){
114 </span><span class="jsdoc-var">this.el.setStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">"position"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">"relative"</span><span class="jsdoc-syntax">);
116 </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
117 </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">;
118 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.multiDirectional</span><span class="jsdoc-syntax">){
119 </span><span class="jsdoc-var">this.handles </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-string">',n,w'</span><span class="jsdoc-syntax">;
122 </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">"all"</span><span class="jsdoc-syntax">){
123 </span><span class="jsdoc-var">this.handles </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">"n s e w ne nw se sw"</span><span class="jsdoc-syntax">;
125 </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*?| /);
126 </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">;
127 </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">< </span><span class="jsdoc-var">len</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++){
128 </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">] && </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">]]){
129 </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">]];
130 </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">);
133 </span><span class="jsdoc-comment">// legacy
134 </span><span class="jsdoc-var">this.corner </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.southeast</span><span class="jsdoc-syntax">;
136 </span><span class="jsdoc-comment">// updateBox = the box can move..
137 </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">"n"</span><span class="jsdoc-syntax">) != -1 || </span><span class="jsdoc-var">this.handles.indexOf</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">"w"</span><span class="jsdoc-syntax">) != -1 || </span><span class="jsdoc-var">this.handles.indexOf</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">"hd"</span><span class="jsdoc-syntax">) != -1) {
138 </span><span class="jsdoc-var">this.updateBox </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
141 </span><span class="jsdoc-var">this.activeHandle </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">;
143 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.resizeChild</span><span class="jsdoc-syntax">){
144 </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">"boolean"</span><span class="jsdoc-syntax">){
145 </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">);
146 }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
147 </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">);
151 </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">"auto"</span><span class="jsdoc-syntax">){
152 </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">;
153 </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">;
154 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">rc </span><span class="jsdoc-syntax">&& (</span><span class="jsdoc-var">hw </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">hn</span><span class="jsdoc-syntax">)){
155 </span><span class="jsdoc-var">rc.position</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">"relative"</span><span class="jsdoc-syntax">);
156 </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);
157 </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);
159 </span><span class="jsdoc-var">this.adjustments </span><span class="jsdoc-syntax">= [
160 (</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),
161 (</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
165 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.draggable</span><span class="jsdoc-syntax">){
166 </span><span class="jsdoc-var">this.dd </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.dynamic </span><span class="jsdoc-syntax">?
167 </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">});
168 </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">);
171 </span><span class="jsdoc-comment">// public events
172 </span><span class="jsdoc-var">this.addEvents</span><span class="jsdoc-syntax">({
173 </span><span class="jsdoc-comment">/**
174 * @event beforeresize
175 * Fired before resize is allowed. Set enabled to false to cancel resize.
176 * @param {Roo.Resizable} this
177 * @param {Roo.EventObject} e The mousedown event
179 </span><span class="jsdoc-string">"beforeresize" </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
180 </span><span class="jsdoc-comment">/**
183 * @param {Roo.Resizable} this
184 * @param {Number} x The new x position
185 * @param {Number} y The new y position
186 * @param {Number} w The new w width
187 * @param {Number} h The new h hight
188 * @param {Roo.EventObject} e The mouseup event
190 </span><span class="jsdoc-string">"resizing" </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
191 </span><span class="jsdoc-comment">/**
193 * Fired after a resize.
194 * @param {Roo.Resizable} this
195 * @param {Number} width The new width
196 * @param {Number} height The new height
197 * @param {Roo.EventObject} e The mouseup event
199 </span><span class="jsdoc-string">"resize" </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true
200 </span><span class="jsdoc-syntax">});
202 </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">&& </span><span class="jsdoc-var">this.height </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">){
203 </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">);
204 }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
205 </span><span class="jsdoc-var">this.updateChildSize</span><span class="jsdoc-syntax">();
207 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.isIE</span><span class="jsdoc-syntax">){
208 </span><span class="jsdoc-var">this.el.dom.style.zoom </span><span class="jsdoc-syntax">= 1;
210 </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">);
213 </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">, {
214 </span><span class="jsdoc-var">resizeChild </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
215 </span><span class="jsdoc-var">adjustments </span><span class="jsdoc-syntax">: [0, 0],
216 </span><span class="jsdoc-var">minWidth </span><span class="jsdoc-syntax">: 5,
217 </span><span class="jsdoc-var">minHeight </span><span class="jsdoc-syntax">: 5,
218 </span><span class="jsdoc-var">maxWidth </span><span class="jsdoc-syntax">: 10000,
219 </span><span class="jsdoc-var">maxHeight </span><span class="jsdoc-syntax">: 10000,
220 </span><span class="jsdoc-var">enabled </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
221 </span><span class="jsdoc-var">animate </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
222 </span><span class="jsdoc-var">duration </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">.35</span><span class="jsdoc-syntax">,
223 </span><span class="jsdoc-var">dynamic </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
224 </span><span class="jsdoc-var">handles </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
225 </span><span class="jsdoc-var">multiDirectional </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
226 </span><span class="jsdoc-var">disableTrackOver </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
227 </span><span class="jsdoc-var">easing </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'easeOutStrong'</span><span class="jsdoc-syntax">,
228 </span><span class="jsdoc-var">widthIncrement </span><span class="jsdoc-syntax">: 0,
229 </span><span class="jsdoc-var">heightIncrement </span><span class="jsdoc-syntax">: 0,
230 </span><span class="jsdoc-var">pinned </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
231 </span><span class="jsdoc-var">width </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">,
232 </span><span class="jsdoc-var">height </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">,
233 </span><span class="jsdoc-var">preserveRatio </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
234 </span><span class="jsdoc-var">transparent</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
235 </span><span class="jsdoc-var">minX</span><span class="jsdoc-syntax">: 0,
236 </span><span class="jsdoc-var">minY</span><span class="jsdoc-syntax">: 0,
237 </span><span class="jsdoc-var">draggable</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
239 </span><span class="jsdoc-comment">/**
240 * @cfg {String/HTMLElement/Element} constrainTo Constrain the resize to a particular element
242 </span><span class="jsdoc-var">constrainTo</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">undefined</span><span class="jsdoc-syntax">,
243 </span><span class="jsdoc-comment">/**
244 * @cfg {Roo.lib.Region} resizeRegion Constrain the resize to a particular region
246 </span><span class="jsdoc-var">resizeRegion</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">undefined</span><span class="jsdoc-syntax">,
249 </span><span class="jsdoc-comment">/**
250 * Perform a manual resize
251 * @param {Number} width
252 * @param {Number} height
254 </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">){
255 </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">);
256 </span><span class="jsdoc-var">this.updateChildSize</span><span class="jsdoc-syntax">();
257 </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">"resize"</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">);
260 </span><span class="jsdoc-comment">// private
261 </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">){
262 </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">"beforeresize"</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">);
263 </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
265 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.overlay</span><span class="jsdoc-syntax">){
266 </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">"div"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">"x-resizable-overlay"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">html</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">"&#160;"</span><span class="jsdoc-syntax">});
267 </span><span class="jsdoc-var">this.overlay.unselectable</span><span class="jsdoc-syntax">();
268 </span><span class="jsdoc-var">this.overlay.enableDisplayMode</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">"block"</span><span class="jsdoc-syntax">);
269 </span><span class="jsdoc-var">this.overlay.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">"mousemove"</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">);
270 </span><span class="jsdoc-var">this.overlay.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">"mouseup"</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">);
272 </span><span class="jsdoc-var">this.overlay.setStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">"cursor"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">handle.el.getStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">"cursor"</span><span class="jsdoc-syntax">));
274 </span><span class="jsdoc-var">this.resizing </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
275 </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">();
276 </span><span class="jsdoc-var">this.startPoint </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">e.getXY</span><span class="jsdoc-syntax">();
277 </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],
278 (</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]];
280 </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">));
281 </span><span class="jsdoc-var">this.overlay.show</span><span class="jsdoc-syntax">();
283 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.constrainTo</span><span class="jsdoc-syntax">) {
284 </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">);
285 </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">(
286 </span><span class="jsdoc-var">ct.getFrameWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'t'</span><span class="jsdoc-syntax">),
287 </span><span class="jsdoc-var">ct.getFrameWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'l'</span><span class="jsdoc-syntax">),
288 -</span><span class="jsdoc-var">ct.getFrameWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'b'</span><span class="jsdoc-syntax">),
289 -</span><span class="jsdoc-var">ct.getFrameWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'r'</span><span class="jsdoc-syntax">)
293 </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
294 </span><span class="jsdoc-var">this.proxy.show</span><span class="jsdoc-syntax">();
295 </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">);
296 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.dynamic</span><span class="jsdoc-syntax">){
297 </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">);
302 </span><span class="jsdoc-comment">// private
303 </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">){
304 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.enabled</span><span class="jsdoc-syntax">){
305 </span><span class="jsdoc-var">e.stopEvent</span><span class="jsdoc-syntax">();
306 </span><span class="jsdoc-var">this.activeHandle </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">handle</span><span class="jsdoc-syntax">;
307 </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">);
311 </span><span class="jsdoc-comment">// private
312 </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">){
313 </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">();
314 </span><span class="jsdoc-var">this.resizing </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
315 </span><span class="jsdoc-var">this.handleOut</span><span class="jsdoc-syntax">();
316 </span><span class="jsdoc-var">this.overlay.hide</span><span class="jsdoc-syntax">();
317 </span><span class="jsdoc-var">this.proxy.hide</span><span class="jsdoc-syntax">();
318 </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">"resize"</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">);
321 </span><span class="jsdoc-comment">// private
322 </span><span class="jsdoc-var">updateChildSize </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
324 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.resizeChild</span><span class="jsdoc-syntax">){
325 </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">;
326 </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">;
327 </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">;
328 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el.dom.offsetWidth</span><span class="jsdoc-syntax">){
329 </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">);
330 </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]);
332 </span><span class="jsdoc-comment">// Second call here for IE
333 // The first call enables instant resizing and
334 // the second call corrects scroll bars if they
336 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.isIE</span><span class="jsdoc-syntax">){
337 </span><span class="jsdoc-var">setTimeout</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
338 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el.dom.offsetWidth</span><span class="jsdoc-syntax">){
339 </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">);
340 </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]);
347 </span><span class="jsdoc-comment">// private
348 </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">){
349 </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">) {
350 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">value</span><span class="jsdoc-syntax">;
352 </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">;
353 </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">;
354 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">m </span><span class="jsdoc-syntax">> 0){
355 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">m </span><span class="jsdoc-syntax">> (</span><span class="jsdoc-var">inc</span><span class="jsdoc-syntax">/2)){
356 </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">);
357 }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
358 </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">;
361 </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">);
364 </span><span class="jsdoc-comment">// private
365 </span><span class="jsdoc-var">resizeElement </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
366 </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">();
367 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.updateBox</span><span class="jsdoc-syntax">){
368 </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">);
369 }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
370 </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">);
372 </span><span class="jsdoc-var">this.updateChildSize</span><span class="jsdoc-syntax">();
373 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.dynamic</span><span class="jsdoc-syntax">){
374 </span><span class="jsdoc-var">this.proxy.hide</span><span class="jsdoc-syntax">();
376 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">;
379 </span><span class="jsdoc-comment">// private
380 </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">){
381 </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">< </span><span class="jsdoc-var">m</span><span class="jsdoc-syntax">){
382 </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">;
383 }</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">> </span><span class="jsdoc-var">mx</span><span class="jsdoc-syntax">){
384 </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">;
386 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">diff</span><span class="jsdoc-syntax">;
389 </span><span class="jsdoc-comment">// private
390 </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">){
392 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.enabled</span><span class="jsdoc-syntax">){
393 </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
395 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.resizeRegion </span><span class="jsdoc-syntax">&& !</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">())) {
396 </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
399 </span><span class="jsdoc-comment">//var curXY = this.startPoint;
400 </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">;
401 </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">;
402 </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">;
403 </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">;
404 </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">;
405 </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">;
406 </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">;
407 </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">;
408 </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">;
410 </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">();
411 </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]));
412 </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]));
414 </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">;
416 </span><span class="jsdoc-keyword">switch</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">pos</span><span class="jsdoc-syntax">){
417 </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">"east"</span><span class="jsdoc-syntax">:
418 </span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-var">diffX</span><span class="jsdoc-syntax">;
419 </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">);
420 </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
422 </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">"south"</span><span class="jsdoc-syntax">:
423 </span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-var">diffY</span><span class="jsdoc-syntax">;
424 </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">);
425 </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
426 </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">"southeast"</span><span class="jsdoc-syntax">:
427 </span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-var">diffX</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-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">);
430 </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">);
431 </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
432 </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">"north"</span><span class="jsdoc-syntax">:
433 </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">);
434 </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-var">diffY</span><span class="jsdoc-syntax">;
435 </span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">-= </span><span class="jsdoc-var">diffY</span><span class="jsdoc-syntax">;
436 </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
437 </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">"hdrag"</span><span class="jsdoc-syntax">:
439 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">wi</span><span class="jsdoc-syntax">) {
440 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">adiffX </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.abs</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">diffX</span><span class="jsdoc-syntax">);
441 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">sub </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-var">adiffX </span><span class="jsdoc-syntax">% </span><span class="jsdoc-var">wi</span><span class="jsdoc-syntax">); </span><span class="jsdoc-comment">// how much
442 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">sub </span><span class="jsdoc-syntax">> (</span><span class="jsdoc-var">wi</span><span class="jsdoc-syntax">/2)) { </span><span class="jsdoc-comment">// far enough to snap
443 </span><span class="jsdoc-var">diffX </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-var">diffX </span><span class="jsdoc-syntax">> 0) ? </span><span class="jsdoc-var">diffX</span><span class="jsdoc-syntax">-</span><span class="jsdoc-var">sub </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">wi </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">diffX</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">sub </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">wi</span><span class="jsdoc-syntax">;
444 } </span><span class="jsdoc-keyword">else </span><span class="jsdoc-syntax">{
445 </span><span class="jsdoc-comment">// remove difference..
446 </span><span class="jsdoc-var">diffX </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-var">diffX </span><span class="jsdoc-syntax">> 0) ? </span><span class="jsdoc-var">diffX</span><span class="jsdoc-syntax">-</span><span class="jsdoc-var">sub </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">diffX</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">sub</span><span class="jsdoc-syntax">;
449 </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-var">diffX</span><span class="jsdoc-syntax">;
450 </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">= </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">x</span><span class="jsdoc-syntax">);
451 </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
452 </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">"west"</span><span class="jsdoc-syntax">:
453 </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">);
454 </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-var">diffX</span><span class="jsdoc-syntax">;
455 </span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">-= </span><span class="jsdoc-var">diffX</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">"northeast"</span><span class="jsdoc-syntax">:
458 </span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-var">diffX</span><span class="jsdoc-syntax">;
459 </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">);
460 </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">);
461 </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-var">diffY</span><span class="jsdoc-syntax">;
462 </span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">-= </span><span class="jsdoc-var">diffY</span><span class="jsdoc-syntax">;
463 </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
464 </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">"northwest"</span><span class="jsdoc-syntax">:
465 </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">);
466 </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">);
467 </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-var">diffY</span><span class="jsdoc-syntax">;
468 </span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">-= </span><span class="jsdoc-var">diffY</span><span class="jsdoc-syntax">;
469 </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-var">diffX</span><span class="jsdoc-syntax">;
470 </span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">-= </span><span class="jsdoc-var">diffX</span><span class="jsdoc-syntax">;
471 </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
472 </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">"southwest"</span><span class="jsdoc-syntax">:
473 </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">);
474 </span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-var">diffY</span><span class="jsdoc-syntax">;
475 </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">);
476 </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-var">diffX</span><span class="jsdoc-syntax">;
477 </span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">-= </span><span class="jsdoc-var">diffX</span><span class="jsdoc-syntax">;
478 </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
481 </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">);
482 </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">);
483 </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">){
484 </span><span class="jsdoc-keyword">switch</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">pos</span><span class="jsdoc-syntax">){
485 </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">"northeast"</span><span class="jsdoc-syntax">:
486 </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">;
487 </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
488 </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">"north"</span><span class="jsdoc-syntax">:
489 </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">;
490 </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
491 </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">"southwest"</span><span class="jsdoc-syntax">:
492 </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">;
493 </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
494 </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">"west"</span><span class="jsdoc-syntax">:
495 </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">;
496 </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
497 </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">"northwest"</span><span class="jsdoc-syntax">:
498 </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">;
499 </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">;
500 </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
502 </span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">sw</span><span class="jsdoc-syntax">;
503 </span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">sh</span><span class="jsdoc-syntax">;
506 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.preserveRatio</span><span class="jsdoc-syntax">){
507 </span><span class="jsdoc-keyword">switch</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">pos</span><span class="jsdoc-syntax">){
508 </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">"southeast"</span><span class="jsdoc-syntax">:
509 </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">"east"</span><span class="jsdoc-syntax">:
510 </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">);
511 </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">);
512 </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">);
513 </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
514 </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">"south"</span><span class="jsdoc-syntax">:
515 </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">);
516 </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">);
517 </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">);
518 </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
519 </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">"northeast"</span><span class="jsdoc-syntax">:
520 </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">);
521 </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">);
522 </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">);
523 </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
524 </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">"north"</span><span class="jsdoc-syntax">:
525 </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">;
526 </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">);
527 </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">);
528 </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">);
529 </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;
530 </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
531 </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">"southwest"</span><span class="jsdoc-syntax">:
532 </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">);
533 </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">);
534 </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">;
535 </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">);
536 </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">;
537 </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
538 </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">"west"</span><span class="jsdoc-syntax">:
539 </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">;
540 </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">);
541 </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">);
542 </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;
543 </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">;
544 </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">);
545 </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">;
546 </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
547 </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">"northwest"</span><span class="jsdoc-syntax">:
548 </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">;
549 </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">;
550 </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">);
551 </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">);
552 </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">);
553 </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">;
554 </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">;
555 </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
559 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">pos </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'hdrag'</span><span class="jsdoc-syntax">) {
560 </span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">ow</span><span class="jsdoc-syntax">;
562 </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">);
563 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.dynamic</span><span class="jsdoc-syntax">){
564 </span><span class="jsdoc-var">this.resizeElement</span><span class="jsdoc-syntax">();
566 }</span><span class="jsdoc-keyword">catch</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">){}
568 </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">"resizing"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</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">, </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
571 </span><span class="jsdoc-comment">// private
572 </span><span class="jsdoc-var">handleOver </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
573 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.enabled</span><span class="jsdoc-syntax">){
574 </span><span class="jsdoc-var">this.el.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">"x-resizable-over"</span><span class="jsdoc-syntax">);
578 </span><span class="jsdoc-comment">// private
579 </span><span class="jsdoc-var">handleOut </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
580 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.resizing</span><span class="jsdoc-syntax">){
581 </span><span class="jsdoc-var">this.el.removeClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">"x-resizable-over"</span><span class="jsdoc-syntax">);
585 </span><span class="jsdoc-comment">/**
586 * Returns the element this component is bound to.
587 * @return {Roo.Element}
589 </span><span class="jsdoc-var">getEl </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
590 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">;
593 </span><span class="jsdoc-comment">/**
594 * Returns the resizeChild element (or null).
595 * @return {Roo.Element}
597 </span><span class="jsdoc-var">getResizeChild </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
598 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.resizeChild</span><span class="jsdoc-syntax">;
600 </span><span class="jsdoc-var">groupHandler </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
604 </span><span class="jsdoc-comment">/**
605 * Destroys this resizable. If the element was wrapped and
606 * removeEl is not true then the element remains.
607 * @param {Boolean} removeEl (optional) true to remove the element from the DOM
609 </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">){
610 </span><span class="jsdoc-var">this.proxy.remove</span><span class="jsdoc-syntax">();
611 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.overlay</span><span class="jsdoc-syntax">){
612 </span><span class="jsdoc-var">this.overlay.removeAllListeners</span><span class="jsdoc-syntax">();
613 </span><span class="jsdoc-var">this.overlay.remove</span><span class="jsdoc-syntax">();
615 </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">;
616 </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">){
617 </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">"function" </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">]]){
618 </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">]];
619 </span><span class="jsdoc-var">h.el.removeAllListeners</span><span class="jsdoc-syntax">();
620 </span><span class="jsdoc-var">h.el.remove</span><span class="jsdoc-syntax">();
623 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">removeEl</span><span class="jsdoc-syntax">){
624 </span><span class="jsdoc-var">this.el.update</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">""</span><span class="jsdoc-syntax">);
625 </span><span class="jsdoc-var">this.el.remove</span><span class="jsdoc-syntax">();
630 </span><span class="jsdoc-comment">// private
631 // hash to map config positions to true positions
632 </span><span class="jsdoc-var">Roo.Resizable.positions </span><span class="jsdoc-syntax">= {
633 </span><span class="jsdoc-var">n</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">"north"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">s</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">"south"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">"east"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">"west"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">se</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">"southeast"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">sw</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">"southwest"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">nw</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">"northwest"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">ne</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">"northeast"</span><span class="jsdoc-syntax">,
634 </span><span class="jsdoc-var">hd</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">"hdrag"
635 </span><span class="jsdoc-syntax">};
637 </span><span class="jsdoc-comment">// private
638 </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">){
639 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.tpl</span><span class="jsdoc-syntax">){
640 </span><span class="jsdoc-comment">// only initialize the template if resizable is used
641 </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">(
642 {</span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">"div"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">"x-resizable-handle x-resizable-handle-{0}"</span><span class="jsdoc-syntax">}
644 </span><span class="jsdoc-var">tpl.compile</span><span class="jsdoc-syntax">();
645 </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">;
647 </span><span class="jsdoc-var">this.position </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">pos</span><span class="jsdoc-syntax">;
648 </span><span class="jsdoc-var">this.rz </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">rz</span><span class="jsdoc-syntax">;
649 </span><span class="jsdoc-comment">// show north drag fro topdra
650 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">handlepos </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">pos </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'hdrag' </span><span class="jsdoc-syntax">? </span><span class="jsdoc-string">'north' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">pos</span><span class="jsdoc-syntax">;
652 </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">handlepos</span><span class="jsdoc-syntax">], </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
653 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">pos </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'hdrag'</span><span class="jsdoc-syntax">) {
654 </span><span class="jsdoc-var">this.el.setStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'cursor'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'pointer'</span><span class="jsdoc-syntax">);
656 </span><span class="jsdoc-var">this.el.unselectable</span><span class="jsdoc-syntax">();
657 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">transparent</span><span class="jsdoc-syntax">){
658 </span><span class="jsdoc-var">this.el.setOpacity</span><span class="jsdoc-syntax">(0);
660 </span><span class="jsdoc-var">this.el.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">"mousedown"</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">);
661 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">disableTrackOver</span><span class="jsdoc-syntax">){
662 </span><span class="jsdoc-var">this.el.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">"mouseover"</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">);
663 </span><span class="jsdoc-var">this.el.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">"mouseout"</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">);
667 </span><span class="jsdoc-comment">// private
668 </span><span class="jsdoc-var">Roo.Resizable.Handle.prototype </span><span class="jsdoc-syntax">= {
669 </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">){
670 </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'after?'</span><span class="jsdoc-syntax">);
671 </span><span class="jsdoc-comment">// do nothing
672 </span><span class="jsdoc-syntax">},
673 </span><span class="jsdoc-comment">// private
674 </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">){
675 </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">);
677 </span><span class="jsdoc-comment">// private
678 </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">){
679 </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">);
681 </span><span class="jsdoc-comment">// private
682 </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">){
683 </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">);
685 };</span></code></body></html>