Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 13 commits into from
Closed

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

Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
e7e00cc
Check if we are too far left / down as well as right / bottom - Fix #…
Apr 23, 2011
401962d
Improved fix. When element does not fit, set it to top / left border …
Apr 25, 2011
1db56e4
Last commit deleted one line too many
Apr 25, 2011
c71d898
Factorized first two tests
Apr 25, 2011
3bf4ddb
Merge remote branch 'upstream/master'
May 3, 2011
a430286
Merge remote branch 'upstream/master'
May 4, 2011
24f51da
Merge remote branch 'upstream/master'
May 5, 2011
6c71d6e
Merge remote branch 'upstream/master'
May 6, 2011
d5f4319
Merge remote branch 'upstream/master'
May 9, 2011
8fa9ebd
Merge remote branch 'upstream/master'
May 10, 2011
27de151
Merge remote branch 'upstream/master'
May 12, 2011
6758d96
Merge remote branch 'upstream/master'
May 16, 2011
0678362
Resizable: correct aspectRatio handling with min/max dimensions - Fix…
May 16, 2011
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 31 additions & 3 deletions ui/jquery.ui.resizable.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand Down Expand Up @@ -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();
Expand All @@ -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);
Expand All @@ -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);

Expand Down