Performance and poor experience on element rotation with Angular

Question

in Angular 17 I'm building a board on which various elements are placed that can be moved, resized and rotated. I'll preface this by saying that I have very little experience on Angular and I don't exclude that some approaches may also be questionable, with time I will improve the script, but at the moment this is it.

The work is well underway though not finished but I'm encountering usability problems on rotation. The user experience seems poor, it is easy to lose focus on the anchor (green square) and also the control on rotation is poor, it is hard to be accurate. I tried adding a slow motion on the rotation (SLOWDOWN) but maybe it is even worse. Does anyone have suggestions on how to improve this aspect? The rotation logic is inside the resizeDiv function which also handles resizing on the mouseevent.

Specifically here is the calculation of degrees of rotation, but the issue I think is broader than that, I invite you to look more broadly at how it works on the whole project.

var angle = this.startAngle + Math.atan2(distY, distX) * (180 / Math.PI) * this.SLOWDOWN;
angle = Math.round(angle / this.MIN_DEG) * this.MIN_DEG;

I brought the whole script back to stackblitz: https://stackblitz.com/edit/stackblitz-starters-fr4yyk

Answer 1

Add this to onMouseEnter in order to prevent creating multiple resizers and rotators:

if (this.isRotating || this.isResizing) {
  return;
}

SLOWDOWN doesn't do much, just remove it. But you definitely need to slow down (known as throttle) your resizeDiv (onmousemove). You can take a look at this question for some ideas for HostListener, even though it's for debouncing. If you are not familiar with throttle (as well as delay and debounce) I would suggest you complete all the tasks of this lesson.

You also need to rethink the rotation origin. Right now it's the last position of the green square. And if the div is rotated further and the mouse is very close to (mouseX, mouseY), you will get a jumping effect. The center of the div as the rotation origin makes much more sense.