mapbox
Fix: In direct_select mode it's better to prefer selecting vertices rather than midpoints
When a polygon or a polyline contains two vertices very close to each other, it can be very tricky to click on one of them and not on the midpoint between them.
The result is very frustrating, because this would create yet another vertex (and if user decides to click multiple times, it would produce even more vertices). This issue is even worse on touch devices (because touchBuffer is much bigger than clickBuffer).
This commit fixes the issue by tweaking the sort order of points: if there are more than one vertex near the cursor, we should always try to select an existing vertex instead of creating a new one.
Hey, @denull. Thank you for your contribution! It's a nice improvement! Could you share the video before and after to visually demonstrate the difference in the behaviour?
I'm also considering integration tests, but unfortunately, we haven't set up anything here yet: only some tests that we run in a Node.js environment with a mocked browser. But I guess we can do it later as a follow-up
Could you share the video before and after to visually demonstrate the difference in the behaviour?
Sure thing. Here's the current behavior when trying to disentangle vertices of a LineString in a close proximity to each other. Notice the vertex counter constantly going up due to hitting midpoints instead of existing vertices.
https://github.com/user-attachments/assets/b9fb991d-1187-4ad4-a807-ea749a044eb6
And now, the updated version:
https://github.com/user-attachments/assets/fbaee862-a356-4a02-bb1f-058892086e18
Here, we are able to successfully drag vertices apart without creating a ton of new ones.
Btw, yet another potential improvement would involve sorting vertices based on their distance from the actual cursor position — similar to how polygons are sorted based on their area now. But that would probably require adding an extra dependency (cheap-ruler, for example), so I decided not to include it in this PR.