react-native-rectangle-doc-scanner 0.23.0 → 0.25.0

package/dist/DocScanner.js

@@ -123,10 +123,16 @@ const DocScanner = ({ onCapture, overlayColor = '#e7a649', autoCapture = true, m
             console.log('[DocScanner] stage', stage);
         }
     }, []);
+    const [frameSize, setFrameSize] = (0, react_1.useState)(null);
+    const updateFrameSize = (0, react_native_worklets_core_1.useRunOnJS)((width, height) => {
+        setFrameSize({ width, height });
+    }, []);
     const frameProcessor = (0, react_native_vision_camera_1.useFrameProcessor)((frame) => {
         'worklet';
         let step = 'start';
         try {
+            // Report frame size for coordinate transformation
+            updateFrameSize(frame.width, frame.height);
             const ratio = 480 / frame.width;
             const width = Math.floor(frame.width * ratio);
             const height = Math.floor(frame.height * ratio);
@@ -314,7 +320,7 @@ const DocScanner = ({ onCapture, overlayColor = '#e7a649', autoCapture = true, m
     }
     return (react_1.default.createElement(react_native_1.View, { style: { flex: 1 } },
         react_1.default.createElement(react_native_vision_camera_1.Camera, { ref: handleCameraRef, style: react_native_1.StyleSheet.absoluteFillObject, device: resolvedDevice, isActive: true, photo: true, frameProcessor: frameProcessor, frameProcessorFps: 15, ...cameraRestProps }),
-        react_1.default.createElement(overlay_1.Overlay, { quad: quad, color: overlayColor }),
+        react_1.default.createElement(overlay_1.Overlay, { quad: quad, color: overlayColor, frameSize: frameSize }),
         !autoCapture && (react_1.default.createElement(react_native_1.TouchableOpacity, { style: styles.button, onPress: async () => {
                 if (!camera.current) {
                     return;

package/dist/utils/overlay.d.ts

@@ -3,6 +3,10 @@ import type { Point } from '../types';
 type OverlayProps = {
     quad: Point[] | null;
     color?: string;
+    frameSize: {
+        width: number;
+        height: number;
+    } | null;
 };
 export declare const Overlay: React.FC<OverlayProps>;
 export {};

package/dist/utils/overlay.js

@@ -37,28 +37,59 @@ exports.Overlay = void 0;
 const react_1 = __importStar(require("react"));
 const react_native_1 = require("react-native");
 const react_native_skia_1 = require("@shopify/react-native-skia");
-const Overlay = ({ quad, color = '#e7a649' }) => {
+const Overlay = ({ quad, color = '#e7a649', frameSize }) => {
+    const { width: screenWidth, height: screenHeight } = (0, react_native_1.useWindowDimensions)();
     const path = (0, react_1.useMemo)(() => {
-        if (!quad) {
+        if (!quad || !frameSize) {
             if (__DEV__) {
-                console.log('[Overlay] no quad');
+                console.log('[Overlay] no quad or frameSize', { quad, frameSize });
             }
             return null;
         }
         if (__DEV__) {
             console.log('[Overlay] drawing quad:', quad);
             console.log('[Overlay] color:', color);
+            console.log('[Overlay] screen dimensions:', screenWidth, 'x', screenHeight);
+            console.log('[Overlay] frame dimensions:', frameSize.width, 'x', frameSize.height);
+        }
+        // Transform coordinates from camera frame space to screen space
+        const scaleX = screenWidth / frameSize.width;
+        const scaleY = screenHeight / frameSize.height;
+        if (__DEV__) {
+            console.log('[Overlay] scale factors:', scaleX, 'x', scaleY);
+        }
+        const transformedQuad = quad.map((p) => ({
+            x: p.x * scaleX,
+            y: p.y * scaleY,
+        }));
+        if (__DEV__) {
+            console.log('[Overlay] transformed quad:', transformedQuad);
         }
         const skPath = react_native_skia_1.Skia.Path.Make();
-        skPath.moveTo(quad[0].x, quad[0].y);
-        quad.slice(1).forEach((p) => skPath.lineTo(p.x, p.y));
+        skPath.moveTo(transformedQuad[0].x, transformedQuad[0].y);
+        transformedQuad.slice(1).forEach((p) => skPath.lineTo(p.x, p.y));
         skPath.close();
         return skPath;
-    }, [quad, color]);
+    }, [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: styles.canvas }, 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 } },
+            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" }))))));
 };
 exports.Overlay = Overlay;
 const styles = react_native_1.StyleSheet.create({
@@ -69,7 +100,4 @@ const styles = react_native_1.StyleSheet.create({
         right: 0,
         bottom: 0,
     },
-    canvas: {
-        flex: 1,
-    },
 });

package/package.json

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

package/src/DocScanner.tsx

@@ -133,12 +133,20 @@ export const DocScanner: React.FC<Props> = ({
     }
   }, []);
 
+  const [frameSize, setFrameSize] = useState<{ width: number; height: number } | null>(null);
+  const updateFrameSize = useRunOnJS((width: number, height: number) => {
+    setFrameSize({ width, height });
+  }, []);
+
   const frameProcessor = useFrameProcessor((frame) => {
     'worklet';
 
     let step = 'start';
 
     try {
+      // Report frame size for coordinate transformation
+      updateFrameSize(frame.width, frame.height);
+
       const ratio = 480 / frame.width;
       const width = Math.floor(frame.width * ratio);
       const height = Math.floor(frame.height * ratio);
@@ -369,7 +377,7 @@ export const DocScanner: React.FC<Props> = ({
         frameProcessorFps={15}
         {...cameraRestProps}
       />
-      <Overlay quad={quad} color={overlayColor} />
+      <Overlay quad={quad} color={overlayColor} frameSize={frameSize} />
       {!autoCapture && (
         <TouchableOpacity
           style={styles.button}

package/src/utils/overlay.tsx

@@ -1,18 +1,21 @@
 import React, { useMemo } from 'react';
-import { View, StyleSheet } from 'react-native';
+import { View, StyleSheet, useWindowDimensions } from 'react-native';
 import { Canvas, Path, Skia } from '@shopify/react-native-skia';
 import type { Point } from '../types';
 
 type OverlayProps = {
   quad: Point[] | null;
   color?: string;
+  frameSize: { width: number; height: number } | null;
 };
 
-export const Overlay: React.FC<OverlayProps> = ({ quad, color = '#e7a649' }) => {
+export const Overlay: React.FC<OverlayProps> = ({ quad, color = '#e7a649', frameSize }) => {
+  const { width: screenWidth, height: screenHeight } = useWindowDimensions();
+
   const path = useMemo(() => {
-    if (!quad) {
+    if (!quad || !frameSize) {
       if (__DEV__) {
-        console.log('[Overlay] no quad');
+        console.log('[Overlay] no quad or frameSize', { quad, frameSize });
       }
       return null;
     }
@@ -20,18 +23,56 @@ export const Overlay: React.FC<OverlayProps> = ({ quad, color = '#e7a649' }) =>
     if (__DEV__) {
       console.log('[Overlay] drawing quad:', quad);
       console.log('[Overlay] color:', color);
+      console.log('[Overlay] screen dimensions:', screenWidth, 'x', screenHeight);
+      console.log('[Overlay] frame dimensions:', frameSize.width, 'x', frameSize.height);
+    }
+
+    // Transform coordinates from camera frame space to screen space
+    const scaleX = screenWidth / frameSize.width;
+    const scaleY = screenHeight / frameSize.height;
+
+    if (__DEV__) {
+      console.log('[Overlay] scale factors:', scaleX, 'x', scaleY);
+    }
+
+    const transformedQuad = quad.map((p) => ({
+      x: p.x * scaleX,
+      y: p.y * scaleY,
+    }));
+
+    if (__DEV__) {
+      console.log('[Overlay] transformed quad:', transformedQuad);
     }
 
     const skPath = Skia.Path.Make();
-    skPath.moveTo(quad[0].x, quad[0].y);
-    quad.slice(1).forEach((p) => skPath.lineTo(p.x, p.y));
+    skPath.moveTo(transformedQuad[0].x, transformedQuad[0].y);
+    transformedQuad.slice(1).forEach((p) => skPath.lineTo(p.x, p.y));
     skPath.close();
     return skPath;
-  }, [quad, color]);
+  }, [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);
+  }
 
   return (
     <View style={styles.container} pointerEvents="none">
-      <Canvas style={styles.canvas}>
+      <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} />
@@ -51,7 +92,4 @@ const styles = StyleSheet.create({
     right: 0,
     bottom: 0,
   },
-  canvas: {
-    flex: 1,
-  },
 });