From b82b16a13a1a690cae228f8a7c82d5164af0869b Mon Sep 17 00:00:00 2001
From: Vansh Gandhi <vansh@smileidentity.com>
Date: Tue, 7 Nov 2023 10:14:42 +0200
Subject: [PATCH] Use clipPath instead of BlendMode.Clear (#245)

* Use clipPath instead of BlendMode.Clear

* updated CHANGELOG.md and VERSION

---------

Co-authored-by: Juma Allan <allanjuma@gmail.com>
---
 CHANGELOG.md                                  | 12 ++-
 lib/VERSION                                   |  2 +-
 .../document/DocumentShapedBoundingBox.kt     | 78 +++++++++++--------
 3 files changed, 56 insertions(+), 36 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 21be1b473..7b2285811 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,11 +1,19 @@
 # Changelog
 
-## 10.0.0-beta12 (unreleased)
+## 10.0.0-beta13 (unreleased)
 
 ### Added
 
 ### Fixed
-- Fixed retry document submission on failed document submission
+
+### Changed
+
+## 10.0.0-beta12
+
+### Added
+
+### Fixed
+- Fixed a bug where the document preview showed a black box for some older devices
 
 ### Changed
 
diff --git a/lib/VERSION b/lib/VERSION
index 32f67aae8..1c613bcba 100644
--- a/lib/VERSION
+++ b/lib/VERSION
@@ -1 +1 @@
-10.0.0-beta11-SNAPSHOT
\ No newline at end of file
+10.0.0-beta12-SNAPSHOT
\ No newline at end of file
diff --git a/lib/src/main/java/com/smileidentity/compose/document/DocumentShapedBoundingBox.kt b/lib/src/main/java/com/smileidentity/compose/document/DocumentShapedBoundingBox.kt
index 8222b882a..cd4096576 100644
--- a/lib/src/main/java/com/smileidentity/compose/document/DocumentShapedBoundingBox.kt
+++ b/lib/src/main/java/com/smileidentity/compose/document/DocumentShapedBoundingBox.kt
@@ -8,10 +8,14 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.geometry.CornerRadius
 import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.geometry.Rect
+import androidx.compose.ui.geometry.RoundRect
 import androidx.compose.ui.geometry.Size
-import androidx.compose.ui.graphics.BlendMode
+import androidx.compose.ui.graphics.ClipOp
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.Path
 import androidx.compose.ui.graphics.drawscope.Stroke
+import androidx.compose.ui.graphics.drawscope.clipPath
 import androidx.compose.ui.unit.Dp
 import com.smileidentity.compose.preview.Preview
 import com.smileidentity.compose.preview.SmilePreviews
@@ -44,12 +48,8 @@ fun DocumentShapedBoundingBox(
         modifier = modifier
             .fillMaxSize(),
     ) {
-        // 1. Set the background color using a rectangle
-        drawRect(backgroundColor)
-
-        // 2. Draw the outline of the bounding box and add a stroke that shows different edge
+        // Define the outline of the bounding box and add a stroke that shows different edge
         // detection states
-
         val (outlineBoundingBoxWidth, outlineBoundingBoxHeight) = if (aspectRatio >= 1) {
             // Horizontal ID
             val outlineBoundingBoxWidth = size.width - DOCUMENT_BOUNDING_BOX_MARGINS
@@ -63,34 +63,46 @@ fun DocumentShapedBoundingBox(
         }
         val outlineBoundingBoxX = (size.width - outlineBoundingBoxWidth) / 2
         val outlineBoundingBoxY = (size.height - outlineBoundingBoxHeight) / 2
-        drawRoundRect(
-            color = strokeColor,
-            topLeft = Offset(
-                x = outlineBoundingBoxX,
-                y = outlineBoundingBoxY,
-            ),
-            size = Size(width = outlineBoundingBoxWidth, height = outlineBoundingBoxHeight),
-            cornerRadius = DOCUMENT_BOUNDING_BOX_RADIUS,
-            style = Stroke(width = strokeWidth.toPx()),
-        )
 
-        // 3. Draw the transparent bounding box, and make it slightly smaller than the outline box
-        drawRoundRect(
-            color = Color.Transparent,
-            blendMode = BlendMode.Clear,
-            topLeft = Offset(
-                x = outlineBoundingBoxX + (strokeWidth.toPx() / 2),
-                y = outlineBoundingBoxY + (strokeWidth.toPx() / 2),
-            ),
-            size = Size(
-                width = (outlineBoundingBoxWidth - strokeWidth.toPx()),
-                height = (outlineBoundingBoxHeight - strokeWidth.toPx()),
-            ),
-            cornerRadius = DOCUMENT_BOUNDING_BOX_RADIUS - CornerRadius(
-                strokeWidth.value,
-                strokeWidth.value,
-            ),
-        )
+        // Create the transparent bounding box, and make it slightly smaller than the outline box
+        val roundRectPath = Path().apply {
+            addRoundRect(
+                RoundRect(
+                    rect = Rect(
+                        offset = Offset(
+                            x = outlineBoundingBoxX + (strokeWidth.toPx() / 2),
+                            y = outlineBoundingBoxY + (strokeWidth.toPx() / 2),
+                        ),
+                        size = Size(
+                            width = (outlineBoundingBoxWidth - strokeWidth.toPx()),
+                            height = (outlineBoundingBoxHeight - strokeWidth.toPx()),
+                        ),
+                    ),
+                    cornerRadius = DOCUMENT_BOUNDING_BOX_RADIUS - CornerRadius(
+                        strokeWidth.value,
+                        strokeWidth.value,
+                    ),
+                ),
+            )
+        }
+
+        // Draw the bounding box and clip the background to the shape of the document
+        clipPath(roundRectPath, clipOp = ClipOp.Difference) {
+            // Draw the background
+            drawRect(color = backgroundColor)
+
+            // Draw the outline
+            drawRoundRect(
+                color = strokeColor,
+                topLeft = Offset(
+                    x = outlineBoundingBoxX,
+                    y = outlineBoundingBoxY,
+                ),
+                size = Size(width = outlineBoundingBoxWidth, height = outlineBoundingBoxHeight),
+                cornerRadius = DOCUMENT_BOUNDING_BOX_RADIUS,
+                style = Stroke(width = strokeWidth.toPx()),
+            )
+        }
     }
 }