react-native-rectangle-doc-scanner 10.22.0 → 10.24.0

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

@@ -355,7 +355,22 @@ class CameraController(
         mlBox: android.graphics.Rect?
     ): Rectangle? {
         return try {
-            DocumentDetector.detectRectangleInYUV(nv21, width, height, rotation)
+            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 roi = android.graphics.Rect(
+                    (mlBox.left - padX).coerceAtLeast(0),
+                    (mlBox.top - padY).coerceAtLeast(0),
+                    (mlBox.right + padX).coerceAtMost(frameWidth),
+                    (mlBox.bottom + padY).coerceAtMost(frameHeight)
+                )
+                DocumentDetector.detectRectangleInYUVWithRoi(nv21, width, height, rotation, roi)
+                    ?: DocumentDetector.detectRectangleInYUV(nv21, width, height, rotation)
+            } else {
+                DocumentDetector.detectRectangleInYUV(nv21, width, height, rotation)
+            }
         } catch (e: Exception) {
             Log.w(TAG, "[CAMERAX] OpenCV detection failed", e)
             null
@@ -421,20 +436,24 @@ class CameraController(
     fun mapRectangleToView(rectangle: Rectangle?, imageWidth: Int, imageHeight: Int): Rectangle? {
         if (rectangle == null || imageWidth <= 0 || imageHeight <= 0) return null
 
-        // Simple proportional scaling for TextureView
+        // Fit-center scaling to avoid zoom/crop and keep mapping aligned with preview.
         val viewWidth = textureView.width.toFloat()
         val viewHeight = textureView.height.toFloat()
 
         if (viewWidth <= 0 || viewHeight <= 0) return null
 
-        // Simple proportional scaling
         val scaleX = viewWidth / imageWidth.toFloat()
         val scaleY = viewHeight / imageHeight.toFloat()
+        val scale = scaleX.coerceAtMost(scaleY)
+        val scaledWidth = imageWidth * scale
+        val scaledHeight = imageHeight * scale
+        val offsetX = (viewWidth - scaledWidth) / 2f
+        val offsetY = (viewHeight - scaledHeight) / 2f
 
         fun scalePoint(point: org.opencv.core.Point): org.opencv.core.Point {
             return org.opencv.core.Point(
-                point.x * scaleX,
-                point.y * scaleY
+                point.x * scale + offsetX,
+                point.y * scale + offsetY
             )
         }
 
@@ -509,10 +528,10 @@ class CameraController(
             bufferHeight
         }
 
-        // Scale to fill the view while maintaining aspect ratio
+        // Scale to fit within the view while maintaining aspect ratio (no zoom/crop)
         val scaleX = viewWidth.toFloat() / rotatedBufferWidth.toFloat()
         val scaleY = viewHeight.toFloat() / rotatedBufferHeight.toFloat()
-        val scale = scaleX.coerceAtLeast(scaleY)  // Use max to fill
+        val scale = scaleX.coerceAtMost(scaleY)  // Use min to fit
 
         Log.d(TAG, "[TRANSFORM] Rotated buffer: ${rotatedBufferWidth}x${rotatedBufferHeight}, ScaleX: $scaleX, ScaleY: $scaleY, Using: $scale")
 

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

@@ -25,6 +25,7 @@ import kotlinx.coroutines.delay
 import java.io.File
 import kotlin.math.min
 import kotlin.math.max
+import kotlin.math.hypot
 
 class DocumentScannerView(context: ThemedReactContext) : FrameLayout(context), LifecycleOwner {
     private val themedContext = context
@@ -58,6 +59,7 @@ class DocumentScannerView(context: ThemedReactContext) : FrameLayout(context), L
     private var lastDetectedImageWidth = 0
     private var lastDetectedImageHeight = 0
     private var lastRectangleOnScreen: Rectangle? = null
+    private var lastSmoothedRectangleOnScreen: Rectangle? = null
 
     // Coroutine scope for async operations
     private val scope = CoroutineScope(Dispatchers.Main + SupervisorJob())
@@ -215,19 +217,82 @@ class DocumentScannerView(context: ThemedReactContext) : FrameLayout(context), L
         } else {
             null
         }
-        lastRectangleOnScreen = rectangleOnScreen
+        val smoothedRectangleOnScreen = smoothRectangle(rectangleOnScreen, width, height)
+        lastRectangleOnScreen = smoothedRectangleOnScreen
         val quality = when {
-            rectangleOnScreen != null && width > 0 && height > 0 ->
-                DocumentDetector.evaluateRectangleQualityInView(rectangleOnScreen, width, height)
+            smoothedRectangleOnScreen != null && width > 0 && height > 0 ->
+                DocumentDetector.evaluateRectangleQualityInView(smoothedRectangleOnScreen, width, height)
             rectangle != null -> DocumentDetector.evaluateRectangleQuality(rectangle, imageWidth, imageHeight)
             else -> RectangleQuality.TOO_FAR
         }
 
         post {
-            onRectangleDetected(rectangleOnScreen, rectangle, quality, imageWidth, imageHeight)
+            onRectangleDetected(smoothedRectangleOnScreen, rectangle, quality, imageWidth, imageHeight)
         }
     }
 
+    private fun smoothRectangle(rectangle: Rectangle?, viewWidth: Int, viewHeight: Int): Rectangle? {
+        if (rectangle == null || viewWidth <= 0 || viewHeight <= 0) {
+            lastSmoothedRectangleOnScreen = null
+            return null
+        }
+
+        val prev = lastSmoothedRectangleOnScreen
+        if (prev == null) {
+            lastSmoothedRectangleOnScreen = rectangle
+            return rectangle
+        }
+
+        val minDim = min(viewWidth, viewHeight).toDouble()
+        val snapThreshold = max(12.0, minDim * 0.015)
+        val smoothThreshold = max(24.0, minDim * 0.06)
+        val maxCornerDistance = max(
+            maxCornerDistance(prev, rectangle),
+            maxCornerDistance(rectangle, prev)
+        )
+
+        val result = when {
+            maxCornerDistance <= snapThreshold -> prev
+            maxCornerDistance <= smoothThreshold -> blendRectangle(prev, rectangle, 0.35)
+            else -> rectangle
+        }
+
+        lastSmoothedRectangleOnScreen = result
+        return result
+    }
+
+    private fun maxCornerDistance(a: Rectangle, b: Rectangle): Double {
+        return max(
+            max(
+                distance(a.topLeft, b.topLeft),
+                distance(a.topRight, b.topRight)
+            ),
+            max(
+                distance(a.bottomLeft, b.bottomLeft),
+                distance(a.bottomRight, b.bottomRight)
+            )
+        )
+    }
+
+    private fun distance(p1: Point, p2: Point): Double {
+        return hypot(p1.x - p2.x, p1.y - p2.y)
+    }
+
+    private fun blendRectangle(a: Rectangle, b: Rectangle, t: Double): Rectangle {
+        fun lerp(p1: Point, p2: Point): Point {
+            val x = p1.x + (p2.x - p1.x) * t
+            val y = p1.y + (p2.y - p1.y) * t
+            return Point(x, y)
+        }
+
+        return Rectangle(
+            lerp(a.topLeft, b.topLeft),
+            lerp(a.topRight, b.topRight),
+            lerp(a.bottomLeft, b.bottomLeft),
+            lerp(a.bottomRight, b.bottomRight)
+        )
+    }
+
     private fun onRectangleDetected(
         rectangleOnScreen: Rectangle?,
         rectangleCoordinates: Rectangle?,
@@ -684,18 +749,18 @@ class DocumentScannerView(context: ThemedReactContext) : FrameLayout(context), L
         if (viewWidth == 0 || viewHeight == 0 || imageWidth == 0 || imageHeight == 0) {
             return rectangle
         }
-        val scale = max(
+        val scale = min(
             viewWidth.toDouble() / imageWidth.toDouble(),
             viewHeight.toDouble() / imageHeight.toDouble()
         )
         val scaledImageWidth = imageWidth.toDouble() * scale
         val scaledImageHeight = imageHeight.toDouble() * scale
-        val offsetX = (scaledImageWidth - viewWidth) / 2.0
-        val offsetY = (scaledImageHeight - viewHeight) / 2.0
+        val offsetX = (viewWidth - scaledImageWidth) / 2.0
+        val offsetY = (viewHeight - scaledImageHeight) / 2.0
 
         fun mapPoint(point: Point): Point {
-            val x = (point.x + offsetX) / scale
-            val y = (point.y + offsetY) / scale
+            val x = (point.x - offsetX) / scale
+            val y = (point.y - offsetY) / scale
             return Point(
                 x.coerceIn(0.0, imageWidth.toDouble()),
                 y.coerceIn(0.0, imageHeight.toDouble())

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

@@ -421,19 +421,19 @@ class DocumentDetector {
                 return rectangle
             }
 
-            val scale = max(
+            val scale = min(
                 viewWidth.toDouble() / imageWidth.toDouble(),
                 viewHeight.toDouble() / imageHeight.toDouble()
             )
 
             val scaledImageWidth = imageWidth * scale
             val scaledImageHeight = imageHeight * scale
-            val offsetX = (scaledImageWidth - viewWidth) / 2.0
-            val offsetY = (scaledImageHeight - viewHeight) / 2.0
+            val offsetX = (viewWidth - scaledImageWidth) / 2.0
+            val offsetY = (viewHeight - scaledImageHeight) / 2.0
 
             fun mapPoint(point: Point): Point {
-                val x = (point.x * scale) - offsetX
-                val y = (point.y * scale) - offsetY
+                val x = (point.x * scale) + offsetX
+                val y = (point.y * scale) + offsetY
                 return Point(
                     x.coerceIn(0.0, viewWidth.toDouble()),
                     y.coerceIn(0.0, viewHeight.toDouble())

package/dist/DocScanner.js

@@ -121,14 +121,24 @@ const mirrorRectangleHorizontally = (rectangle, imageWidth) => ({
 const mapRectangleToView = (rectangle, imageWidth, imageHeight, viewWidth, viewHeight, density) => {
     const viewWidthPx = viewWidth * density;
     const viewHeightPx = viewHeight * density;
-    const scale = Math.max(viewWidthPx / imageWidth, viewHeightPx / imageHeight);
+    const scale = react_native_1.Platform.OS === 'ios'
+        ? Math.max(viewWidthPx / imageWidth, viewHeightPx / imageHeight)
+        : Math.min(viewWidthPx / imageWidth, viewHeightPx / imageHeight);
     const scaledImageWidth = imageWidth * scale;
     const scaledImageHeight = imageHeight * scale;
-    const offsetX = (scaledImageWidth - viewWidthPx) / 2;
-    const offsetY = (scaledImageHeight - viewHeightPx) / 2;
+    const offsetX = react_native_1.Platform.OS === 'ios'
+        ? (scaledImageWidth - viewWidthPx) / 2
+        : (viewWidthPx - scaledImageWidth) / 2;
+    const offsetY = react_native_1.Platform.OS === 'ios'
+        ? (scaledImageHeight - viewHeightPx) / 2
+        : (viewHeightPx - scaledImageHeight) / 2;
     const mapPoint = (point) => ({
-        x: (point.x * scale - offsetX) / density,
-        y: (point.y * scale - offsetY) / density,
+        x: react_native_1.Platform.OS === 'ios'
+            ? (point.x * scale - offsetX) / density
+            : (point.x * scale + offsetX) / density,
+        y: react_native_1.Platform.OS === 'ios'
+            ? (point.y * scale - offsetY) / density
+            : (point.y * scale + offsetY) / density,
     });
     return {
         topLeft: mapPoint(rectangle.topLeft),

package/package.json

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

package/src/DocScanner.tsx

@@ -188,15 +188,30 @@ const mapRectangleToView = (
 ): Rectangle => {
   const viewWidthPx = viewWidth * density;
   const viewHeightPx = viewHeight * density;
-  const scale = Math.max(viewWidthPx / imageWidth, viewHeightPx / imageHeight);
+  const scale =
+    Platform.OS === 'ios'
+      ? Math.max(viewWidthPx / imageWidth, viewHeightPx / imageHeight)
+      : Math.min(viewWidthPx / imageWidth, viewHeightPx / imageHeight);
   const scaledImageWidth = imageWidth * scale;
   const scaledImageHeight = imageHeight * scale;
-  const offsetX = (scaledImageWidth - viewWidthPx) / 2;
-  const offsetY = (scaledImageHeight - viewHeightPx) / 2;
+  const offsetX =
+    Platform.OS === 'ios'
+      ? (scaledImageWidth - viewWidthPx) / 2
+      : (viewWidthPx - scaledImageWidth) / 2;
+  const offsetY =
+    Platform.OS === 'ios'
+      ? (scaledImageHeight - viewHeightPx) / 2
+      : (viewHeightPx - scaledImageHeight) / 2;
 
   const mapPoint = (point: Point): Point => ({
-    x: (point.x * scale - offsetX) / density,
-    y: (point.y * scale - offsetY) / density,
+    x:
+      Platform.OS === 'ios'
+        ? (point.x * scale - offsetX) / density
+        : (point.x * scale + offsetX) / density,
+    y:
+      Platform.OS === 'ios'
+        ? (point.y * scale - offsetY) / density
+        : (point.y * scale + offsetY) / density,
   });
 
   return {