How to handle resizing of rotated elements?

Question

I am using the InteractJS library to enable resizing of DOM elements. However, I am having trouble getting the resizing to work correctly when the element has been rotated.

For example, consider the following code, which rotates an element by 45 degrees and then attempts to resize it.

When you resize the rectangle, the shape tends to move. i.e. you are dragging the bottom-right corner, but somehow the top-left corner is also moving. Also, the distance you drag horizontally or vertically does not quite match with the change in size you perceive in the rotated shape.

There are some usefull resource how explain the what problem is in Math lang. However, i'm really not good at Math so maybe anyone would understand.

https://shihn.ca/posts/2020/resizing-rotated-elements/

https://www.nmattia.com/posts/2020-03-03-drag-resize-rotate.html

Expected:

interact('.resize-drag')
  .resizable({
    preserveAspectRatio: true,
    edges: { left: true, right: true, bottom: true, top: true }
  })
  .on('resizemove', function (event) {
    var target = event.target,
    x = (parseFloat(target.getAttribute('data-x')) || 0),
    y = (parseFloat(target.getAttribute('data-y')) || 0);
    
    // update the element's style
    target.style.width  = event.rect.width + 'px';
    target.style.height = event.rect.height + 'px';

    // translate when resizing from top or left edges
    x += event.deltaRect.left;
    y += event.deltaRect.top;

    target.style.webkitTransform = 'translate(' + x + 'px,' + y + 'px)';
    target.style.transform = 'translate(' + x + 'px,' + y + 'px)';
    target.setAttribute('data-x', x);
    target.setAttribute('data-y', y);
    target.textContent = Math.round(event.rect.width) + '×' + Math.round(event.rect.height);
  });

.resize-drag {
  background-color: #29e;
  color: white;
  font-size: 13px;
  font-family: sans-serif;
  border-radius: 8px;
  padding: 20px;
  margin: 30px 20px;
  text-align: center;
  width: 120px;
  rotate: 1.2rad;
  /* This makes things *much* easier */
  box-sizing: border-box;
}

.resize-container {
  width: 240px;
  height: 240px;
  background: #ccc;
}

<script src="https://cdn.jsdelivr.net/interact.js/1.2.6/interact.min.js"></script>
<div class="resize-container">
  <div class="resize-drag">
     Resize from any edge or tr
  </div>
</div>

Any help would be appreciated. Thank you!

Answer 1

Disclaimer; The code works for bottom left aligned 0,0. Keep that in mind.

I'm not versatile with javascript, so remember that this is not copy-pastable but rather pseudo-code (I removed the brackets). (And forgive my bad drawings. If anything is unreadable tell me and ill edit them)

Essentially, for every handle, we want to pick a corner that should not move. Ideally on the opposite site of our handle. (We call that point A and our handle D) Next we want to find the Point C which should be the diagonal Point to A. If we have that point we can construct our new rect.

We do that by taking our handle and manually (I haven't found a way to automate that so you have to adjust it for each handle.) derive the point C.

This is quite easy to do for corner points as you only have to use the current mouse position as your C point. (You still have to pick the appropriate A point though)

If we have our points A and C we are good to go. Now we only have to do maths :D

We will need a function to rotate our points around an origin.

function rotate(point, origin , angle) -> Point:
    return Point(
        (point.x - origin.x) * Math.cos(angle) - (point.y - origin.y) * Math.sin(angle) + origin.x,
        (point.x - origin.x) * Math.sin(angle) + (point.y - origin.y) * Math.cos(angle) + origin.y,
    )

We also need a function to rotate our points around the center of their imaginary rect (Not the current rect but the rect that would form if we made a new one out of A and C) For now we pretend like our rect is not rotated.

So we take our fixed corner Point (A/corner_a) and rotate it around the current center of the rectangle to find out the position the rect would be if it was rotated. (This is the wrong position atm since we need to adjust). Then we find the center of our two points and rotate both our points back to 0 rotation. Then we rotate the points back around their new center (Which is shifted since the rect increased in size) and get our final points for our unrotated Rect.

function adjust_points(corner_a: Point, corner_c: Point, center: Point, angle: float) -> tuple[Point, Point]:

    var rotated_a: Point = rotate(corner_a, center, angle)

    var new_center : Point = Point(
        (rotated_a.x + corner_c.x) / 2,
        (rotated_a.y + corner_c.y) / 2
    )
    return rotate(rotated_a, new_center, -angle), rotate(corner_c, new_center, -angle)

Now all we have to do is construct our rect with our two points. (Example code here chooses BottomLeft as A and TopRight as C)

We chose A as our x,y since its the left most point. The width and height is equally easy calculated by simply subtracting the bigger point (C) with the smaller one (A).

function to_rect(a: Point, c: Point, handle: Handle) -> Rectangle:
    match (handle):
        case (Handle.TOP_RIGHT):
            return Rectangle(a.x, a.y, c.x - a.x, c.y - a.y)

And that's it. (Don't forget to set the center of the rotation if needed (before setting the size).)

You would use the code roughly like this (BR -> TL):

var a = rect.x, rect.y
var c = touch.x, touch.y
a, c =  adjust_points(a, c, rect.center, angle)
rect = to_rect(a, c, Handle.TOP_LEFT)

Or as another example if you want to use the MiddleBottom

var a = rect.x, rect.y + rect.height // we need to adjust our fixed corner

var c = touch.x, touch.y
c = rotate(c, rect.center, angle) // we need to rotate the touch to easily change the values. (ITs easier to determine points on a rect that is not rotated)
c.x = rect.x + rect.widht // lock x as we only want to change the height
c = rotate(c, rect.center, angle) // we need to rotate that back (remember we rotated c to 0 rotation to have an easier time calculating)

a, c =  adjust_points(a, c, rect.center, angle)
rect = to_rect(a, c, Handle.BOTTOM_MIDDLE)

I hope that was somewhat understandable but if not please let me know!

If you want a look at the entire script (its python tho) here is a link