react-native-rectangle-doc-scanner 1.0.0 → 1.2.0

package/android/src/main/java/com/reactnativerectangledocscanner/RNRDocScannerView.kt

@@ -74,6 +74,8 @@ class RNRDocScannerView @JvmOverloads constructor(
   private var currentStableCounter: Int = 0
   private var lastQuad: QuadPoints? = null
   private var lastFrameSize: AndroidSize? = null
+  private var missedDetections: Int = 0
+  private val maxMissedDetections = 4
   private var capturePromise: Promise? = null
   private var captureInFlight: Boolean = false
 
@@ -199,25 +201,43 @@ class RNRDocScannerView @JvmOverloads constructor(
 
   private fun emitDetectionResult(quad: QuadPoints?, frameSize: AndroidSize) {
     val reactContext = context as? ReactContext ?: return
+
+    val effectiveQuad: QuadPoints? = when {
+      quad != null -> {
+        missedDetections = 0
+        lastQuad = quad
+        quad
+      }
+      lastQuad != null && missedDetections < maxMissedDetections -> {
+        missedDetections += 1
+        lastQuad
+      }
+      else -> {
+        missedDetections = 0
+        lastQuad = null
+        null
+      }
+    }
+
+    val sizeForEvent = if (effectiveQuad === quad) frameSize else lastFrameSize ?: frameSize
+
     val event: WritableMap = Arguments.createMap().apply {
-      if (quad != null) {
+      if (effectiveQuad != null) {
         val quadMap = Arguments.createMap().apply {
-          putMap("topLeft", quad.topLeft.toWritable())
-          putMap("topRight", quad.topRight.toWritable())
-          putMap("bottomRight", quad.bottomRight.toWritable())
-          putMap("bottomLeft", quad.bottomLeft.toWritable())
+          putMap("topLeft", effectiveQuad.topLeft.toWritable())
+          putMap("topRight", effectiveQuad.topRight.toWritable())
+          putMap("bottomRight", effectiveQuad.bottomRight.toWritable())
+          putMap("bottomLeft", effectiveQuad.bottomLeft.toWritable())
         }
         putMap("rectangleCoordinates", quadMap)
         currentStableCounter = (currentStableCounter + 1).coerceAtMost(detectionCountBeforeCapture)
-        lastQuad = quad
       } else {
         putNull("rectangleCoordinates")
         currentStableCounter = 0
-        lastQuad = null
       }
       putInt("stableCounter", currentStableCounter)
-      putDouble("frameWidth", frameSize.width.toDouble())
-      putDouble("frameHeight", frameSize.height.toDouble())
+      putDouble("frameWidth", sizeForEvent.width.toDouble())
+      putDouble("frameHeight", sizeForEvent.height.toDouble())
     }
 
     reactContext

package/dist/utils/overlay.js

@@ -62,6 +62,23 @@ const buildPath = (points) => {
     path.close();
     return path;
 };
+const orderQuad = (points) => {
+    if (points.length !== 4) {
+        return points;
+    }
+    const sum = (p) => p.x + p.y;
+    const diff = (p) => p.x - p.y;
+    const topLeft = points.reduce((prev, curr) => (sum(curr) < sum(prev) ? curr : prev));
+    const bottomRight = points.reduce((prev, curr) => (sum(curr) > sum(prev) ? curr : prev));
+    const remaining = points.filter((p) => p !== topLeft && p !== bottomRight);
+    if (remaining.length !== 2) {
+        return [topLeft, bottomRight, ...remaining];
+    }
+    const [candidate1, candidate2] = remaining;
+    const topRight = diff(candidate1) > diff(candidate2) ? candidate1 : candidate2;
+    const bottomLeft = topRight === candidate1 ? candidate2 : candidate1;
+    return [topLeft, topRight, bottomRight, bottomLeft];
+};
 const Overlay = ({ quad, color = '#e7a649', frameSize, showGrid = true, gridColor = 'rgba(231, 166, 73, 0.35)', gridLineWidth = 2, }) => {
     const { width: screenWidth, height: screenHeight } = (0, react_native_1.useWindowDimensions)();
     const fillColor = (0, react_1.useMemo)(() => withAlpha(color, 0.2), [color]);
@@ -106,10 +123,11 @@ const Overlay = ({ quad, color = '#e7a649', frameSize, showGrid = true, gridColo
         if (!transformedQuad) {
             return { outlinePath: null, gridPaths: [] };
         }
-        const skPath = buildPath(transformedQuad);
+        const normalizedQuad = orderQuad(transformedQuad);
+        const skPath = buildPath(normalizedQuad);
         const grid = [];
         if (showGrid) {
-            const [topLeft, topRight, bottomRight, bottomLeft] = transformedQuad;
+            const [topLeft, topRight, bottomRight, bottomLeft] = normalizedQuad;
             const steps = [1 / 3, 2 / 3];
             steps.forEach((t) => {
                 const start = lerp(topLeft, topRight, t);

package/ios/RNRDocScannerView.swift

@@ -33,6 +33,8 @@ class RNRDocScannerView: UIView, AVCaptureVideoDataOutputSampleBufferDelegate, A
   private var isProcessingFrame = false
   private var isCaptureInFlight = false
   private var lastObservation: VNRectangleObservation?
+  private var missedDetectionFrames: Int = 0
+  private let maxMissedDetections = 4
   private var lastFrameSize: CGSize = .zero
   private var photoCaptureCompletion: ((Result<RNRDocScannerCaptureResult, Error>) -> Void)?
 
@@ -173,15 +175,18 @@ class RNRDocScannerView: UIView, AVCaptureVideoDataOutputSampleBufferDelegate, A
         return
       }
 
-      guard let observation = (request.results as? [VNRectangleObservation])?.first else {
-        self.lastObservation = nil
-        self.handleDetectedRectangle(nil, frameSize: frameSize)
-        return
-      }
+        guard let observations = request.results as? [VNRectangleObservation], let observation = observations.max(by: { lhs, rhs in
+          lhs.boundingBox.width * lhs.boundingBox.height < rhs.boundingBox.width * rhs.boundingBox.height
+        }) else {
+          self.lastObservation = nil
+          self.handleDetectedRectangle(nil, frameSize: frameSize)
+          return
+        }
 
-      self.lastObservation = observation
-      self.handleDetectedRectangle(observation, frameSize: frameSize)
-    }
+        self.lastObservation = observation
+        self.missedDetectionFrames = 0
+        self.handleDetectedRectangle(observation, frameSize: frameSize)
+      }
 
       request.maximumObservations = 1
       request.minimumConfidence = 0.5
@@ -205,13 +210,27 @@ class RNRDocScannerView: UIView, AVCaptureVideoDataOutputSampleBufferDelegate, A
   func handleDetectedRectangle(_ rectangle: VNRectangleObservation?, frameSize: CGSize) {
     guard let onRectangleDetect else { return }
 
+    let effectiveObservation: VNRectangleObservation?
+    if let rect = rectangle {
+      effectiveObservation = rect
+      lastObservation = rect
+      missedDetectionFrames = 0
+    } else if missedDetectionFrames < maxMissedDetections, let cached = lastObservation {
+      missedDetectionFrames += 1
+      effectiveObservation = cached
+    } else {
+      lastObservation = nil
+      missedDetectionFrames = 0
+      effectiveObservation = nil
+    }
+
     let payload: [String: Any?]
-    if let rectangle {
+    if let observation = effectiveObservation {
       let points = [
-        pointForOverlay(from: rectangle.topLeft, frameSize: frameSize),
-        pointForOverlay(from: rectangle.topRight, frameSize: frameSize),
-        pointForOverlay(from: rectangle.bottomRight, frameSize: frameSize),
-        pointForOverlay(from: rectangle.bottomLeft, frameSize: frameSize),
+        pointForOverlay(from: observation.topLeft, frameSize: frameSize),
+        pointForOverlay(from: observation.topRight, frameSize: frameSize),
+        pointForOverlay(from: observation.bottomRight, frameSize: frameSize),
+        pointForOverlay(from: observation.bottomLeft, frameSize: frameSize),
       ]
 
       currentStableCounter = min(currentStableCounter + 1, Int(truncating: detectionCountBeforeCapture))

package/package.json

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

package/src/utils/overlay.tsx

@@ -47,6 +47,29 @@ const buildPath = (points: Point[]) => {
   return path;
 };
 
+const orderQuad = (points: Point[]): Point[] => {
+  if (points.length !== 4) {
+    return points;
+  }
+
+  const sum = (p: Point) => p.x + p.y;
+  const diff = (p: Point) => p.x - p.y;
+
+  const topLeft = points.reduce((prev, curr) => (sum(curr) < sum(prev) ? curr : prev));
+  const bottomRight = points.reduce((prev, curr) => (sum(curr) > sum(prev) ? curr : prev));
+
+  const remaining = points.filter((p) => p !== topLeft && p !== bottomRight);
+  if (remaining.length !== 2) {
+    return [topLeft, bottomRight, ...remaining];
+  }
+
+  const [candidate1, candidate2] = remaining;
+  const topRight = diff(candidate1) > diff(candidate2) ? candidate1 : candidate2;
+  const bottomLeft = topRight === candidate1 ? candidate2 : candidate1;
+
+  return [topLeft, topRight, bottomRight, bottomLeft];
+};
+
 export const Overlay: React.FC<OverlayProps> = ({
   quad,
   color = '#e7a649',
@@ -105,11 +128,12 @@ export const Overlay: React.FC<OverlayProps> = ({
       return { outlinePath: null, gridPaths: [] };
     }
 
-    const skPath = buildPath(transformedQuad);
+    const normalizedQuad = orderQuad(transformedQuad);
+    const skPath = buildPath(normalizedQuad);
     const grid: ReturnType<typeof Skia.Path.Make>[] = [];
 
     if (showGrid) {
-      const [topLeft, topRight, bottomRight, bottomLeft] = transformedQuad;
+      const [topLeft, topRight, bottomRight, bottomLeft] = normalizedQuad;
       const steps = [1 / 3, 2 / 3];
 
       steps.forEach((t) => {