Skip to content
Permalink
Browse files

Resizable: correct aspectRatio handling with min/max dimensions. Fixe…

…d #4951 - Resizable with aspectRatio true & a maxWidth doesn't obey ratio once hit max width.
  • Loading branch information
Jeff Remy authored and scottgonzalez committed May 26, 2011
1 parent 597a313 commit 981e96948f45e5c5c32d005e379a5030c98c3d8d
Showing with 31 additions and 3 deletions.
  1. +31 −3 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);

0 comments on commit 981e969

Please sign in to comment.
You can’t perform that action at this time.