Resizable doesn't work correctly after rotation

[ilyavolodin]

Rotating an element to 180 degrees and then resizing top handle will make it look like you are resizing from the bottom. This is due to the fact that jQuery Resizable is not aware of the rotation angle. I tried to fix it and was able to fix it for the case of 180 degree rotation, but the rest of the angles would require more time investment and quite a bit of math calculations: Here's the code that partially fixes resizable:

if ($.ui.resizable)
{
    var _changeCopy = $.extend({}, $.ui.resizable.prototype._change);

    $.ui.resizable.prototype._change =  {
        newChange: function(event, dx, direction, dy)
        {
            var angle = getAngle(this);
            var convertedAngle = parseInt(angle / 90);
            var axisToAngle = { "s" : 0, "w" : 1, "n" : 2, "e" : 3 };

            if (typeof axisToAngle[direction] == 'undefined' || angle <= 90 || angle >= 270)
            {
                return _changeCopy[direction].call(this, event, dx, dy);
            }

            var angleToAxis = { 0 : "s", 1 : "w", 2: "n", 3: "e" };
            var correctedAxis = axisToAngle[direction] + convertedAngle;
            correctedAxis = correctedAxis % 4;
            return _changeCopy[angleToAxis[correctedAxis]].call(this, event, dx, dy);
        },
        e: function(event, dx)
        {
            return $.ui.resizable.prototype._change.newChange.call(this, event, dx, "e");
        },
        w: function(event, dx)
        {
            return $.ui.resizable.prototype._change.newChange.call(this, event, dx, "w");
        },
        n: function(event, dx, dy)
        {
            return $.ui.resizable.prototype._change.newChange.call(this, event, dx, "n", dy);
        },
        s: function(event, dx, dy)
        {
            return $.ui.resizable.prototype._change.newChange.call(this, event, dx, "s", dy);
        },
        se: function(event, dx, dy)
        {
            return $.ui.resizable.prototype._change.newChange.call(this, event, dx, "se", dy);
        },
        sw: function(event, dx, dy)
        {
            return $.ui.resizable.prototype._change.newChange.call(this, event, dx, "sw", dy);
        },
        ne: function(event, dx, dy)
        {
            return $.ui.resizable.prototype._change.newChange.call(this, event, dx, "ne", dy);
        },
        nw: function(event, dx, dy)
        {
            return $.ui.resizable.prototype._change.newChange.call(this, event, dx, "nw", dy);
        }
    };

    var getAngle = function(widget)
    {
        var rotatable = widget.element.data("uiRotatable");
        return rotatable.angle || 0;
    };
}

[bravoh]

I had faced the same issue with ui-resizable, what worked for me was to create a child div within the div and rotate it, that way, ui-resizable is not rotated but will resize whatever is in the child folder:

in my case .curr was the div with ui-resizable, i only wanted to rotate imges/svgs within it.

let rotate = (deg) =>  {

        let cssVal = 'rotate(' + deg + 'deg)';

        $('.curr img').css({
            'transform': cssVal,
            "-webkit-transform": cssVal,
            "-moz-transform": cssVal,
            "-ms-transform": cssVal,
            "-o-transform": cssVal
        });

        $('.deg').val(deg + ' deg');

        $('.curr svg').css(
            {
                'transform': cssVal,
                "-webkit-transform": cssVal,
                "-moz-transform": cssVal,
                "-ms-transform": cssVal,
                "-o-transform": cssVal
            });
    }