Skip to content

Commit

Permalink
fix(android): min/max zoom not resetting bounds, + refactor (#3375)
Browse files Browse the repository at this point in the history 
* Enable setting zoom with center coord in example

* Add "move" mode assignment

* Add "move" mode definition

* Allow nulling out max bounds and min/max zoom levels

* Implement "move" case

* Fix nulling out min/max zoom not resetting bounds

* Remove unused import
  • Loading branch information
@naftalibeder
naftalibeder authored Feb 18, 2024
1 parent 30a750d commit 4f91f2f
Show file tree
Hide file tree
Showing 7 changed files with 67 additions and 36 deletions.
18 changes: 9 additions & 9 deletions android/src/main/java/com/rnmapbox/rnmbx/components/camera/CameraStop.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,12 +95,10 @@ class CameraStop {
fun toCameraUpdate(mapView: RNMBXMapView): CameraUpdateItem {
val map = mapView.getMapboxMap()
val currentCamera = map.cameraState

val builder = CameraOptions.Builder()
builder.center(currentCamera.center)
builder.bearing(currentCamera.bearing)

val currentPadding = currentCamera.padding

builder.padding(currentCamera.padding)
builder.zoom(currentCamera.zoom)
if (mBearing != null) {
Expand All @@ -109,18 +107,22 @@ class CameraStop {
if (mTilt != null) {
builder.pitch(mTilt)
}
if (mZoom != null) {
builder.zoom(mZoom)
}

val currentPadding = currentCamera.padding
val paddingLeft: Int = mPaddingLeft ?: currentPadding.left.toInt()
val paddingTop: Int = mPaddingTop ?: currentPadding.top.toInt()
val paddingRight: Int = mPaddingRight ?: currentPadding.right.toInt()
val paddingBottom: Int = mPaddingBottom ?: currentPadding.bottom.toInt()
val cameraPadding = intArrayOf(paddingLeft, paddingTop, paddingRight, paddingBottom)
val cameraPaddingClipped = clippedPadding(cameraPadding, mapView)
val cameraPaddingEdgeInsets = convert(cameraPaddingClipped)
builder.padding(cameraPaddingEdgeInsets)

if (mLatLng != null) {
builder.center(mLatLng!!.point)
builder.padding(cameraPaddingEdgeInsets)
} else if (mBounds != null) {
val tilt = if (mTilt != null) mTilt!! else currentCamera.pitch
val bearing = if (mBearing != null) mBearing!! else currentCamera.bearing
Expand All @@ -131,17 +133,14 @@ class CameraStop {
bearing,
tilt
)

builder.center(boundsCamera.center)
builder.anchor(boundsCamera.anchor)
builder.zoom(boundsCamera.zoom)
builder.bearing(boundsCamera.bearing)
builder.pitch(boundsCamera.pitch)
builder.padding(boundsCamera.padding)
}

if (mZoom != null) {
builder.zoom(mZoom)
}

return CameraUpdateItem(map, builder.build(), mDuration, mCallback, mMode)
}

Expand Down Expand Up @@ -195,6 +194,7 @@ class CameraStop {
when (readableMap.getInt("mode")) {
CameraMode.FLIGHT -> stop.setMode(CameraMode.FLIGHT)
CameraMode.LINEAR -> stop.setMode(CameraMode.LINEAR)
CameraMode.MOVE -> stop.setMode(CameraMode.MOVE)
CameraMode.NONE -> stop.setMode(CameraMode.NONE)
else -> stop.setMode(CameraMode.EASE)
}
Expand Down
3 changes: 1 addition & 2 deletions android/src/main/java/com/rnmapbox/rnmbx/components/camera/CameraUpdateItem.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@ class CameraUpdateItem(
val animationOptions = MapAnimationOptions.Builder();

// animateCamera / easeCamera only allows positive duration
if (duration == 0 || mCameraMode == CameraMode.NONE) {
if (duration == 0 || mCameraMode == CameraMode.MOVE || mCameraMode == CameraMode.NONE) {
map.flyToV11(mCameraUpdate, animationOptions.apply {
duration(0)
},
Expand All @@ -109,7 +109,6 @@ class CameraUpdateItem(
callback
)
}
null
}

override fun cancel(mayInterruptIfRunning: Boolean): Boolean {
Expand Down
11 changes: 4 additions & 7 deletions android/src/main/java/com/rnmapbox/rnmbx/components/camera/RNMBXCamera.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -179,15 +179,12 @@ class RNMBXCamera(private val mContext: Context, private val mManager: RNMBXCame
private fun updateMaxBounds() {
withMapView { mapView ->
val map = mapView.getMapboxMap()
val maxBounds = mMaxBounds
val builder = CameraBoundsOptions.Builder()

if (maxBounds != null) {
builder.bounds(maxBounds.toBounds())
}
mMinZoomLevel?.let { builder.minZoom(it) }
mMaxZoomLevel?.let { builder.maxZoom(it) }
builder.bounds(mMaxBounds?.toBounds())
builder.minZoom(mMinZoomLevel ?: 0.0) // Passing null does not reset this value.
builder.maxZoom(mMaxZoomLevel ?: 25.0) // Passing null does not reset this value.
map.setBounds(builder.build())
mCameraStop?.let { updateCamera(it) }
}
}

Expand Down
4 changes: 2 additions & 2 deletions android/src/main/java/com/rnmapbox/rnmbx/components/camera/RNMBXCameraManager.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,12 +59,12 @@ class RNMBXCameraManager(private val mContext: ReactApplicationContext, val view

@ReactProp(name = "minZoomLevel")
override fun setMinZoomLevel(camera: RNMBXCamera, value: Dynamic) {
camera.setMinZoomLevel(value.asDouble())
camera.setMinZoomLevel(value.asDoubleOrNull())
}

@ReactProp(name = "maxZoomLevel")
override fun setMaxZoomLevel(camera: RNMBXCamera, value: Dynamic) {
camera.setMaxZoomLevel(value.asDouble())
camera.setMaxZoomLevel(value.asDoubleOrNull())
}

@ReactProp(name = "followUserLocation")
Expand Down
5 changes: 3 additions & 2 deletions android/src/main/java/com/rnmapbox/rnmbx/components/camera/constants/CameraMode.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,13 @@

public class CameraMode {

@IntDef({ FLIGHT, EASE, LINEAR, NONE })
@IntDef({ FLIGHT, EASE, LINEAR, MOVE, NONE })
@Retention(RetentionPolicy.SOURCE)
public @interface Mode {}

public static final int FLIGHT = 1;
public static final int EASE = 2;
public static final int LINEAR = 3;
public static final int NONE = 4;
public static final int MOVE = 4;
public static final int NONE = 5;
}
1 change: 1 addition & 0 deletions android/src/main/java/com/rnmapbox/rnmbx/modules/RNMBXModule.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,6 +90,7 @@ class RNMBXModule(private val mReactContext: ReactApplicationContext) : ReactCon
cameraModes["Flight"] = CameraMode.FLIGHT
cameraModes["Ease"] = CameraMode.EASE
cameraModes["Linear"] = CameraMode.LINEAR
cameraModes["Move"] = CameraMode.MOVE
cameraModes["None"] = CameraMode.NONE

// offline region download states
Expand Down
61 changes: 47 additions & 14 deletions example/src/examples/V10/CameraAnimation.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@ const CameraAnimation = () => {
const [paddingRight, setPaddingRight] = useState(0);
const [paddingTop, setPaddingTop] = useState(0);
const [paddingBottom, setPaddingBottom] = useState(0);
const [zoom, setZoom] = useState(10);
const [minZoom, setMinZoom] = useState<number | undefined>(undefined);
const [maxZoom, setMaxZoom] = useState<number | undefined>(undefined);

Expand Down Expand Up @@ -153,6 +154,34 @@ const CameraAnimation = () => {
[easing],
);

const zoomCounter = useMemo(() => {
const disabled = coordinates.length > 1;

return (
<View style={{ flex: 1, paddingHorizontal: 10 }}>
<View style={{ flex: 0, alignItems: 'center' }}>
<Text style={{ fontWeight: 'bold', opacity: disabled ? 0.4 : 1 }}>
{zoom}
</Text>
</View>
<Slider
thumbStyle={[
styles.thumb,
{ backgroundColor: disabled ? 'lightgray' : 'black' },
]}
trackStyle={{ opacity: disabled ? 0.1 : 1 }}
value={zoom}
disabled={disabled}
minimumValue={1}
maximumValue={20}
onSlidingComplete={(_value) => {
setZoom(Math.round(_value));
}}
/>
</View>
);
}, [coordinates.length, zoom]);

const paddingCounter = useCallback(
(value: number, setValue: (value: number) => void, label: string) => {
return (
Expand All @@ -162,11 +191,7 @@ const CameraAnimation = () => {
<Text style={{ fontWeight: 'bold' }}>{`${Math.round(value)}`}</Text>
</View>
<Slider
thumbStyle={{
backgroundColor: 'black',
width: 15,
height: 15,
}}
thumbStyle={styles.thumb}
value={value}
minimumValue={0}
maximumValue={500}
Expand All @@ -188,16 +213,12 @@ const CameraAnimation = () => {
<View style={{ flex: 1, paddingHorizontal: 10 }}>
<View style={{ flex: 0, alignItems: 'center' }}>
<Text>{label}</Text>
<Text style={{ fontWeight: 'bold' }}>{`${
value ?? 'Not set'
}`}</Text>
<Text style={{ fontWeight: 'bold' }}>
{`${value ?? 'Not set'}`}
</Text>
</View>
<Slider
thumbStyle={{
backgroundColor: 'black',
width: 15,
height: 15,
}}
thumbStyle={styles.thumb}
value={value}
minimumValue={-1}
maximumValue={20}
Expand All @@ -220,7 +241,7 @@ const CameraAnimation = () => {
<MapView style={styles.map}>
<Camera
{...centerOrBounds}
zoomLevel={12}
zoomLevel={zoom}
minZoomLevel={minZoom}
maxZoomLevel={maxZoom}
padding={{
Expand Down Expand Up @@ -264,6 +285,13 @@ const CameraAnimation = () => {

<Divider style={styles.divider} />

<Text style={styles.sectionText}>Zoom</Text>
<View style={[styles.buttonRow, { marginBottom: -6 }]}>
{zoomCounter}
</View>

<Divider style={styles.divider} />

<Text style={styles.sectionText}>Padding</Text>
<View style={[styles.buttonRow, { marginTop: 6 }]}>
{paddingCounter(paddingTop, setPaddingTop, 'Top')}
Expand Down Expand Up @@ -309,6 +337,11 @@ const styles = StyleSheet.create({
divider: {
marginVertical: 8,
},
thumb: {
backgroundColor: 'black',
width: 15,
height: 15,
},
});

export default CameraAnimation;
Expand Down

0 comments on commit 4f91f2f

Please sign in to comment.