feat(Camera) allow padding directly on Camera for bounds and centerCoordinate

CHANGELOG.md

@@ -7,6 +7,7 @@ PR Title ([#123](link to my pr))
 Update ShapeSource methods to make it usable with any cluster ( Use cluster itself instead of cluster_id as first argument for getClusterExpansionZoom/getClusterLeaves/getClusterChildren methods. Version < 9 methods still supports passing cluster_id as a first argument but a deprecation warning will be shown. ) ([#1499](https://github.com/react-native-mapbox-gl/maps/pull/1499))
 ```
 
+feat(camera): Enable `padding` as a root-level prop on the camera, with `bounds.padding*` as fallbacks ([#1538](https://github.com/react-native-mapbox-gl/maps/pull/1538/files))
 feat(example): update vertical alignment example ([#1579](https://github.com/react-native-mapbox-gl/maps/pull/1550))  
 build(android): add telemetry dependency to default build setup ([#1550](https://github.com/react-native-mapbox-gl/maps/pull/1550))  
 fix: revert pinned mapLibre version to `5.11.0` ([8a2b00e67ba6398f3f6e6f52e98b0f0cea437e4d](https://github.com/react-native-mapbox-gl/maps/commit/8a2b00e67ba6398f3f6e6f52e98b0f0cea437e4d))

__tests__/components/Camera.test.js

@@ -71,6 +71,10 @@ describe('Camera', () => {
           heading: undefined,
           duration: 2000,
           zoom: undefined,
+          paddingBottom: 0,
+          paddingLeft: 0,
+          paddingRight: 0,
+          paddingTop: 0,
         },
         maxZoomLevel: undefined,
         minZoomLevel: undefined,
@@ -495,35 +499,41 @@ describe('Camera', () => {
             animationMode: 'easeTo',
             bounds: {
               ne: [-63.12641, 39.797968],
+              sw: [-74.143727, 40.772177],
+            },
+            padding: {
               paddingBottom: null,
               paddingLeft: null,
               paddingRight: null,
               paddingTop: null,
-              sw: [-74.143727, 40.772177],
             },
           },
           {
             animationDuration: 0,
             animationMode: 'easeTo',
             bounds: {
               ne: [-63.12641, 39.797968],
+              sw: [-74.143727, 40.772177],
+            },
+            padding: {
               paddingBottom: null,
               paddingLeft: null,
               paddingRight: null,
               paddingTop: null,
-              sw: [-74.143727, 40.772177],
             },
           },
           {
             animationDuration: 0,
             animationMode: 'easeTo',
             bounds: {
               ne: [-63.12641, 39.797968],
+              sw: [-74.143727, 40.772177],
+            },
+            padding: {
               paddingBottom: 0,
               paddingLeft: 0,
               paddingRight: 0,
               paddingTop: 0,
-              sw: [-74.143727, 40.772177],
             },
           },
         ];
@@ -547,11 +557,13 @@ describe('Camera', () => {
           animationMode: 'easeTo',
           bounds: {
             ne: [-63.12641, 39.797968],
+            sw: [-74.143727, 40.772177],
+          },
+          padding: {
             paddingBottom: 3,
             paddingLeft: 3,
             paddingRight: 3,
             paddingTop: 3,
-            sw: [-74.143727, 40.772177],
           },
         };
 
@@ -565,11 +577,13 @@ describe('Camera', () => {
           animationMode: 'easeTo',
           bounds: {
             ne: [-63.12641, 39.797968],
+            sw: [-74.143727, 40.772177],
+          },
+          padding: {
             paddingBottom: 3,
             paddingLeft: 5,
             paddingRight: 5,
             paddingTop: 3,
-            sw: [-74.143727, 40.772177],
           },
         };
 
@@ -583,11 +597,13 @@ describe('Camera', () => {
           animationMode: 'easeTo',
           bounds: {
             ne: [-63.12641, 39.797968],
+            sw: [-74.143727, 40.772177],
+          },
+          padding: {
             paddingBottom: 8,
             paddingLeft: 10,
             paddingRight: 5,
             paddingTop: 3,
-            sw: [-74.143727, 40.772177],
           },
         };
 
@@ -781,10 +797,10 @@ describe('Camera', () => {
           stop: {
             bounds:
               '{"type":"FeatureCollection","features":[{"type":"Feature","properties":{},"geometry":{"type":"Point","coordinates":[-63.12641,39.797968]}},{"type":"Feature","properties":{},"geometry":{"type":"Point","coordinates":[-74.143727,40.772177]}}]}',
-            boundsPaddingBottom: 8,
-            boundsPaddingLeft: 10,
-            boundsPaddingRight: 5,
-            boundsPaddingTop: 3,
+            paddingBottom: 8,
+            paddingLeft: 10,
+            paddingRight: 5,
+            paddingTop: 3,
             duration: 500,
             heading: 100,
             mode: 'Ease',
@@ -871,10 +887,10 @@ describe('Camera', () => {
               {
                 bounds:
                   '{"type":"FeatureCollection","features":[{"type":"Feature","properties":{},"geometry":{"type":"Point","coordinates":[-63.12641,39.797968]}},{"type":"Feature","properties":{},"geometry":{"type":"Point","coordinates":[-74.143727,40.772177]}}]}',
-                boundsPaddingBottom: 2,
-                boundsPaddingLeft: 2,
-                boundsPaddingRight: 2,
-                boundsPaddingTop: 2,
+                paddingBottom: 2,
+                paddingLeft: 2,
+                paddingRight: 2,
+                paddingTop: 2,
                 duration: 50,
                 heading: 20,
                 mode: 'Ease',
@@ -884,10 +900,10 @@ describe('Camera', () => {
               {
                 bounds:
                   '{"type":"FeatureCollection","features":[{"type":"Feature","properties":{},"geometry":{"type":"Point","coordinates":[-63.12641,59.797968]}},{"type":"Feature","properties":{},"geometry":{"type":"Point","coordinates":[-71.143727,40.772177]}}]}',
-                boundsPaddingBottom: 8,
-                boundsPaddingLeft: 10,
-                boundsPaddingRight: 5,
-                boundsPaddingTop: 3,
+                paddingBottom: 8,
+                paddingLeft: 10,
+                paddingRight: 5,
+                paddingTop: 3,
                 duration: 3000,
                 heading: 40,
                 mode: 'Flight',
@@ -897,10 +913,10 @@ describe('Camera', () => {
               {
                 bounds:
                   '{"type":"FeatureCollection","features":[{"type":"Feature","properties":{},"geometry":{"type":"Point","coordinates":[-63.12641,39.797968]}},{"type":"Feature","properties":{},"geometry":{"type":"Point","coordinates":[-74.143727,40.772177]}}]}',
-                boundsPaddingBottom: 8,
-                boundsPaddingLeft: 10,
-                boundsPaddingRight: 5,
-                boundsPaddingTop: 3,
+                paddingBottom: 8,
+                paddingLeft: 10,
+                paddingRight: 5,
+                paddingTop: 3,
                 duration: 500,
                 heading: 100,
                 mode: 'Ease',
@@ -939,6 +955,10 @@ describe('Camera', () => {
           mode: 'None',
           pitch: undefined,
           zoom: 16,
+          paddingBottom: 0,
+          paddingLeft: 0,
+          paddingRight: 0,
+          paddingTop: 0,
         };
 
         expect(camera.defaultCamera).toStrictEqual(undefined);
@@ -998,6 +1018,10 @@ describe('Camera', () => {
           mode: 'Ease',
           pitch: 45,
           zoom: 9,
+          paddingBottom: 0,
+          paddingLeft: 0,
+          paddingRight: 0,
+          paddingTop: 0,
         });
 
         // with centerCoordinate
@@ -1014,6 +1038,10 @@ describe('Camera', () => {
           mode: 'Ease',
           pitch: 45,
           zoom: 9,
+          paddingBottom: 0,
+          paddingLeft: 0,
+          paddingRight: 0,
+          paddingTop: 0,
         });
       });
 
@@ -1025,10 +1053,10 @@ describe('Camera', () => {
         expect(camera._createStopConfig(configWithBounds, true)).toStrictEqual({
           bounds:
             '{"type":"FeatureCollection","features":[{"type":"Feature","properties":{},"geometry":{"type":"Point","coordinates":[-63.12641,39.797968]}},{"type":"Feature","properties":{},"geometry":{"type":"Point","coordinates":[-74.143727,40.772177]}}]}',
-          boundsPaddingBottom: 8,
-          boundsPaddingLeft: 10,
-          boundsPaddingRight: 5,
-          boundsPaddingTop: 3,
+          paddingBottom: 8,
+          paddingLeft: 10,
+          paddingRight: 5,
+          paddingTop: 3,
           duration: 500,
           heading: 100,
           mode: 'Ease',
@@ -1045,10 +1073,10 @@ describe('Camera', () => {
         ).toStrictEqual({
           bounds:
             '{"type":"FeatureCollection","features":[{"type":"Feature","properties":{},"geometry":{"type":"Point","coordinates":[-63.12641,39.797968]}},{"type":"Feature","properties":{},"geometry":{"type":"Point","coordinates":[-74.143727,40.772177]}}]}',
-          boundsPaddingBottom: 8,
-          boundsPaddingLeft: 10,
-          boundsPaddingRight: 5,
-          boundsPaddingTop: 3,
+          paddingBottom: 8,
+          paddingLeft: 10,
+          paddingRight: 5,
+          paddingTop: 3,
           centerCoordinate:
             '{"type":"Feature","properties":{},"geometry":{"type":"Point","coordinates":[-111.8678,40.2866]}}',
           duration: 500,

android/rctmgl/src/main/java/com/mapbox/rctmgl/components/camera/CameraStop.java

@@ -29,10 +29,10 @@ public class CameraStop {
     private LatLng mLatLng;
 
     private LatLngBounds mBounds;
-    private int mBoundsPaddingLeft = 0;
-    private int mBoundsPaddingRight = 0;
-    private int mBoundsPaddingBottom = 0;
-    private int mBoundsPaddingTop = 0;
+    private int mPaddingLeft = 0;
+    private int mPaddingRight = 0;
+    private int mPaddingBottom = 0;
+    private int mPaddingTop = 0;
 
     private int mMode = CameraMode.EASE;
     private int mDuration = 2000;
@@ -65,12 +65,15 @@ public void setCallback(MapboxMap.CancelableCallback callback) {
         mCallback = callback;
     }
 
-    public void setBounds(LatLngBounds bounds, int paddingLeft, int paddingRight, int paddingTop, int paddingBottom) {
+    public void setBounds(LatLngBounds bounds) {
         mBounds = bounds;
-        mBoundsPaddingLeft = paddingLeft;
-        mBoundsPaddingRight = paddingRight;
-        mBoundsPaddingTop = paddingTop;
-        mBoundsPaddingBottom = paddingBottom;
+    }
+
+    public void setPadding(int paddingLeft, int paddingRight, int paddingTop, int paddingBottom) {
+        mPaddingLeft = paddingLeft;
+        mPaddingRight = paddingRight;
+        mPaddingTop = paddingTop;
+        mPaddingBottom = paddingBottom;
     }
 
     public void setMode(@CameraMode.Mode int mode) {
@@ -90,45 +93,50 @@ public CameraUpdateItem toCameraUpdate(RCTMGLMapView mapView) {
             builder.tilt(mTilt);
         }
 
+        // Adding map padding to the camera padding which is the same behavior as
+        // mapbox native does on iOS
+        double[] contentInset = mapView.getContentInset();
+
+        int paddingLeft = Double.valueOf(contentInset[0] + mPaddingLeft).intValue();
+        int paddingTop = Double.valueOf(contentInset[1] + mPaddingTop).intValue();
+        int paddingRight = Double.valueOf(contentInset[2] + mPaddingRight).intValue();
+        int paddingBottom = Double.valueOf(contentInset[3] + mPaddingBottom).intValue();
+
+        int[] cameraPadding = {paddingLeft, paddingTop, paddingRight, paddingBottom};
+        int[] cameraPaddingClipped = clippedPadding(cameraPadding, mapView);
+
         if (mLatLng != null) {
             builder.target(mLatLng);
+            builder.padding(
+                cameraPaddingClipped[0],
+                cameraPaddingClipped[1],
+                cameraPaddingClipped[2],
+                cameraPaddingClipped[3]
+            );
+            if (mZoom != null) {
+                builder.zoom(mZoom);
+            }
         } else if (mBounds != null) {
             double tilt = mTilt != null ? mTilt : currentCamera.tilt;
             double bearing = mBearing != null ? mBearing : currentCamera.bearing;
 
-            // Adding map padding to the camera padding which is the same behavior as
-            // mapbox native does on iOS
-            double[] contentInset = mapView.getContentInset();
-
-            int paddingLeft = Double.valueOf(contentInset[0] + mBoundsPaddingLeft).intValue();
-            int paddingTop = Double.valueOf(contentInset[1] + mBoundsPaddingTop).intValue();
-            int paddingRight = Double.valueOf(contentInset[2] + mBoundsPaddingRight).intValue();
-            int paddingBottom = Double.valueOf(contentInset[3] + mBoundsPaddingBottom).intValue();
-
-            int[] cameraPadding = {paddingLeft, paddingTop, paddingRight, paddingBottom};
-            int[] cameraPaddingClipped = clippedPadding(cameraPadding, mapView);
-
             CameraPosition boundsCamera = map.getCameraForLatLngBounds(mBounds, cameraPaddingClipped, bearing, tilt);
             if (boundsCamera != null) {
                 builder.target(boundsCamera.target);
                 builder.zoom(boundsCamera.zoom);
                 builder.padding(boundsCamera.padding);
             } else {
                 CameraUpdate update = CameraUpdateFactory.newLatLngBounds(
-                        mBounds,
-                        cameraPaddingClipped[0],
-                        cameraPaddingClipped[1],
-                        cameraPaddingClipped[2],
-                        cameraPaddingClipped[3]
+                    mBounds,
+                    cameraPaddingClipped[0],
+                    cameraPaddingClipped[1],
+                    cameraPaddingClipped[2],
+                    cameraPaddingClipped[3]
                 );
                 return new CameraUpdateItem(map, update, mDuration, mCallback, mMode);
             }
         }
 
-        if (mZoom != null) {
-            builder.zoom(mZoom);
-        }
-
         return new CameraUpdateItem(map, CameraUpdateFactory.newCameraPosition(builder.build()), mDuration, mCallback, mMode);
     }
 
@@ -143,6 +151,25 @@ public static CameraStop fromReadableMap(Context context, @NonNull ReadableMap r
             stop.setBearing(readableMap.getDouble("heading"));
         }
 
+        int paddingTop = getPaddingByKey(readableMap, "paddingTop");
+        int paddingRight = getPaddingByKey(readableMap, "paddingRight");
+        int paddingBottom = getPaddingByKey(readableMap, "paddingBottom");
+        int paddingLeft = getPaddingByKey(readableMap, "paddingLeft");
+
+        // scale padding by pixel ratio
+        DisplayMetrics metrics = context.getResources().getDisplayMetrics();
+        paddingTop = Float.valueOf(paddingTop * metrics.scaledDensity).intValue();
+        paddingRight = Float.valueOf(paddingRight * metrics.scaledDensity).intValue();
+        paddingBottom = Float.valueOf(paddingBottom * metrics.scaledDensity).intValue();
+        paddingLeft = Float.valueOf(paddingLeft * metrics.scaledDensity).intValue();
+
+        stop.setPadding(
+                paddingLeft,
+                paddingRight,
+                paddingTop,
+                paddingBottom
+        );
+
         if (readableMap.hasKey("centerCoordinate")) {
             Point target = GeoJSONUtils.toPointGeometry(readableMap.getString("centerCoordinate"));
             stop.setLatLng(GeoJSONUtils.toLatLng(target));
@@ -157,21 +184,8 @@ public static CameraStop fromReadableMap(Context context, @NonNull ReadableMap r
         }
 
         if (readableMap.hasKey("bounds")) {
-            int paddingTop = getBoundsPaddingByKey(readableMap, "boundsPaddingTop");
-            int paddingRight = getBoundsPaddingByKey(readableMap, "boundsPaddingRight");
-            int paddingBottom = getBoundsPaddingByKey(readableMap, "boundsPaddingBottom");
-            int paddingLeft = getBoundsPaddingByKey(readableMap, "boundsPaddingLeft");
-
-            // scale padding by pixel ratio
-            DisplayMetrics metrics = context.getResources().getDisplayMetrics();
-            paddingTop = Float.valueOf(paddingTop * metrics.scaledDensity).intValue();
-            paddingRight = Float.valueOf(paddingRight * metrics.scaledDensity).intValue();
-            paddingBottom = Float.valueOf(paddingBottom * metrics.scaledDensity).intValue();
-            paddingLeft = Float.valueOf(paddingLeft * metrics.scaledDensity).intValue();
-
             FeatureCollection collection = FeatureCollection.fromJson(readableMap.getString("bounds"));
-            stop.setBounds(GeoJSONUtils.toLatLngBounds(collection), paddingLeft, paddingRight,
-                    paddingTop, paddingBottom);
+            stop.setBounds(GeoJSONUtils.toLatLngBounds(collection));
         }
 
         if (readableMap.hasKey("mode")) {
@@ -225,7 +239,7 @@ private static int[] clippedPadding(int[] padding, RCTMGLMapView mapView) {
         return new int[] {resultLeft, resultTop, resultRight, resultBottom};
     }
 
-    private static int getBoundsPaddingByKey(ReadableMap map, String key) {
+    private static int getPaddingByKey(ReadableMap map, String key) {
         return map.hasKey(key) ? map.getInt(key) : 0;
     }
 }