Invalid mouse event triggers for `butt` value in the `line-cap` layout property.
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 12.4k
- Forks
- 2.4k
- PR merge metrics
- No merged PRs in 30d
Description
**mapbox-gl-js version**: 0.51.0
**browser**: all
### Description
Invalid mouseenter/mouseleave coordinate calculations for `butt` value in the `line-cap` layout property.
### Steps to Trigger Behavior
1. Mouse over the line on the left or right edges (line start & end).
2. Note that line color switches *before* mouse actually enters visible line area.
### Link to Demonstration
https://jsbin.com/cameqoq/edit?html,output
### Expected Behavior
MouseEnter event not triggered until mouse actually enters visible line area.
### Actual Behavior
MouseEnter event triggered before mouse coordinates enter the visible line area.
Looks like the calculation ignores the `line-cap` layout property. Behavior is as expected for `round` or `square` values, however incorrect for `butt` value.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Use the linked JS Bin to reproduce the early mouseenter/mouseleave trigger on a line with `line-cap: butt`. Then trace the line-layer mouse-coordinate or hit-testing entry point and compare behavior for `butt`, `round`, and `square`. Done means events begin only when the pointer enters the visible line area, without regressing the other cap values.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100