Add a paramter to pass extra padding around crop rect

easycrop/src/main/java/com/mr0xf00/easycrop/ui/CropperPreview.kt

@@ -2,6 +2,7 @@ package com.mr0xf00.easycrop.ui
 
 import androidx.compose.foundation.Canvas
 import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.runtime.*
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.geometry.Rect
@@ -11,7 +12,9 @@ import androidx.compose.ui.graphics.drawscope.clipPath
 import androidx.compose.ui.graphics.drawscope.withTransform
 import androidx.compose.ui.layout.onGloballyPositioned
 import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.platform.LocalLayoutDirection
 import androidx.compose.ui.unit.IntSize
+import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.toSize
 import com.mr0xf00.easycrop.*
 import com.mr0xf00.easycrop.images.rememberLoadedImage
@@ -22,15 +25,26 @@ import kotlinx.coroutines.delay
 @Composable
 fun CropperPreview(
     state: CropState,
-    modifier: Modifier = Modifier
+    modifier: Modifier = Modifier,
+    extraPadding: PaddingValues = PaddingValues(0.dp),
 ) {
     val style = LocalCropperStyle.current
     val imgTransform by animateImgTransform(target = state.transform)
     val imgMat = remember(imgTransform, state.src.size) { imgTransform.asMatrix(state.src.size) }
     val viewMat = remember { ViewMat() }
     var view by remember { mutableStateOf(IntSize.Zero) }
     var pendingDrag by remember { mutableStateOf<DragHandle?>(null) }
-    val viewPadding = LocalDensity.current.run { style.touchRad.toPx() }
+    val layoutDirection = LocalLayoutDirection.current
+    val viewPadding = LocalDensity.current.run {
+        val touchRadPx = style.touchRad.toPx()
+        val maxExtraPadding = maxOf(
+            extraPadding.calculateTopPadding().toPx(),
+            extraPadding.calculateBottomPadding().toPx(),
+            extraPadding.calculateLeftPadding(layoutDirection).toPx(),
+            extraPadding.calculateRightPadding(layoutDirection).toPx(),
+        )
+        maxOf(touchRadPx, maxExtraPadding + touchRadPx / 2)
+    }
     val totalMat = remember(viewMat.matrix, imgMat) { imgMat * viewMat.matrix }
     val image = rememberLoadedImage(state.src, view, totalMat)
     val cropRect = remember(state.region, viewMat.matrix) {

easycrop/src/main/java/com/mr0xf00/easycrop/ui/ImageCropperDialog.kt

@@ -39,7 +39,8 @@ fun ImageCropperDialog(
     dialogPadding: PaddingValues = PaddingValues(16.dp),
     dialogShape: Shape = RoundedCornerShape(8.dp),
     topBar: @Composable (CropState) -> Unit = { DefaultTopBar(it) },
-    cropControls: @Composable BoxScope.(CropState) -> Unit = { DefaultControls(it) }
+    cropControls: @Composable BoxScope.(CropState) -> Unit = { DefaultControls(it) },
+    extraPadding: PaddingValues = PaddingValues(0.dp),
 ) {
     CompositionLocalProvider(LocalCropperStyle provides style) {
         Dialog(
@@ -57,7 +58,11 @@ fun ImageCropperDialog(
                             .weight(1f)
                             .clipToBounds()
                     ) {
-                        CropperPreview(state = state, modifier = Modifier.fillMaxSize())
+                        CropperPreview(
+                            state = state,
+                            modifier = Modifier.fillMaxSize(),
+                            extraPadding = extraPadding,
+                        )
                         cropControls(state)
                     }
                 }

sample/src/main/java/com/mr0xf00/easycrop/MainActivity.kt

@@ -8,6 +8,7 @@ import androidx.compose.foundation.layout.*
 import androidx.compose.material.*
 import androidx.compose.runtime.*
 import androidx.compose.ui.Modifier
+import androidx.core.view.WindowCompat
 import com.mr0xf00.easycrop.presentation.ImagesViewModel
 import com.mr0xf00.easycrop.ui.ViewModelDemo
 import com.mr0xf00.easycrop.ui.theme.EasyCropTheme
@@ -16,6 +17,7 @@ class MainActivity : ComponentActivity() {
     val viewModel: ImagesViewModel by viewModels()
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
+        WindowCompat.setDecorFitsSystemWindows(window, false)
         setContent {
             EasyCropTheme {
                 App(viewModel)
@@ -27,13 +29,12 @@ class MainActivity : ComponentActivity() {
 @Composable
 private fun App(viewModel: ImagesViewModel) {
     Surface(
-        modifier = Modifier.fillMaxSize(),
+        modifier = Modifier
+            .fillMaxSize()
+            .windowInsetsPadding(WindowInsets.systemBars),
         color = MaterialTheme.colors.background
     ) {
         ViewModelDemo(viewModel = viewModel, modifier = Modifier.fillMaxSize())
 //        SimpleDemo(modifier = Modifier.fillMaxSize())
     }
 }
-
-
-

sample/src/main/java/com/mr0xf00/easycrop/ui/DemoContent.kt

@@ -18,25 +18,35 @@ fun DemoContent(
     selectedImage: ImageBitmap?,
     onPick: () -> Unit,
     modifier: Modifier = Modifier,
+    noDialog: Boolean = false,
 ) {
     if (cropState != null) {
         EasyCropTheme(darkTheme = true) {
-            ImageCropperDialog(state = cropState)
+            if (noDialog) {
+                CropperPreview(
+                    state = cropState,
+                    extraPadding = WindowInsets.mandatorySystemGestures.asPaddingValues(),
+                )
+            } else {
+                ImageCropperDialog(state = cropState)
+            }
         }
     }
     if (cropState == null && loadingStatus != null) {
         LoadingDialog(status = loadingStatus)
     }
-    Column(
-        modifier = modifier.padding(16.dp),
-        horizontalAlignment = Alignment.CenterHorizontally
-    ) {
-        if (selectedImage != null) Image(
-            bitmap = selectedImage, contentDescription = null,
-            modifier = Modifier.weight(1f)
-        ) else Box(contentAlignment = Alignment.Center, modifier = Modifier.weight(1f)) {
-            Text("No image selected !")
+    if (cropState == null) {
+        Column(
+            modifier = modifier.padding(16.dp),
+            horizontalAlignment = Alignment.CenterHorizontally
+        ) {
+            if (selectedImage != null) Image(
+                bitmap = selectedImage, contentDescription = null,
+                modifier = Modifier.weight(1f)
+            ) else Box(contentAlignment = Alignment.Center, modifier = Modifier.weight(1f)) {
+                Text("No image selected !")
+            }
+            Button(onClick = onPick) { Text("Choose Image") }
         }
-        Button(onClick = onPick) { Text("Choose Image") }
     }
 }

sample/src/main/java/com/mr0xf00/easycrop/ui/ViewModelDemo.kt

@@ -13,9 +13,10 @@ fun ViewModelDemo(viewModel: ImagesViewModel, modifier: Modifier = Modifier) {
         loadingStatus = viewModel.imageCropper.loadingStatus,
         selectedImage = viewModel.selectedImage.collectAsState().value,
         onPick = { imagePicker.pick() },
-        modifier = modifier
+        modifier = modifier,
+        noDialog = true,
     )
     viewModel.cropError.collectAsState().value?.let { error ->
         CropErrorDialog(error, onDismiss = { viewModel.cropErrorShown() })
     }
-}
+}