Introduce padding for popup

[sienki-jenki]

Hey, In my app there are HTML elements overlayed on top of map container - Popup of course does not respect them and hides below them.
In this PR I introduced optional padding for Popup class so popup anchor is not calculated only based on map container dimensions but also takes given padding into consideration.

Before:

popup-without-padding.mov

After:

popup-with-padding.mov

@mapbox

Launch Checklist

• briefly describe the changes in this PR
• include before/after visuals or gifs if this PR includes visual changes
• write tests for all new functionality
• document any changes to public APIs
• post benchmark scores
• manually test the debug page
• tagged @mapbox/map-design-team @mapbox/static-apis if this PR includes style spec API or visual changes
• tagged @mapbox/gl-native if this PR includes shader changes or needs a native port
• apply changelog label ('bug', 'feature', 'docs', etc) or use the label 'skip changelog'
• add an entry inside this element for inclusion in the mapbox-gl-js changelog: <changelog>Introduce padding to Popup</changelog>

[CLAassistant]

All committers have signed the CLA.

[sienki-jenki]

Hey @mourner, is there a chance that this PR will be reviewed by someone from mapbox?

[rreusser]

Nice, thanks for the contribution @sienki-jenki! 👏 🙇 This seems reasonable to me. Just checking, how do you think this compares to modifying popups to respect global map padding (which affects the map vanishing point) instead of adding separate padding for the popup specifically? The advantage of your approach is maximum configurability; the advantage of the alternative is to improve popup behavior even for people who don't specifically opt-in and also falls gently on the side of avoiding an ever-growing list of parameters where they can be avoided.

Does this assumption seem reasonable, that necessary behavior wouldn't be lost if global padding and popup padding avoidance were one and the same?

Just to be certain, I double checked and it seems this does not currently nudge the popup to avoid padding:

map.once('load', () => {
    map.jumpTo({padding: {top: 100, right: 100, left: 100, bottom: 100}})
    map.showPadding = true
})

[sienki-jenki]

Hey @rreusser, thanks for suggestion. Yes that makes sense, I've applied changes regarding padding - but I also noticed one flaw in current logic that I patched up, to be exact I'm talking about behaviour of anchor when popup is on either side of the screen. Even when anchor was left or right full height of the container was taken into consideration instead of half, which in my opinion led to waste of space as popup changed it's anchor too quickly, hope that video below explains it entirely.

Before:

before.mov

After:

after.mov

[sienki-jenki]

@rreusser Actually in such way that map.setPadding() works does not fix my problem. When calling map.setPadding() map is being moved instantly - I don't want to move map at all, I just want to change padding to prepare map for movement that may/may not occur, so my changes are pointless here as I wouldn't be able to use it :D.
Maybe I'm missing something and there is a way to setPadding without map movement?