react-native-rectangle-doc-scanner 0.24.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,12 +37,12 @@ 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;
         }
@@ -50,13 +50,27 @@ const Overlay = ({ quad, color = '#e7a649' }) => {
             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, screenWidth, screenHeight]);
+    }, [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();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-rectangle-doc-scanner",
-  "version": "0.24.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

@@ -6,15 +6,16 @@ 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;
     }
@@ -23,14 +24,32 @@ export const Overlay: React.FC<OverlayProps> = ({ quad, color = '#e7a649' }) =>
       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, screenWidth, screenHeight]);
+  }, [quad, color, screenWidth, screenHeight, frameSize]);
 
   // Test path - always visible for debugging
   const testPath = useMemo(() => {