add option to change overlay ratio to screen #4

* Adds option to change overlay ratio to screen dimension with smaller size. If width is smaller than height percentage of width is used to scale overlay

* Adjusts style of TextFiled and Sliders for better settings UI

Author: SmartToolFactory

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

@@ -26,9 +26,11 @@ internal fun CropPropertySelectionMenu(
     // Crop properties
     val cropType = cropProperties.cropType
     val aspectRatio = cropProperties.aspectRatio
+
     val handleSize = cropProperties.handleSize
     val contentScale = cropProperties.contentScale
     val cropOutlineProperty = cropProperties.cropOutlineProperty
+    val overlayRatio = (cropProperties.overlayRatio * 100)
 
     Title("Crop Type")
     CropTypeDialogSelection(
@@ -69,6 +71,15 @@ internal fun CropPropertySelectionMenu(
         }
     )
 
+    Title("Overlay Ratio ${overlayRatio.toInt()}%")
+    SliderSelection(
+        value = overlayRatio, valueRange = 50f..100f
+    ) {
+        onCropPropertiesChange(
+            cropProperties.copy(overlayRatio = (it.toInt() / 100f))
+        )
+    }
+
     // Handle size and overlay size applies only to Dynamic crop
     if (cropType == CropType.Dynamic) {
         Title("Handle Size")
@@ -96,15 +107,6 @@ internal fun CropGestureSelectionMenu(
     val zoomable = cropProperties.zoomable
     val maxZoom = cropProperties.maxZoom
 
-    Title("Fling")
-    FlingEnableSelection(
-        flingEnabled = flingEnabled,
-        onFlingEnabledChange = {
-            onCropPropertiesChange(
-                cropProperties.copy(fling = it)
-            )
-        }
-    )
     Title("Pan Enabled")
     PanEnableSelection(
         panEnabled = pannable,
@@ -115,6 +117,16 @@ internal fun CropGestureSelectionMenu(
         }
     )
 
+    Title("Fling")
+    FlingEnableSelection(
+        flingEnabled = flingEnabled,
+        onFlingEnabledChange = {
+            onCropPropertiesChange(
+                cropProperties.copy(fling = it)
+            )
+        }
+    )
+
     Title("Zoom Enabled")
     ZoomEnableSelection(
         zoomEnabled = zoomable,

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

@@ -76,18 +76,15 @@ internal fun SliderWithValueSelection(
             modifier = modifier,
             verticalAlignment = Alignment.CenterVertically
         ) {
-
             ColorfulSlider(
                 modifier = Modifier.weight(1f),
                 value = value,
                 onValueChange = onValueChange,
                 valueRange = valueRange,
                 colors = colors,
-                trackHeight = 11.dp,
-                thumbRadius = 14.dp
+                trackHeight = 10.dp,
+                thumbRadius = 12.dp
             )
-
-
         }
     }
 }
@@ -96,12 +93,13 @@ internal fun SliderWithValueSelection(
 internal fun SliderSelection(
     modifier: Modifier = Modifier,
     value: Float,
-    onValueChange: (Float) -> Unit,
     valueRange: ClosedFloatingPointRange<Float>,
     colors: MaterialSliderColors = MaterialSliderDefaults.materialColors(
         activeTrackColor = SliderBrushColor(MaterialTheme.colorScheme.primary),
         inactiveTrackColor = SliderBrushColor(Color.Transparent)
-    )
+    ),
+    onValueChangeFinished: (() -> Unit)? = null,
+    onValueChange: (Float) -> Unit,
 ) {
     ColorfulSlider(
         modifier = modifier,
@@ -110,8 +108,9 @@ internal fun SliderSelection(
         valueRange = valueRange,
         colors = colors,
         borderStroke = BorderStroke(2.dp, MaterialTheme.colorScheme.primary),
-        trackHeight = 11.dp,
-        thumbRadius = 14.dp
+        trackHeight = 10.dp,
+        thumbRadius = 12.dp,
+        onValueChangeFinished = onValueChangeFinished
     )
 }
 
@@ -161,6 +160,21 @@ internal fun FullRowSwitch(
     }
 }
 
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+internal fun CropTextField(value: String, onValueChange: (String) -> Unit) {
+    TextField(
+        value = value,
+        onValueChange = onValueChange,
+        colors = TextFieldDefaults.textFieldColors(
+            containerColor = Color.Transparent,
+            focusedIndicatorColor = Color.Transparent,
+            unfocusedIndicatorColor = Color.Transparent,
+            disabledIndicatorColor = Color.Transparent
+        )
+    )
+}
+
 @Composable
 internal fun DialogWithMultipleSelection(
     title: String = "",

app/src/main/java/com/smarttoolfactory/composecropper/preferences/frames/edit/CustomPathEdit.kt

@@ -4,22 +4,20 @@ import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.aspectRatio
 import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.material3.ExperimentalMaterial3Api
-import androidx.compose.material3.TextField
 import androidx.compose.runtime.*
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clipToBounds
 import androidx.compose.ui.draw.drawWithCache
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.ImageBitmap
 import androidx.compose.ui.graphics.Path
+import com.smarttoolfactory.composecropper.preferences.CropTextField
 import com.smarttoolfactory.cropper.model.AspectRatio
 import com.smarttoolfactory.cropper.model.CustomPathOutline
 import com.smarttoolfactory.cropper.util.calculateSizeAndOffsetFromAspectRatio
 import com.smarttoolfactory.cropper.util.drawBlockWithCheckerAndLayer
 import com.smarttoolfactory.cropper.util.scaleAndTranslatePath
 
-@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 internal fun CustomPathEdit(
     aspectRatio: AspectRatio,
@@ -62,7 +60,7 @@ internal fun CustomPathEdit(
 
         )
 
-        TextField(
+        CropTextField(
             value = newTitle,
             onValueChange = {
                 newTitle = it

app/src/main/java/com/smarttoolfactory/composecropper/preferences/frames/edit/CutCornerCropShapeEdit.kt

@@ -2,22 +2,20 @@ package com.smarttoolfactory.composecropper.preferences.frames.edit
 
 import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.shape.CutCornerShape
-import androidx.compose.material3.ExperimentalMaterial3Api
-import androidx.compose.material3.TextField
 import androidx.compose.runtime.*
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clipToBounds
 import androidx.compose.ui.graphics.ImageBitmap
 import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.unit.dp
+import com.smarttoolfactory.composecropper.preferences.CropTextField
 import com.smarttoolfactory.composecropper.preferences.SliderWithValueSelection
 import com.smarttoolfactory.cropper.model.AspectRatio
 import com.smarttoolfactory.cropper.model.CornerRadiusProperties
 import com.smarttoolfactory.cropper.model.CutCornerCropShape
 import com.smarttoolfactory.cropper.util.drawOutlineWithBlendModeAndChecker
 import kotlin.math.roundToInt
 
-@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 internal fun CutCornerCropShapeEdit(
     aspectRatio: AspectRatio,
@@ -99,12 +97,12 @@ internal fun CutCornerCropShapeEdit(
                 )
         )
 
-        TextField(
+        CropTextField(
             value = newTitle,
             onValueChange = { newTitle = it }
         )
 
-        Spacer(modifier=Modifier.height(10.dp))
+        Spacer(modifier = Modifier.height(10.dp))
 
         SliderWithValueSelection(
             value = topStartPercent,

app/src/main/java/com/smarttoolfactory/composecropper/preferences/frames/edit/ImageMaskEdit.kt

@@ -4,14 +4,12 @@ import androidx.compose.foundation.Image
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.material3.ExperimentalMaterial3Api
-import androidx.compose.material3.TextField
 import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import com.smarttoolfactory.composecropper.preferences.CropTextField
 import com.smarttoolfactory.cropper.model.ImageMaskOutline
 
-@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 internal fun ImageMaskEdit(
     imageMaskOutline: ImageMaskOutline,
@@ -31,7 +29,7 @@ internal fun ImageMaskEdit(
             Image(bitmap = imageMaskOutline.image, contentDescription = "ImageMask")
 
         }
-        TextField(
+        CropTextField(
             value = newTitle,
             onValueChange = {
                 newTitle = it

app/src/main/java/com/smarttoolfactory/composecropper/preferences/frames/edit/OvalCropShapeEdit.kt

@@ -2,8 +2,6 @@ package com.smarttoolfactory.composecropper.preferences.frames.edit
 
 import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.shape.GenericShape
-import androidx.compose.material3.ExperimentalMaterial3Api
-import androidx.compose.material3.TextField
 import androidx.compose.runtime.*
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clipToBounds
@@ -14,13 +12,13 @@ import androidx.compose.ui.graphics.ImageBitmap
 import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.unit.LayoutDirection
 import androidx.compose.ui.unit.dp
+import com.smarttoolfactory.composecropper.preferences.CropTextField
 import com.smarttoolfactory.composecropper.preferences.SliderWithValueSelection
 import com.smarttoolfactory.cropper.model.AspectRatio
 import com.smarttoolfactory.cropper.model.OvalCropShape
 import com.smarttoolfactory.cropper.util.drawOutlineWithBlendModeAndChecker
 
 
-@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 internal fun OvalCropShapeEdit(
     aspectRatio: AspectRatio,
@@ -113,7 +111,7 @@ internal fun OvalCropShapeEdit(
                 )
         )
 
-        TextField(
+        CropTextField(
             value = newTitle,
             onValueChange = { newTitle = it }
         )

app/src/main/java/com/smarttoolfactory/composecropper/preferences/frames/edit/PolygonCropShapeEdit.kt

@@ -1,21 +1,19 @@
 package com.smarttoolfactory.composecropper.preferences.frames.edit
 
 import androidx.compose.foundation.layout.*
-import androidx.compose.material3.ExperimentalMaterial3Api
-import androidx.compose.material3.TextField
 import androidx.compose.runtime.*
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clipToBounds
 import androidx.compose.ui.graphics.ImageBitmap
 import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.unit.dp
+import com.smarttoolfactory.composecropper.preferences.CropTextField
 import com.smarttoolfactory.composecropper.preferences.SliderWithValueSelection
 import com.smarttoolfactory.cropper.model.AspectRatio
 import com.smarttoolfactory.cropper.model.PolygonCropShape
 import com.smarttoolfactory.cropper.util.createPolygonShape
 import com.smarttoolfactory.cropper.util.drawOutlineWithBlendModeAndChecker
 
-@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 internal fun PolygonCropShapeEdit(
     aspectRatio: AspectRatio,
@@ -78,7 +76,7 @@ internal fun PolygonCropShapeEdit(
                 )
         )
 
-        TextField(
+        CropTextField(
             value = newTitle,
             onValueChange = { newTitle = it }
         )

app/src/main/java/com/smarttoolfactory/composecropper/preferences/frames/edit/RoundedCornerCropShapeEdit.kt

@@ -2,22 +2,20 @@ package com.smarttoolfactory.composecropper.preferences.frames.edit
 
 import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material3.ExperimentalMaterial3Api
-import androidx.compose.material3.TextField
 import androidx.compose.runtime.*
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clipToBounds
 import androidx.compose.ui.graphics.ImageBitmap
 import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.unit.dp
+import com.smarttoolfactory.composecropper.preferences.CropTextField
 import com.smarttoolfactory.composecropper.preferences.SliderWithValueSelection
 import com.smarttoolfactory.cropper.model.AspectRatio
 import com.smarttoolfactory.cropper.model.CornerRadiusProperties
 import com.smarttoolfactory.cropper.model.RoundedCornerCropShape
 import com.smarttoolfactory.cropper.util.drawOutlineWithBlendModeAndChecker
 import kotlin.math.roundToInt
 
-@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 internal fun RoundedCornerCropShapeEdit(
     aspectRatio: AspectRatio,
@@ -99,7 +97,7 @@ internal fun RoundedCornerCropShapeEdit(
                 )
         )
 
-        TextField(
+        CropTextField(
             value = newTitle,
             onValueChange = { newTitle = it }
         )

cropper/src/main/java/com/smarttoolfactory/cropper/settings/CropDefaults.kt

@@ -22,13 +22,17 @@ import com.smarttoolfactory.cropper.ui.theme.DefaultOverlayColor
  */
 object CropDefaults {
 
+    /**
+     * Properties effect crop behavior that should be passed to [CropState]
+     */
     fun properties(
         cropType: CropType = CropType.Dynamic,
         handleSize: Dp = 20.dp,
         maxZoom: Float = 10f,
-        aspectRatio: AspectRatio = aspectRatios[2].aspectRatio,
         contentScale: ContentScale = ContentScale.Fit,
         cropOutlineProperty: CropOutlineProperty,
+        aspectRatio: AspectRatio = aspectRatios[2].aspectRatio,
+        overlayRatio:Float = .9f,
         pannable: Boolean = true,
         fling: Boolean = false,
         zoomable: Boolean = true,
@@ -41,13 +45,18 @@ object CropDefaults {
             cropOutlineProperty = cropOutlineProperty,
             maxZoom = maxZoom,
             aspectRatio = aspectRatio,
+            overlayRatio = overlayRatio,
             pannable = pannable,
             fling = fling,
             zoomable = zoomable,
             rotatable = rotatable
         )
     }
 
+    /**
+     * Style is cosmetic changes that don't effect how [CropState] behaves because of that
+     * none of these properties are passed to [CropState]
+     */
     fun style(
         drawOverlay: Boolean = true,
         drawGrid: Boolean = true,
@@ -76,9 +85,10 @@ object CropDefaults {
 data class CropProperties internal constructor(
     val cropType: CropType,
     val handleSize: Dp,
-    val aspectRatio: AspectRatio,
     val contentScale: ContentScale,
     val cropOutlineProperty: CropOutlineProperty,
+    val aspectRatio: AspectRatio,
+    val overlayRatio: Float,
     val pannable: Boolean,
     val fling: Boolean,
     val rotatable: Boolean,