Algorithm for rotating and resizing an image by handles

Question

I wish to replicate the image editing UX functionality of Google Docs, where the image can be rotated to any degree and resized.

By inspecting Google docs, I have noticed that the image is inside the <canvas /> element.

In my app, the image is not in the canvas. Rather it is simply an <img />. In each orner of the image, I positioned <button />, to serve as resize handles.

One very important UX functionality, which I wish to replicate, is that when the resize handle is clicked and dragged, the mouse cursor always stay on the image edge. Or in other words, the image re-size always follows where the cursor is. If the cursor is below the image, it's going to resize height. If the cursor is to the right of the image, it's going to resize width.

The code I've developped (shown below) kind of works when the image is not rotated. I say it kind of works because there is an egde case where it's not working as expected - if the resize handle (it's big, 15px x 15px) is clicked at the very bottom (it's then below the bottom edge of the image) and the cursor is dragged to the right, it goes past the right edge of the image and keeps resizing height (expected behaviour: once the cursor is past the right edge, start resizing width from the right edge).

One the image is rotated, it doesn't work correctly at all. I followed this SO post which describes calculating sinus and cosinus.

My app is written in ReactJS, I couldn't find any plugin for image editing like that. Any help highly appreciated.

HTML:

<div
    onClick={onClick} 
    style={{ 
        transform: "rotate(" + props.data.Rotation + "deg)", 
        transformOrigin: "center center"
    }}
>
    <button
        ref={handlerRef}
        onMouseDown={() => handler() }     
        style={{
            backgroundColor: "white",
            width: "15px",
            height: "15px",
            borderRadius: "15px",
            border: "2px solid dodgerblue",
            position: "absolute",
            top: "-7px",
            left: "-7px",
            cursor: "nwse-resize"
        }}
    />

    <img src={props.data.url}
         id="editedImage"
         style={{ border: "2px solid dodgerblue"}}
    />

    <button
        ref={handlerRef}
        onMouseDown={() => handler() }     
        style={{
            backgroundColor: "green",
            width: "15px",
            height: "15px",
            borderRadius: "15px",
            border: "2px solid dodgerblue",
            position: "absolute",
            float: "right",
            bottom: "-4px",
            right: "-7px",
            cursor: "nwse-resize"
        }}
    />
</div>

React:

const handler = useCallback((e) => {

    let editedImageDOM = document.getElementById("editedImage");
    let editedImageDOMBoundingClient = editedImageDOM.getBoundingClientRect();

    let elementWidth = editedImageDOM.width;
    let elementHeight = editedImageDOM.height;

    let newWidth = elementWidth;
    let newHeight = elementHeight;

    let prevIsCursorsToTheRightOfImage = true; // used to detect when mouse cursor crossed the right edge of the image, to prevent glitching between width and height; Remove it, and resize the image on the right edge to see what I mean

    let calculatedImgBorderBottom;
    let calculatedImgBorderRight;
    
    // TODO: 
    // temporary hardcode
    //
    let elementRotated = true;

    // On each mouse move, resize the image
    const onMouseMove = (e) => {
       
        // If image is NOT rotated - pretty much works
        if(!elementRotated){

            // update the bounding client data
            editedImageDOMBoundingClient = editedImageDOM.getBoundingClientRect();

            calculatedImgBorderBottom = editedImageDOMBoundingClient.bottom;
            calculatedImgBorderRight = editedImageDOMBoundingClient.right;

            let isCursorsToTheRightOfImage = e.clientX  + 0 > calculatedImgBorderRight - 0;
            let isCursorsToTheBottomOfImage = e.clientY + 0 > calculatedImgBorderBottom + 0;



            newHeight += e.movementY;
            newWidth += e.movementX;
        
            // Logic to detect when mouse cursor crossed the right edge of the image, to prevent glitching between width and height, as it should resize width only in this case; 
            if(prevIsCursorsToTheRightOfImage && !isCursorsToTheRightOfImage && !isCursorsToTheBottomOfImage){
                isCursorsToTheRightOfImage = true;
            }

            // Logic to have that nice UX functionality of G-Docs
            if(isCursorsToTheRightOfImage && isCursorsToTheBottomOfImage){
                isCursorsToTheRightOfImage = false;
            }
        
            prevIsCursorsToTheRightOfImage = isCursorsToTheRightOfImage;


            if (!isCursorsToTheRightOfImage){
                editedImageDOM.height = newHeight;
                editedImageDOM.removeAttribute("width");
            } else {
                editedImageDOM.width = newWidth;
                editedImageDOM.removeAttribute("height");
            }


        } else { // If the element is rotated
            
            let R = -45; //hardcoded for now

            calculatedImgBorderBottom = editedImageDOMBoundingClient.bottom;
            calculatedImgBorderRight = editedImageDOMBoundingClient.right;

            let isCursorsToTheRightOfImage = e.clientX  + 0 > calculatedImgBorderRight - 0;
            let isCursorsToTheBottomOfImage = e.clientY + 0 > calculatedImgBorderBottom + 0;

            var len = Math.sqrt(Math.pow(e.movementX,2)+Math.pow(e.movementY,2));

            var hDif=Math.sin(R)*len;
            var wDif=Math.cos(R)*len;

            newHeight += hDif;
            newWidth += wDif;

            
            if (!isCursorsToTheRightOfImage){
                editedImageDOM.height = newHeight;
                editedImageDOM.removeAttribute("width");
            } else {
                editedImageDOM.width = newWidth;
                editedImageDOM.removeAttribute("height");
            }

        }
        
    }
    const onMouseUp = (e) => {
        document.body.removeEventListener("mousemove", onMouseMove);
        document.body.removeEventListener("mouseup", onMouseUp);
    }
    document.body.addEventListener("mousemove", onMouseMove);
    document.body.addEventListener("mouseup", onMouseUp);
}, []);