add click on frame and aspect ratio to scroll center

Author: SmartToolFactory

app/build.gradle

@@ -60,7 +60,7 @@ dependencies {
     // Gestures
     implementation 'com.github.SmartToolFactory:Compose-Extended-Gestures:3.0.0'
     // Animated List
-    implementation 'com.github.SmartToolFactory:Compose-AnimatedList:0.5.1'
+    implementation 'com.github.SmartToolFactory:Compose-AnimatedList:0.6.1'
 
     implementation "androidx.compose.ui:ui:$compose_version"
     // Tooling support (Previews, etc.)
@@ -73,25 +73,25 @@ dependencies {
     implementation "androidx.compose.material:material-icons-core:$compose_version"
     implementation "androidx.compose.material:material-icons-extended:$compose_version"
     // Integration with activities
-    implementation 'androidx.activity:activity-compose:1.7.1'
+    implementation 'androidx.activity:activity-compose:1.7.2'
     // Integration with ViewModels
     implementation 'androidx.lifecycle:lifecycle-viewmodel-compose:2.6.1'
 
     // Material Design 3 for Compose
-    implementation "androidx.compose.material3:material3:1.1.0"
+    implementation "androidx.compose.material3:material3:1.1.1"
 
     def nav_compose_version = "2.5.3"
     implementation "androidx.navigation:navigation-compose:$nav_compose_version"
 
-    def accompanist_version = "0.25.0"
+    def accompanist_version = "0.30.1"
 
     // Accompanist
     implementation "com.google.accompanist:accompanist-systemuicontroller:$accompanist_version"
     implementation "com.google.accompanist:accompanist-pager:$accompanist_version"
     implementation "com.google.accompanist:accompanist-drawablepainter:$accompanist_version"
 
     // Coil
-    implementation("io.coil-kt:coil-compose:2.2.2")
+    implementation("io.coil-kt:coil-compose:2.3.0")
 
     // Photo Picker
     implementation("com.google.modernstorage:modernstorage-photopicker:1.0.0-alpha06")

app/src/main/java/com/smarttoolfactory/composecropper/preferences/AspectRatioSelection.kt

@@ -1,18 +1,20 @@
 package com.smarttoolfactory.composecropper.preferences
 
-import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.gestures.animateScrollBy
+import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.width
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.*
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.graphicsLayer
 import androidx.compose.ui.unit.Dp
-import androidx.compose.ui.unit.dp
 import com.smarttoolfactory.animatedlist.AnimatedInfiniteLazyRow
 import com.smarttoolfactory.animatedlist.model.AnimationProgress
 import com.smarttoolfactory.cropper.model.CropAspectRatio
 import com.smarttoolfactory.cropper.model.aspectRatios
 import com.smarttoolfactory.cropper.widget.AspectRatioSelectionCard
+import kotlinx.coroutines.launch
 
 @Composable
 internal fun AnimatedAspectRatioSelection(
@@ -22,13 +24,18 @@ internal fun AnimatedAspectRatioSelection(
 ) {
 
     var currentIndex by remember { mutableStateOf(initialSelectedIndex) }
+    val coroutineScope = rememberCoroutineScope()
 
     AnimatedInfiniteLazyRow(
-        modifier = modifier.padding(horizontal = 10.dp),
+        modifier = modifier,
         items = aspectRatios,
         inactiveItemPercent = 80,
         initialFirstVisibleIndex = initialSelectedIndex - 2
-    ) { animationProgress: AnimationProgress, index: Int, item: CropAspectRatio, width: Dp ->
+    ) { animationProgress: AnimationProgress,
+        index: Int,
+        item: CropAspectRatio,
+        width: Dp,
+        lazyListState ->
 
         val scale = animationProgress.scale
         val color = animationProgress.color
@@ -39,6 +46,16 @@ internal fun AnimatedAspectRatioSelection(
                 scaleX = scale
                 scaleY = scale
             }
+            .clickable(
+                interactionSource = remember {
+                    MutableInteractionSource()
+                },
+                indication = null
+            ) {
+                coroutineScope.launch {
+                    lazyListState.animateScrollBy(animationProgress.distanceToSelector)
+                }
+            }
             .width(width),
             contentColor = MaterialTheme.colorScheme.surface,
             color = color,

app/src/main/java/com/smarttoolfactory/composecropper/preferences/CropFrameSelection.kt

@@ -1,13 +1,14 @@
 package com.smarttoolfactory.composecropper.preferences
 
 import CropFrameListDialog
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.gestures.animateScrollBy
+import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.width
 import androidx.compose.runtime.*
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.Dp
-import androidx.compose.ui.unit.dp
 import com.smarttoolfactory.animatedlist.AnimatedInfiniteLazyRow
 import com.smarttoolfactory.animatedlist.model.AnimationProgress
 import com.smarttoolfactory.cropper.model.AspectRatio
@@ -16,6 +17,7 @@ import com.smarttoolfactory.cropper.model.OutlineType
 import com.smarttoolfactory.cropper.settings.CropFrameFactory
 import com.smarttoolfactory.cropper.settings.CropOutlineProperty
 import com.smarttoolfactory.cropper.widget.CropFrameDisplayCard
+import kotlinx.coroutines.launch
 
 /**
  * Crop frame selection
@@ -96,13 +98,18 @@ private fun CropFrameSelectionList(
 ) {
 
     var currentIndex by remember { mutableStateOf(initialSelectedIndex) }
+    val coroutineScope = rememberCoroutineScope()
 
     AnimatedInfiniteLazyRow(
-        modifier = modifier.padding(horizontal = 10.dp),
+        modifier = modifier,
         items = cropFrames,
         inactiveItemPercent = 80,
         initialFirstVisibleIndex = initialSelectedIndex - 2,
-    ) { animationProgress: AnimationProgress, index: Int, item: CropFrame, width: Dp ->
+    ) { animationProgress: AnimationProgress,
+        index: Int,
+        item: CropFrame,
+        width: Dp,
+        lazyListState ->
 
         val scale = animationProgress.scale
         val color = animationProgress.color
@@ -113,7 +120,18 @@ private fun CropFrameSelectionList(
         val editable = item.editable
 
         CropFrameDisplayCard(
-            modifier = Modifier.width(width),
+            modifier = Modifier
+                .width(width)
+                .clickable(
+                    interactionSource = remember {
+                        MutableInteractionSource()
+                    },
+                    indication = null
+                ) {
+                    coroutineScope.launch {
+                        lazyListState.animateScrollBy(animationProgress.distanceToSelector)
+                    }
+                },
             editable = editable,
             scale = scale,
             outlineColor = color,