/* * Copyright (C) 2025 The Android Open Source Project * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ @file:OptIn(ExperimentalMaterial3ExpressiveApi::class) package com.android.mechanics.demo.presentation import androidx.compose.foundation.background import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.ColumnScope import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.offset import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.size import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material3.ExperimentalMaterial3ExpressiveApi import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Slider import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.runtime.getValue import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember import androidx.compose.runtime.setValue import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip import androidx.compose.ui.draw.drawBehind import androidx.compose.ui.geometry.Offset import androidx.compose.ui.graphics.PathEffect import androidx.compose.ui.layout.onPlaced import androidx.compose.ui.platform.LocalDensity import androidx.compose.ui.unit.IntOffset import androidx.compose.ui.unit.dp import com.android.mechanics.debug.DebugMotionValueVisualization import com.android.mechanics.debug.debugMotionValue import com.android.mechanics.demo.tuneable.Demo import com.android.mechanics.demo.tuneable.HasMotionValueVisualization import com.android.mechanics.rememberDistanceGestureContext import com.android.mechanics.rememberMotionSpecAsState import com.android.mechanics.rememberMotionValue import com.android.mechanics.spec.Breakpoint import com.android.mechanics.spec.BreakpointKey import com.android.mechanics.spec.InputDirection import com.android.mechanics.spec.Mapping import com.android.mechanics.spec.MotionSpec import com.android.mechanics.spec.OnChangeSegmentHandler import com.android.mechanics.spec.SegmentData import com.android.mechanics.spec.SegmentKey import com.android.mechanics.spec.builder.MotionBuilderContext import com.android.mechanics.spec.builder.spatialDirectionalMotionSpec object DirectionSpecDemo : Demo, HasMotionValueVisualization { object Keys { val Start = BreakpointKey("Start") val Detach = BreakpointKey("Detach") val End = Breakpoint.maxLimit.key } var inputRange by mutableStateOf(0f..0f) @Composable override fun DemoUi(config: Unit, modifier: Modifier) { val colors = MaterialTheme.colorScheme // Also using GestureContext.dragOffset as input. val gestureContext = rememberDistanceGestureContext() val motionValue = rememberMotionValue( input = { gestureContext.dragOffset }, gestureContext = gestureContext, spec = rememberMotionSpecAsState { buildSpec(inputOutputRange = inputRange) }, ) Column( verticalArrangement = Arrangement.spacedBy(24.dp), modifier = modifier.fillMaxWidth().padding(vertical = 24.dp, horizontal = 48.dp), ) { Text("Change Direction Slop") val density = LocalDensity.current Slider( value = gestureContext.directionChangeSlop, valueRange = 0.001f..with(density) { 48.dp.toPx() }, onValueChange = { gestureContext.directionChangeSlop = it }, modifier = Modifier.fillMaxWidth(), ) // Output visualization val lineColor = colors.primary Box( contentAlignment = Alignment.CenterStart, modifier = Modifier.fillMaxWidth() .onPlaced { inputRange = 0f..it.size.width.toFloat() } .drawBehind { drawLine( lineColor, start = Offset(x = 0f, y = center.y), end = Offset(x = size.width, y = center.y), pathEffect = PathEffect.dashPathEffect( floatArrayOf(4.dp.toPx(), 4.dp.toPx()) ), ) }, ) { Box( modifier = Modifier.size(24.dp) .offset { val halfSize = 24.dp.toPx() / 2f val xOffset = (-halfSize + motionValue.output).toInt() IntOffset(x = xOffset, y = 0) } .debugMotionValue(motionValue) .clip(remember { RoundedCornerShape(24.dp) }) .background(colors.primary) ) } // MotionValue visualization DebugMotionValueVisualization( motionValue, inputRange, modifier = Modifier.fillMaxWidth().height(64.dp), ) // Input visualization Slider( value = gestureContext.dragOffset, valueRange = inputRange, onValueChange = { gestureContext.dragOffset = it }, modifier = Modifier.fillMaxWidth(), ) } } private fun MotionBuilderContext.buildSpec( inputOutputRange: ClosedFloatingPointRange ): MotionSpec { val delta = inputOutputRange.endInclusive - inputOutputRange.start val startPosPx = inputOutputRange.start val detachPosPx = delta * .4f val attachPosPx = delta * .1f val detachSpec = spatialDirectionalMotionSpec(initialMapping = Mapping.Zero) { fractionalInputFromCurrent(startPosPx, fraction = .3f, key = Keys.Start) identity(detachPosPx, key = Keys.Detach, spring = spatial.slow) } val attachSpec = spatialDirectionalMotionSpec(initialMapping = Mapping.Zero) { identity(attachPosPx, key = Keys.Detach, spring = spatial.fast) } val segmentHandlers = mapOf( SegmentKey(Keys.Detach, Keys.End, InputDirection.Min) to { currentSegment, _, newDirection -> if (newDirection != currentSegment.direction) currentSegment else null }, SegmentKey(Keys.Start, Keys.Detach, InputDirection.Max) to { currentSegment: SegmentData, newInput: Float, newDirection: InputDirection -> if (newDirection != currentSegment.direction && newInput >= 0) currentSegment else null }, ) return MotionSpec( maxDirection = detachSpec, minDirection = attachSpec, resetSpring = spatial.default, segmentHandlers = segmentHandlers, ) } @Composable override fun rememberDefaultConfig() {} override val visualizationInputRange: ClosedFloatingPointRange get() = inputRange @Composable override fun ColumnScope.ConfigUi(config: Unit, onConfigChanged: (Unit) -> Unit) {} override val identifier: String = "DirectionSpecDemo" }