#6783 open bug ()

Opened December 27, 2010 03:25AM UTC

Last modified November 04, 2013 02:21AM UTC

Resizable: aspect ratio is only calculated in one direction

Reported by: em Owned by:
Priority: minor Milestone: 2.0.0
Component: ui.resizable Version: 1.8.7
Keywords: Cc:
Blocked by: Blocking:
Description

See the second comment for the description.

Attachments (0)
Change History (7)

Changed December 27, 2010 03:32AM UTC by scottgonzalez comment:1

resolution: → invalid
status: new → closed

Please provide a description of the actual problem instead of just dumping a bunch of code into a ticket. Also, please don't paste code into tickets; use jsFiddle or jsbin.

Changed December 27, 2010 07:23AM UTC by em comment:2

Look at the demo: http://jqueryui.com/demos/resizable/#aspect-ratio

Move your cursor to the left without moving the cursor upwards, and it doesn't resize. It only resizes based on the y axis.

Now open up any graphic editor, 3d modeler, or anything that does resizing ever made, and notice the logic follows the little code snippet at the top of my original post.

Changed January 11, 2011 07:30PM UTC by scottgonzalez comment:3

description: Here's an example of my working replacement, since I couldn't use ui.resizable. \ \ Notable difference is in this piece of code, which is the same as every kind of graphic editor out there. \ \ var aspect = settings.aspect; \ \ var diff_x = new_x - start_x; \ var diff_y = new_y - start_y; \ \ if(diff_x < diff_y*aspect) { \ diff_x = diff_y * aspect; \ } \ else { \ diff_y = diff_x / aspect; \ } \ \ ------------ whole plugin --------------------- \ \ (function($){ \ \ var $current = null; \ \ var start_x = 0; \ var start_y = 0; \ var start_w = 0; \ var start_h = 0; \ \ $.fn.myresizable = function(settings){ \ \ //settings = $.extend( {}, $myresizable.defaults, settings ); \ \ \ $(window).mouseup(function() { \ $current = null; \ }); \ \ function update(new_x,new_y) { \ if(!$current) \ return; \ \ var aspect = settings.aspect; \ \ var diff_x = new_x - start_x; \ var diff_y = new_y - start_y; \ \ if(diff_x < diff_y*aspect) { \ diff_x = diff_y * aspect; \ } \ else { \ diff_y = diff_x / aspect; \ } \ \ var new_width = start_w + diff_x; \ var new_height = start_h + diff_y; \ \ $current.width(new_width); \ $current.height(new_height); \ \ if(settings.resize) { \ settings.resize.apply($current, [new_width, new_height]); \ } \ } \ \ $(window).mousemove(function(e) { \ update(e.screenX, e.screenY); \ }); \ \ $(window).bind('mousewheel',function(e) { \ update(e.screenX, e.screenY); \ console.log($current); \ }); \ \ this.find('.resizer').mousedown(function(e) { \ var $resizer = $(this); \ $current = $resizer.parent(); \ $current.disableSelection(); \ \ start_x = e.screenX; \ start_y = e.screenY; \ start_w = $current.width(); \ start_h = $current.height(); \ settings.aspect = settings.aspect || (start_w/start_h); \ \ }); \ \ \ return this; \ }; \ \ })( jQuery ); → See [http://bugs.jqueryui.com/ticket/6783#comment:2 the second comment] for the description.
resolution: invalid
status: closed → reopened
summary: ui.resizable ignored x axis instead of calculating with max difference → Resizable: aspect ratio is only calculated in one direction

Changed October 11, 2012 02:52PM UTC by scottgonzalez comment:4

milestone: 1.9.0 → 2.0.0

Changed October 27, 2012 08:19PM UTC by mikesherov comment:5

status: reopened → open

Changed November 03, 2013 01:53AM UTC by dekajp comment:6

Replying to [comment:2 em]:

Move your cursor to the left without moving the cursor upwards, and it doesn't resize. It only resizes based on the y axis.

Could not figure out which side Resizable handle i should drag ? E or W ?

Changed November 04, 2013 02:21AM UTC by tj.vantoll comment:7

Replying to [comment:6 dekajp]:

Replying to [comment:2 em]: > Move your cursor to the left without moving the cursor upwards, and it doesn't resize. It only resizes based on the y axis. Could not figure out which side Resizable handle i should drag ? E or W ?

Grab the SE handle and drag it west.