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

package/dist/CropEditor.js

@@ -32,14 +32,10 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CropEditor = void 0;
 const react_1 = __importStar(require("react"));
 const react_native_1 = require("react-native");
-const react_native_perspective_image_cropper_1 = __importDefault(require("react-native-perspective-image-cropper"));
 const coordinate_1 = require("./utils/coordinate");
 /**
  * CropEditor Component
@@ -62,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
@@ -81,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) {
@@ -135,8 +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_perspective_image_cropper_1.default, { height: displaySize.height, width: displaySize.width, image: imageUri, rectangleCoordinates: initialRect, overlayColor: overlayColor, overlayStrokeColor: overlayStrokeColor, handlerColor: handlerColor, enablePanStrict: enablePanStrict, onDragEnd: handleDragEnd }),
-        react_1.default.createElement(react_native_1.Image, { source: { uri: imageUri }, style: styles.debugImage, onLoad: () => console.log('[CropEditor] Debug image loaded'), onError: (e) => console.error('[CropEditor] Debug image 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({
@@ -171,14 +216,8 @@ const styles = react_native_1.StyleSheet.create({
         fontSize: 12,
         textAlign: 'center',
     },
-    debugImage: {
-        position: 'absolute',
-        width: 100,
-        height: 100,
-        top: 10,
-        right: 10,
-        opacity: 0.5,
-        borderWidth: 2,
-        borderColor: 'red',
+    fullImage: {
+        width: '100%',
+        height: '100%',
     },
 });

package/dist/FullDocScanner.js

@@ -224,12 +224,20 @@ const FullDocScanner = ({ onResult, onClose, detectionConfig, overlayColor = '#3
             console.log('[FullDocScanner] Already processing, skipping manual capture');
             return;
         }
+        if (manualCapturePending.current) {
+            console.log('[FullDocScanner] Manual capture already pending, skipping');
+            return;
+        }
         console.log('[FullDocScanner] Setting manualCapturePending to true');
         manualCapturePending.current = true;
         const capturePromise = docScannerRef.current?.capture();
         console.log('[FullDocScanner] capturePromise:', !!capturePromise);
-        if (capturePromise && typeof capturePromise.catch === 'function') {
-            capturePromise.catch((error) => {
+        if (capturePromise && typeof capturePromise.then === 'function') {
+            capturePromise
+                .then(() => {
+                console.log('[FullDocScanner] Capture success');
+            })
+                .catch((error) => {
                 manualCapturePending.current = false;
                 console.warn('[FullDocScanner] manual capture failed', error);
             });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-rectangle-doc-scanner",
-  "version": "3.37.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,7 +228,16 @@ export const CropEditor: React.FC<CropEditorProps> = ({
         </View>
       ) : (
         <>
-          <CustomImageCropper
+          {/* Show cropped image if available, otherwise show original */}
+          <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)}
+          />
+          {/* Temporarily disabled CustomImageCropper - showing image only */}
+          {/* <CustomImageCropper
             height={displaySize.height}
             width={displaySize.width}
             image={imageUri}
@@ -161,14 +247,7 @@ export const CropEditor: React.FC<CropEditorProps> = ({
             handlerColor={handlerColor}
             enablePanStrict={enablePanStrict}
             onDragEnd={handleDragEnd}
-          />
-          {/* Debug: Show image in background to verify it loads */}
-          <Image
-            source={{ uri: imageUri }}
-            style={styles.debugImage}
-            onLoad={() => console.log('[CropEditor] Debug image loaded')}
-            onError={(e) => console.error('[CropEditor] Debug image error:', e.nativeEvent.error)}
-          />
+          /> */}
         </>
       )}
     </View>
@@ -207,14 +286,8 @@ const styles = StyleSheet.create({
     fontSize: 12,
     textAlign: 'center',
   },
-  debugImage: {
-    position: 'absolute',
-    width: 100,
-    height: 100,
-    top: 10,
-    right: 10,
-    opacity: 0.5,
-    borderWidth: 2,
-    borderColor: 'red',
+  fullImage: {
+    width: '100%',
+    height: '100%',
   },
 });

package/src/FullDocScanner.tsx

@@ -347,15 +347,25 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
       console.log('[FullDocScanner] Already processing, skipping manual capture');
       return;
     }
+    if (manualCapturePending.current) {
+      console.log('[FullDocScanner] Manual capture already pending, skipping');
+      return;
+    }
+
     console.log('[FullDocScanner] Setting manualCapturePending to true');
     manualCapturePending.current = true;
+
     const capturePromise = docScannerRef.current?.capture();
     console.log('[FullDocScanner] capturePromise:', !!capturePromise);
-    if (capturePromise && typeof capturePromise.catch === 'function') {
-      capturePromise.catch((error: unknown) => {
-        manualCapturePending.current = false;
-        console.warn('[FullDocScanner] manual capture failed', error);
-      });
+    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;