Can't drag line midpoint after zooming in or zooming out

[RomanHudyma]

Hello everyone)

I catched a very strange and anoying bug. So I have a basic functionality for line drawing. In direct mode there is an ability to drag midpoint (default behaviour). But for some reason you are not all the time able to drag it. Once you zoom in a lot, you will see that you can't drag midpoint no more. Than I changed a midpoint style just to make it bigger and the color of lines. Now I see that the line is on top of the midpoint all the time. After zooming when you try to drag midpoint you get another behaviour, actually dragging the whole line. Another proof: when I made midpoints bigger and at the moment the bug being reproducible I tried to drag midpoint clicking somewhere at those circle border and tadaa - it works. So, my conclusion is that the line is on top of midpoint and that's why I can't pick the midpoint.

Then I tried to fix this, but there is no proper way to do that. Adding a circle-sort-key to layout of midpoints in styles doesn't work because circle-sort-key does not pass a style validation (another issue to report?). Adding same style on the fly with map. setLayoutProperty throws an error Uncaught TypeError: Cannot read properties of undefined (reading 'getValue') which I found already reported (even if layout exist in styles).

mapbox-gl-js version: 1.12.0 (I know it doesn't support circle-sort-key, so I tried it on the latest version as well) mapbox-gl-draw version: 1.2.0 Also reproducible on latest stable versions of both packages.

Steps to Trigger Behavior

1. Go to a random sandbox with mapbox-gl and mapbox-gl-draw (https://codesandbox.io/s/x45it for example)
2. Draw a line and save it (make more vertexes to easy reproduce)
3. Go to direct_mode clicking on the line and then on any vertex
4. Drag a midpoint (works fine here)
5. Zoom in a lot
6. Go find a midpoint and try to drag it (doesn't work now).

Expected Behavior

The key bug here as for me is that the midpoint is under the line so I would like to have it on top level all the time.

Actual Behavior

Dragging midpoints is not working after zooming, the line is drawn on top of the midpoint.

[zhangchn]

This curious bug annoyed me for months.

Today I dug into the call stacks and found that, when midpoint clicking failed, the line feature was rendered as MultiLineString. The order of feature sorted by lib/sort_features.js was wrong and the line feature was ranked as the first in the sorting result.

As the line feature was ranked first, lib/get_features_and_set_cursor.js simply returned the wrong feature and midpoint clicking would fail.

To fix this, FEATURE_SORT_RANKS must be patched:

const FEATURE_SORT_RANKS = {
  Point: 0,
  LineString: 1,
  MultiLineString: 1,
  Polygon: 2
};