Adjust top/left coordinates when group scaling?

Question

JavaScript

How to implement scaling of several elements, relative to another element?
I am writing a resize (like canva.com, google presentation, etc.) it should resize both one element and several. It works like this, there is a container with elements, and next to the container of elements lies a resize element, and when the elements are selected, the resize element calculates the dimensions and adjusts it to the selected elements.
The problem is that the elements are separate from the resizer, since the elements must adjust to the resizer during its resizing.
If the elements were inside the resizer, then I would have done it this way without any problems:

scaleWidth = containerNewWidth / containerSourceWidth
scaleHeight = containerNewHeight / containerSourceHeight

elemenWidth = elementWidth * scaleWidth
elementLeft = elementLeft * scaleWidth
elementHeight = elementHeight * scaleHeight
elementTop = elementTop * scaleHeight

and then all the elements will adjust inside the resizer.
but I would not want to constantly move elements to the resizer at the beginning of the resize, because due to the application specification this is very undesirable, although it is possible.
In general, if I apply the code above, then the elements are normally scaled by width, heigth, and top, left cannot be adjusted, I have already tried to adjust the coordinates by adding / subtracting the coordinates of the containers ... whatever I did, I can’t adjust by top, left....

Answer 1

The elements left, top also change proportionally scaleWidth and scaleHeight, but not completely, but only the difference with the left, top of the resizer.

elementLeft = resizerNewLeft + (elementLeft - resizerSourceLeft) * scaleWidth