From f697038a9663c738e058f77ca64b37234d9a1c8f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ville=20V=C3=A4limaa?= Date: Thu, 5 Dec 2024 16:41:28 +0800 Subject: [PATCH 1/3] feat: add map padding --- .../google/android/react/navsdk/Command.java | 3 +- .../react/navsdk/MapViewController.java | 6 +++ .../android/react/navsdk/NavAutoModule.java | 13 +++++++ .../android/react/navsdk/NavViewManager.java | 5 +++ example/src/controls/mapsControls.tsx | 38 +++++++++++++++++++ .../NavAutoModule.m | 13 +++++++ .../NavViewController.h | 1 + .../NavViewController.m | 4 ++ .../RCTNavViewManager.m | 13 +++++++ src/auto/useNavigationAuto.ts | 9 +++++ src/maps/mapView/mapViewController.ts | 4 ++ src/maps/mapView/types.ts | 10 +++++ 12 files changed, 118 insertions(+), 1 deletion(-) diff --git a/android/src/main/java/com/google/android/react/navsdk/Command.java b/android/src/main/java/com/google/android/react/navsdk/Command.java index ea85c38..0b9931d 100644 --- a/android/src/main/java/com/google/android/react/navsdk/Command.java +++ b/android/src/main/java/com/google/android/react/navsdk/Command.java @@ -54,7 +54,8 @@ public enum Command { REMOVE_CIRCLE(35, "removeCircle"), REMOVE_GROUND_OVERLAY(36, "removeGroundOverlay"), SET_ZOOM_CONTROLS_ENABLED(37, "setZoomControlsEnabled"), - SET_RECENTER_BUTTON_ENABLED(38, "setRecenterButtonEnabled"); + SET_RECENTER_BUTTON_ENABLED(38, "setRecenterButtonEnabled"), + SET_PADDING(39, "setPadding"); private final int value; private final String name; diff --git a/android/src/main/java/com/google/android/react/navsdk/MapViewController.java b/android/src/main/java/com/google/android/react/navsdk/MapViewController.java index 736ac11..f88881e 100644 --- a/android/src/main/java/com/google/android/react/navsdk/MapViewController.java +++ b/android/src/main/java/com/google/android/react/navsdk/MapViewController.java @@ -536,6 +536,12 @@ public void setFollowingPerspective(int jsValue) { mGoogleMap.followMyLocation(EnumTranslationUtil.getCameraPerspectiveFromJsValue(jsValue)); } + public void setPadding(int top, int left, int bottom, int right) { + if (mGoogleMap != null) { + mGoogleMap.setPadding(left, top, right, bottom); + } + } + private String fetchJsonFromUrl(String urlString) throws IOException { URL url = new URL(urlString); HttpURLConnection connection = (HttpURLConnection) url.openConnection(); diff --git a/android/src/main/java/com/google/android/react/navsdk/NavAutoModule.java b/android/src/main/java/com/google/android/react/navsdk/NavAutoModule.java index dec5202..f137b34 100644 --- a/android/src/main/java/com/google/android/react/navsdk/NavAutoModule.java +++ b/android/src/main/java/com/google/android/react/navsdk/NavAutoModule.java @@ -506,6 +506,19 @@ public void isAutoScreenAvailable(final Promise promise) { promise.resolve(mMapViewController != null); } + @ReactMethod + public void setPadding( + final Integer top, final Integer left, final Integer bottom, final Integer right) { + UiThreadUtil.runOnUiThread( + () -> { + if (mMapViewController == null) { + return; + } + + mMapViewController.setPadding(top, left, bottom, right); + }); + } + public void sendScreenState(boolean available) { WritableNativeArray params = new WritableNativeArray(); params.pushBoolean(available); diff --git a/android/src/main/java/com/google/android/react/navsdk/NavViewManager.java b/android/src/main/java/com/google/android/react/navsdk/NavViewManager.java index cdd7f03..03f40d7 100644 --- a/android/src/main/java/com/google/android/react/navsdk/NavViewManager.java +++ b/android/src/main/java/com/google/android/react/navsdk/NavViewManager.java @@ -119,6 +119,7 @@ public Map getCommandsMap() { map.put(REMOVE_GROUND_OVERLAY.toString(), REMOVE_GROUND_OVERLAY.getValue()); map.put(SET_HEADER_ENABLED.toString(), SET_HEADER_ENABLED.getValue()); map.put(SET_FOOTER_ENABLED.toString(), SET_FOOTER_ENABLED.getValue()); + map.put(SET_PADDING.toString(), SET_PADDING.getValue()); return map; } @@ -298,6 +299,10 @@ public void receiveCommand( case REMOVE_GROUND_OVERLAY: getFragmentForRoot(root).getMapController().removeGroundOverlay(args.getString(0)); break; + case SET_PADDING: + getFragmentForRoot(root) + .getMapController() + .setPadding(args.getInt(0), args.getInt(1), args.getInt(2), args.getInt(3)); } } diff --git a/example/src/controls/mapsControls.tsx b/example/src/controls/mapsControls.tsx index 2f50ef1..264d9a8 100644 --- a/example/src/controls/mapsControls.tsx +++ b/example/src/controls/mapsControls.tsx @@ -41,6 +41,8 @@ const MapsControls: React.FC = ({ mapViewController }) => { const [enableLocationMarker, setEnableLocationMarker] = useState(true); const [latitude, onLatChanged] = useState(''); const [longitude, onLngChanged] = useState(''); + const [horizontalPadding, setHorizontalPadding] = useState(''); + const [verticalPadding, setVerticalPadding] = useState(''); useEffect(() => { if (zoom !== null) { @@ -195,6 +197,26 @@ const MapsControls: React.FC = ({ mapViewController }) => { mapViewController.clearMapView(); }; + const onHorizontalPaddingChanged = (padding: string) => { + mapViewController.setPadding( + Number(verticalPadding), + Number(padding), + Number(verticalPadding), + Number(padding) + ); + setHorizontalPadding(padding); + }; + + const onVerticalPaddingChanged = (padding: string) => { + mapViewController.setPadding( + Number(padding), + Number(horizontalPadding), + Number(padding), + Number(horizontalPadding) + ); + setVerticalPadding(padding); + }; + return ( = ({ mapViewController }) => { dropdownStyle={styles.dropdownMenuStyle} /> + + ); }; diff --git a/ios/react-native-navigation-sdk/NavAutoModule.m b/ios/react-native-navigation-sdk/NavAutoModule.m index a703635..9d51e80 100644 --- a/ios/react-native-navigation-sdk/NavAutoModule.m +++ b/ios/react-native-navigation-sdk/NavAutoModule.m @@ -387,6 +387,19 @@ + (void)unregisterNavAutoModuleReadyCallback { }); } +RCT_EXPORT_METHOD(setPadding + : (nonnull NSNumber *)top left + : (nonnull NSNumber *)left bottom + : (nonnull NSNumber *)bottom right + : (nonnull NSNumber *)right) { + dispatch_async(dispatch_get_main_queue(), ^{ + if (self->_viewController) { + [self->_viewController setPadding:UIEdgeInsetsMake(top.floatValue, left.floatValue, + bottom.floatValue, right.floatValue)]; + } + }); +} + - (void)onScreenStateChange:(BOOL)available { [self sendCommandToReactNative:@"onAutoScreenAvailabilityChanged" args:[NSNumber numberWithBool:available]]; diff --git a/ios/react-native-navigation-sdk/NavViewController.h b/ios/react-native-navigation-sdk/NavViewController.h index bac0a24..f72922d 100644 --- a/ios/react-native-navigation-sdk/NavViewController.h +++ b/ios/react-native-navigation-sdk/NavViewController.h @@ -83,6 +83,7 @@ typedef void (^OnArrayResult)(NSArray *_Nullable result); - (void)removeGroundOverlay:(NSString *)overlayId; - (BOOL)attachToNavigationSession:(GMSNavigationSession *)session; - (void)setTravelMode:(GMSNavigationTravelMode)travelMode; +- (void)setPadding:(UIEdgeInsets)insets; //- (void)removeNavigationListeners; @end diff --git a/ios/react-native-navigation-sdk/NavViewController.m b/ios/react-native-navigation-sdk/NavViewController.m index 2eea3b8..c5d5ddd 100644 --- a/ios/react-native-navigation-sdk/NavViewController.m +++ b/ios/react-native-navigation-sdk/NavViewController.m @@ -661,4 +661,8 @@ - (BOOL)compare:(nullable id)userData to:(NSString *)elementId { return [userData[0] isEqualToString:elementId]; } +- (void)setPadding:(UIEdgeInsets)insets { + _mapView.padding = insets; +} + @end diff --git a/ios/react-native-navigation-sdk/RCTNavViewManager.m b/ios/react-native-navigation-sdk/RCTNavViewManager.m index 4a41f66..26413a9 100644 --- a/ios/react-native-navigation-sdk/RCTNavViewManager.m +++ b/ios/react-native-navigation-sdk/RCTNavViewManager.m @@ -426,4 +426,17 @@ - (void)unregisterViewControllerForTag:(NSNumber *)reactTag { }); } +RCT_EXPORT_METHOD(setPadding + : (nonnull NSNumber *)reactTag top + : (nonnull NSNumber *)top left + : (nonnull NSNumber *)left bottom + : (nonnull NSNumber *)bottom right + : (nonnull NSNumber *)right) { + dispatch_async(dispatch_get_main_queue(), ^{ + NavViewController *viewController = [self getViewControllerForTag:reactTag]; + [viewController setPadding:UIEdgeInsetsMake(top.floatValue, left.floatValue, bottom.floatValue, + right.floatValue)]; + }); +} + @end diff --git a/src/auto/useNavigationAuto.ts b/src/auto/useNavigationAuto.ts index 1991c4c..d6e1202 100644 --- a/src/auto/useNavigationAuto.ts +++ b/src/auto/useNavigationAuto.ts @@ -188,6 +188,15 @@ export const useNavigationAuto = (): { moveCamera: (cameraPosition: CameraPosition) => { return NavAutoModule.moveCamera(cameraPosition); }, + + setPadding: ( + top: number, + left: number, + bottom: number, + right: number + ) => { + return NavAutoModule.setPadding(top, left, bottom, right); + }, }), [moduleListenersHandler] ); diff --git a/src/maps/mapView/mapViewController.ts b/src/maps/mapView/mapViewController.ts index 4744f29..fd35cf8 100644 --- a/src/maps/mapView/mapViewController.ts +++ b/src/maps/mapView/mapViewController.ts @@ -164,5 +164,9 @@ export const getMapViewController = (viewId: number): MapViewController => { moveCamera: (cameraPosition: CameraPosition) => { sendCommand(viewId, commands.moveCamera, [cameraPosition]); }, + + setPadding: (top: number, left: number, bottom: number, right: number) => { + sendCommand(viewId, commands.setPadding, [top, left, bottom, right]); + }, }; }; diff --git a/src/maps/mapView/types.ts b/src/maps/mapView/types.ts index 7b392a6..da6b233 100644 --- a/src/maps/mapView/types.ts +++ b/src/maps/mapView/types.ts @@ -412,4 +412,14 @@ export interface MapViewController { * @param cameraPosition - Defines the position the camera will take with the move. */ moveCamera(cameraPosition: CameraPosition): void; + + /** + * Sets padding to the map. + * + * @param top - Top padding. + * @param left - Left padding. + * @param bottom - Bottom padding. + * @param right - Right padding. + */ + setPadding(top: number, left: number, bottom: number, right: number): void; } From 3f1731fed4dceb715d2e271a8258c4f2feba35a5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ville=20V=C3=A4limaa?= Date: Fri, 6 Dec 2024 14:02:20 +0800 Subject: [PATCH 2/3] feat: padding example app refactoring --- example/src/controls/mapsControls.tsx | 59 ++++++++++++++++----------- 1 file changed, 35 insertions(+), 24 deletions(-) diff --git a/example/src/controls/mapsControls.tsx b/example/src/controls/mapsControls.tsx index 264d9a8..95c7a88 100644 --- a/example/src/controls/mapsControls.tsx +++ b/example/src/controls/mapsControls.tsx @@ -41,8 +41,12 @@ const MapsControls: React.FC = ({ mapViewController }) => { const [enableLocationMarker, setEnableLocationMarker] = useState(true); const [latitude, onLatChanged] = useState(''); const [longitude, onLngChanged] = useState(''); - const [horizontalPadding, setHorizontalPadding] = useState(''); - const [verticalPadding, setVerticalPadding] = useState(''); + const [padding, setPadding] = useState({ + top: '', + bottom: '', + left: '', + right: '', + }); useEffect(() => { if (zoom !== null) { @@ -197,24 +201,15 @@ const MapsControls: React.FC = ({ mapViewController }) => { mapViewController.clearMapView(); }; - const onHorizontalPaddingChanged = (padding: string) => { + const onPaddingChanged = (edge: keyof typeof padding, value: string) => { + const updatedPadding = { ...padding, [edge]: value }; + setPadding(updatedPadding); mapViewController.setPadding( - Number(verticalPadding), - Number(padding), - Number(verticalPadding), - Number(padding) + Number(updatedPadding.top), + Number(updatedPadding.left), + Number(updatedPadding.bottom), + Number(updatedPadding.right) ); - setHorizontalPadding(padding); - }; - - const onVerticalPaddingChanged = (padding: string) => { - mapViewController.setPadding( - Number(padding), - Number(horizontalPadding), - Number(padding), - Number(horizontalPadding) - ); - setVerticalPadding(padding); }; return ( @@ -304,17 +299,33 @@ const MapsControls: React.FC = ({ mapViewController }) => { onPaddingChanged('top', value)} + value={padding.top} + placeholder="Top padding" + placeholderTextColor="#000" + keyboardType="numeric" + /> + onPaddingChanged('bottom', value)} + value={padding.bottom} + placeholder="Bottom padding" + placeholderTextColor="#000" + keyboardType="numeric" + /> + onPaddingChanged('left', value)} + value={padding.left} + placeholder="Left padding" placeholderTextColor="#000" keyboardType="numeric" /> onPaddingChanged('right', value)} + value={padding.right} + placeholder="Right padding" placeholderTextColor="#000" keyboardType="numeric" /> From 74049b480acbd2ea5432b6c1056cfa362a24ce79 Mon Sep 17 00:00:00 2001 From: Joonas Kerttula Date: Thu, 12 Dec 2024 12:34:16 +0200 Subject: [PATCH 3/3] feat: update setPadding interface --- example/src/controls/mapsControls.tsx | 93 ++++++++++++++------------- example/src/styles.ts | 23 +------ src/auto/useNavigationAuto.ts | 9 +-- src/maps/mapView/mapViewController.ts | 4 +- src/maps/mapView/types.ts | 22 +++++-- 5 files changed, 74 insertions(+), 77 deletions(-) diff --git a/example/src/controls/mapsControls.tsx b/example/src/controls/mapsControls.tsx index 95c7a88..1e77055 100644 --- a/example/src/controls/mapsControls.tsx +++ b/example/src/controls/mapsControls.tsx @@ -27,6 +27,7 @@ import { type Circle, type Polyline, type Polygon, + type Padding, } from '@googlemaps/react-native-navigation-sdk'; export interface MapControlsProps { @@ -41,11 +42,11 @@ const MapsControls: React.FC = ({ mapViewController }) => { const [enableLocationMarker, setEnableLocationMarker] = useState(true); const [latitude, onLatChanged] = useState(''); const [longitude, onLngChanged] = useState(''); - const [padding, setPadding] = useState({ - top: '', - bottom: '', - left: '', - right: '', + const [padding, setPadding] = useState({ + top: 0, + bottom: 0, + left: 0, + right: 0, }); useEffect(() => { @@ -202,14 +203,9 @@ const MapsControls: React.FC = ({ mapViewController }) => { }; const onPaddingChanged = (edge: keyof typeof padding, value: string) => { - const updatedPadding = { ...padding, [edge]: value }; + const updatedPadding: Padding = { ...padding, [edge]: Number(value) }; setPadding(updatedPadding); - mapViewController.setPadding( - Number(updatedPadding.top), - Number(updatedPadding.left), - Number(updatedPadding.bottom), - Number(updatedPadding.right) - ); + mapViewController.setPadding(updatedPadding); }; return ( @@ -297,38 +293,47 @@ const MapsControls: React.FC = ({ mapViewController }) => { dropdownStyle={styles.dropdownMenuStyle} /> - onPaddingChanged('top', value)} - value={padding.top} - placeholder="Top padding" - placeholderTextColor="#000" - keyboardType="numeric" - /> - onPaddingChanged('bottom', value)} - value={padding.bottom} - placeholder="Bottom padding" - placeholderTextColor="#000" - keyboardType="numeric" - /> - onPaddingChanged('left', value)} - value={padding.left} - placeholder="Left padding" - placeholderTextColor="#000" - keyboardType="numeric" - /> - onPaddingChanged('right', value)} - value={padding.right} - placeholder="Right padding" - placeholderTextColor="#000" - keyboardType="numeric" - /> + + + Top padding + onPaddingChanged('top', value)} + value={padding.top?.toFixed(0)} + keyboardType="numeric" + inputMode="numeric" + /> + + + Bottom padding + onPaddingChanged('bottom', value)} + value={padding.bottom?.toFixed(0)} + keyboardType="numeric" + inputMode="numeric" + /> + + + Left padding + onPaddingChanged('left', value)} + value={padding.left?.toFixed(0)} + keyboardType="numeric" + inputMode="numeric" + /> + + + Right padding + onPaddingChanged('right', value)} + value={padding.right?.toFixed(0)} + keyboardType="numeric" + inputMode="numeric" + /> + ); }; diff --git a/example/src/styles.ts b/example/src/styles.ts index dbee2fb..f4fadf8 100644 --- a/example/src/styles.ts +++ b/example/src/styles.ts @@ -27,28 +27,13 @@ const styles = StyleSheet.create({ button: { backgroundColor: '#2196f3', }, - center: { - alignItems: 'center', - }, - toggleControl: { - backgroundColor: '#9ee2ff', - flexDirection: 'row', - alignItems: 'center', - alignSelf: 'baseline', - position: 'absolute', - right: 0, - padding: 6, - marginTop: 150, - }, input: { backgroundColor: '#ffffff', height: 40, margin: 12, borderWidth: 1, padding: 10, - }, - zoomBtn: { - color: '#fff', + flexGrow: 1, }, rowContainer: { margin: 5, @@ -56,13 +41,9 @@ const styles = StyleSheet.create({ marginRight: 20, flexDirection: 'row', justifyContent: 'space-between', + alignItems: 'center', color: 'white', }, - rowBtnContainer: { - flexDirection: 'row', - alignSelf: 'center', - justifyContent: 'space-between', - }, controlButtons: { alignSelf: 'stretch', flexDirection: 'row', diff --git a/src/auto/useNavigationAuto.ts b/src/auto/useNavigationAuto.ts index d6e1202..3df6108 100644 --- a/src/auto/useNavigationAuto.ts +++ b/src/auto/useNavigationAuto.ts @@ -29,6 +29,7 @@ import type { Polygon, CameraPosition, UISettings, + Padding, } from '../maps'; import { useMemo } from 'react'; @@ -189,12 +190,8 @@ export const useNavigationAuto = (): { return NavAutoModule.moveCamera(cameraPosition); }, - setPadding: ( - top: number, - left: number, - bottom: number, - right: number - ) => { + setPadding: (padding: Padding) => { + const { top = 0, left = 0, bottom = 0, right = 0 } = padding; return NavAutoModule.setPadding(top, left, bottom, right); }, }), diff --git a/src/maps/mapView/mapViewController.ts b/src/maps/mapView/mapViewController.ts index fd35cf8..85581a1 100644 --- a/src/maps/mapView/mapViewController.ts +++ b/src/maps/mapView/mapViewController.ts @@ -30,6 +30,7 @@ import type { MapType, MapViewController, MarkerOptions, + Padding, PolygonOptions, PolylineOptions, } from './types'; @@ -165,7 +166,8 @@ export const getMapViewController = (viewId: number): MapViewController => { sendCommand(viewId, commands.moveCamera, [cameraPosition]); }, - setPadding: (top: number, left: number, bottom: number, right: number) => { + setPadding: (padding: Padding) => { + const { top = 0, left = 0, bottom = 0, right = 0 } = padding; sendCommand(viewId, commands.setPadding, [top, left, bottom, right]); }, }; diff --git a/src/maps/mapView/types.ts b/src/maps/mapView/types.ts index da6b233..afd5f18 100644 --- a/src/maps/mapView/types.ts +++ b/src/maps/mapView/types.ts @@ -123,6 +123,20 @@ export enum MapType { HYBRID, } +/** + * Defines the padding options for a map. + */ +export interface Padding { + /** Top padding in pixels. */ + top?: number; + /** Left padding in pixels. */ + left?: number; + /** Bottom padding in pixels. */ + bottom?: number; + /** Right padding in pixels. */ + right?: number; +} + /** * Defines the type of the map fragment. */ @@ -416,10 +430,8 @@ export interface MapViewController { /** * Sets padding to the map. * - * @param top - Top padding. - * @param left - Left padding. - * @param bottom - Bottom padding. - * @param right - Right padding. + * @param padding - An object defining padding for each side. + * Example: { top: 10, left: 5, bottom: 15, right: 10 } */ - setPadding(top: number, left: number, bottom: number, right: number): void; + setPadding(padding: Padding): void; }