When the movable modifier is present and enabled, draggable UI controls will be shown that allow the user to move the element in 3D space.
BasicMovableSample
/** A sample demonstrating a simple movable component. */
@SubspaceComposable
@Composable
public fun BasicMovableSample() {
SpatialPanel(modifier = SubspaceModifier.movable()) { Text("The user can move me around!") }
}
CustomMovableSample
/** A sample demonstrating a custom movable component. */
@SubspaceComposable
@Composable
public fun CustomMovableSample() {
var offsetX by remember { mutableStateOf(0.dp) }
var offsetY by remember { mutableStateOf(0.dp) }
var offsetZ by remember { mutableStateOf(0.dp) }
var rotation by remember { mutableStateOf(Quaternion.Identity) }
SpatialPanel(
modifier =
SubspaceModifier.movable {
offsetX = it.pose.translation.x.meters.toDp()
offsetY = it.pose.translation.y.meters.toDp()
offsetZ = it.pose.translation.z.meters.toDp()
rotation = it.pose.rotation
true // return true to prevent default behavior
}
.offset(x = offsetX, y = offsetY, z = offsetZ)
.rotate(rotation)
) {
Text("The user can move me around!")
}
}