So, the resize feature it's more complicated than it seems. I have been testing multiple possible solutions and techniques, for example, a homothetic center with a scale factor, and a bounding box that respects the handler size.
Because it's a map projection and not a conventional cartesian system, it's tricky to apply geometric transformations on shapes that have latitude and longitude as coordinates.
TLDR: I can't think of a solution so the project may or may not continue
Testing Leafly features with OpenStreetMap for a future project
npm install <- install everything
npm run dev <- just do it
Point precision of 65 kilometers
The rendering process is quite similar to HTML canvas, elements are stored in an object and rendered through a loop, and each object has different characteristics based on the element type, so a strict check is necessary for the creation and rendering process
Haversine formula is used to measure the distance between two coordinates(latitude and longitude)
The rotation Matrix doesn't work for rotations because the coordinates are geographic values in a projection(map)
The bearing angle is too agressive for rotation, so an offset angle is necessary between the roation handler and the cursor
- Bounding Box vertex and middlepoints handlers (resize, scale)