FullscreenControl: no way to return to original size

[fr-an-k]

Description

The FullscreenControl does not restore the original viewport w/h on return (as I would expect by default), and has no documented onViewportChange property or other way to detect fullscreen state. The one example that features it (markers & popups) has w/h hardcoded to 100% and therefore ignores the faulty viewport size. You should be able to reproduce it by removing that hardcoding. Wrapping a div also does not force its child to shrink down, at least not without guru level css.

Another issue is that capturePointerMove={true} does not prevent panning the map while holding down the FullscreenControl. For NavigationControl and GeolocateControl this does work.

Also, in NavigationControl, the compass icon is not visible and I'm not able to drag the button to change orientation/pitch as I would expect (with capturePointerMove={true} or false).

Repro Steps

Environment (please complete the following information):

• Library Version: [e.g. react-map-gl 6.1.10]
  6.1.17
• Mapbox Version: [e.g. mapbox-gl 2.1.1]
  maplibre-gl 2.0.0-pre.5
• React Version: [e.g. react 17.0.1]
  17.0.2
• Browser Version: [e.g. Chrome 88.0]
  Chrome 95
• OS: [e.g. Mac OS X 11.2]
  Ubuntu 20.04.3 LTS

Logs

No relevant logs, except that the viewport remains set to the screen resolution

[fr-an-k]

Maplibre uses 'mapboxgl-ctrl-compass' css class rather than 'mapboxgl-ctrl-compass-arrow' as hardcoded in react-map-gl

[Pessimistress]

The map component is stateless. width and height numbers from the onViewportChange callback are the result of the width and height props that you provide (what you referred to as "hard coded"). If you just blindly feed them back to the component then yes, you will be stuck in the situation where you cannot "go back" to where you were.

capturePointerMove={true} does not prevent panning the map while holding down the FullscreenControl.

The purpose of capturePointerMove is to block onPointerMove event. Use captureDrag to block panning. This is explained in the documentation:

http://visgl.github.io/react-map-gl/docs/api-reference/fullscreen-control#capturedrag

Also, in NavigationControl,

Duplicate of #1467