react-native-rectangle-doc-scanner 7.54.0 → 7.57.0

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

@@ -70,6 +70,7 @@ class CameraController(
     private var latestTransform: Matrix? = null
     private var latestBufferWidth = 0
     private var latestBufferHeight = 0
+    private var latestTransformRotation = 0
     private val objectDetector = ObjectDetection.getClient(
         ObjectDetectorOptions.Builder()
             .setDetectorMode(ObjectDetectorOptions.STREAM_MODE)
@@ -216,7 +217,7 @@ class CameraController(
         if (rectangle == null || imageWidth <= 0 || imageHeight <= 0) return null
         if (latestBufferWidth <= 0 || latestBufferHeight <= 0) return null
 
-        val rotationDegrees = computeRotationDegrees()
+        val rotationDegrees = latestTransformRotation
         val inverseRotation = (360 - rotationDegrees) % 360
 
         fun rotatePoint(point: Point): Point {
@@ -276,6 +277,30 @@ class CameraController(
         )
     }
 
+    fun getPreviewViewport(): RectF? {
+        val transform = latestTransform ?: return null
+        if (latestBufferWidth <= 0 || latestBufferHeight <= 0) return null
+        val rotation = latestTransformRotation
+        val isSwapped = rotation == 90 || rotation == 270
+        val bufferWidth = if (isSwapped) latestBufferHeight.toFloat() else latestBufferWidth.toFloat()
+        val bufferHeight = if (isSwapped) latestBufferWidth.toFloat() else latestBufferHeight.toFloat()
+
+        val pts = floatArrayOf(
+            0f, 0f,
+            bufferWidth, 0f,
+            0f, bufferHeight,
+            bufferWidth, bufferHeight
+        )
+        transform.mapPoints(pts)
+
+        val minX = min(min(pts[0], pts[2]), min(pts[4], pts[6]))
+        val maxX = max(max(pts[0], pts[2]), max(pts[4], pts[6]))
+        val minY = min(min(pts[1], pts[3]), min(pts[5], pts[7]))
+        val maxY = max(max(pts[1], pts[3]), max(pts[5], pts[7]))
+
+        return RectF(minX, minY, maxX, maxY)
+    }
+
     private fun openCamera() {
         if (cameraDevice != null) {
             return
@@ -636,9 +661,14 @@ class CameraController(
         if (viewWidth == 0f || viewHeight == 0f) return
 
         val rotationDegrees = computeRotationDegrees()
+        val transformRotation = if (useFrontCamera) {
+            rotationDegrees
+        } else {
+            (360 - rotationDegrees) % 360
+        }
         Log.d(
             TAG,
-            "[TRANSFORM] rotation=$rotationDegrees view=${viewWidth}x${viewHeight} preview=${preview.width}x${preview.height}"
+            "[TRANSFORM] rotation=$transformRotation view=${viewWidth}x${viewHeight} preview=${preview.width}x${preview.height}"
         )
 
         val matrix = Matrix()
@@ -646,7 +676,7 @@ class CameraController(
         val centerX = viewRect.centerX()
         val centerY = viewRect.centerY()
 
-        val isSwapped = rotationDegrees == 90 || rotationDegrees == 270
+        val isSwapped = transformRotation == 90 || transformRotation == 270
         val bufferWidth = if (isSwapped) preview.height.toFloat() else preview.width.toFloat()
         val bufferHeight = if (isSwapped) preview.width.toFloat() else preview.height.toFloat()
         val bufferRect = RectF(0f, 0f, bufferWidth, bufferHeight)
@@ -655,14 +685,15 @@ class CameraController(
         matrix.setRectToRect(viewRect, bufferRect, Matrix.ScaleToFit.FILL)
         val scale = max(viewWidth / bufferWidth, viewHeight / bufferHeight)
         matrix.postScale(scale, scale, centerX, centerY)
-        if (rotationDegrees != 0) {
-            matrix.postRotate(rotationDegrees.toFloat(), centerX, centerY)
+        if (transformRotation != 0) {
+            matrix.postRotate(transformRotation.toFloat(), centerX, centerY)
         }
 
         previewView.setTransform(matrix)
         latestTransform = Matrix(matrix)
         latestBufferWidth = preview.width
         latestBufferHeight = preview.height
+        latestTransformRotation = transformRotation
 
         val pts = floatArrayOf(
             0f, 0f,

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

@@ -470,6 +470,7 @@ class DocumentScannerView(context: ThemedReactContext) : FrameLayout(context), L
         imageHeight: Int
     ) {
         val density = resources.displayMetrics.density.takeIf { it > 0f } ?: 1f
+        val previewViewport = cameraController?.getPreviewViewport()
         val event = Arguments.createMap().apply {
             putInt("stableCounter", stableCounter)
             putInt("lastDetectionType", quality.ordinal)
@@ -480,6 +481,14 @@ class DocumentScannerView(context: ThemedReactContext) : FrameLayout(context), L
                 putMap("bottomLeft", mapPointToDp(getMap("bottomLeft"), density))
                 putMap("bottomRight", mapPointToDp(getMap("bottomRight"), density))
             })
+            previewViewport?.let {
+                putMap("previewViewport", Arguments.createMap().apply {
+                    putDouble("left", it.left / density)
+                    putDouble("top", it.top / density)
+                    putDouble("width", it.width() / density)
+                    putDouble("height", it.height() / density)
+                })
+            }
             putMap("previewSize", Arguments.createMap().apply {
                 putInt("width", (width / density).toInt())
                 putInt("height", (height / density).toInt())

package/dist/DocScanner.d.ts

@@ -12,6 +12,12 @@ type PictureEvent = {
 export type RectangleDetectEvent = Omit<RectangleEventPayload, 'rectangleCoordinates' | 'rectangleOnScreen'> & {
     rectangleCoordinates?: Rectangle | null;
     rectangleOnScreen?: Rectangle | null;
+    previewViewport?: {
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+    };
 };
 export type DocScannerCapture = {
     path: string;

package/dist/DocScanner.js

@@ -418,7 +418,7 @@ const VisionCameraScanner = (0, react_1.forwardRef)(({ onCapture, overlayColor =
     const overlayIsActive = autoCapture ? isAutoCapturing : (detectedRectangle?.stableCounter ?? 0) > 0;
     return (react_1.default.createElement(react_native_1.View, { style: styles.container, onLayout: handleLayout },
         CameraComponent && device && hasPermission ? (react_1.default.createElement(CameraComponent, { ref: cameraRef, style: styles.scanner, device: device, isActive: true, photo: true, torch: enableTorch ? 'on' : 'off', frameProcessor: frameProcessor, frameProcessorFps: 10 })) : (react_1.default.createElement(react_native_1.View, { style: styles.scanner })),
-        showGrid && overlayPolygon && (react_1.default.createElement(overlay_1.ScannerOverlay, { active: overlayIsActive, color: gridColor ?? overlayColor, lineWidth: gridLineWidth, polygon: overlayPolygon })),
+        showGrid && overlayPolygon && (react_1.default.createElement(overlay_1.ScannerOverlay, { active: overlayIsActive, color: gridColor ?? overlayColor, lineWidth: gridLineWidth, polygon: overlayPolygon, clipRect: detectedRectangle?.previewViewport ?? null })),
         showManualCaptureButton && (react_1.default.createElement(react_native_1.TouchableOpacity, { style: styles.button, onPress: () => captureVision('manual') })),
         children));
 });
@@ -705,7 +705,7 @@ const NativeScanner = (0, react_1.forwardRef)(({ onCapture, overlayColor = DEFAU
     const detectionThreshold = autoCapture ? minStableFrames : 99999;
     return (react_1.default.createElement(react_native_1.View, { style: styles.container },
         react_1.default.createElement(react_native_document_scanner_1.default, { ref: scannerRef, style: styles.scanner, detectionCountBeforeCapture: detectionThreshold, overlayColor: overlayColor, enableTorch: enableTorch, quality: normalizedQuality, useBase64: useBase64, manualOnly: false, detectionConfig: detectionConfig, onPictureTaken: handlePictureTaken, onError: handleError, onRectangleDetect: handleRectangleDetect }),
-        showGrid && overlayPolygon && (react_1.default.createElement(overlay_1.ScannerOverlay, { active: overlayIsActive, color: gridColor ?? overlayColor, lineWidth: gridLineWidth, polygon: overlayPolygon })),
+        showGrid && overlayPolygon && (react_1.default.createElement(overlay_1.ScannerOverlay, { active: overlayIsActive, color: gridColor ?? overlayColor, lineWidth: gridLineWidth, polygon: overlayPolygon, clipRect: detectedRectangle?.previewViewport ?? null })),
         showManualCaptureButton && (react_1.default.createElement(react_native_1.TouchableOpacity, { style: styles.button, onPress: handleManualCapture })),
         children));
 });

package/dist/utils/overlay.d.ts

@@ -5,5 +5,11 @@ export interface ScannerOverlayProps {
     color?: string;
     lineWidth?: number;
     polygon?: Rectangle | null;
+    clipRect?: {
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+    } | null;
 }
 export declare const ScannerOverlay: React.FC<ScannerOverlayProps>;

package/dist/utils/overlay.js

@@ -78,22 +78,45 @@ const getBounds = (polygon) => {
     };
 };
 const ScannerOverlay = ({ active: _active, // kept for compatibility; no animation currently
-color = '#0b7ef4', lineWidth = react_native_1.StyleSheet.hairlineWidth, polygon, }) => {
-    const points = (0, react_1.useMemo)(() => (polygon ? createPointsString(polygon) : null), [polygon]);
-    const gridLines = (0, react_1.useMemo)(() => (polygon ? createGridLines(polygon) : []), [polygon]);
-    const bounds = (0, react_1.useMemo)(() => (polygon ? getBounds(polygon) : null), [polygon]);
-    if (!polygon || !points || !bounds) {
+color = '#0b7ef4', lineWidth = react_native_1.StyleSheet.hairlineWidth, polygon, clipRect, }) => {
+    const offset = (0, react_1.useMemo)(() => (clipRect ? { x: -clipRect.left, y: -clipRect.top } : { x: 0, y: 0 }), [clipRect]);
+    const shiftedPolygon = (0, react_1.useMemo)(() => {
+        if (!polygon)
+            return null;
+        return {
+            topLeft: { x: polygon.topLeft.x + offset.x, y: polygon.topLeft.y + offset.y },
+            topRight: { x: polygon.topRight.x + offset.x, y: polygon.topRight.y + offset.y },
+            bottomRight: { x: polygon.bottomRight.x + offset.x, y: polygon.bottomRight.y + offset.y },
+            bottomLeft: { x: polygon.bottomLeft.x + offset.x, y: polygon.bottomLeft.y + offset.y },
+        };
+    }, [polygon, offset]);
+    const points = (0, react_1.useMemo)(() => (shiftedPolygon ? createPointsString(shiftedPolygon) : null), [shiftedPolygon]);
+    const gridLines = (0, react_1.useMemo)(() => (shiftedPolygon ? createGridLines(shiftedPolygon) : []), [shiftedPolygon]);
+    const bounds = (0, react_1.useMemo)(() => (shiftedPolygon ? getBounds(shiftedPolygon) : null), [shiftedPolygon]);
+    if (!shiftedPolygon || !points || !bounds) {
         return null;
     }
+    const containerStyle = clipRect
+        ? [
+            react_native_1.StyleSheet.absoluteFill,
+            {
+                left: clipRect.left,
+                top: clipRect.top,
+                width: clipRect.width,
+                height: clipRect.height,
+                overflow: 'hidden',
+            },
+        ]
+        : react_native_1.StyleSheet.absoluteFill;
     if (SvgModule) {
         const { default: Svg, Polygon, Line } = SvgModule;
-        return (react_1.default.createElement(react_native_1.View, { pointerEvents: "none", style: react_native_1.StyleSheet.absoluteFill },
+        return (react_1.default.createElement(react_native_1.View, { pointerEvents: "none", style: containerStyle },
             react_1.default.createElement(Svg, { style: react_native_1.StyleSheet.absoluteFill },
                 react_1.default.createElement(Polygon, { points: points, fill: color, opacity: 0.15 }),
                 gridLines.map((line, index) => (react_1.default.createElement(Line, { key: `grid-${index}`, x1: line.x1, y1: line.y1, x2: line.x2, y2: line.y2, stroke: color, strokeWidth: lineWidth, opacity: 0.5 }))),
                 react_1.default.createElement(Polygon, { points: points, stroke: color, strokeWidth: lineWidth, fill: "none" }))));
     }
-    return (react_1.default.createElement(react_native_1.View, { pointerEvents: "none", style: react_native_1.StyleSheet.absoluteFill },
+    return (react_1.default.createElement(react_native_1.View, { pointerEvents: "none", style: containerStyle },
         react_1.default.createElement(react_native_1.View, { style: [
                 styles.fallbackBox,
                 {

package/package.json

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

package/src/DocScanner.tsx

@@ -35,6 +35,7 @@ type PictureEvent = {
 export type RectangleDetectEvent = Omit<RectangleEventPayload, 'rectangleCoordinates' | 'rectangleOnScreen'> & {
   rectangleCoordinates?: Rectangle | null;
   rectangleOnScreen?: Rectangle | null;
+  previewViewport?: { left: number; top: number; width: number; height: number };
 };
 
 export type DocScannerCapture = {
@@ -600,6 +601,7 @@ const VisionCameraScanner = forwardRef<DocScannerHandle, Props>(
             color={gridColor ?? overlayColor}
             lineWidth={gridLineWidth}
             polygon={overlayPolygon}
+            clipRect={detectedRectangle?.previewViewport ?? null}
           />
         )}
         {showManualCaptureButton && (
@@ -1000,6 +1002,7 @@ const NativeScanner = forwardRef<DocScannerHandle, Props>(
             color={gridColor ?? overlayColor}
             lineWidth={gridLineWidth}
             polygon={overlayPolygon}
+            clipRect={detectedRectangle?.previewViewport ?? null}
           />
         )}
         {showManualCaptureButton && (

package/src/external.d.ts

@@ -46,6 +46,7 @@ declare module 'react-native-document-scanner' {
     lastDetectionType: number;
     rectangleCoordinates?: Rectangle | null;
     rectangleOnScreen?: Rectangle | null;
+    previewViewport?: { left: number; top: number; width: number; height: number };
     previewSize?: { width: number; height: number };
     imageSize?: { width: number; height: number };
   };

package/src/utils/overlay.tsx

@@ -1,5 +1,6 @@
 import React, { useMemo } from 'react';
 import { StyleSheet, View } from 'react-native';
+import type { StyleProp, ViewStyle } from 'react-native';
 import type { Rectangle } from '../types';
 
 let SvgModule: typeof import('react-native-svg') | null = null;
@@ -78,6 +79,7 @@ export interface ScannerOverlayProps {
   color?: string;
   lineWidth?: number;
   polygon?: Rectangle | null;
+  clipRect?: { left: number; top: number; width: number; height: number } | null;
 }
 
 export const ScannerOverlay: React.FC<ScannerOverlayProps> = ({
@@ -85,20 +87,47 @@ export const ScannerOverlay: React.FC<ScannerOverlayProps> = ({
   color = '#0b7ef4',
   lineWidth = StyleSheet.hairlineWidth,
   polygon,
+  clipRect,
 }) => {
-  const points = useMemo(() => (polygon ? createPointsString(polygon) : null), [polygon]);
-  const gridLines = useMemo(() => (polygon ? createGridLines(polygon) : []), [polygon]);
-  const bounds = useMemo(() => (polygon ? getBounds(polygon) : null), [polygon]);
-
-  if (!polygon || !points || !bounds) {
+  const offset = useMemo(
+    () => (clipRect ? { x: -clipRect.left, y: -clipRect.top } : { x: 0, y: 0 }),
+    [clipRect],
+  );
+  const shiftedPolygon = useMemo(() => {
+    if (!polygon) return null;
+    return {
+      topLeft: { x: polygon.topLeft.x + offset.x, y: polygon.topLeft.y + offset.y },
+      topRight: { x: polygon.topRight.x + offset.x, y: polygon.topRight.y + offset.y },
+      bottomRight: { x: polygon.bottomRight.x + offset.x, y: polygon.bottomRight.y + offset.y },
+      bottomLeft: { x: polygon.bottomLeft.x + offset.x, y: polygon.bottomLeft.y + offset.y },
+    };
+  }, [polygon, offset]);
+  const points = useMemo(() => (shiftedPolygon ? createPointsString(shiftedPolygon) : null), [shiftedPolygon]);
+  const gridLines = useMemo(() => (shiftedPolygon ? createGridLines(shiftedPolygon) : []), [shiftedPolygon]);
+  const bounds = useMemo(() => (shiftedPolygon ? getBounds(shiftedPolygon) : null), [shiftedPolygon]);
+
+  if (!shiftedPolygon || !points || !bounds) {
     return null;
   }
 
+  const containerStyle: StyleProp<ViewStyle> = clipRect
+    ? [
+        StyleSheet.absoluteFill as ViewStyle,
+        {
+          left: clipRect.left,
+          top: clipRect.top,
+          width: clipRect.width,
+          height: clipRect.height,
+          overflow: 'hidden',
+        },
+      ]
+    : (StyleSheet.absoluteFill as ViewStyle);
+
   if (SvgModule) {
     const { default: Svg, Polygon, Line } = SvgModule;
 
     return (
-      <View pointerEvents="none" style={StyleSheet.absoluteFill}>
+      <View pointerEvents="none" style={containerStyle}>
         <Svg style={StyleSheet.absoluteFill}>
           <Polygon points={points} fill={color} opacity={0.15} />
           {gridLines.map((line, index) => (
@@ -120,7 +149,7 @@ export const ScannerOverlay: React.FC<ScannerOverlayProps> = ({
   }
 
   return (
-    <View pointerEvents="none" style={StyleSheet.absoluteFill}>
+    <View pointerEvents="none" style={containerStyle}>
       <View
         style={[
           styles.fallbackBox,