jquery ui resizable: resizing the rotated objects

Question

The issue:

Jquery-ui-resizable doesn't seem to work correctly for rotated objects. After rotating the element the handles do the same thing they would do on unrotated element.

The idea:

The axis can probably be rotated according to the rotation matrix (http://en.wikipedia.org/wiki/Rotation_matrix). So I guess we can get updated mouse coords with x' = x*cos(a) -y*sin(a); y' = x*sin(a) + y*cos(a).

Have anyone seen the similar solution (patch, or a standalone jquery plugin for resizing)? Can anyone give an advice for me if I would rewrite the _mouseStart and _mouseDrag methods of a jquery.ui.resizable?

Answer 1

Okay, finally I've returned to my issue and got some progress: https://github.com/andyzee/jquery-resizable-rotation-patch I decided not to use rotation matrix right now (though, it actually works), but to switch the handlers

function switchAxis(axis, angle) {
    while(angle >= 360) angle = 360-angle;
    while(angle < 0) angle = 360+angle;
    var axisArray = ["n", "ne", "e", "se", "s", "sw", "w", "nw"];
    var octant = Math.round(angle/45); // 0 .. 7
    var index = 0;
    if ( [].indexOf ) {
        index = axisArray.indexOf(axis);
    } else {
        for(var i=0; i<axisArray.length; i++) {
            if (axisArray[i] === axis) index = i;
        }
    }
    var newAxisIndex = (index + octant) % 8;
    return axisArray[newAxisIndex];
}

I'll surely continue my search and probably will write own solution.