react-native-rectangle-doc-scanner 10.27.0 → 10.29.0

package/android/src/camera2/kotlin/com/reactnativerectangledocscanner/CameraController.kt

@@ -33,6 +33,7 @@ class CameraController(
     private var preview: Preview? = null
     private var imageAnalyzer: ImageAnalysis? = null
     private var imageCapture: ImageCapture? = null
+    private var previewViewport: android.graphics.RectF? = null
 
     private val cameraExecutor: ExecutorService = Executors.newSingleThreadExecutor()
 
@@ -358,8 +359,8 @@ class CameraController(
             if (mlBox != null) {
                 val frameWidth = if (rotation == 90 || rotation == 270) height else width
                 val frameHeight = if (rotation == 90 || rotation == 270) width else height
-                val padX = (mlBox.width() * 0.15f).toInt().coerceAtLeast(24)
-                val padY = (mlBox.height() * 0.15f).toInt().coerceAtLeast(24)
+                val padX = (mlBox.width() * 0.25f).toInt().coerceAtLeast(32)
+                val padY = (mlBox.height() * 0.25f).toInt().coerceAtLeast(32)
                 val roi = android.graphics.Rect(
                     (mlBox.left - padX).coerceAtLeast(0),
                     (mlBox.top - padY).coerceAtLeast(0),
@@ -466,13 +467,10 @@ class CameraController(
     }
 
     fun getPreviewViewport(): android.graphics.RectF? {
-        // With TextureView, the viewport is simply the view bounds
-        val width = textureView.width.toFloat()
-        val height = textureView.height.toFloat()
-
-        if (width <= 0 || height <= 0) return null
-
-        return android.graphics.RectF(0f, 0f, width, height)
+        val viewWidth = textureView.width.toFloat()
+        val viewHeight = textureView.height.toFloat()
+        if (viewWidth <= 0 || viewHeight <= 0) return null
+        return previewViewport ?: android.graphics.RectF(0f, 0f, viewWidth, viewHeight)
     }
 
     private fun updateTextureViewTransform(bufferWidth: Int, bufferHeight: Int) {
@@ -537,6 +535,18 @@ class CameraController(
 
         matrix.postScale(scale, scale, centerX, centerY)
 
+        // Track the actual preview viewport within the view for clipping overlays.
+        val scaledWidth = rotatedBufferWidth * scale
+        val scaledHeight = rotatedBufferHeight * scale
+        val offsetX = (viewWidth - scaledWidth) / 2f
+        val offsetY = (viewHeight - scaledHeight) / 2f
+        previewViewport = android.graphics.RectF(
+            offsetX,
+            offsetY,
+            offsetX + scaledWidth,
+            offsetY + scaledHeight
+        )
+
         textureView.setTransform(matrix)
         Log.d(TAG, "[TRANSFORM] Transform applied successfully")
     }

package/android/src/common/kotlin/com/reactnativerectangledocscanner/DocumentDetector.kt

@@ -36,6 +36,7 @@ enum class RectangleQuality {
 class DocumentDetector {
     companion object {
         private const val TAG = "DocumentDetector"
+        private var debugFrameCounter = 0
 
         init {
             try {
@@ -161,6 +162,7 @@ class DocumentDetector {
             val cannyMat = Mat()
             val morphMat = Mat()
             val threshMat = Mat()
+            val debugStats = DebugStats()
 
             try {
                 // Convert to grayscale
@@ -207,8 +209,8 @@ class DocumentDetector {
 
                 val median = computeMedian(blurredMat)
                 val sigma = 0.33
-                val cannyLow = max(40.0, (1.0 - sigma) * median)
-                val cannyHigh = max(120.0, (1.0 + sigma) * median)
+                val cannyLow = max(25.0, (1.0 - sigma) * median)
+                val cannyHigh = max(80.0, (1.0 + sigma) * median)
 
                 // Apply Canny edge detection with adaptive thresholds for better corner detection.
                 Imgproc.Canny(blurredMat, cannyMat, cannyLow, cannyHigh)
@@ -256,7 +258,9 @@ class DocumentDetector {
 
                     var largestRectangle: Rectangle? = null
                     var bestScore = 0.0
-                    val minArea = max(800.0, (srcMat.rows() * srcMat.cols()) * 0.001)
+                    val minArea = max(450.0, (srcMat.rows() * srcMat.cols()) * 0.0007)
+
+                    debugStats.contours = contours.size
 
                     for (contour in contours) {
                         val contourArea = Imgproc.contourArea(contour)
@@ -284,6 +288,7 @@ class DocumentDetector {
                             val rectArea = rect.size.area()
                             val rectangularity = if (rectArea > 1.0) contourArea / rectArea else 0.0
                             if (rectangularity >= 0.6) {
+                                debugStats.candidates += 1
                                 val score = contourArea * rectangularity
                                 if (score > bestScore) {
                                     bestScore = score
@@ -299,6 +304,7 @@ class DocumentDetector {
                             if (rectArea > 1.0) {
                                 val rectangularity = contourArea / rectArea
                                 if (rectangularity >= 0.6) {
+                                    debugStats.candidates += 1
                                     val boxPoints = Array(4) { Point() }
                                     rotated.points(boxPoints)
                                     val score = contourArea * rectangularity
@@ -317,6 +323,7 @@ class DocumentDetector {
 
                     hierarchy.release()
                     contours.forEach { it.release() }
+                    debugStats.bestScore = bestScore
                     return largestRectangle
                 }
 
@@ -340,6 +347,19 @@ class DocumentDetector {
                     rectangle = findLargestRectangle(morphMat)
                 }
 
+                if (BuildConfig.DEBUG) {
+                    debugFrameCounter = (debugFrameCounter + 1) % 15
+                    if (debugFrameCounter == 0) {
+                        Log.d(
+                            TAG,
+                            "[DEBUG] cannyLow=$cannyLow cannyHigh=$cannyHigh " +
+                                "contours=${debugStats.contours} candidates=${debugStats.candidates} " +
+                                "bestScore=${String.format(\"%.1f\", debugStats.bestScore)} " +
+                                "hasRect=${rectangle != null}"
+                        )
+                    }
+                }
+
                 return rectangle
             } finally {
                 grayMat.release()
@@ -350,6 +370,12 @@ class DocumentDetector {
             }
         }
 
+        private data class DebugStats(
+            var contours: Int = 0,
+            var candidates: Int = 0,
+            var bestScore: Double = 0.0
+        )
+
         /**
          * Order points in consistent order: topLeft, topRight, bottomLeft, bottomRight
          */
@@ -410,7 +436,7 @@ class DocumentDetector {
             }
 
             val minDim = kotlin.math.min(viewWidth.toDouble(), viewHeight.toDouble())
-            val angleThreshold = max(60.0, minDim * 0.08)
+            val angleThreshold = max(90.0, minDim * 0.12)
 
             val topYDiff = abs(rectangle.topRight.y - rectangle.topLeft.y)
             val bottomYDiff = abs(rectangle.bottomLeft.y - rectangle.bottomRight.y)
@@ -421,7 +447,7 @@ class DocumentDetector {
                 return RectangleQuality.BAD_ANGLE
             }
 
-            val margin = max(120.0, minDim * 0.12)
+            val margin = max(80.0, minDim * 0.08)
             if (rectangle.topLeft.y > margin ||
                 rectangle.topRight.y > margin ||
                 rectangle.bottomLeft.y < (viewHeight - margin) ||

package/dist/FullDocScanner.js

@@ -129,6 +129,7 @@ const FullDocScanner = ({ onResult, onClose, detectionConfig, overlayColor = '#3
     const [isGalleryOpen, setIsGalleryOpen] = (0, react_1.useState)(false);
     const [rectangleDetected, setRectangleDetected] = (0, react_1.useState)(false);
     const [rectangleHint, setRectangleHint] = (0, react_1.useState)(false);
+    const [captureReady, setCaptureReady] = (0, react_1.useState)(false);
     const [flashEnabled, setFlashEnabled] = (0, react_1.useState)(false);
     const [rotationDegrees, setRotationDegrees] = (0, react_1.useState)(0);
     const [capturedPhotos, setCapturedPhotos] = (0, react_1.useState)([]);
@@ -140,6 +141,7 @@ const FullDocScanner = ({ onResult, onClose, detectionConfig, overlayColor = '#3
     const captureInProgressRef = (0, react_1.useRef)(false);
     const rectangleCaptureTimeoutRef = (0, react_1.useRef)(null);
     const rectangleHintTimeoutRef = (0, react_1.useRef)(null);
+    const captureReadyTimeoutRef = (0, react_1.useRef)(null);
     const isBusinessMode = type === 'business';
     const resetScannerView = (0, react_1.useCallback)((options) => {
         setProcessing(false);
@@ -147,6 +149,7 @@ const FullDocScanner = ({ onResult, onClose, detectionConfig, overlayColor = '#3
         setRotationDegrees(0);
         setRectangleDetected(false);
         setRectangleHint(false);
+        setCaptureReady(false);
         captureModeRef.current = null;
         captureInProgressRef.current = false;
         if (rectangleCaptureTimeoutRef.current) {
@@ -157,6 +160,10 @@ const FullDocScanner = ({ onResult, onClose, detectionConfig, overlayColor = '#3
             clearTimeout(rectangleHintTimeoutRef.current);
             rectangleHintTimeoutRef.current = null;
         }
+        if (captureReadyTimeoutRef.current) {
+            clearTimeout(captureReadyTimeoutRef.current);
+            captureReadyTimeoutRef.current = null;
+        }
         if (docScannerRef.current?.reset) {
             docScannerRef.current.reset();
         }
@@ -360,9 +367,14 @@ const FullDocScanner = ({ onResult, onClose, detectionConfig, overlayColor = '#3
             hasRef: hasScanner,
             rectangleDetected,
             rectangleHint,
+            captureReady,
             currentCaptureMode: captureModeRef.current,
             captureInProgress: captureInProgressRef.current,
         });
+        if (react_native_1.Platform.OS === 'android' && !captureReady) {
+            console.log('[FullDocScanner] Capture not ready yet, skipping');
+            return;
+        }
         if (processing) {
             console.log('[FullDocScanner] Already processing, skipping manual capture');
             return;
@@ -408,7 +420,7 @@ const FullDocScanner = ({ onResult, onClose, detectionConfig, overlayColor = '#3
                 emitError(error, 'Failed to capture image. Please try again.');
             }
         });
-    }, [processing, rectangleDetected, rectangleHint, emitError]);
+    }, [processing, rectangleDetected, rectangleHint, captureReady, emitError]);
     const handleGalleryPick = (0, react_1.useCallback)(async () => {
         console.log('[FullDocScanner] handleGalleryPick called');
         if (processing || isGalleryOpen) {
@@ -527,7 +539,7 @@ const FullDocScanner = ({ onResult, onClose, detectionConfig, overlayColor = '#3
         const stableCounter = event.stableCounter ?? 0;
         const rectangleCoordinates = event.rectangleOnScreen ?? event.rectangleCoordinates;
         const hasRectangle = Boolean(rectangleCoordinates);
-        const captureReady = hasRectangle && (react_native_1.Platform.OS === 'android' || (event.lastDetectionType === 0 && stableCounter >= 1));
+        const isStableForCapture = hasRectangle && (react_native_1.Platform.OS === 'android' || (event.lastDetectionType === 0 && stableCounter >= 1));
         const scheduleClear = (ref, clearFn) => {
             if (ref.current) {
                 clearTimeout(ref.current);
@@ -540,6 +552,14 @@ const FullDocScanner = ({ onResult, onClose, detectionConfig, overlayColor = '#3
         if (hasRectangle) {
             scheduleClear(rectangleHintTimeoutRef, () => setRectangleHint(false));
             setRectangleHint(true);
+            if (react_native_1.Platform.OS === 'android') {
+                if (!captureReadyTimeoutRef.current) {
+                    captureReadyTimeoutRef.current = setTimeout(() => {
+                        setCaptureReady(true);
+                        captureReadyTimeoutRef.current = null;
+                    }, 1000);
+                }
+            }
         }
         else {
             if (rectangleHintTimeoutRef.current) {
@@ -547,8 +567,15 @@ const FullDocScanner = ({ onResult, onClose, detectionConfig, overlayColor = '#3
                 rectangleHintTimeoutRef.current = null;
             }
             setRectangleHint(false);
+            if (react_native_1.Platform.OS === 'android') {
+                if (captureReadyTimeoutRef.current) {
+                    clearTimeout(captureReadyTimeoutRef.current);
+                    captureReadyTimeoutRef.current = null;
+                }
+                setCaptureReady(false);
+            }
         }
-        if (captureReady) {
+        if (isStableForCapture) {
             scheduleClear(rectangleCaptureTimeoutRef, () => {
                 setRectangleDetected(false);
             });
@@ -570,6 +597,9 @@ const FullDocScanner = ({ onResult, onClose, detectionConfig, overlayColor = '#3
         if (rectangleHintTimeoutRef.current) {
             clearTimeout(rectangleHintTimeoutRef.current);
         }
+        if (captureReadyTimeoutRef.current) {
+            clearTimeout(captureReadyTimeoutRef.current);
+        }
     }, []);
     const activePreviewImage = croppedImageData ? getActivePreviewImage(croppedImageData) : null;
     return (react_1.default.createElement(react_native_1.View, { style: styles.container },
@@ -642,10 +672,14 @@ const FullDocScanner = ({ onResult, onClose, detectionConfig, overlayColor = '#3
                     enableGallery && (react_1.default.createElement(react_native_1.TouchableOpacity, { style: [styles.iconButton, processing && styles.buttonDisabled], onPress: handleGalleryPick, disabled: processing, accessibilityLabel: mergedStrings.galleryButton, accessibilityRole: "button" },
                         react_1.default.createElement(react_native_1.View, { style: styles.iconContainer },
                             react_1.default.createElement(react_native_1.Text, { style: styles.iconText }, "\uD83D\uDDBC\uFE0F")))),
-                    react_1.default.createElement(react_native_1.TouchableOpacity, { style: [styles.shutterButton, processing && styles.buttonDisabled], onPress: triggerManualCapture, disabled: processing, accessibilityLabel: mergedStrings.manualHint, accessibilityRole: "button" },
+                    react_1.default.createElement(react_native_1.TouchableOpacity, { style: [
+                            styles.shutterButton,
+                            processing && styles.buttonDisabled,
+                            react_native_1.Platform.OS === 'android' && !captureReady && styles.buttonDisabled,
+                        ], onPress: triggerManualCapture, disabled: processing || (react_native_1.Platform.OS === 'android' && !captureReady), accessibilityLabel: mergedStrings.manualHint, accessibilityRole: "button" },
                         react_1.default.createElement(react_native_1.View, { style: [
                                 styles.shutterInner,
-                                rectangleHint && { backgroundColor: overlayColor }
+                                (react_native_1.Platform.OS === 'android' ? captureReady : rectangleHint) && { backgroundColor: overlayColor }
                             ] })),
                     react_1.default.createElement(react_native_1.View, { style: styles.rightButtonsPlaceholder }))))),
         processing && (react_1.default.createElement(react_native_1.View, { style: styles.processingOverlay },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-rectangle-doc-scanner",
-  "version": "10.27.0",
+  "version": "10.29.0",
   "description": "Native-backed document scanner for React Native with customizable overlays.",
   "license": "MIT",
   "main": "dist/index.js",

package/src/FullDocScanner.tsx

@@ -192,6 +192,7 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
   const [isGalleryOpen, setIsGalleryOpen] = useState(false);
   const [rectangleDetected, setRectangleDetected] = useState(false);
   const [rectangleHint, setRectangleHint] = useState(false);
+  const [captureReady, setCaptureReady] = useState(false);
   const [flashEnabled, setFlashEnabled] = useState(false);
   const [rotationDegrees, setRotationDegrees] = useState(0);
   const [capturedPhotos, setCapturedPhotos] = useState<FullDocScannerResult[]>([]);
@@ -203,6 +204,7 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
   const captureInProgressRef = useRef(false);
   const rectangleCaptureTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const rectangleHintTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const captureReadyTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   const isBusinessMode = type === 'business';
 
@@ -213,6 +215,7 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
       setRotationDegrees(0);
       setRectangleDetected(false);
       setRectangleHint(false);
+      setCaptureReady(false);
       captureModeRef.current = null;
       captureInProgressRef.current = false;
 
@@ -225,6 +228,10 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
         clearTimeout(rectangleHintTimeoutRef.current);
         rectangleHintTimeoutRef.current = null;
       }
+      if (captureReadyTimeoutRef.current) {
+        clearTimeout(captureReadyTimeoutRef.current);
+        captureReadyTimeoutRef.current = null;
+      }
 
       if (docScannerRef.current?.reset) {
         docScannerRef.current.reset();
@@ -505,10 +512,16 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
       hasRef: hasScanner,
       rectangleDetected,
       rectangleHint,
+      captureReady,
       currentCaptureMode: captureModeRef.current,
       captureInProgress: captureInProgressRef.current,
     });
 
+    if (Platform.OS === 'android' && !captureReady) {
+      console.log('[FullDocScanner] Capture not ready yet, skipping');
+      return;
+    }
+
     if (processing) {
       console.log('[FullDocScanner] Already processing, skipping manual capture');
       return;
@@ -567,7 +580,7 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
           );
         }
       });
-  }, [processing, rectangleDetected, rectangleHint, emitError]);
+  }, [processing, rectangleDetected, rectangleHint, captureReady, emitError]);
 
   const handleGalleryPick = useCallback(async () => {
     console.log('[FullDocScanner] handleGalleryPick called');
@@ -719,7 +732,8 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
     const stableCounter = event.stableCounter ?? 0;
     const rectangleCoordinates = event.rectangleOnScreen ?? event.rectangleCoordinates;
     const hasRectangle = Boolean(rectangleCoordinates);
-    const captureReady = hasRectangle && (Platform.OS === 'android' || (event.lastDetectionType === 0 && stableCounter >= 1));
+    const isStableForCapture =
+      hasRectangle && (Platform.OS === 'android' || (event.lastDetectionType === 0 && stableCounter >= 1));
 
     const scheduleClear = (
       ref: React.MutableRefObject<ReturnType<typeof setTimeout> | null>,
@@ -737,15 +751,30 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
     if (hasRectangle) {
       scheduleClear(rectangleHintTimeoutRef, () => setRectangleHint(false));
       setRectangleHint(true);
+      if (Platform.OS === 'android') {
+        if (!captureReadyTimeoutRef.current) {
+          captureReadyTimeoutRef.current = setTimeout(() => {
+            setCaptureReady(true);
+            captureReadyTimeoutRef.current = null;
+          }, 1000);
+        }
+      }
     } else {
       if (rectangleHintTimeoutRef.current) {
         clearTimeout(rectangleHintTimeoutRef.current);
         rectangleHintTimeoutRef.current = null;
       }
       setRectangleHint(false);
+      if (Platform.OS === 'android') {
+        if (captureReadyTimeoutRef.current) {
+          clearTimeout(captureReadyTimeoutRef.current);
+          captureReadyTimeoutRef.current = null;
+        }
+        setCaptureReady(false);
+      }
     }
 
-    if (captureReady) {
+    if (isStableForCapture) {
       scheduleClear(rectangleCaptureTimeoutRef, () => {
         setRectangleDetected(false);
       });
@@ -768,6 +797,9 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
       if (rectangleHintTimeoutRef.current) {
         clearTimeout(rectangleHintTimeoutRef.current);
       }
+      if (captureReadyTimeoutRef.current) {
+        clearTimeout(captureReadyTimeoutRef.current);
+      }
     },
     [],
   );
@@ -1000,15 +1032,19 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
               </TouchableOpacity>
             )}
             <TouchableOpacity
-              style={[styles.shutterButton, processing && styles.buttonDisabled]}
+              style={[
+                styles.shutterButton,
+                processing && styles.buttonDisabled,
+                Platform.OS === 'android' && !captureReady && styles.buttonDisabled,
+              ]}
               onPress={triggerManualCapture}
-              disabled={processing}
+              disabled={processing || (Platform.OS === 'android' && !captureReady)}
               accessibilityLabel={mergedStrings.manualHint}
               accessibilityRole="button"
             >
               <View style={[
                 styles.shutterInner,
-                rectangleHint && { backgroundColor: overlayColor }
+                (Platform.OS === 'android' ? captureReady : rectangleHint) && { backgroundColor: overlayColor }
               ]} />
             </TouchableOpacity>
             <View style={styles.rightButtonsPlaceholder} />