Rotated RND resizing problem

@nandukalidindi The library will not support rotation by it self. As discussed here (https://github.com/bokuweb/re-resizable/pull/129). You must use latest version and implement your logic.

Here is my implementation in ES6. You must know how big the div is. Set the handleWrapperStyle prop. Feel free to use it. Don’t know If it should be implemented by the library. @bokuweb ?

The rotation is not set on the resize div, but in children div (your div). The calculation will just fix the “handlers” to match the children rotation.

/**
 * Calculates new rotation for only left corner, will match the parents rotation, only
 * for 0 0 origin rotation
 *
 * @param {number} rotation
 * @return {number}
 */
export function calculateRotationForLeftCorner (rotation) {
    // Convert the range from 0 - 360 to 4 parts from 0 - 90 where we can detect
    // where the edges should rotated. From 0 - 45 it will rotate item down, from
    // 45 - 90 it will rotate item up
    const menuRotation = rotation - (Math.floor(rotation / 90) * 90)

    // If the rotation is 45 deg, we need to rotate the menu up
    if (menuRotation > 45) {
        return -90 + menuRotation
    }

    return menuRotation
}

export function createHandlersStyle (rotation, width, height) {
    // This will ensure that resizing will occur from correct orientation of resize handlers, not the view
    const rotationByLeftCorner = calculateRotationForLeftCorner(rotation)
    const wrapperStyle = {
        transform: `rotate(${rotationByLeftCorner}deg)`
    }

    // Detect if the item is rotated in way, where height is width, we need to adjust the resize container
    const rotationStep = Math.abs(rotation / 45)
    if ((rotationStep >= 1 && rotationStep < 3) || (rotationStep >= 5 && rotationStep < 7)) {
        wrapperStyle.width = height
        wrapperStyle.height = width
        // We need to rotate item around original center point, lets move new
        // center point into the original point
        wrapperStyle.marginTop = -width / 2
        wrapperStyle.marginLeft = -height / 2
        wrapperStyle.left = width / 2
        wrapperStyle.top = height / 2
    }
   return    wrapperStyle
}

Sorry, I haven’t gotten a chance to try out the approach suggested by @pionl which could work for my use case. Now that handleWrapperStyle is implemented in the library itself, will give it a shot. Thanks @pionl and @bokuweb. Closing this issue for now.