react-native-rectangle-doc-scanner 0.64.0 → 0.65.0

package/src/external.d.ts

@@ -1,78 +1,46 @@
-declare module 'react-native-vision-camera' {
+declare module 'react-native-document-scanner-plugin' {
   import type { ComponentType } from 'react';
   import type { ViewStyle } from 'react-native';
 
-  export type CameraDevice = {
-    id: string;
-    name: string;
-  } | null;
-
-  export type Frame = {
-    width: number;
-    height: number;
+  export type RectangleCoordinates = {
+    topLeft: { x: number; y: number };
+    topRight: { x: number; y: number };
+    bottomRight: { x: number; y: number };
+    bottomLeft: { x: number; y: number };
   };
 
-  export type TakePhotoOptions = {
-    qualityPrioritization?: 'balanced' | 'quality' | 'speed';
+  export type RectangleEvent = {
+    rectangleCoordinates?: RectangleCoordinates;
+    stableCounter?: number;
+    lastDetectionType?: 'initial' | 'updated' | 'lost';
   };
 
-  export type CameraRef = {
-    takePhoto: (options?: TakePhotoOptions) => Promise<{
-      path: string;
-    }>;
+  export type CaptureResult = {
+    croppedImage?: string;
+    initialImage?: string;
+    width?: number;
+    height?: number;
   };
 
-  export type CameraProps = {
-    ref?: (value: CameraRef | null) => void;
+  export type DocumentScannerProps = {
+    ref?: (value: DocumentScannerHandle | null) => void;
     style?: ViewStyle;
-    device: CameraDevice;
-    isActive?: boolean;
-    photo?: boolean;
-    frameProcessor?: (frame: Frame) => void;
-    frameProcessorFps?: number;
-  };
-
-  export const Camera: ComponentType<CameraProps>;
-  export function useCameraDevice(position?: 'back' | 'front'): CameraDevice;
-  export function useCameraPermission(): {
-    hasPermission: boolean;
-    requestPermission: () => Promise<void>;
-  };
-  export function useFrameProcessor(
-    processor: (frame: Frame) => void,
-    deps?: ReadonlyArray<unknown>
-  ): (frame: Frame) => void;
-}
-
-declare module 'react-native-reanimated' {
-  export function runOnJS<T extends (...args: any[]) => any>(fn: T): T;
-}
-
-declare module 'vision-camera-resize-plugin' {
-  import type { Frame } from 'react-native-vision-camera';
-
-  type ResizeOptions = {
-    dataType: 'uint8';
-    pixelFormat: 'bgr';
-    scale: {
-      width: number;
-      height: number;
-    };
+    overlayColor?: string;
+    detectionCountBeforeCapture?: number;
+    enableTorch?: boolean;
+    hideControls?: boolean;
+    useBase64?: boolean;
+    quality?: number;
+    onRectangleDetect?: (event: RectangleEvent) => void;
+    onPictureTaken?: (result: CaptureResult) => void;
   };
 
-  export function useResizePlugin(): {
-    resize: (frame: Frame, options: ResizeOptions) => ArrayBuffer;
+  export type DocumentScannerHandle = {
+    capture: () => Promise<CaptureResult>;
   };
-}
 
-declare module 'react-native-fast-opencv' {
-  export const OpenCV: any;
-  export const ColorConversionCodes: any;
-  export const MorphTypes: any;
-  export const MorphShapes: any;
-  export const RetrievalModes: any;
-  export const ContourApproximationModes: any;
-  export const ObjectType: any;
+  const DocumentScanner: ComponentType<DocumentScannerProps>;
+  export default DocumentScanner;
 }
 
 declare module '@shopify/react-native-skia' {

package/src/utils/overlay.tsx

@@ -3,21 +3,41 @@ import { View, StyleSheet, useWindowDimensions } from 'react-native';
 import { Canvas, Path, Skia } from '@shopify/react-native-skia';
 import type { Point } from '../types';
 
+const lerp = (start: Point, end: Point, t: number): Point => ({
+  x: start.x + (end.x - start.x) * t,
+  y: start.y + (end.y - start.y) * t,
+});
+
 type OverlayProps = {
   quad: Point[] | null;
   color?: string;
   frameSize: { width: number; height: number } | null;
+  showGrid?: boolean;
+  gridColor?: string;
+  gridLineWidth?: number;
+};
+
+type OverlayGeometry = {
+  outlinePath: ReturnType<typeof Skia.Path.Make> | null;
+  gridPaths: ReturnType<typeof Skia.Path.Make>[];
 };
 
-export const Overlay: React.FC<OverlayProps> = ({ quad, color = '#e7a649', frameSize }) => {
+export const Overlay: React.FC<OverlayProps> = ({
+  quad,
+  color = '#e7a649',
+  frameSize,
+  showGrid = true,
+  gridColor = 'rgba(231, 166, 73, 0.35)',
+  gridLineWidth = 2,
+}) => {
   const { width: screenWidth, height: screenHeight } = useWindowDimensions();
 
-  const path = useMemo(() => {
+  const { outlinePath, gridPaths }: OverlayGeometry = useMemo(() => {
     if (!quad || !frameSize) {
       if (__DEV__) {
         console.log('[Overlay] no quad or frameSize', { quad, frameSize });
       }
-      return null;
+      return { outlinePath: null, gridPaths: [] };
     }
 
     if (__DEV__) {
@@ -76,8 +96,33 @@ export const Overlay: React.FC<OverlayProps> = ({ quad, color = '#e7a649', frame
     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, frameSize]);
+    const grid: ReturnType<typeof Skia.Path.Make>[] = [];
+
+    if (showGrid) {
+      const [topLeft, topRight, bottomRight, bottomLeft] = transformedQuad;
+      const steps = [1 / 3, 2 / 3];
+
+      steps.forEach((t) => {
+        const start = lerp(topLeft, topRight, t);
+        const end = lerp(bottomLeft, bottomRight, t);
+        const verticalPath = Skia.Path.Make();
+        verticalPath.moveTo(start.x, start.y);
+        verticalPath.lineTo(end.x, end.y);
+        grid.push(verticalPath);
+      });
+
+      steps.forEach((t) => {
+        const start = lerp(topLeft, bottomLeft, t);
+        const end = lerp(topRight, bottomRight, t);
+        const horizontalPath = Skia.Path.Make();
+        horizontalPath.moveTo(start.x, start.y);
+        horizontalPath.lineTo(end.x, end.y);
+        grid.push(horizontalPath);
+      });
+    }
+
+    return { outlinePath: skPath, gridPaths: grid };
+  }, [quad, screenWidth, screenHeight, frameSize, showGrid]);
 
   if (__DEV__) {
     console.log('[Overlay] rendering Canvas with dimensions:', screenWidth, 'x', screenHeight);
@@ -86,10 +131,20 @@ export const Overlay: React.FC<OverlayProps> = ({ quad, color = '#e7a649', frame
   return (
     <View style={styles.container} pointerEvents="none">
       <Canvas style={{ width: screenWidth, height: screenHeight }}>
-        {path && (
+        {outlinePath && (
           <>
-            <Path path={path} color={color} style="stroke" strokeWidth={8} />
-            <Path path={path} color="rgba(231, 166, 73, 0.2)" style="fill" />
+            <Path path={outlinePath} color={color} style="stroke" strokeWidth={8} />
+            <Path path={outlinePath} color="rgba(231, 166, 73, 0.2)" style="fill" />
+            {gridPaths.map((gridPath, index) => (
+              <Path
+                // eslint-disable-next-line react/no-array-index-key
+                key={`grid-${index}`}
+                path={gridPath}
+                color={gridColor}
+                style="stroke"
+                strokeWidth={gridLineWidth}
+              />
+            ))}
           </>
         )}
       </Canvas>

package/src/worklets-core.d.ts

@@ -1,8 +0,0 @@
-import type { DependencyList } from 'react';
-
-declare module 'react-native-worklets-core' {
-  export function useRunOnJS<T extends (...args: any[]) => any>(
-    callback: T,
-    deps: DependencyList
-  ): (...args: Parameters<T>) => void;
-}