Resizable: correct aspectRatio handling with min/max dimensions. Fixed #4951 - Resiza...

(cherry picked from commit 981e96948f45e5c5c32d005e379a5030c98c3d8d)

diff --git a/ui/jquery.ui.resizable.js b/ui/jquery.ui.resizable.js
index e0579ef849661e53f2fb7846b69ba89b276ba350..de24e94dde034480122c667fc93ffa3758636907 100644 (file)
--- a/ui/jquery.ui.resizable.js
+++ b/ui/jquery.ui.resizable.js
@@ -293,6 +293,8 @@ $.widget("ui.resizable", $.ui.mouse, {
                // Calculate the attrs that will be change
                var data = trigger.apply(this, [event, dx, dy]), ie6 = $.browser.msie && $.browser.version < 7, csdif = this.sizeDiff;
 
+               // Put this in the mouseDrag handler since the user can start pressing shift while resizing
+               this._updateVirtualBoundaries(event.shiftKey);
                if (this._aspectRatio || event.shiftKey)
                        data = this._updateRatio(data, event);
 
@@ -351,6 +353,32 @@ $.widget("ui.resizable", $.ui.mouse, {
 
        },
 
+    _updateVirtualBoundaries: function(forceAspectRatio) {
+        var o = this.options, pMinWidth, pMaxWidth, pMinHeight, pMaxHeight, b;
+
+        b = {
+            minWidth: isNumber(o.minWidth) ? o.minWidth : 0,
+            maxWidth: isNumber(o.maxWidth) ? o.maxWidth : Infinity,
+            minHeight: isNumber(o.minHeight) ? o.minHeight : 0,
+            maxHeight: isNumber(o.maxHeight) ? o.maxHeight : Infinity
+        };
+
+        if(this._aspectRatio || forceAspectRatio) {
+            // We want to create an enclosing box whose aspect ration is the requested one
+            // First, compute the "projected" size for each dimension based on the aspect ratio and other dimension
+            pMinWidth = b.minHeight * this.aspectRatio;
+            pMinHeight = b.minWidth / this.aspectRatio;
+            pMaxWidth = b.maxHeight * this.aspectRatio;
+            pMaxHeight = b.maxWidth / this.aspectRatio;
+
+            if(pMinWidth > b.minWidth) b.minWidth = pMinWidth;
+            if(pMinHeight > b.minHeight) b.minHeight = pMinHeight;
+            if(pMaxWidth < b.maxWidth) b.maxWidth = pMaxWidth;
+            if(pMaxHeight < b.maxHeight) b.maxHeight = pMaxHeight;
+        }
+        this._vBoundaries = b;
+    },
+
        _updateCache: function(data) {
                var o = this.options;
                this.offset = this.helper.offset();
@@ -364,8 +392,8 @@ $.widget("ui.resizable", $.ui.mouse, {
 
                var o = this.options, cpos = this.position, csize = this.size, a = this.axis;
 
-               if (data.height) data.width = (csize.height * this.aspectRatio);
-               else if (data.width) data.height = (csize.width / this.aspectRatio);
+               if (isNumber(data.height)) data.width = (data.height * this.aspectRatio);
+               else if (isNumber(data.width)) data.height = (data.width / this.aspectRatio);
 
                if (a == 'sw') {
                        data.left = cpos.left + (csize.width - data.width);
@@ -381,7 +409,7 @@ $.widget("ui.resizable", $.ui.mouse, {
 
        _respectSize: function(data, event) {
 
-               var el = this.helper, o = this.options, pRatio = this._aspectRatio || event.shiftKey, a = this.axis,
+               var el = this.helper, o = this._vBoundaries, pRatio = this._aspectRatio || event.shiftKey, a = this.axis,
                                ismaxw = isNumber(data.width) && o.maxWidth && (o.maxWidth < data.width), ismaxh = isNumber(data.height) && o.maxHeight && (o.maxHeight < data.height),
                                        isminw = isNumber(data.width) && o.minWidth && (o.minWidth > data.width), isminh = isNumber(data.height) && o.minHeight && (o.minHeight > data.height);