react-native-rectangle-doc-scanner 3.38.0 → 3.39.0

package/dist/CropEditor.js

@@ -58,17 +58,25 @@ const CropEditor = ({ document, overlayColor = 'rgba(0,0,0,0.5)', overlayStrokeC
     });
     const [isImageLoading, setIsImageLoading] = (0, react_1.useState)(true);
     const [loadError, setLoadError] = (0, react_1.useState)(null);
+    const [croppedImageUri, setCroppedImageUri] = (0, react_1.useState)(null);
     (0, react_1.useEffect)(() => {
         console.log('[CropEditor] Document path:', document.path);
         console.log('[CropEditor] Document dimensions:', document.width, 'x', document.height);
         console.log('[CropEditor] Document quad:', document.quad);
+        console.log('[CropEditor] Document rectangle:', document.rectangle);
         // Load image size using Image.getSize
-        const imageUri = `file://${document.path}`;
+        const imageUri = document.path.startsWith('file://') ? document.path : `file://${document.path}`;
         react_native_1.Image.getSize(imageUri, (width, height) => {
             console.log('[CropEditor] Image.getSize success:', { width, height });
             setImageSize({ width, height });
-            setIsImageLoading(false);
-            setLoadError(null);
+            // If we have a rectangle (from auto-capture), crop the image
+            if (document.rectangle || document.quad) {
+                cropImageToRectangle(imageUri, width, height);
+            }
+            else {
+                setIsImageLoading(false);
+                setLoadError(null);
+            }
         }, (error) => {
             console.error('[CropEditor] Image.getSize error:', error);
             // Fallback to document dimensions
@@ -77,6 +85,48 @@ const CropEditor = ({ document, overlayColor = 'rgba(0,0,0,0.5)', overlayStrokeC
             setIsImageLoading(false);
         });
     }, [document]);
+    const cropImageToRectangle = (0, react_1.useCallback)((imageUri, width, height) => {
+        const cropManager = react_native_1.NativeModules.CustomCropManager;
+        if (!cropManager?.crop) {
+            console.warn('[CropEditor] CustomCropManager not available, showing original image');
+            setIsImageLoading(false);
+            return;
+        }
+        const baseWidth = document.width > 0 ? document.width : width;
+        const baseHeight = document.height > 0 ? document.height : height;
+        let rectangle = document.rectangle ?? null;
+        if (!rectangle && document.quad && document.quad.length === 4) {
+            rectangle = (0, coordinate_1.quadToRectangle)(document.quad);
+        }
+        if (!rectangle) {
+            console.warn('[CropEditor] No rectangle found, showing original image');
+            setIsImageLoading(false);
+            return;
+        }
+        // Scale rectangle to actual image size
+        const scaledRect = (0, coordinate_1.scaleRectangle)(rectangle, baseWidth, baseHeight, width, height);
+        console.log('[CropEditor] Cropping image with rectangle:', scaledRect);
+        cropManager.crop({
+            topLeft: scaledRect.topLeft,
+            topRight: scaledRect.topRight,
+            bottomRight: scaledRect.bottomRight,
+            bottomLeft: scaledRect.bottomLeft,
+            width,
+            height,
+        }, imageUri, (error, result) => {
+            if (error) {
+                console.error('[CropEditor] Crop error:', error);
+                setIsImageLoading(false);
+                return;
+            }
+            console.log('[CropEditor] Crop success, base64 length:', result.image?.length);
+            // Convert base64 to data URI
+            const croppedUri = `data:image/jpeg;base64,${result.image}`;
+            setCroppedImageUri(croppedUri);
+            setIsImageLoading(false);
+            setLoadError(null);
+        });
+    }, [document]);
     // Get initial rectangle from detected quad or use default
     const getInitialRectangle = (0, react_1.useCallback)(() => {
         if (!imageSize) {
@@ -131,7 +181,7 @@ const CropEditor = ({ document, overlayColor = 'rgba(0,0,0,0.5)', overlayStrokeC
         react_1.default.createElement(react_native_1.Text, { style: styles.errorPath }, imageUri))) : !imageSize || isImageLoading ? (react_1.default.createElement(react_native_1.View, { style: styles.loadingContainer },
         react_1.default.createElement(react_native_1.ActivityIndicator, { size: "large", color: handlerColor }),
         react_1.default.createElement(react_native_1.Text, { style: styles.loadingText }, "Loading image..."))) : (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(react_native_1.Image, { source: { uri: imageUri }, style: styles.fullImage, resizeMode: "contain", onLoad: () => console.log('[CropEditor] Image loaded successfully'), onError: (e) => console.error('[CropEditor] Image load error:', e.nativeEvent.error) })))));
+        react_1.default.createElement(react_native_1.Image, { source: { uri: croppedImageUri || imageUri }, style: styles.fullImage, resizeMode: "contain", onLoad: () => console.log('[CropEditor] Image loaded successfully', croppedImageUri ? 'cropped' : 'original'), onError: (e) => console.error('[CropEditor] Image load error:', e.nativeEvent.error) })))));
 };
 exports.CropEditor = CropEditor;
 const styles = react_native_1.StyleSheet.create({

package/dist/FullDocScanner.js

@@ -224,25 +224,28 @@ const FullDocScanner = ({ onResult, onClose, detectionConfig, overlayColor = '#3
             console.log('[FullDocScanner] Already processing, skipping manual capture');
             return;
         }
-        // Reset DocScanner state before capturing
-        docScannerRef.current?.reset();
+        if (manualCapturePending.current) {
+            console.log('[FullDocScanner] Manual capture already pending, skipping');
+            return;
+        }
         console.log('[FullDocScanner] Setting manualCapturePending to true');
         manualCapturePending.current = true;
-        // Small delay to ensure reset completes
-        setTimeout(() => {
-            const capturePromise = docScannerRef.current?.capture();
-            console.log('[FullDocScanner] capturePromise:', !!capturePromise);
-            if (capturePromise && typeof capturePromise.catch === 'function') {
-                capturePromise.catch((error) => {
-                    manualCapturePending.current = false;
-                    console.warn('[FullDocScanner] manual capture failed', error);
-                });
-            }
-            else if (!capturePromise) {
-                console.warn('[FullDocScanner] No capture promise returned');
+        const capturePromise = docScannerRef.current?.capture();
+        console.log('[FullDocScanner] capturePromise:', !!capturePromise);
+        if (capturePromise && typeof capturePromise.then === 'function') {
+            capturePromise
+                .then(() => {
+                console.log('[FullDocScanner] Capture success');
+            })
+                .catch((error) => {
                 manualCapturePending.current = false;
-            }
-        }, 100);
+                console.warn('[FullDocScanner] manual capture failed', error);
+            });
+        }
+        else if (!capturePromise) {
+            console.warn('[FullDocScanner] No capture promise returned');
+            manualCapturePending.current = false;
+        }
     }, []);
     const performCrop = (0, react_1.useCallback)(async () => {
         if (!capturedDoc) {

package/package.json

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

package/src/CropEditor.tsx

@@ -1,10 +1,25 @@
 import React, { useState, useCallback, useEffect } from 'react';
-import { View, StyleSheet, Image, Dimensions, ActivityIndicator, Text } from 'react-native';
+import { View, StyleSheet, Image, Dimensions, ActivityIndicator, Text, NativeModules } from 'react-native';
 import CustomImageCropper from 'react-native-perspective-image-cropper';
 import type { Rectangle as CropperRectangle } from 'react-native-perspective-image-cropper';
 import type { Point, Rectangle, CapturedDocument } from './types';
 import { createFullImageRectangle, quadToRectangle, scaleRectangle } from './utils/coordinate';
 
+type CustomCropManagerType = {
+  crop: (
+    points: {
+      topLeft: Point;
+      topRight: Point;
+      bottomRight: Point;
+      bottomLeft: Point;
+      width: number;
+      height: number;
+    },
+    imageUri: string,
+    callback: (error: unknown, result: { image: string }) => void,
+  ) => void;
+};
+
 interface CropEditorProps {
   document: CapturedDocument;
   overlayColor?: string;
@@ -42,21 +57,29 @@ export const CropEditor: React.FC<CropEditorProps> = ({
   });
   const [isImageLoading, setIsImageLoading] = useState(true);
   const [loadError, setLoadError] = useState<string | null>(null);
+  const [croppedImageUri, setCroppedImageUri] = useState<string | null>(null);
 
   useEffect(() => {
     console.log('[CropEditor] Document path:', document.path);
     console.log('[CropEditor] Document dimensions:', document.width, 'x', document.height);
     console.log('[CropEditor] Document quad:', document.quad);
+    console.log('[CropEditor] Document rectangle:', document.rectangle);
 
     // Load image size using Image.getSize
-    const imageUri = `file://${document.path}`;
+    const imageUri = document.path.startsWith('file://') ? document.path : `file://${document.path}`;
     Image.getSize(
       imageUri,
       (width, height) => {
         console.log('[CropEditor] Image.getSize success:', { width, height });
         setImageSize({ width, height });
-        setIsImageLoading(false);
-        setLoadError(null);
+
+        // If we have a rectangle (from auto-capture), crop the image
+        if (document.rectangle || document.quad) {
+          cropImageToRectangle(imageUri, width, height);
+        } else {
+          setIsImageLoading(false);
+          setLoadError(null);
+        }
       },
       (error) => {
         console.error('[CropEditor] Image.getSize error:', error);
@@ -68,6 +91,60 @@ export const CropEditor: React.FC<CropEditorProps> = ({
     );
   }, [document]);
 
+  const cropImageToRectangle = useCallback((imageUri: string, width: number, height: number) => {
+    const cropManager = NativeModules.CustomCropManager as CustomCropManagerType | undefined;
+
+    if (!cropManager?.crop) {
+      console.warn('[CropEditor] CustomCropManager not available, showing original image');
+      setIsImageLoading(false);
+      return;
+    }
+
+    const baseWidth = document.width > 0 ? document.width : width;
+    const baseHeight = document.height > 0 ? document.height : height;
+
+    let rectangle: Rectangle | null = document.rectangle ?? null;
+    if (!rectangle && document.quad && document.quad.length === 4) {
+      rectangle = quadToRectangle(document.quad);
+    }
+
+    if (!rectangle) {
+      console.warn('[CropEditor] No rectangle found, showing original image');
+      setIsImageLoading(false);
+      return;
+    }
+
+    // Scale rectangle to actual image size
+    const scaledRect = scaleRectangle(rectangle, baseWidth, baseHeight, width, height);
+
+    console.log('[CropEditor] Cropping image with rectangle:', scaledRect);
+
+    cropManager.crop(
+      {
+        topLeft: scaledRect.topLeft,
+        topRight: scaledRect.topRight,
+        bottomRight: scaledRect.bottomRight,
+        bottomLeft: scaledRect.bottomLeft,
+        width,
+        height,
+      },
+      imageUri,
+      (error: unknown, result: { image: string }) => {
+        if (error) {
+          console.error('[CropEditor] Crop error:', error);
+          setIsImageLoading(false);
+          return;
+        }
+        console.log('[CropEditor] Crop success, base64 length:', result.image?.length);
+        // Convert base64 to data URI
+        const croppedUri = `data:image/jpeg;base64,${result.image}`;
+        setCroppedImageUri(croppedUri);
+        setIsImageLoading(false);
+        setLoadError(null);
+      }
+    );
+  }, [document]);
+
   // Get initial rectangle from detected quad or use default
   const getInitialRectangle = useCallback((): CropperRectangle | undefined => {
     if (!imageSize) {
@@ -151,12 +228,12 @@ export const CropEditor: React.FC<CropEditorProps> = ({
         </View>
       ) : (
         <>
-          {/* Full screen image */}
+          {/* Show cropped image if available, otherwise show original */}
           <Image
-            source={{ uri: imageUri }}
+            source={{ uri: croppedImageUri || imageUri }}
             style={styles.fullImage}
             resizeMode="contain"
-            onLoad={() => console.log('[CropEditor] Image loaded successfully')}
+            onLoad={() => console.log('[CropEditor] Image loaded successfully', croppedImageUri ? 'cropped' : 'original')}
             onError={(e) => console.error('[CropEditor] Image load error:', e.nativeEvent.error)}
           />
           {/* Temporarily disabled CustomImageCropper - showing image only */}

package/src/FullDocScanner.tsx

@@ -347,27 +347,29 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
       console.log('[FullDocScanner] Already processing, skipping manual capture');
       return;
     }
-
-    // Reset DocScanner state before capturing
-    docScannerRef.current?.reset();
+    if (manualCapturePending.current) {
+      console.log('[FullDocScanner] Manual capture already pending, skipping');
+      return;
+    }
 
     console.log('[FullDocScanner] Setting manualCapturePending to true');
     manualCapturePending.current = true;
 
-    // Small delay to ensure reset completes
-    setTimeout(() => {
-      const capturePromise = docScannerRef.current?.capture();
-      console.log('[FullDocScanner] capturePromise:', !!capturePromise);
-      if (capturePromise && typeof capturePromise.catch === 'function') {
-        capturePromise.catch((error: unknown) => {
+    const capturePromise = docScannerRef.current?.capture();
+    console.log('[FullDocScanner] capturePromise:', !!capturePromise);
+    if (capturePromise && typeof capturePromise.then === 'function') {
+      capturePromise
+        .then(() => {
+          console.log('[FullDocScanner] Capture success');
+        })
+        .catch((error: unknown) => {
           manualCapturePending.current = false;
           console.warn('[FullDocScanner] manual capture failed', error);
         });
-      } else if (!capturePromise) {
-        console.warn('[FullDocScanner] No capture promise returned');
-        manualCapturePending.current = false;
-      }
-    }, 100);
+    } else if (!capturePromise) {
+      console.warn('[FullDocScanner] No capture promise returned');
+      manualCapturePending.current = false;
+    }
   }, []);
 
   const performCrop = useCallback(async (): Promise<{ base64: string; rectangle: Rectangle }> => {