maplibre-gl-js icon indicating copy to clipboard operation
maplibre-gl-js copied to clipboard

Subpixel positioning for popup

Open ericmagnuson opened this issue 1 year ago • 4 comments

Hey, everyone!

This PR implements the idea in this Discussion, allowing subpixel positioning of a Popup. This addition allows a Popup to be animated more smoothly. The behavior is optional and can be set at instantiation or via class methods. Please see the discussion for screen recordings of the behavior before and after.

Details

A subpixelPositioning option (a boolean) is added to the Popup. If the boolean is true, the offset rounding that happens when setting the CSS translate property of the Popup is bypassed. The option can also be configured using a getter method, Popup#setSubpixelPositioning.

Before

https://github.com/maplibre/maplibre-gl-js/assets/479605/369b3def-ceb4-4983-b493-2b2c94f847a4

After

https://github.com/maplibre/maplibre-gl-js/assets/479605/cee14f85-3062-4b37-938b-c558360dc81f

Launch Checklist

  • [x] Confirm your changes do not include backports from Mapbox projects (unless with compliant license) - if you are not sure about this, please ask!
  • [x] Briefly describe the changes in this PR.
  • [x] Link to related issues.
  • [x] Include before/after visuals or gifs if this PR includes visual changes.
  • [x] Write tests for all new functionality.
  • [x] Document any changes to public APIs.
  • [ ] Post benchmark scores.
  • [x] Add an entry to CHANGELOG.md under the ## main section.

ericmagnuson avatar Feb 16 '24 18:02 ericmagnuson

Codecov Report

All modified and coverable lines are covered by tests :white_check_mark:

Comparison is base (d7c4118) 86.98% compared to head (f1f7de8) 91.00%. Report is 13 commits behind head on main.

Additional details and impacted files
@@            Coverage Diff             @@
##             main    #3710      +/-   ##
==========================================
+ Coverage   86.98%   91.00%   +4.01%     
==========================================
  Files         240      243       +3     
  Lines       32238    48548   +16310     
  Branches     2118     5695    +3577     
==========================================
+ Hits        28043    44180   +16137     
- Misses       3315     4182     +867     
+ Partials      880      186     -694     

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

codecov-commenter avatar Feb 16 '24 20:02 codecov-commenter

Looks good in general, thanks! Can you add a before and after video by any chance?

HarelM avatar Feb 16 '24 22:02 HarelM

Looks good in general, thanks! Can you add a before and after video by any chance?

@HarelM There are before and after videos in the attached discussion — I'll pull the examples into the PR so that they are more readily available.

ericmagnuson avatar Feb 17 '24 01:02 ericmagnuson

Didn't have luck running benchmarks — I'm experiencing issues similar to this bug report. I pushed some updates, though, so this should be ready for review otherwise.

ericmagnuson avatar Feb 20 '24 23:02 ericmagnuson

So much nicer to look at, thanks!

birkskyum avatar Mar 01 '24 10:03 birkskyum