From 0fe760a8479f85c46297debd231fb6bf0b555e2e Mon Sep 17 00:00:00 2001 From: Naftali Beder Date: Mon, 22 Mar 2021 10:41:26 -0500 Subject: [PATCH 1/8] Add linear easing option to camera --- index.d.ts | 4 ++-- ios/RCTMGL/CameraMode.h | 1 + ios/RCTMGL/CameraMode.m | 3 ++- ios/RCTMGL/CameraStop.m | 2 ++ ios/RCTMGL/CameraUpdateItem.m | 11 +++++++---- ios/RCTMGL/MGLModule.m | 1 + javascript/components/Camera.js | 3 +++ 7 files changed, 18 insertions(+), 7 deletions(-) diff --git a/index.d.ts b/index.d.ts index d7f2adcc2..4c56df12c 100644 --- a/index.d.ts +++ b/index.d.ts @@ -479,7 +479,7 @@ export interface MapViewProps extends ViewProps { export interface CameraProps extends CameraSettings, ViewProps { animationDuration?: number; - animationMode?: 'flyTo' | 'easeTo' | 'moveTo'; + animationMode?: 'flyTo' | 'easeTo' | 'linearTo' | 'moveTo'; defaultSettings?: CameraSettings; minZoomLevel?: number; maxZoomLevel?: number; @@ -516,7 +516,7 @@ export interface CameraSettings { }; zoomLevel?: number; animationDuration?: number; - animationMode?: 'flyTo' | 'easeTo' | 'moveTo'; + animationMode?: 'flyTo' | 'easeTo' | 'linearTo' | 'moveTo'; stops?: CameraSettings[]; } diff --git a/ios/RCTMGL/CameraMode.h b/ios/RCTMGL/CameraMode.h index 46c034af2..b46750698 100644 --- a/ios/RCTMGL/CameraMode.h +++ b/ios/RCTMGL/CameraMode.h @@ -12,6 +12,7 @@ extern int const RCT_MAPBOX_CAMERA_MODE_FLIGHT; extern int const RCT_MAPBOX_CAMERA_MODE_EASE; +extern int const RCT_MAPBOX_CAMERA_MODE_LINEAR; extern int const RCT_MAPBOX_CAMERA_MODE_NONE; @end diff --git a/ios/RCTMGL/CameraMode.m b/ios/RCTMGL/CameraMode.m index 8bd67224d..b27df6caf 100644 --- a/ios/RCTMGL/CameraMode.m +++ b/ios/RCTMGL/CameraMode.m @@ -12,6 +12,7 @@ @implementation CameraMode int const RCT_MAPBOX_CAMERA_MODE_FLIGHT = 1; int const RCT_MAPBOX_CAMERA_MODE_EASE = 2; -int const RCT_MAPBOX_CAMERA_MODE_NONE = 3; +int const RCT_MAPBOX_CAMERA_MODE_LINEAR = 3; +int const RCT_MAPBOX_CAMERA_MODE_NONE = 4; @end diff --git a/ios/RCTMGL/CameraStop.m b/ios/RCTMGL/CameraStop.m index 1d40af949..65d67a69f 100644 --- a/ios/RCTMGL/CameraStop.m +++ b/ios/RCTMGL/CameraStop.m @@ -21,6 +21,8 @@ - (void)setMode:(NSNumber *)mode _mode = [NSNumber numberWithInt:modeInt]; } else if (modeInt == RCT_MAPBOX_CAMERA_MODE_NONE) { _mode = [NSNumber numberWithInt:modeInt]; + } else if (modeInt == RCT_MAPBOX_CAMERA_MODE_LINEAR) { + _mode = [NSNumber numberWithInt:modeInt]; } else { _mode = [NSNumber numberWithInt:RCT_MAPBOX_CAMERA_MODE_EASE]; } diff --git a/ios/RCTMGL/CameraUpdateItem.m b/ios/RCTMGL/CameraUpdateItem.m index 515ee0a7b..9f841a4c2 100644 --- a/ios/RCTMGL/CameraUpdateItem.m +++ b/ios/RCTMGL/CameraUpdateItem.m @@ -32,11 +32,13 @@ - (void)execute:(RCTMGLMapView *)mapView withCompletionHandler:(void (^)(void))c if (_cameraStop.mode == [NSNumber numberWithInt:RCT_MAPBOX_CAMERA_MODE_FLIGHT]) { [self _flyToCamera:mapView withCompletionHandler:completionHandler]; } else if (_cameraStop.mode == [NSNumber numberWithInt:RCT_MAPBOX_CAMERA_MODE_EASE]) { - [self _moveCamera:mapView animated:YES withCompletionHandler:completionHandler]; + [self _moveCamera:mapView animated:YES ease:YES withCompletionHandler:completionHandler]; + } else if (_cameraStop.mode == [NSNumber numberWithInt:RCT_MAPBOX_CAMERA_MODE_LINEAR]) { + [self _moveCamera:mapView animated:YES ease:NO withCompletionHandler:completionHandler]; } else if ([self _areBoundsValid:_cameraStop.bounds]) { [self _fitBoundsCamera:mapView withCompletionHandler:completionHandler]; } else { - [self _moveCamera:mapView animated:NO withCompletionHandler:completionHandler]; + [self _moveCamera:mapView animated:NO ease:NO withCompletionHandler:completionHandler]; } } @@ -51,16 +53,17 @@ - (void)_flyToCamera:(RCTMGLMapView*)mapView withCompletionHandler:(void (^)(voi } } -- (void)_moveCamera:(RCTMGLMapView*)mapView animated:(BOOL)animated withCompletionHandler:(void (^)(void))completionHandler +- (void)_moveCamera:(RCTMGLMapView*)mapView animated:(BOOL)animated ease:(BOOL)ease withCompletionHandler:(void (^)(void))completionHandler { if ([self _hasCenterCoordAndZoom]) { [self _centerCoordWithZoomCamera:mapView animated:animated withCompletionHandler:completionHandler]; } else { RCTMGLCameraWithPadding *nextCamera = [self _makeCamera:mapView]; + NSString *easeFunctionName = ease ? kCAMediaTimingFunctionEaseInEaseOut : kCAMediaTimingFunctionLinear; [mapView setCamera:nextCamera.camera withDuration:animated ? _cameraStop.duration : 0 - animationTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut] + animationTimingFunction:[CAMediaTimingFunction functionWithName:easeFunctionName] edgePadding:nextCamera.boundsPadding completionHandler:completionHandler]; } diff --git a/ios/RCTMGL/MGLModule.m b/ios/RCTMGL/MGLModule.m index d9a795000..80cf59850 100644 --- a/ios/RCTMGL/MGLModule.m +++ b/ios/RCTMGL/MGLModule.m @@ -73,6 +73,7 @@ + (BOOL)requiresMainQueueSetup NSMutableDictionary *cameraModes = [[NSMutableDictionary alloc] init]; [cameraModes setObject:[NSNumber numberWithInt:RCT_MAPBOX_CAMERA_MODE_FLIGHT] forKey:@"Flight"]; [cameraModes setObject:[NSNumber numberWithInt:RCT_MAPBOX_CAMERA_MODE_EASE] forKey:@"Ease"]; + [cameraModes setObject:[NSNumber numberWithInt:RCT_MAPBOX_CAMERA_MODE_LINEAR] forKey:@"Linear"]; [cameraModes setObject:[NSNumber numberWithInt:RCT_MAPBOX_CAMERA_MODE_NONE] forKey:@"None"]; // style sources diff --git a/javascript/components/Camera.js b/javascript/components/Camera.js index 91b69d29b..53b926557 100644 --- a/javascript/components/Camera.js +++ b/javascript/components/Camera.js @@ -161,6 +161,7 @@ class Camera extends React.Component { Flight: 'flyTo', Move: 'moveTo', Ease: 'easeTo', + Linear: 'linearTo', }; UNSAFE_componentWillReceiveProps(nextProps) { @@ -503,6 +504,8 @@ class Camera extends React.Component { return MapboxGL.CameraModes.Flight; case Camera.Mode.Move: return MapboxGL.CameraModes.None; + case Camera.Mode.Linear: + return MapboxGL.CameraModes.Linear; default: return MapboxGL.CameraModes.Ease; } From 3de12093cb99b54b157b46df371816a611c34444 Mon Sep 17 00:00:00 2001 From: Naftali Beder Date: Mon, 22 Mar 2021 10:42:13 -0500 Subject: [PATCH 2/8] Update docs --- docs/Camera.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/Camera.md b/docs/Camera.md index 2819b010d..5f8cb3bba 100644 --- a/docs/Camera.md +++ b/docs/Camera.md @@ -6,7 +6,7 @@ | Prop | Type | Default | Required | Description | | ---- | :--: | :-----: | :------: | :----------: | | animationDuration | `number` | `2000` | `false` | The duration a camera update takes (in ms) | -| animationMode | `enum` | `'easeTo'` | `false` | The animationstyle when the camara updates. One of; `flyTo`, `easeTo`, `moveTo` | +| animationMode | `enum` | `'easeTo'` | `'linearTo'` | `false` | The animationstyle when the camara updates. One of; `flyTo`, `easeTo`, `linearTo`, `moveTo` | | defaultSettings | `shape` | `none` | `false` | Default view settings applied on camera | |   centerCoordinate | `array` | `none` | `false` | Center coordinate on map [lng, lat] | |   heading | `number` | `none` | `false` | Heading on map | From 4b7326f00db01f0155abebf94a387df8cca761fd Mon Sep 17 00:00:00 2001 From: Naftali Beder Date: Mon, 22 Mar 2021 10:42:59 -0500 Subject: [PATCH 3/8] Update docs --- docs/Camera.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/Camera.md b/docs/Camera.md index 5f8cb3bba..2819b010d 100644 --- a/docs/Camera.md +++ b/docs/Camera.md @@ -6,7 +6,7 @@ | Prop | Type | Default | Required | Description | | ---- | :--: | :-----: | :------: | :----------: | | animationDuration | `number` | `2000` | `false` | The duration a camera update takes (in ms) | -| animationMode | `enum` | `'easeTo'` | `'linearTo'` | `false` | The animationstyle when the camara updates. One of; `flyTo`, `easeTo`, `linearTo`, `moveTo` | +| animationMode | `enum` | `'easeTo'` | `false` | The animationstyle when the camara updates. One of; `flyTo`, `easeTo`, `moveTo` | | defaultSettings | `shape` | `none` | `false` | Default view settings applied on camera | |   centerCoordinate | `array` | `none` | `false` | Center coordinate on map [lng, lat] | |   heading | `number` | `none` | `false` | Heading on map | From c12017ece30a1e7dbb2aa5bca92e71fd3f36a5f0 Mon Sep 17 00:00:00 2001 From: Naftali Beder Date: Mon, 22 Mar 2021 10:45:03 -0500 Subject: [PATCH 4/8] Update docs/props --- javascript/components/Camera.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/javascript/components/Camera.js b/javascript/components/Camera.js index 53b926557..77e021b81 100644 --- a/javascript/components/Camera.js +++ b/javascript/components/Camera.js @@ -81,9 +81,9 @@ class Camera extends React.Component { animationDuration: PropTypes.number, /** - * The animationstyle when the camara updates. One of; `flyTo`, `easeTo`, `moveTo` + * The animationstyle when the camara updates. One of; `flyTo`, `easeTo`, `linearTo`, `moveTo` */ - animationMode: PropTypes.oneOf(['flyTo', 'easeTo', 'moveTo']), + animationMode: PropTypes.oneOf(['flyTo', 'easeTo', 'linearTo', 'moveTo']), /** * Default view settings applied on camera From c7b88e35b0f97bd96b6f4edba80925b0c41be6e7 Mon Sep 17 00:00:00 2001 From: Naftali Beder Date: Fri, 26 Mar 2021 14:55:36 -0500 Subject: [PATCH 5/8] Add linear easing logic to Android --- .../mapbox/rctmgl/components/camera/CameraUpdateItem.java | 4 +++- .../rctmgl/components/camera/constants/CameraMode.java | 5 +++-- .../com/mapbox/rctmgl/components/mapview/RCTMGLMapView.java | 4 ++-- .../main/java/com/mapbox/rctmgl/modules/RCTMGLModule.java | 1 + 4 files changed, 9 insertions(+), 5 deletions(-) diff --git a/android/rctmgl/src/main/java/com/mapbox/rctmgl/components/camera/CameraUpdateItem.java b/android/rctmgl/src/main/java/com/mapbox/rctmgl/components/camera/CameraUpdateItem.java index 11053f463..4bfb472bd 100644 --- a/android/rctmgl/src/main/java/com/mapbox/rctmgl/components/camera/CameraUpdateItem.java +++ b/android/rctmgl/src/main/java/com/mapbox/rctmgl/components/camera/CameraUpdateItem.java @@ -76,8 +76,10 @@ public void onFinish() { if (mCameraMode == CameraMode.FLIGHT) { map.animateCamera(mCameraUpdate, duration, callback); + } else if (mCameraMode == CameraMode.LINEAR) { + map.easeCamera(mCameraUpdate, duration, false, callback); } else if (mCameraMode == CameraMode.EASE) { - map.easeCamera(mCameraUpdate, duration, callback); + map.easeCamera(mCameraUpdate, duration, true, callback); } } diff --git a/android/rctmgl/src/main/java/com/mapbox/rctmgl/components/camera/constants/CameraMode.java b/android/rctmgl/src/main/java/com/mapbox/rctmgl/components/camera/constants/CameraMode.java index 016fa7096..4d0bc1bcc 100644 --- a/android/rctmgl/src/main/java/com/mapbox/rctmgl/components/camera/constants/CameraMode.java +++ b/android/rctmgl/src/main/java/com/mapbox/rctmgl/components/camera/constants/CameraMode.java @@ -11,11 +11,12 @@ public class CameraMode { - @IntDef({ FLIGHT, EASE, NONE }) + @IntDef({ FLIGHT, EASE, LINEAR, NONE }) @Retention(RetentionPolicy.SOURCE) public @interface Mode {} public static final int FLIGHT = 1; public static final int EASE = 2; - public static final int NONE = 3; + public static final int LINEAR = 3; + public static final int NONE = 4; } diff --git a/android/rctmgl/src/main/java/com/mapbox/rctmgl/components/mapview/RCTMGLMapView.java b/android/rctmgl/src/main/java/com/mapbox/rctmgl/components/mapview/RCTMGLMapView.java index d24d7405b..10a47d18b 100644 --- a/android/rctmgl/src/main/java/com/mapbox/rctmgl/components/mapview/RCTMGLMapView.java +++ b/android/rctmgl/src/main/java/com/mapbox/rctmgl/components/mapview/RCTMGLMapView.java @@ -343,8 +343,8 @@ public void moveCamera(CameraUpdate cameraUpdate) { mMap.moveCamera(cameraUpdate); } - public void easeCamera(CameraUpdate cameraUpdate, int duration, MapboxMap.CancelableCallback callback) { - mMap.easeCamera(cameraUpdate, duration, callback); + public void easeCamera(CameraUpdate cameraUpdate, int duration, boolean easingInterpolator, MapboxMap.CancelableCallback callback) { + mMap.easeCamera(cameraUpdate, duration, easingInterpolator, callback); } public void easeCamera(CameraUpdate cameraUpdate) { diff --git a/android/rctmgl/src/main/java/com/mapbox/rctmgl/modules/RCTMGLModule.java b/android/rctmgl/src/main/java/com/mapbox/rctmgl/modules/RCTMGLModule.java index 6a58d304b..c36077797 100644 --- a/android/rctmgl/src/main/java/com/mapbox/rctmgl/modules/RCTMGLModule.java +++ b/android/rctmgl/src/main/java/com/mapbox/rctmgl/modules/RCTMGLModule.java @@ -106,6 +106,7 @@ public Map getConstants() { Map cameraModes = new HashMap<>(); cameraModes.put("Flight", CameraMode.FLIGHT); cameraModes.put("Ease", CameraMode.EASE); + cameraModes.put("Linear", CameraMode.LINEAR); cameraModes.put("None", CameraMode.NONE); // style source constants From d02196a77354522375d8fd35285284ffd3723aa4 Mon Sep 17 00:00:00 2001 From: Naftali Beder Date: Fri, 26 Mar 2021 15:34:36 -0500 Subject: [PATCH 6/8] Add required arg --- .../java/com/mapbox/rctmgl/components/camera/RCTMGLCamera.java | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/android/rctmgl/src/main/java/com/mapbox/rctmgl/components/camera/RCTMGLCamera.java b/android/rctmgl/src/main/java/com/mapbox/rctmgl/components/camera/RCTMGLCamera.java index 8cb38e132..7bf17454e 100644 --- a/android/rctmgl/src/main/java/com/mapbox/rctmgl/components/camera/RCTMGLCamera.java +++ b/android/rctmgl/src/main/java/com/mapbox/rctmgl/components/camera/RCTMGLCamera.java @@ -327,7 +327,7 @@ public void onFinish() { }; if (isAnimated) { - mMapView.easeCamera(cameraUpdate, USER_LOCATION_CAMERA_MOVE_DURATION, callback); + mMapView.easeCamera(cameraUpdate, USER_LOCATION_CAMERA_MOVE_DURATION, true, callback); } else { mMapView.moveCamera(cameraUpdate, callback); } From 3fee68ff78793a41774cebe60c07c6438c69f2e2 Mon Sep 17 00:00:00 2001 From: Naftali Beder Date: Fri, 26 Mar 2021 15:35:20 -0500 Subject: [PATCH 7/8] Update docs --- docs/Camera.md | 2 +- docs/docs.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/Camera.md b/docs/Camera.md index 2819b010d..7fdc1f147 100644 --- a/docs/Camera.md +++ b/docs/Camera.md @@ -6,7 +6,7 @@ | Prop | Type | Default | Required | Description | | ---- | :--: | :-----: | :------: | :----------: | | animationDuration | `number` | `2000` | `false` | The duration a camera update takes (in ms) | -| animationMode | `enum` | `'easeTo'` | `false` | The animationstyle when the camara updates. One of; `flyTo`, `easeTo`, `moveTo` | +| animationMode | `enum` | `'easeTo'` | `false` | The animationstyle when the camara updates. One of; `flyTo`, `easeTo`, `linearTo`, `moveTo` | | defaultSettings | `shape` | `none` | `false` | Default view settings applied on camera | |   centerCoordinate | `array` | `none` | `false` | Center coordinate on map [lng, lat] | |   heading | `number` | `none` | `false` | Heading on map | diff --git a/docs/docs.json b/docs/docs.json index 4f30a1751..2b95a0d1b 100644 --- a/docs/docs.json +++ b/docs/docs.json @@ -414,7 +414,7 @@ "required": false, "type": "enum", "default": "'easeTo'", - "description": "The animationstyle when the camara updates. One of; `flyTo`, `easeTo`, `moveTo`" + "description": "The animationstyle when the camara updates. One of; `flyTo`, `easeTo`, `linearTo`, `moveTo`" }, { "name": "defaultSettings", From d53e34dac02112b663e7cd3cbdd4bafd7e3906b5 Mon Sep 17 00:00:00 2001 From: Naftali Beder Date: Mon, 29 Mar 2021 11:30:05 -0500 Subject: [PATCH 8/8] Set CameraStop mode to linear if key in readableMap --- .../java/com/mapbox/rctmgl/components/camera/CameraStop.java | 3 +++ 1 file changed, 3 insertions(+) diff --git a/android/rctmgl/src/main/java/com/mapbox/rctmgl/components/camera/CameraStop.java b/android/rctmgl/src/main/java/com/mapbox/rctmgl/components/camera/CameraStop.java index f6623b56c..97e4c9c6f 100644 --- a/android/rctmgl/src/main/java/com/mapbox/rctmgl/components/camera/CameraStop.java +++ b/android/rctmgl/src/main/java/com/mapbox/rctmgl/components/camera/CameraStop.java @@ -179,6 +179,9 @@ public static CameraStop fromReadableMap(Context context, @NonNull ReadableMap r case CameraMode.FLIGHT: stop.setMode(CameraMode.FLIGHT); break; + case CameraMode.LINEAR: + stop.setMode(CameraMode.LINEAR); + break; case CameraMode.NONE: stop.setMode(CameraMode.NONE); break;