I have a slider that modifies the altitude of the camera mapbox when you move the cursor. The cursor also moves dynamically when you otherwise change the camera altitude.
When the slider position is inside the composable. Everything is working fine.
On the other hand, when I use state hoisting of the slider position, the camera animation does not work when I move the cursor.
I noticed that this is due to the recomposition of the slider. When I put myself in the first case where everything works, and I leave the main screen and come back, the slider no longer triggers the camera animation.
Where does the problem come from?
@Composable fun VerticalSlider(
dataMap: DataMap,
cameraChanged: Flow<CameraChanged>,
modifier: Modifier = Modifier,
enabled: Boolean = true,
valueRange: ClosedFloatingPointRange<Float> = 8f..22f,
steps: Int = 0,
interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
colors: SliderColors = SliderDefaults.colors(), ) {
Column {
var sliderPosition by remember{ mutableFloatStateOf(22.0f) }
LaunchedEffect(Unit) {// the cursor moves dynamically when you otherwise change the
camera altitude
cameraChanged.collect {
sliderPosition = 30 - it.cameraState.zoom.toFloat()
}
}
Slider(
value = sliderPosition,
onValueChange = {
sliderPosition = it
},
colors = colors,
interactionSource = interactionSource,
onValueChangeFinished = {
var altitude = 30 - sliderPosition
val cameraOptions = CameraOptions.Builder()
.zoom(altitude.toDouble())
.build()
val animationOptions = MapAnimationOptions.Builder().duration(1000).build()
dataMap.mapboxMap.flyTo(cameraOptions, animationOptions)
},
valueRange = valueRange,
steps = steps,
enabled = enabled,
modifier = Modifier
.graphicsLayer {
rotationZ = 270f
transformOrigin = TransformOrigin(0f, 0f)
}
.layout { measurable, constraints ->
val placeable = measurable.measure(
Constraints(
minWidth = constraints.minHeight,
maxWidth = constraints.maxHeight,
minHeight = constraints.minWidth,
maxHeight = constraints.maxHeight,
)
)
layout(placeable.height, placeable.width) {
placeable.place(-placeable.width, 0)
}
}
.then(modifier)
.width(400.dp)// c'est en fait la longueur
.height(100.dp)// et ici c'est la largeur
)
}
}