react-native-rectangle-doc-scanner 3.27.0 → 3.31.0

package/dist/utils/overlay.js

@@ -44,22 +44,7 @@ try {
 catch (error) {
     SvgModule = null;
 }
-const SCAN_DURATION_MS = 2200;
 const GRID_STEPS = [1 / 3, 2 / 3];
-const calculateMetrics = (polygon) => {
-    const minX = Math.min(polygon.topLeft.x, polygon.bottomLeft.x, polygon.topRight.x, polygon.bottomRight.x);
-    const maxX = Math.max(polygon.topLeft.x, polygon.bottomLeft.x, polygon.topRight.x, polygon.bottomRight.x);
-    const minY = Math.min(polygon.topLeft.y, polygon.topRight.y, polygon.bottomLeft.y, polygon.bottomRight.y);
-    const maxY = Math.max(polygon.topLeft.y, polygon.topRight.y, polygon.bottomLeft.y, polygon.bottomRight.y);
-    return {
-        minX,
-        maxX,
-        minY,
-        maxY,
-        width: maxX - minX,
-        height: maxY - minY,
-    };
-};
 const createPointsString = (polygon) => [
     `${polygon.topLeft.x},${polygon.topLeft.y}`,
     `${polygon.topRight.x},${polygon.topRight.y}`,
@@ -80,116 +65,51 @@ const createGridLines = (polygon) => GRID_STEPS.flatMap((step) => {
         { x1: verticalStart.x, y1: verticalStart.y, x2: verticalEnd.x, y2: verticalEnd.y },
     ];
 });
-const ScannerOverlay = ({ active, color = '#0b7ef4', lineWidth = react_native_1.StyleSheet.hairlineWidth, polygon, }) => {
-    const scanProgress = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
-    const fallbackBase = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
-    const [scanY, setScanY] = (0, react_1.useState)(null);
-    const metrics = (0, react_1.useMemo)(() => (polygon ? calculateMetrics(polygon) : null), [polygon]);
-    const scanBarHeight = (0, react_1.useMemo)(() => {
-        if (!metrics)
-            return 0;
-        return Math.max(metrics.height * 0.2, 16);
-    }, [metrics]);
-    const travelDistance = (0, react_1.useMemo)(() => {
-        if (!metrics) {
-            return 0;
-        }
-        return Math.max(metrics.height - scanBarHeight, 0);
-    }, [metrics, scanBarHeight]);
-    (0, react_1.useEffect)(() => {
-        scanProgress.stopAnimation();
-        scanProgress.setValue(0);
-        setScanY(null);
-        if (!active || !metrics || travelDistance <= 0) {
-            return undefined;
-        }
-        const loop = react_native_1.Animated.loop(react_native_1.Animated.sequence([
-            react_native_1.Animated.timing(scanProgress, {
-                toValue: 1,
-                duration: SCAN_DURATION_MS,
-                easing: react_native_1.Easing.inOut(react_native_1.Easing.quad),
-                useNativeDriver: false,
-            }),
-            react_native_1.Animated.timing(scanProgress, {
-                toValue: 0,
-                duration: SCAN_DURATION_MS,
-                easing: react_native_1.Easing.inOut(react_native_1.Easing.quad),
-                useNativeDriver: false,
-            }),
-        ]));
-        loop.start();
-        return () => {
-            loop.stop();
-            scanProgress.stopAnimation();
-        };
-    }, [active, metrics, scanProgress, travelDistance]);
-    (0, react_1.useEffect)(() => {
-        if (!metrics || travelDistance <= 0) {
-            setScanY(null);
-            return undefined;
-        }
-        const listenerId = scanProgress.addListener(({ value }) => {
-            const nextValue = metrics.minY + travelDistance * value;
-            if (Number.isFinite(nextValue)) {
-                setScanY(nextValue);
-            }
-        });
-        return () => {
-            scanProgress.removeListener(listenerId);
-        };
-    }, [metrics, scanProgress, travelDistance]);
-    if (!polygon || !metrics || metrics.width <= 0 || metrics.height <= 0) {
+const getBounds = (polygon) => {
+    const minX = Math.min(polygon.topLeft.x, polygon.bottomLeft.x, polygon.topRight.x, polygon.bottomRight.x);
+    const maxX = Math.max(polygon.topLeft.x, polygon.bottomLeft.x, polygon.topRight.x, polygon.bottomRight.x);
+    const minY = Math.min(polygon.topLeft.y, polygon.topRight.y, polygon.bottomLeft.y, polygon.bottomRight.y);
+    const maxY = Math.max(polygon.topLeft.y, polygon.topRight.y, polygon.bottomLeft.y, polygon.bottomRight.y);
+    return {
+        minX,
+        minY,
+        width: maxX - minX,
+        height: maxY - minY,
+    };
+};
+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) {
         return null;
     }
     if (SvgModule) {
-        const { default: Svg, Polygon, Line, Defs, LinearGradient, Stop, Rect } = SvgModule;
-        const gridLines = createGridLines(polygon);
-        const points = createPointsString(polygon);
-        const scanRectY = scanY ?? metrics.minY;
+        const { default: Svg, Polygon, Line } = SvgModule;
         return (react_1.default.createElement(react_native_1.View, { pointerEvents: "none", style: react_native_1.StyleSheet.absoluteFill },
             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" }),
-                react_1.default.createElement(Defs, null,
-                    react_1.default.createElement(LinearGradient, { id: "scanGradient", x1: "0", y1: "0", x2: "0", y2: "1" },
-                        react_1.default.createElement(Stop, { offset: "0%", stopColor: "rgba(255,255,255,0)" }),
-                        react_1.default.createElement(Stop, { offset: "50%", stopColor: color, stopOpacity: 0.8 }),
-                        react_1.default.createElement(Stop, { offset: "100%", stopColor: "rgba(255,255,255,0)" }))),
-                active && travelDistance > 0 && Number.isFinite(scanRectY) && (react_1.default.createElement(Rect, { x: metrics.minX, width: metrics.width, height: scanBarHeight, fill: "url(#scanGradient)", y: scanRectY })))));
+                react_1.default.createElement(Polygon, { points: points, stroke: color, strokeWidth: lineWidth, fill: "none" }))));
     }
-    const relativeTranslate = metrics && travelDistance > 0
-        ? react_native_1.Animated.multiply(scanProgress, travelDistance)
-        : fallbackBase;
     return (react_1.default.createElement(react_native_1.View, { pointerEvents: "none", style: react_native_1.StyleSheet.absoluteFill },
         react_1.default.createElement(react_native_1.View, { style: [
                 styles.fallbackBox,
                 {
-                    left: metrics.minX,
-                    top: metrics.minY,
-                    width: metrics.width,
-                    height: metrics.height,
+                    left: bounds.minX,
+                    top: bounds.minY,
+                    width: bounds.width,
+                    height: bounds.height,
                     borderColor: color,
                     borderWidth: lineWidth,
                 },
-            ] }, active && travelDistance > 0 && (react_1.default.createElement(react_native_1.Animated.View, { style: [
-                styles.fallbackScanBar,
-                {
-                    backgroundColor: color,
-                    height: scanBarHeight,
-                    transform: [{ translateY: relativeTranslate }],
-                },
-            ] })))));
+            ] })));
 };
 exports.ScannerOverlay = ScannerOverlay;
 const styles = react_native_1.StyleSheet.create({
     fallbackBox: {
         position: 'absolute',
         backgroundColor: 'rgba(11, 126, 244, 0.1)',
-        overflow: 'hidden',
-    },
-    fallbackScanBar: {
-        width: '100%',
-        opacity: 0.4,
     },
 });

package/package.json

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

package/src/CropEditor.tsx

@@ -70,26 +70,33 @@ export const CropEditor: React.FC<CropEditorProps> = ({
 
   // Get initial rectangle from detected quad or use default
   const getInitialRectangle = useCallback((): CropperRectangle | undefined => {
-    if (!document.quad || !imageSize) {
+    if (!imageSize) {
       return undefined;
     }
 
-    const rect = quadToRectangle(document.quad);
-    if (!rect) {
+    const baseWidth = document.width > 0 ? document.width : imageSize.width;
+    const baseHeight = document.height > 0 ? document.height : imageSize.height;
+
+    const sourceRectangle = document.rectangle
+      ? document.rectangle
+      : document.quad && document.quad.length === 4
+      ? quadToRectangle(document.quad)
+      : null;
+
+    if (!sourceRectangle) {
       return undefined;
     }
 
-    // Scale from original detection coordinates to image coordinates
     const scaled = scaleRectangle(
-      rect,
-      document.width,
-      document.height,
+      sourceRectangle,
+      baseWidth,
+      baseHeight,
       imageSize.width,
       imageSize.height
     );
 
     return scaled as CropperRectangle;
-  }, [document.quad, document.width, document.height, imageSize]);
+  }, [document.rectangle, document.quad, document.width, document.height, imageSize]);
 
   const handleImageLoad = useCallback((event: any) => {
     // This is just for debugging - actual size is loaded via Image.getSize in useEffect

package/src/DocScanner.tsx

@@ -33,8 +33,10 @@ export type DocScannerCapture = {
   initialPath: string | null;
   croppedPath: string | null;
   quad: Point[] | null;
+  rectangle: Rectangle | null;
   width: number;
   height: number;
+  origin: 'auto' | 'manual';
 };
 
 const isFiniteNumber = (value: unknown): value is number =>
@@ -92,6 +94,7 @@ interface Props {
   gridLineWidth?: number;
   detectionConfig?: DetectionConfig;
   onRectangleDetect?: (event: RectangleDetectEvent) => void;
+  showManualCaptureButton?: boolean;
 }
 
 export type DocScannerHandle = {
@@ -117,6 +120,7 @@ export const DocScanner = forwardRef<DocScannerHandle, Props>(
       gridLineWidth,
       detectionConfig,
       onRectangleDetect,
+      showManualCaptureButton = false,
     },
     ref,
   ) => {
@@ -127,6 +131,8 @@ export const DocScanner = forwardRef<DocScannerHandle, Props>(
     } | null>(null);
     const [isAutoCapturing, setIsAutoCapturing] = useState(false);
     const [detectedRectangle, setDetectedRectangle] = useState<RectangleDetectEvent | null>(null);
+    const lastRectangleRef = useRef<Rectangle | null>(null);
+    const captureOriginRef = useRef<'auto' | 'manual'>('auto');
 
     useEffect(() => {
       if (!autoCapture) {
@@ -146,21 +152,26 @@ export const DocScanner = forwardRef<DocScannerHandle, Props>(
       (event: PictureEvent) => {
         setIsAutoCapturing(false);
 
-        const normalizedRectangle = normalizeRectangle(event.rectangleCoordinates ?? null);
+        const normalizedRectangle =
+          normalizeRectangle(event.rectangleCoordinates ?? null) ?? lastRectangleRef.current;
         const quad = normalizedRectangle ? rectangleToQuad(normalizedRectangle) : null;
+        const origin = captureOriginRef.current;
+        captureOriginRef.current = 'auto';
 
         const initialPath = event.initialImage ?? null;
         const croppedPath = event.croppedImage ?? null;
-        const bestPath = croppedPath ?? initialPath;
+        const editablePath = initialPath ?? croppedPath;
 
-        if (bestPath) {
+        if (editablePath) {
           onCapture?.({
-            path: bestPath,
+            path: editablePath,
             initialPath,
             croppedPath,
             quad,
+            rectangle: normalizedRectangle,
             width: event.width ?? 0,
             height: event.height ?? 0,
+            origin,
           });
         }
 
@@ -182,35 +193,52 @@ export const DocScanner = forwardRef<DocScannerHandle, Props>(
     }, []);
 
     const capture = useCallback((): Promise<PictureEvent> => {
+      captureOriginRef.current = 'manual';
       const instance = scannerRef.current;
       if (!instance || typeof instance.capture !== 'function') {
+        captureOriginRef.current = 'auto';
         return Promise.reject(new Error('DocumentScanner native instance is not ready'));
       }
       if (captureResolvers.current) {
+        captureOriginRef.current = 'auto';
         return Promise.reject(new Error('capture_in_progress'));
       }
 
-      const result = instance.capture();
+      let result: any;
+      try {
+        result = instance.capture();
+      } catch (error) {
+        captureOriginRef.current = 'auto';
+        return Promise.reject(error);
+      }
       if (result && typeof result.then === 'function') {
-        return result.then((payload: PictureEvent) => {
-          handlePictureTaken(payload);
-          return payload;
+        return result.catch((error: unknown) => {
+          captureOriginRef.current = 'auto';
+          throw error;
         });
       }
 
       return new Promise<PictureEvent>((resolve, reject) => {
-        captureResolvers.current = { resolve, reject };
+        captureResolvers.current = {
+          resolve: (value) => {
+            captureOriginRef.current = 'auto';
+            resolve(value);
+          },
+          reject: (reason) => {
+            captureOriginRef.current = 'auto';
+            reject(reason);
+          },
+        };
       });
-    }, [handlePictureTaken]);
+    }, []);
 
     const handleManualCapture = useCallback(() => {
-      if (autoCapture) {
-        return;
-      }
+      captureOriginRef.current = 'manual';
       capture().catch((error) => {
+        captureOriginRef.current = 'auto';
         console.warn('[DocScanner] manual capture failed', error);
       });
-    }, [autoCapture, capture]);
+    }, [capture]);
 
     const handleRectangleDetect = useCallback(
       (event: RectangleEventPayload) => {
@@ -224,13 +252,17 @@ export const DocScanner = forwardRef<DocScannerHandle, Props>(
         };
 
         if (autoCapture) {
-          if (payload.stableCounter >= Math.max(minStableFrames - 1, 0)) {
+        if (payload.stableCounter >= Math.max(minStableFrames - 1, 0)) {
             setIsAutoCapturing(true);
           } else if (payload.stableCounter === 0) {
             setIsAutoCapturing(false);
           }
         }
 
+        if (payload.rectangleCoordinates) {
+          lastRectangleRef.current = payload.rectangleCoordinates;
+        }
+
         const isGoodRectangle = payload.lastDetectionType === 0;
         setDetectedRectangle(isGoodRectangle && rectangleOnScreen ? payload : null);
         onRectangleDetect?.(payload);
@@ -247,12 +279,13 @@ export const DocScanner = forwardRef<DocScannerHandle, Props>(
             captureResolvers.current.reject(new Error('reset'));
             captureResolvers.current = null;
           }
+          captureOriginRef.current = 'auto';
         },
       }),
       [capture],
     );
 
-    const overlayPolygon = detectedRectangle?.rectangleOnScreen ?? null;
+    const overlayPolygon = detectedRectangle?.rectangleOnScreen ?? detectedRectangle?.rectangleCoordinates ?? null;
     const overlayIsActive = autoCapture ? isAutoCapturing : (detectedRectangle?.stableCounter ?? 0) > 0;
 
     return (
@@ -279,7 +312,9 @@ export const DocScanner = forwardRef<DocScannerHandle, Props>(
             polygon={overlayPolygon}
           />
         )}
-        {!autoCapture && <TouchableOpacity style={styles.button} onPress={handleManualCapture} />}
+        {(showManualCaptureButton || !autoCapture) && (
+          <TouchableOpacity style={styles.button} onPress={handleManualCapture} />
+        )}
         {children}
       </View>
     );