Reduce label jumping during variable label placement
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 12.4k
- Forks
- 2.4k
- PR merge metrics
- No merged PRs in 30d
Description
I've been using the new text-variable-anchor and text-radial-offset properties and I've noticed label re-anchoring has a less desirable visual effect from default label collision.
On first render and subsequent zooms, there's a lot of default label placement then a flicker of recalculations as labels detect their proximity against one another and anchor to different positions.
I'd expect detection to happen behind the scenes. Labels would not be rendered until they know the valid anchor point.
Here's a jsFiddle that demonstrates the behaviour: https://jsfiddle.net/9ub4hdry/7/embedded/result/?username=tristen
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
Start by reproducing the label flicker with the linked jsFiddle, using text-variable-anchor and text-radial-offset during initial rendering and zooming. Trace the label placement and collision behavior described in the issue, then verify that labels remain hidden until their valid anchor is determined and that the flicker is gone.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 42/100