react-native-rectangle-doc-scanner 0.34.0 → 0.36.0

package/dist/DocScanner.js

@@ -91,37 +91,19 @@ const DocScanner = ({ onCapture, overlayColor = '#e7a649', autoCapture = true, m
     (0, react_1.useEffect)(() => {
         requestPermission();
     }, [requestPermission]);
-    const lastQuadRef = (0, react_1.useRef)(null);
-    const noQuadFramesRef = (0, react_1.useRef)(0);
     const updateQuad = (0, react_native_worklets_core_1.useRunOnJS)((value) => {
         if (__DEV__) {
             console.log('[DocScanner] quad', value);
         }
-        if (value) {
-            // Found a quad, reset counter and update
-            noQuadFramesRef.current = 0;
-            lastQuadRef.current = value;
-            setQuad(value);
-        }
-        else {
-            // No quad found, keep the last one for a few frames
-            noQuadFramesRef.current += 1;
-            // Keep the last quad for up to 3 frames
-            if (noQuadFramesRef.current > 3) {
-                lastQuadRef.current = null;
-                setQuad(null);
-            }
-            // Otherwise, keep showing the last quad
-        }
+        // Always update immediately for real-time tracking
+        setQuad(value);
     }, []);
     const reportError = (0, react_native_worklets_core_1.useRunOnJS)((step, error) => {
         const message = error instanceof Error ? error.message : `${error}`;
         console.warn(`[DocScanner] frame error at ${step}: ${message}`);
     }, []);
-    const reportStage = (0, react_native_worklets_core_1.useRunOnJS)((stage) => {
-        if (__DEV__) {
-            console.log('[DocScanner] stage', stage);
-        }
+    const reportStage = (0, react_native_worklets_core_1.useRunOnJS)((_stage) => {
+        // Disabled for performance
     }, []);
     const [frameSize, setFrameSize] = (0, react_1.useState)(null);
     const updateFrameSize = (0, react_native_worklets_core_1.useRunOnJS)((width, height) => {
@@ -197,7 +179,7 @@ const DocScanner = ({ onCapture, overlayColor = '#e7a649', autoCapture = true, m
                     console.log('[DocScanner] area', area, 'ratio', areaRatio);
                 }
                 // Skip if area ratio is too small or too large
-                if (areaRatio < 0.01 || areaRatio > 0.95) {
+                if (areaRatio < 0.02 || areaRatio > 0.95) {
                     continue;
                 }
                 step = `contour_${i}_arcLength`;
@@ -205,9 +187,8 @@ const DocScanner = ({ onCapture, overlayColor = '#e7a649', autoCapture = true, m
                 const { value: perimeter } = react_native_fast_opencv_1.OpenCV.invoke('arcLength', contour, true);
                 const approx = react_native_fast_opencv_1.OpenCV.createObject(react_native_fast_opencv_1.ObjectType.PointVector);
                 let approxArray = [];
-                // Start with smaller epsilon for more accurate corner detection
-                // Try epsilon values from 0.5% to 5% of perimeter
-                const epsilonValues = [0.005, 0.01, 0.015, 0.02, 0.025, 0.03, 0.035, 0.04, 0.045, 0.05];
+                // Try epsilon values from 0.2% to 8% of perimeter
+                const epsilonValues = [0.002, 0.004, 0.006, 0.008, 0.01, 0.015, 0.02, 0.03, 0.04, 0.05, 0.06, 0.07, 0.08];
                 for (let attempt = 0; attempt < epsilonValues.length; attempt += 1) {
                     const epsilon = epsilonValues[attempt] * perimeter;
                     step = `contour_${i}_approxPolyDP_attempt_${attempt}`;

package/dist/utils/overlay.js

@@ -95,25 +95,13 @@ const Overlay = ({ quad, color = '#e7a649', frameSize }) => {
         skPath.close();
         return skPath;
     }, [quad, color, screenWidth, screenHeight, frameSize]);
-    // Test path - always visible for debugging
-    const testPath = (0, react_1.useMemo)(() => {
-        const tp = react_native_skia_1.Skia.Path.Make();
-        tp.moveTo(100, 100);
-        tp.lineTo(300, 100);
-        tp.lineTo(300, 300);
-        tp.lineTo(100, 300);
-        tp.close();
-        return tp;
-    }, []);
     if (__DEV__) {
         console.log('[Overlay] rendering Canvas with dimensions:', screenWidth, 'x', screenHeight);
     }
     return (react_1.default.createElement(react_native_1.View, { style: styles.container, pointerEvents: "none" },
-        react_1.default.createElement(react_native_skia_1.Canvas, { style: { width: screenWidth, height: screenHeight } },
-            react_1.default.createElement(react_native_skia_1.Path, { path: testPath, color: "red", style: "stroke", strokeWidth: 4 }),
-            path && (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement(react_native_skia_1.Path, { path: path, color: color, style: "stroke", strokeWidth: 8 }),
-                react_1.default.createElement(react_native_skia_1.Path, { path: path, color: "rgba(231, 166, 73, 0.2)", style: "fill" }))))));
+        react_1.default.createElement(react_native_skia_1.Canvas, { style: { width: screenWidth, height: screenHeight } }, path && (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(react_native_skia_1.Path, { path: path, color: color, style: "stroke", strokeWidth: 8 }),
+            react_1.default.createElement(react_native_skia_1.Path, { path: path, color: "rgba(231, 166, 73, 0.2)", style: "fill" }))))));
 };
 exports.Overlay = Overlay;
 const styles = react_native_1.StyleSheet.create({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-rectangle-doc-scanner",
-  "version": "0.34.0",
+  "version": "0.36.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "repository": {

package/src/DocScanner.tsx

@@ -96,30 +96,13 @@ export const DocScanner: React.FC<Props> = ({
     requestPermission();
   }, [requestPermission]);
 
-  const lastQuadRef = useRef<Point[] | null>(null);
-  const noQuadFramesRef = useRef(0);
-
   const updateQuad = useRunOnJS((value: Point[] | null) => {
     if (__DEV__) {
       console.log('[DocScanner] quad', value);
     }
 
-    if (value) {
-      // Found a quad, reset counter and update
-      noQuadFramesRef.current = 0;
-      lastQuadRef.current = value;
-      setQuad(value);
-    } else {
-      // No quad found, keep the last one for a few frames
-      noQuadFramesRef.current += 1;
-
-      // Keep the last quad for up to 3 frames
-      if (noQuadFramesRef.current > 3) {
-        lastQuadRef.current = null;
-        setQuad(null);
-      }
-      // Otherwise, keep showing the last quad
-    }
+    // Always update immediately for real-time tracking
+    setQuad(value);
   }, []);
 
   const reportError = useRunOnJS((step: string, error: unknown) => {
@@ -127,10 +110,8 @@ export const DocScanner: React.FC<Props> = ({
     console.warn(`[DocScanner] frame error at ${step}: ${message}`);
   }, []);
 
-  const reportStage = useRunOnJS((stage: string) => {
-    if (__DEV__) {
-      console.log('[DocScanner] stage', stage);
-    }
+  const reportStage = useRunOnJS((_stage: string) => {
+    // Disabled for performance
   }, []);
 
   const [frameSize, setFrameSize] = useState<{ width: number; height: number } | null>(null);
@@ -225,7 +206,7 @@ export const DocScanner: React.FC<Props> = ({
         }
 
         // Skip if area ratio is too small or too large
-        if (areaRatio < 0.01 || areaRatio > 0.95) {
+        if (areaRatio < 0.02 || areaRatio > 0.95) {
           continue;
         }
 
@@ -236,9 +217,8 @@ export const DocScanner: React.FC<Props> = ({
 
         let approxArray: Array<{ x: number; y: number }> = [];
 
-        // Start with smaller epsilon for more accurate corner detection
-        // Try epsilon values from 0.5% to 5% of perimeter
-        const epsilonValues = [0.005, 0.01, 0.015, 0.02, 0.025, 0.03, 0.035, 0.04, 0.045, 0.05];
+        // Try epsilon values from 0.2% to 8% of perimeter
+        const epsilonValues = [0.002, 0.004, 0.006, 0.008, 0.01, 0.015, 0.02, 0.03, 0.04, 0.05, 0.06, 0.07, 0.08];
 
         for (let attempt = 0; attempt < epsilonValues.length; attempt += 1) {
           const epsilon = epsilonValues[attempt] * perimeter;

package/src/utils/overlay.tsx

@@ -79,17 +79,6 @@ export const Overlay: React.FC<OverlayProps> = ({ quad, color = '#e7a649', frame
     return skPath;
   }, [quad, color, screenWidth, screenHeight, frameSize]);
 
-  // Test path - always visible for debugging
-  const testPath = useMemo(() => {
-    const tp = Skia.Path.Make();
-    tp.moveTo(100, 100);
-    tp.lineTo(300, 100);
-    tp.lineTo(300, 300);
-    tp.lineTo(100, 300);
-    tp.close();
-    return tp;
-  }, []);
-
   if (__DEV__) {
     console.log('[Overlay] rendering Canvas with dimensions:', screenWidth, 'x', screenHeight);
   }
@@ -97,10 +86,6 @@ export const Overlay: React.FC<OverlayProps> = ({ quad, color = '#e7a649', frame
   return (
     <View style={styles.container} pointerEvents="none">
       <Canvas style={{ width: screenWidth, height: screenHeight }}>
-        {/* Debug: always show a test rectangle */}
-        <Path path={testPath} color="red" style="stroke" strokeWidth={4} />
-
-        {/* Actual quad overlay */}
         {path && (
           <>
             <Path path={path} color={color} style="stroke" strokeWidth={8} />