mapbox / mapbox/mapbox-gl-draw

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

Open
#1,117 1 comment 0 reactions 0 assignees View on GitHub
auto-triaged bug
Dominant language
JavaScript
Stars
1.1k
Forks
612
Avg merge
8d 9h
Merged PRs (30d)
5

Description

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](https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#layout-circle-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.

Contributor guide

Open the contributing guide

Research direction

Reproduce the issue in the linked CodeSandbox using mapbox-gl-draw direct_mode: draw a line, select it, zoom substantially, and try to drag a midpoint. Inspect the midpoint and line interaction behavior around zoom changes, including the circle-sort-key and setLayoutProperty paths mentioned in the report. Done means midpoints remain draggable after zooming without dragging the whole line.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.