react-native-rectangle-doc-scanner 3.16.0 → 3.21.0

package/dist/DocScanner.d.ts

@@ -1,9 +1,24 @@
 import React, { ReactNode } from 'react';
+import type { Rectangle as NativeRectangle, RectangleEventPayload } from 'react-native-document-scanner';
+import type { Point, Rectangle } from './types';
 type PictureEvent = {
     croppedImage?: string | null;
     initialImage?: string | null;
     width?: number;
     height?: number;
+    rectangleCoordinates?: NativeRectangle | null;
+};
+export type RectangleDetectEvent = Omit<RectangleEventPayload, 'rectangleCoordinates' | 'rectangleOnScreen'> & {
+    rectangleCoordinates?: Rectangle | null;
+    rectangleOnScreen?: Rectangle | null;
+};
+export type DocScannerCapture = {
+    path: string;
+    initialPath: string | null;
+    croppedPath: string | null;
+    quad: Point[] | null;
+    width: number;
+    height: number;
 };
 export interface DetectionConfig {
     processingWidth?: number;
@@ -14,12 +29,7 @@ export interface DetectionConfig {
     maxCenterDelta?: number;
 }
 interface Props {
-    onCapture?: (photo: {
-        path: string;
-        quad: null;
-        width: number;
-        height: number;
-    }) => void;
+    onCapture?: (photo: DocScannerCapture) => void;
     overlayColor?: string;
     autoCapture?: boolean;
     minStableFrames?: number;
@@ -31,10 +41,11 @@ interface Props {
     gridColor?: string;
     gridLineWidth?: number;
     detectionConfig?: DetectionConfig;
+    onRectangleDetect?: (event: RectangleDetectEvent) => void;
 }
-type DocScannerHandle = {
+export type DocScannerHandle = {
     capture: () => Promise<PictureEvent>;
     reset: () => void;
 };
 export declare const DocScanner: React.ForwardRefExoticComponent<Props & React.RefAttributes<DocScannerHandle>>;
-export type { DocScannerHandle };
+export {};

package/dist/DocScanner.js

@@ -40,10 +40,44 @@ exports.DocScanner = void 0;
 const react_1 = __importStar(require("react"));
 const react_native_1 = require("react-native");
 const react_native_document_scanner_1 = __importDefault(require("react-native-document-scanner"));
+const coordinate_1 = require("./utils/coordinate");
+const overlay_1 = require("./utils/overlay");
+const isFiniteNumber = (value) => typeof value === 'number' && Number.isFinite(value);
+const normalizePoint = (point) => {
+    if (!point || !isFiniteNumber(point.x) || !isFiniteNumber(point.y)) {
+        return null;
+    }
+    return { x: point.x, y: point.y };
+};
+const normalizeRectangle = (rectangle) => {
+    if (!rectangle) {
+        return null;
+    }
+    const topLeft = normalizePoint(rectangle.topLeft);
+    const topRight = normalizePoint(rectangle.topRight);
+    const bottomRight = normalizePoint(rectangle.bottomRight);
+    const bottomLeft = normalizePoint(rectangle.bottomLeft);
+    if (!topLeft || !topRight || !bottomRight || !bottomLeft) {
+        return null;
+    }
+    return {
+        topLeft,
+        topRight,
+        bottomRight,
+        bottomLeft,
+    };
+};
 const DEFAULT_OVERLAY_COLOR = '#0b7ef4';
-exports.DocScanner = (0, react_1.forwardRef)(({ onCapture, overlayColor = DEFAULT_OVERLAY_COLOR, autoCapture = true, minStableFrames = 8, enableTorch = false, quality = 90, useBase64 = false, children, showGrid = true, }, ref) => {
+exports.DocScanner = (0, react_1.forwardRef)(({ onCapture, overlayColor = DEFAULT_OVERLAY_COLOR, autoCapture = true, minStableFrames = 8, enableTorch = false, quality = 90, useBase64 = false, children, showGrid = true, gridColor, gridLineWidth, detectionConfig, onRectangleDetect, }, ref) => {
     const scannerRef = (0, react_1.useRef)(null);
     const captureResolvers = (0, react_1.useRef)(null);
+    const [isAutoCapturing, setIsAutoCapturing] = (0, react_1.useState)(false);
+    const [detectedRectangle, setDetectedRectangle] = (0, react_1.useState)(null);
+    (0, react_1.useEffect)(() => {
+        if (!autoCapture) {
+            setIsAutoCapturing(false);
+        }
+    }, [autoCapture]);
     const normalizedQuality = (0, react_1.useMemo)(() => {
         if (react_native_1.Platform.OS === 'ios') {
             // iOS expects 0-1
@@ -52,15 +86,23 @@ exports.DocScanner = (0, react_1.forwardRef)(({ onCapture, overlayColor = DEFAUL
         return Math.min(100, Math.max(0, quality));
     }, [quality]);
     const handlePictureTaken = (0, react_1.useCallback)((event) => {
-        const path = event.croppedImage ?? event.initialImage;
-        if (path) {
+        setIsAutoCapturing(false);
+        const normalizedRectangle = normalizeRectangle(event.rectangleCoordinates ?? null);
+        const quad = normalizedRectangle ? (0, coordinate_1.rectangleToQuad)(normalizedRectangle) : null;
+        const initialPath = event.initialImage ?? null;
+        const croppedPath = event.croppedImage ?? null;
+        const bestPath = croppedPath ?? initialPath;
+        if (bestPath) {
             onCapture?.({
-                path,
-                quad: null,
+                path: bestPath,
+                initialPath,
+                croppedPath,
+                quad,
                 width: event.width ?? 0,
                 height: event.height ?? 0,
             });
         }
+        setDetectedRectangle(null);
         if (captureResolvers.current) {
             captureResolvers.current.resolve(event);
             captureResolvers.current = null;
@@ -99,6 +141,26 @@ exports.DocScanner = (0, react_1.forwardRef)(({ onCapture, overlayColor = DEFAUL
             console.warn('[DocScanner] manual capture failed', error);
         });
     }, [autoCapture, capture]);
+    const handleRectangleDetect = (0, react_1.useCallback)((event) => {
+        const rectangleCoordinates = normalizeRectangle(event.rectangleCoordinates ?? null);
+        const rectangleOnScreen = normalizeRectangle(event.rectangleOnScreen ?? null);
+        const payload = {
+            ...event,
+            rectangleCoordinates,
+            rectangleOnScreen,
+        };
+        if (autoCapture) {
+            if (payload.stableCounter >= Math.max(minStableFrames - 1, 0)) {
+                setIsAutoCapturing(true);
+            }
+            else if (payload.stableCounter === 0) {
+                setIsAutoCapturing(false);
+            }
+        }
+        const isGoodRectangle = payload.lastDetectionType === 0;
+        setDetectedRectangle(isGoodRectangle && rectangleOnScreen ? payload : null);
+        onRectangleDetect?.(payload);
+    }, [autoCapture, minStableFrames, onRectangleDetect]);
     (0, react_1.useImperativeHandle)(ref, () => ({
         capture,
         reset: () => {
@@ -108,8 +170,11 @@ exports.DocScanner = (0, react_1.forwardRef)(({ onCapture, overlayColor = DEFAUL
             }
         },
     }), [capture]);
+    const overlayPolygon = detectedRectangle?.rectangleOnScreen ?? null;
+    const overlayIsActive = autoCapture ? isAutoCapturing : (detectedRectangle?.stableCounter ?? 0) > 0;
     return (react_1.default.createElement(react_native_1.View, { style: styles.container },
-        react_1.default.createElement(react_native_document_scanner_1.default, { ref: scannerRef, style: styles.scanner, detectionCountBeforeCapture: minStableFrames, overlayColor: overlayColor, enableTorch: enableTorch, quality: normalizedQuality, useBase64: useBase64, manualOnly: !autoCapture, onPictureTaken: handlePictureTaken, onError: handleError }),
+        react_1.default.createElement(react_native_document_scanner_1.default, { ref: scannerRef, style: styles.scanner, detectionCountBeforeCapture: minStableFrames, overlayColor: overlayColor, enableTorch: enableTorch, quality: normalizedQuality, useBase64: useBase64, manualOnly: !autoCapture, detectionConfig: detectionConfig, onPictureTaken: handlePictureTaken, onError: handleError, onRectangleDetect: handleRectangleDetect }),
+        showGrid && overlayPolygon && (react_1.default.createElement(overlay_1.ScannerOverlay, { active: overlayIsActive, color: gridColor ?? overlayColor, lineWidth: gridLineWidth, polygon: overlayPolygon })),
         !autoCapture && react_1.default.createElement(react_native_1.TouchableOpacity, { style: styles.button, onPress: handleManualCapture }),
         children));
 });

package/dist/FullDocScanner.js

@@ -73,9 +73,13 @@ const FullDocScanner = ({ onResult, onClose, detectionConfig, overlayColor = '#3
     const handleCapture = (0, react_1.useCallback)((document) => {
         const normalizedPath = stripFileUri(document.path);
         const nextQuad = document.quad && document.quad.length === 4 ? document.quad : null;
+        const normalizedInitial = document.initialPath != null ? stripFileUri(document.initialPath) : normalizedPath;
+        const normalizedCropped = document.croppedPath != null ? stripFileUri(document.croppedPath) : null;
         setCapturedDoc({
             ...document,
             path: normalizedPath,
+            initialPath: normalizedInitial,
+            croppedPath: normalizedCropped,
             quad: nextQuad,
         });
         setCropRectangle(nextQuad ? (0, coordinate_1.quadToRectangle)(nextQuad) : null);

package/dist/index.d.ts

@@ -3,5 +3,5 @@ export { CropEditor } from './CropEditor';
 export { FullDocScanner } from './FullDocScanner';
 export type { FullDocScannerResult, FullDocScannerProps, FullDocScannerStrings, } from './FullDocScanner';
 export type { Point, Quad, Rectangle, CapturedDocument } from './types';
-export type { DetectionConfig, DocScannerHandle } from './DocScanner';
+export type { DetectionConfig, DocScannerHandle, DocScannerCapture, RectangleDetectEvent, } from './DocScanner';
 export { quadToRectangle, rectangleToQuad, scaleCoordinates, scaleRectangle, } from './utils/coordinate';

package/dist/types.d.ts

@@ -11,6 +11,8 @@ export type Rectangle = {
 };
 export type CapturedDocument = {
     path: string;
+    initialPath?: string | null;
+    croppedPath?: string | null;
     quad: Point[] | null;
     width: number;
     height: number;

package/dist/utils/overlay.d.ts

@@ -1,15 +1,10 @@
 import React from 'react';
-import type { Point } from '../types';
-type OverlayProps = {
-    quad: Point[] | null;
+import type { Rectangle } from '../types';
+export interface ScannerOverlayProps {
+    /** 자동 캡처 중임을 표시할 때 true로 설정합니다. */
+    active: boolean;
     color?: string;
-    frameSize: {
-        width: number;
-        height: number;
-    } | null;
-    showGrid?: boolean;
-    gridColor?: string;
-    gridLineWidth?: number;
-};
-export declare const Overlay: React.FC<OverlayProps>;
-export {};
+    lineWidth?: number;
+    polygon?: Rectangle | null;
+}
+export declare const ScannerOverlay: React.FC<ScannerOverlayProps>;

package/dist/utils/overlay.js

@@ -33,150 +33,136 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Overlay = void 0;
+exports.ScannerOverlay = 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 lerp = (start, end, t) => ({
-    x: start.x + (end.x - start.x) * t,
-    y: start.y + (end.y - start.y) * t,
-});
-const withAlpha = (value, alpha) => {
-    const hexMatch = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(value.trim());
-    if (!hexMatch) {
-        return `rgba(231, 166, 73, ${alpha})`;
+const clamp = (value, min, max) => Math.max(min, Math.min(max, value));
+const withAlpha = (inputColor, alpha) => {
+    const parsed = (0, react_native_1.processColor)(inputColor);
+    const normalized = typeof parsed === 'number' ? parsed >>> 0 : null;
+    if (normalized == null) {
+        return inputColor;
     }
-    const hex = hexMatch[1];
-    const normalize = hex.length === 3
-        ? hex.split('').map((ch) => ch + ch).join('')
-        : hex;
-    const r = parseInt(normalize.slice(0, 2), 16);
-    const g = parseInt(normalize.slice(2, 4), 16);
-    const b = parseInt(normalize.slice(4, 6), 16);
-    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+    const r = (normalized >> 16) & 0xff;
+    const g = (normalized >> 8) & 0xff;
+    const b = normalized & 0xff;
+    const clampedAlpha = clamp(alpha, 0, 1);
+    return `rgba(${r}, ${g}, ${b}, ${clampedAlpha})`;
 };
-const buildPath = (points) => {
+const createPolygonPath = (polygon) => {
+    if (!polygon) {
+        return null;
+    }
     const path = react_native_skia_1.Skia.Path.Make();
-    path.moveTo(points[0].x, points[0].y);
-    points.slice(1).forEach((p) => path.lineTo(p.x, p.y));
+    path.moveTo(polygon.topLeft.x, polygon.topLeft.y);
+    path.lineTo(polygon.topRight.x, polygon.topRight.y);
+    path.lineTo(polygon.bottomRight.x, polygon.bottomRight.y);
+    path.lineTo(polygon.bottomLeft.x, polygon.bottomLeft.y);
     path.close();
     return path;
 };
-const orderQuad = (points) => {
-    if (points.length !== 4) {
-        return points;
+const interpolate = (a, b, t) => ({
+    x: a.x + (b.x - a.x) * t,
+    y: a.y + (b.y - a.y) * t,
+});
+const createLinePath = (start, end) => {
+    const path = react_native_skia_1.Skia.Path.Make();
+    path.moveTo(start.x, start.y);
+    path.lineTo(end.x, end.y);
+    return path;
+};
+const createGridPaths = (polygon) => {
+    if (!polygon) {
+        return [];
     }
-    const center = points.reduce((acc, point) => ({ x: acc.x + point.x / 4, y: acc.y + point.y / 4 }), { x: 0, y: 0 });
-    const sorted = [...points].sort((a, b) => {
-        const angleA = Math.atan2(a.y - center.y, a.x - center.x);
-        const angleB = Math.atan2(b.y - center.y, b.x - center.x);
-        return angleA - angleB;
+    const lines = [];
+    const steps = [1 / 3, 2 / 3];
+    steps.forEach((t) => {
+        const horizontalStart = interpolate(polygon.topLeft, polygon.bottomLeft, t);
+        const horizontalEnd = interpolate(polygon.topRight, polygon.bottomRight, t);
+        lines.push(createLinePath(horizontalStart, horizontalEnd));
+        const verticalStart = interpolate(polygon.topLeft, polygon.topRight, t);
+        const verticalEnd = interpolate(polygon.bottomLeft, polygon.bottomRight, t);
+        lines.push(createLinePath(verticalStart, verticalEnd));
     });
-    // Ensure the first point is the top-left (smallest y, then smallest x)
-    let startIndex = 0;
-    for (let i = 1; i < sorted.length; i += 1) {
-        const current = sorted[i];
-        const candidate = sorted[startIndex];
-        if (current.y < candidate.y || (current.y === candidate.y && current.x < candidate.x)) {
-            startIndex = i;
-        }
-    }
-    return [
-        sorted[startIndex % 4],
-        sorted[(startIndex + 1) % 4],
-        sorted[(startIndex + 2) % 4],
-        sorted[(startIndex + 3) % 4],
-    ];
+    return lines;
+};
+const getPolygonMetrics = (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,
+        centerX: minX + (maxX - minX) / 2,
+    };
 };
-const Overlay = ({ quad, color = '#e7a649', frameSize, showGrid = true, gridColor = 'rgba(231, 166, 73, 0.35)', gridLineWidth = 2, }) => {
-    const { width: screenWidth, height: screenHeight } = (0, react_native_1.useWindowDimensions)();
-    const fillColor = (0, react_1.useMemo)(() => withAlpha(color, 0.2), [color]);
-    const { outlinePath, gridPaths } = (0, react_1.useMemo)(() => {
-        let transformedQuad = null;
-        let sourceQuad = null;
-        let sourceFrameSize = frameSize;
-        if (quad && frameSize) {
-            sourceQuad = quad;
+const SCAN_DURATION_MS = 2200;
+const ScannerOverlay = ({ active, color = '#0b7ef4', lineWidth = react_native_1.StyleSheet.hairlineWidth, polygon, }) => {
+    const path = (0, react_1.useMemo)(() => createPolygonPath(polygon ?? null), [polygon]);
+    const gridPaths = (0, react_1.useMemo)(() => createGridPaths(polygon ?? null), [polygon]);
+    const metrics = (0, react_1.useMemo)(() => (polygon ? getPolygonMetrics(polygon) : null), [polygon]);
+    const gradientStart = (0, react_native_skia_1.useValue)((0, react_native_skia_1.vec)(0, 0));
+    const gradientEnd = (0, react_native_skia_1.useValue)((0, react_native_skia_1.vec)(0, 0));
+    const gradientColors = (0, react_native_skia_1.useValue)([
+        react_native_skia_1.Skia.Color(withAlpha(color, 0)),
+        react_native_skia_1.Skia.Color(withAlpha(color, 0.85)),
+        react_native_skia_1.Skia.Color(withAlpha(color, 0)),
+    ]);
+    const gradientPositions = (0, react_native_skia_1.useValue)([0, 0.5, 1]);
+    (0, react_1.useEffect)(() => {
+        if (!metrics) {
+            return;
+        }
+        let frame = null;
+        const transparentColor = react_native_skia_1.Skia.Color(withAlpha(color, 0));
+        const highlightColor = react_native_skia_1.Skia.Color(withAlpha(color, 0.9));
+        const bandSize = Math.max(metrics.height * 0.25, 20);
+        const animate = () => {
+            const now = Date.now() % SCAN_DURATION_MS;
+            const progress = now / SCAN_DURATION_MS;
+            const travel = metrics.height + bandSize * 2;
+            const start = metrics.minY - bandSize + travel * progress;
+            const end = start + bandSize;
+            const clampedStart = clamp(start, metrics.minY, metrics.maxY);
+            const clampedEnd = clamp(end, metrics.minY, metrics.maxY);
+            gradientStart.current = (0, react_native_skia_1.vec)(metrics.centerX, clampedStart);
+            gradientEnd.current = (0, react_native_skia_1.vec)(metrics.centerX, clampedEnd <= clampedStart ? clampedStart + 1 : clampedEnd);
+            gradientColors.current = [transparentColor, highlightColor, transparentColor];
+            frame = requestAnimationFrame(animate);
+        };
+        gradientStart.current = (0, react_native_skia_1.vec)(metrics.centerX, metrics.minY);
+        gradientEnd.current = (0, react_native_skia_1.vec)(metrics.centerX, metrics.maxY);
+        if (active) {
+            animate();
         }
         else {
-            // No detection yet – skip drawing
-            return { outlinePath: null, gridPaths: [] };
+            gradientColors.current = [transparentColor, transparentColor, transparentColor];
         }
-        if (sourceQuad && sourceFrameSize) {
-            if (__DEV__) {
-                console.log('[Overlay] drawing quad:', sourceQuad);
-                console.log('[Overlay] color:', color);
-                console.log('[Overlay] screen dimensions:', screenWidth, 'x', screenHeight);
-                console.log('[Overlay] frame dimensions:', sourceFrameSize.width, 'x', sourceFrameSize.height);
-            }
-            const isFrameLandscape = sourceFrameSize.width > sourceFrameSize.height;
-            const isScreenPortrait = screenHeight > screenWidth;
-            const needsRotation = isFrameLandscape && isScreenPortrait;
-            if (needsRotation) {
-                const scaleX = screenWidth / sourceFrameSize.height;
-                const scaleY = screenHeight / sourceFrameSize.width;
-                transformedQuad = sourceQuad.map((p) => ({
-                    x: p.y * scaleX,
-                    y: (sourceFrameSize.width - p.x) * scaleY,
-                }));
+        return () => {
+            if (frame !== null) {
+                cancelAnimationFrame(frame);
             }
-            else {
-                const scaleX = screenWidth / sourceFrameSize.width;
-                const scaleY = screenHeight / sourceFrameSize.height;
-                transformedQuad = sourceQuad.map((p) => ({
-                    x: p.x * scaleX,
-                    y: p.y * scaleY,
-                }));
-            }
-        }
-        if (!transformedQuad) {
-            return { outlinePath: null, gridPaths: [] };
-        }
-        const normalizedQuad = orderQuad(transformedQuad);
-        const skPath = buildPath(normalizedQuad);
-        const grid = [];
-        if (showGrid) {
-            const [topLeft, topRight, bottomRight, bottomLeft] = normalizedQuad;
-            const steps = [1 / 3, 2 / 3];
-            steps.forEach((t) => {
-                const start = lerp(topLeft, topRight, t);
-                const end = lerp(bottomLeft, bottomRight, t);
-                const verticalPath = react_native_skia_1.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 = react_native_skia_1.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, color]);
-    if (__DEV__) {
-        console.log('[Overlay] rendering Canvas with dimensions:', screenWidth, 'x', screenHeight);
+        };
+    }, [active, color, gradientColors, gradientEnd, gradientStart, metrics]);
+    if (!polygon || !path || !metrics) {
+        return null;
     }
-    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 } }, outlinePath && (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(react_native_skia_1.Path, { path: outlinePath, color: color, style: "stroke", strokeWidth: 8 }),
-            react_1.default.createElement(react_native_skia_1.Path, { path: outlinePath, color: fillColor, style: "fill" }),
-            gridPaths.map((gridPath, index) => (react_1.default.createElement(react_native_skia_1.Path
-            // eslint-disable-next-line react/no-array-index-key
-            , { 
-                // eslint-disable-next-line react/no-array-index-key
-                key: `grid-${index}`, path: gridPath, color: gridColor, style: "stroke", strokeWidth: gridLineWidth }))))))));
+    const strokeColor = withAlpha(color, 0.9);
+    const fillColor = withAlpha(color, 0.18);
+    const gridColor = withAlpha(color, 0.35);
+    return (react_1.default.createElement(react_native_1.View, { pointerEvents: "none", style: react_native_1.StyleSheet.absoluteFillObject },
+        react_1.default.createElement(react_native_skia_1.Canvas, { style: react_native_1.StyleSheet.absoluteFillObject },
+            react_1.default.createElement(react_native_skia_1.Path, { path: path, color: fillColor, style: "fill" }),
+            gridPaths.map((gridPath, index) => (react_1.default.createElement(react_native_skia_1.Path, { key: `grid-${index}`, path: gridPath, color: gridColor, style: "stroke", strokeWidth: lineWidth }))),
+            react_1.default.createElement(react_native_skia_1.Path, { path: path, color: strokeColor, style: "stroke", strokeWidth: lineWidth }),
+            react_1.default.createElement(react_native_skia_1.Path, { path: path },
+                react_1.default.createElement(react_native_skia_1.LinearGradient, { start: gradientStart, end: gradientEnd, colors: gradientColors, positions: gradientPositions })))));
 };
-exports.Overlay = Overlay;
-const styles = react_native_1.StyleSheet.create({
-    container: {
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-    },
-});
+exports.ScannerOverlay = ScannerOverlay;

package/package.json

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

package/src/DocScanner.tsx

@@ -2,18 +2,71 @@ import React, {
   ReactNode,
   forwardRef,
   useCallback,
+  useEffect,
   useImperativeHandle,
   useMemo,
   useRef,
+  useState,
 } from 'react';
 import { Platform, StyleSheet, TouchableOpacity, View } from 'react-native';
 import DocumentScanner from 'react-native-document-scanner';
+import type { Rectangle as NativeRectangle, RectangleEventPayload } from 'react-native-document-scanner';
+import { rectangleToQuad } from './utils/coordinate';
+import type { Point, Rectangle } from './types';
+import { ScannerOverlay } from './utils/overlay';
 
 type PictureEvent = {
   croppedImage?: string | null;
   initialImage?: string | null;
   width?: number;
   height?: number;
+  rectangleCoordinates?: NativeRectangle | null;
+};
+
+export type RectangleDetectEvent = Omit<RectangleEventPayload, 'rectangleCoordinates' | 'rectangleOnScreen'> & {
+  rectangleCoordinates?: Rectangle | null;
+  rectangleOnScreen?: Rectangle | null;
+};
+
+export type DocScannerCapture = {
+  path: string;
+  initialPath: string | null;
+  croppedPath: string | null;
+  quad: Point[] | null;
+  width: number;
+  height: number;
+};
+
+const isFiniteNumber = (value: unknown): value is number =>
+  typeof value === 'number' && Number.isFinite(value);
+
+const normalizePoint = (point?: { x?: number; y?: number } | null): Point | null => {
+  if (!point || !isFiniteNumber(point.x) || !isFiniteNumber(point.y)) {
+    return null;
+  }
+  return { x: point.x, y: point.y };
+};
+
+const normalizeRectangle = (rectangle?: NativeRectangle | null): Rectangle | null => {
+  if (!rectangle) {
+    return null;
+  }
+
+  const topLeft = normalizePoint(rectangle.topLeft);
+  const topRight = normalizePoint(rectangle.topRight);
+  const bottomRight = normalizePoint(rectangle.bottomRight);
+  const bottomLeft = normalizePoint(rectangle.bottomLeft);
+
+  if (!topLeft || !topRight || !bottomRight || !bottomLeft) {
+    return null;
+  }
+
+  return {
+    topLeft,
+    topRight,
+    bottomRight,
+    bottomLeft,
+  };
 };
 
 export interface DetectionConfig {
@@ -26,7 +79,7 @@ export interface DetectionConfig {
 }
 
 interface Props {
-  onCapture?: (photo: { path: string; quad: null; width: number; height: number }) => void;
+  onCapture?: (photo: DocScannerCapture) => void;
   overlayColor?: string;
   autoCapture?: boolean;
   minStableFrames?: number;
@@ -38,9 +91,10 @@ interface Props {
   gridColor?: string;
   gridLineWidth?: number;
   detectionConfig?: DetectionConfig;
+  onRectangleDetect?: (event: RectangleDetectEvent) => void;
 }
 
-type DocScannerHandle = {
+export type DocScannerHandle = {
   capture: () => Promise<PictureEvent>;
   reset: () => void;
 };
@@ -59,6 +113,10 @@ export const DocScanner = forwardRef<DocScannerHandle, Props>(
       useBase64 = false,
       children,
       showGrid = true,
+      gridColor,
+      gridLineWidth,
+      detectionConfig,
+      onRectangleDetect,
     },
     ref,
   ) => {
@@ -67,6 +125,14 @@ export const DocScanner = forwardRef<DocScannerHandle, Props>(
       resolve: (value: PictureEvent) => void;
       reject: (reason?: unknown) => void;
     } | null>(null);
+    const [isAutoCapturing, setIsAutoCapturing] = useState(false);
+    const [detectedRectangle, setDetectedRectangle] = useState<RectangleDetectEvent | null>(null);
+
+    useEffect(() => {
+      if (!autoCapture) {
+        setIsAutoCapturing(false);
+      }
+    }, [autoCapture]);
 
     const normalizedQuality = useMemo(() => {
       if (Platform.OS === 'ios') {
@@ -78,16 +144,28 @@ export const DocScanner = forwardRef<DocScannerHandle, Props>(
 
     const handlePictureTaken = useCallback(
       (event: PictureEvent) => {
-        const path = event.croppedImage ?? event.initialImage;
-        if (path) {
+        setIsAutoCapturing(false);
+
+        const normalizedRectangle = normalizeRectangle(event.rectangleCoordinates ?? null);
+        const quad = normalizedRectangle ? rectangleToQuad(normalizedRectangle) : null;
+
+        const initialPath = event.initialImage ?? null;
+        const croppedPath = event.croppedImage ?? null;
+        const bestPath = croppedPath ?? initialPath;
+
+        if (bestPath) {
           onCapture?.({
-            path,
-            quad: null,
+            path: bestPath,
+            initialPath,
+            croppedPath,
+            quad,
             width: event.width ?? 0,
             height: event.height ?? 0,
           });
         }
 
+        setDetectedRectangle(null);
+
         if (captureResolvers.current) {
           captureResolvers.current.resolve(event);
           captureResolvers.current = null;
@@ -134,6 +212,32 @@ export const DocScanner = forwardRef<DocScannerHandle, Props>(
       });
     }, [autoCapture, capture]);
 
+    const handleRectangleDetect = useCallback(
+      (event: RectangleEventPayload) => {
+        const rectangleCoordinates = normalizeRectangle(event.rectangleCoordinates ?? null);
+        const rectangleOnScreen = normalizeRectangle(event.rectangleOnScreen ?? null);
+
+        const payload: RectangleDetectEvent = {
+          ...event,
+          rectangleCoordinates,
+          rectangleOnScreen,
+        };
+
+        if (autoCapture) {
+          if (payload.stableCounter >= Math.max(minStableFrames - 1, 0)) {
+            setIsAutoCapturing(true);
+          } else if (payload.stableCounter === 0) {
+            setIsAutoCapturing(false);
+          }
+        }
+
+        const isGoodRectangle = payload.lastDetectionType === 0;
+        setDetectedRectangle(isGoodRectangle && rectangleOnScreen ? payload : null);
+        onRectangleDetect?.(payload);
+      },
+      [autoCapture, minStableFrames, onRectangleDetect],
+    );
+
     useImperativeHandle(
       ref,
       () => ({
@@ -148,6 +252,9 @@ export const DocScanner = forwardRef<DocScannerHandle, Props>(
       [capture],
     );
 
+    const overlayPolygon = detectedRectangle?.rectangleOnScreen ?? null;
+    const overlayIsActive = autoCapture ? isAutoCapturing : (detectedRectangle?.stableCounter ?? 0) > 0;
+
     return (
       <View style={styles.container}>
         <DocumentScanner
@@ -159,9 +266,19 @@ export const DocScanner = forwardRef<DocScannerHandle, Props>(
           quality={normalizedQuality}
           useBase64={useBase64}
           manualOnly={!autoCapture}
+          detectionConfig={detectionConfig}
           onPictureTaken={handlePictureTaken}
           onError={handleError}
+          onRectangleDetect={handleRectangleDetect}
         />
+        {showGrid && overlayPolygon && (
+          <ScannerOverlay
+            active={overlayIsActive}
+            color={gridColor ?? overlayColor}
+            lineWidth={gridLineWidth}
+            polygon={overlayPolygon}
+          />
+        )}
         {!autoCapture && <TouchableOpacity style={styles.button} onPress={handleManualCapture} />}
         {children}
       </View>
@@ -193,5 +310,3 @@ const styles = StyleSheet.create({
     backgroundColor: '#fff',
   },
 });
-
-export type { DocScannerHandle };

package/src/FullDocScanner.tsx

@@ -128,10 +128,16 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
     (document: CapturedDocument) => {
       const normalizedPath = stripFileUri(document.path);
       const nextQuad = document.quad && document.quad.length === 4 ? (document.quad as Quad) : null;
+      const normalizedInitial =
+        document.initialPath != null ? stripFileUri(document.initialPath) : normalizedPath;
+      const normalizedCropped =
+        document.croppedPath != null ? stripFileUri(document.croppedPath) : null;
 
       setCapturedDoc({
         ...document,
         path: normalizedPath,
+        initialPath: normalizedInitial,
+        croppedPath: normalizedCropped,
         quad: nextQuad,
       });
       setCropRectangle(nextQuad ? quadToRectangle(nextQuad) : null);

package/src/external.d.ts

@@ -12,6 +12,7 @@ declare module '@shopify/react-native-skia' {
     Path: {
       Make: () => SkPath;
     };
+    Color: (color: string | number) => number;
   };
 
   export type CanvasProps = {
@@ -26,9 +27,27 @@ declare module '@shopify/react-native-skia' {
     style?: 'stroke' | 'fill';
     strokeWidth?: number;
     color?: string;
+    children?: ReactNode;
   };
 
   export const Path: ComponentType<PathProps>;
+
+  export type SkiaValue<T> = {
+    current: T;
+  };
+
+  export const useValue: <T>(initialValue: T) => SkiaValue<T>;
+
+  export const vec: (x: number, y: number) => { x: number; y: number };
+
+  export type LinearGradientProps = {
+    start: SkiaValue<{ x: number; y: number }> | { x: number; y: number };
+    end: SkiaValue<{ x: number; y: number }> | { x: number; y: number };
+    colors: SkiaValue<number[]> | number[];
+    positions?: SkiaValue<number[]> | number[];
+  };
+
+  export const LinearGradient: ComponentType<LinearGradientProps>;
 }
 
 declare module 'react-native-perspective-image-cropper' {
@@ -62,11 +81,33 @@ declare module 'react-native-document-scanner' {
   import type { Component } from 'react';
   import type { ViewStyle } from 'react-native';
 
+  export type RectanglePoint = {
+    x: number;
+    y: number;
+  };
+
+  export type Rectangle = {
+    topLeft: RectanglePoint;
+    topRight: RectanglePoint;
+    bottomLeft: RectanglePoint;
+    bottomRight: RectanglePoint;
+  };
+
+  export type RectangleEventPayload = {
+    stableCounter: number;
+    lastDetectionType: number;
+    rectangleCoordinates?: Rectangle | null;
+    rectangleOnScreen?: Rectangle | null;
+    previewSize?: { width: number; height: number };
+    imageSize?: { width: number; height: number };
+  };
+
   export type DocumentScannerResult = {
     croppedImage?: string | null;
     initialImage?: string | null;
     width?: number;
     height?: number;
+    rectangleCoordinates?: Rectangle | null;
   };
 
   export interface DocumentScannerProps {
@@ -77,8 +118,17 @@ declare module 'react-native-document-scanner' {
     useBase64?: boolean;
     quality?: number;
     manualOnly?: boolean;
+    detectionConfig?: {
+      processingWidth?: number;
+      cannyLowThreshold?: number;
+      cannyHighThreshold?: number;
+      snapDistance?: number;
+      maxAnchorMisses?: number;
+      maxCenterDelta?: number;
+    };
     onPictureTaken?: (event: DocumentScannerResult) => void;
     onError?: (error: Error) => void;
+    onRectangleDetect?: (event: RectangleEventPayload) => void;
   }
 
   export default class DocumentScanner extends Component<DocumentScannerProps> {

package/src/index.ts

@@ -11,7 +11,12 @@ export type {
 
 // Types
 export type { Point, Quad, Rectangle, CapturedDocument } from './types';
-export type { DetectionConfig, DocScannerHandle } from './DocScanner';
+export type {
+  DetectionConfig,
+  DocScannerHandle,
+  DocScannerCapture,
+  RectangleDetectEvent,
+} from './DocScanner';
 
 // Utilities
 export {

package/src/types.ts

@@ -11,6 +11,8 @@ export type Rectangle = {
 
 export type CapturedDocument = {
   path: string;
+  initialPath?: string | null;
+  croppedPath?: string | null;
   quad: Point[] | null;
   width: number;
   height: number;

package/src/utils/overlay.tsx

@@ -0,0 +1,198 @@
+import React, { useEffect, useMemo } from 'react';
+import { View, processColor, StyleSheet } from 'react-native';
+import {
+  Canvas,
+  LinearGradient,
+  Path,
+  Skia,
+  SkPath,
+  useValue,
+  vec,
+} from '@shopify/react-native-skia';
+import type { Point, Rectangle } from '../types';
+
+export interface ScannerOverlayProps {
+  /** 자동 캡처 중임을 표시할 때 true로 설정합니다. */
+  active: boolean;
+  color?: string;
+  lineWidth?: number;
+  polygon?: Rectangle | null;
+}
+
+const clamp = (value: number, min: number, max: number) => Math.max(min, Math.min(max, value));
+
+const withAlpha = (inputColor: string, alpha: number): string => {
+  const parsed = processColor(inputColor);
+  const normalized = typeof parsed === 'number' ? parsed >>> 0 : null;
+
+  if (normalized == null) {
+    return inputColor;
+  }
+
+  const r = (normalized >> 16) & 0xff;
+  const g = (normalized >> 8) & 0xff;
+  const b = normalized & 0xff;
+  const clampedAlpha = clamp(alpha, 0, 1);
+
+  return `rgba(${r}, ${g}, ${b}, ${clampedAlpha})`;
+};
+
+const createPolygonPath = (polygon: Rectangle | null): SkPath | null => {
+  if (!polygon) {
+    return null;
+  }
+
+  const path = Skia.Path.Make();
+  path.moveTo(polygon.topLeft.x, polygon.topLeft.y);
+  path.lineTo(polygon.topRight.x, polygon.topRight.y);
+  path.lineTo(polygon.bottomRight.x, polygon.bottomRight.y);
+  path.lineTo(polygon.bottomLeft.x, polygon.bottomLeft.y);
+  path.close();
+  return path;
+};
+
+const interpolate = (a: Point, b: Point, t: number): Point => ({
+  x: a.x + (b.x - a.x) * t,
+  y: a.y + (b.y - a.y) * t,
+});
+
+const createLinePath = (start: Point, end: Point): SkPath => {
+  const path = Skia.Path.Make();
+  path.moveTo(start.x, start.y);
+  path.lineTo(end.x, end.y);
+  return path;
+};
+
+const createGridPaths = (polygon: Rectangle | null): SkPath[] => {
+  if (!polygon) {
+    return [];
+  }
+
+  const lines: SkPath[] = [];
+  const steps = [1 / 3, 2 / 3];
+
+  steps.forEach((t) => {
+    const horizontalStart = interpolate(polygon.topLeft, polygon.bottomLeft, t);
+    const horizontalEnd = interpolate(polygon.topRight, polygon.bottomRight, t);
+    lines.push(createLinePath(horizontalStart, horizontalEnd));
+
+    const verticalStart = interpolate(polygon.topLeft, polygon.topRight, t);
+    const verticalEnd = interpolate(polygon.bottomLeft, polygon.bottomRight, t);
+    lines.push(createLinePath(verticalStart, verticalEnd));
+  });
+
+  return lines;
+};
+
+const getPolygonMetrics = (polygon: Rectangle) => {
+  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,
+    centerX: minX + (maxX - minX) / 2,
+  };
+};
+
+const SCAN_DURATION_MS = 2200;
+
+export const ScannerOverlay: React.FC<ScannerOverlayProps> = ({
+  active,
+  color = '#0b7ef4',
+  lineWidth = StyleSheet.hairlineWidth,
+  polygon,
+}) => {
+  const path = useMemo(() => createPolygonPath(polygon ?? null), [polygon]);
+  const gridPaths = useMemo(() => createGridPaths(polygon ?? null), [polygon]);
+  const metrics = useMemo(() => (polygon ? getPolygonMetrics(polygon) : null), [polygon]);
+
+  const gradientStart = useValue(vec(0, 0));
+  const gradientEnd = useValue(vec(0, 0));
+  const gradientColors = useValue<number[]>([
+    Skia.Color(withAlpha(color, 0)),
+    Skia.Color(withAlpha(color, 0.85)),
+    Skia.Color(withAlpha(color, 0)),
+  ]);
+  const gradientPositions = useValue<number[]>([0, 0.5, 1]);
+
+  useEffect(() => {
+    if (!metrics) {
+      return;
+    }
+
+    let frame: number | null = null;
+    const transparentColor = Skia.Color(withAlpha(color, 0));
+    const highlightColor = Skia.Color(withAlpha(color, 0.9));
+    const bandSize = Math.max(metrics.height * 0.25, 20);
+
+    const animate = () => {
+      const now = Date.now() % SCAN_DURATION_MS;
+      const progress = now / SCAN_DURATION_MS;
+      const travel = metrics.height + bandSize * 2;
+      const start = metrics.minY - bandSize + travel * progress;
+      const end = start + bandSize;
+
+      const clampedStart = clamp(start, metrics.minY, metrics.maxY);
+      const clampedEnd = clamp(end, metrics.minY, metrics.maxY);
+
+      gradientStart.current = vec(metrics.centerX, clampedStart);
+      gradientEnd.current = vec(
+        metrics.centerX,
+        clampedEnd <= clampedStart ? clampedStart + 1 : clampedEnd,
+      );
+      gradientColors.current = [transparentColor, highlightColor, transparentColor];
+
+      frame = requestAnimationFrame(animate);
+    };
+
+    gradientStart.current = vec(metrics.centerX, metrics.minY);
+    gradientEnd.current = vec(metrics.centerX, metrics.maxY);
+
+    if (active) {
+      animate();
+    } else {
+      gradientColors.current = [transparentColor, transparentColor, transparentColor];
+    }
+
+    return () => {
+      if (frame !== null) {
+        cancelAnimationFrame(frame);
+      }
+    };
+  }, [active, color, gradientColors, gradientEnd, gradientStart, metrics]);
+
+  if (!polygon || !path || !metrics) {
+    return null;
+  }
+
+  const strokeColor = withAlpha(color, 0.9);
+  const fillColor = withAlpha(color, 0.18);
+  const gridColor = withAlpha(color, 0.35);
+
+  return (
+    <View pointerEvents="none" style={StyleSheet.absoluteFillObject}>
+      <Canvas style={StyleSheet.absoluteFillObject}>
+        <Path path={path} color={fillColor} style="fill" />
+        {gridPaths.map((gridPath, index) => (
+          <Path key={`grid-${index}`} path={gridPath} color={gridColor} style="stroke" strokeWidth={lineWidth} />
+        ))}
+        <Path path={path} color={strokeColor} style="stroke" strokeWidth={lineWidth} />
+        <Path path={path}>
+          <LinearGradient
+            start={gradientStart}
+            end={gradientEnd}
+            colors={gradientColors}
+            positions={gradientPositions}
+          />
+        </Path>
+      </Canvas>
+    </View>
+  );
+};

package/vendor/react-native-document-scanner/ios/DocumentScannerView.m

@@ -3,6 +3,7 @@
 
 @implementation DocumentScannerView {
     BOOL _hasSetupCamera;
+    IPDFRectangeType _lastDetectionType;
 }
 
 - (instancetype)init {
@@ -37,6 +38,20 @@
 }
 
 
+- (NSDictionary *)dictionaryForRectangleFeature:(CIRectangleFeature *)rectangleFeature
+{
+    if (!rectangleFeature) {
+        return nil;
+    }
+
+    return @{
+        @"topLeft": @{ @"y": @(rectangleFeature.bottomLeft.x + 30), @"x": @(rectangleFeature.bottomLeft.y)},
+        @"topRight": @{ @"y": @(rectangleFeature.topLeft.x + 30), @"x": @(rectangleFeature.topLeft.y)},
+        @"bottomLeft": @{ @"y": @(rectangleFeature.bottomRight.x), @"x": @(rectangleFeature.bottomRight.y)},
+        @"bottomRight": @{ @"y": @(rectangleFeature.topRight.x), @"x": @(rectangleFeature.topRight.y)},
+    };
+}
+
 - (void) didDetectRectangle:(CIRectangleFeature *)rectangle withType:(IPDFRectangeType)type {
     switch (type) {
         case IPDFRectangeTypeGood:
@@ -46,15 +61,45 @@
             self.stableCounter = 0;
             break;
     }
-    if (self.onRectangleDetect) {
-        self.onRectangleDetect(@{@"stableCounter": @(self.stableCounter), @"lastDetectionType": @(type)});
-    }
+
+    _lastDetectionType = type;
 
     if (self.stableCounter > self.detectionCountBeforeCapture){
         [self capture];
     }
 }
 
+- (void)cameraViewController:(IPDFCameraViewController *)controller
+          didDetectRectangle:(CIRectangleFeature *)rectangle
+                    withType:(IPDFRectangeType)type
+             viewCoordinates:(NSDictionary *)viewCoordinates
+                   imageSize:(CGSize)imageSize
+{
+    _lastDetectionType = type;
+
+    if (!self.onRectangleDetect) {
+        return;
+    }
+
+    NSDictionary *rectangleCoordinates = [self dictionaryForRectangleFeature:rectangle];
+    NSMutableDictionary *payload = [@{
+        @"stableCounter": @(self.stableCounter),
+        @"lastDetectionType": @(_lastDetectionType),
+        @"rectangleCoordinates": rectangleCoordinates ? rectangleCoordinates : [NSNull null],
+        @"rectangleOnScreen": viewCoordinates ? viewCoordinates : [NSNull null],
+        @"previewSize": @{
+            @"width": @(self.bounds.size.width),
+            @"height": @(self.bounds.size.height)
+        },
+        @"imageSize": @{
+            @"width": @(imageSize.width),
+            @"height": @(imageSize.height)
+        }
+    } mutableCopy];
+
+    self.onRectangleDetect(payload);
+}
+
 - (void) capture {
     [self captureImageWithCompletionHander:^(UIImage *croppedImage, UIImage *initialImage, CIRectangleFeature *rectangleFeature) {
       if (self.onPictureTaken) {
@@ -77,12 +122,8 @@
              while rectangleFeature returns a rectangle viewed from landscape, which explains the nonsense of the mapping below.
              Sorry about that.
              */
-            NSDictionary *rectangleCoordinates = rectangleFeature ? @{
-                                     @"topLeft": @{ @"y": @(rectangleFeature.bottomLeft.x + 30), @"x": @(rectangleFeature.bottomLeft.y)},
-                                     @"topRight": @{ @"y": @(rectangleFeature.topLeft.x + 30), @"x": @(rectangleFeature.topLeft.y)},
-                                     @"bottomLeft": @{ @"y": @(rectangleFeature.bottomRight.x), @"x": @(rectangleFeature.bottomRight.y)},
-                                     @"bottomRight": @{ @"y": @(rectangleFeature.topRight.x), @"x": @(rectangleFeature.topRight.y)},
-                                     } : [NSNull null];
+            NSDictionary *rectangleCoordinatesDict = [self dictionaryForRectangleFeature:rectangleFeature];
+            id rectangleCoordinates = rectangleCoordinatesDict ? rectangleCoordinatesDict : [NSNull null];
             if (self.useBase64) {
               self.onPictureTaken(@{
                                     @"croppedImage": [croppedImageData base64EncodedStringWithOptions:NSDataBase64Encoding64CharacterLineLength],

package/vendor/react-native-document-scanner/ios/IPDFCameraViewController.m

@@ -251,6 +251,25 @@
                                      (CGFloat)_glkView.drawableWidth,
                                      (CGFloat)_glkView.drawableHeight);
 
+        if (self.delegate && _borderDetectLastRectangleFeature) {
+            IPDFRectangeType detectionType = [self typeForRectangle:_borderDetectLastRectangleFeature];
+
+            if ([self.delegate respondsToSelector:@selector(didDetectRectangle:withType:)]) {
+                [self.delegate didDetectRectangle:_borderDetectLastRectangleFeature withType:detectionType];
+            }
+
+            if ([self.delegate respondsToSelector:@selector(cameraViewController:didDetectRectangle:withType:viewCoordinates:imageSize:)]) {
+                NSDictionary *viewCoordinates = [self viewCoordinateDictionaryForRectangleFeature:_borderDetectLastRectangleFeature
+                                                                                          fromRect:fromRect
+                                                                                          drawRect:drawRect];
+                [self.delegate cameraViewController:self
+                               didDetectRectangle:_borderDetectLastRectangleFeature
+                                         withType:detectionType
+                                  viewCoordinates:viewCoordinates
+                                        imageSize:imageExtent.size];
+            }
+        }
+
         [_coreImageContext drawImage:image inRect:drawRect fromRect:fromRect];
         [self.context presentRenderbuffer:GL_RENDERBUFFER];
 
@@ -562,10 +581,6 @@
         }
     }
 
-    if (self.delegate) {
-        [self.delegate didDetectRectangle:biggestRectangle withType:[self typeForRectangle:biggestRectangle]];
-    }
-
     return biggestRectangle;
 }
 
@@ -584,6 +599,50 @@
     return IPDFRectangeTypeGood;
 }
 
+- (NSDictionary *)viewCoordinateDictionaryForRectangleFeature:(CIRectangleFeature *)rectangle
+                                                     fromRect:(CGRect)fromRect
+                                                     drawRect:(CGRect)drawRect
+{
+    if (!rectangle || !_glkView) {
+        return nil;
+    }
+
+    if (CGRectIsEmpty(fromRect) || CGRectIsEmpty(drawRect)) {
+        return nil;
+    }
+
+    CGFloat scaleFactor = _glkView.contentScaleFactor;
+    if (scaleFactor <= 0.0) {
+        scaleFactor = [UIScreen mainScreen].scale;
+    }
+    if (scaleFactor <= 0.0) {
+        scaleFactor = 1.0;
+    }
+
+    CGFloat scaleX = drawRect.size.width / fromRect.size.width;
+    CGFloat scaleY = drawRect.size.height / fromRect.size.height;
+
+    CGPoint (^convertPoint)(CGPoint) = ^CGPoint(CGPoint point) {
+        CGFloat translatedX = (point.x - fromRect.origin.x) * scaleX;
+        CGFloat translatedY = (point.y - fromRect.origin.y) * scaleY;
+        CGFloat flippedY = drawRect.size.height - translatedY;
+
+        return CGPointMake(translatedX / scaleFactor, flippedY / scaleFactor);
+    };
+
+    CGPoint topLeft = convertPoint(rectangle.topLeft);
+    CGPoint topRight = convertPoint(rectangle.topRight);
+    CGPoint bottomLeft = convertPoint(rectangle.bottomLeft);
+    CGPoint bottomRight = convertPoint(rectangle.bottomRight);
+
+    return @{
+        @"topLeft": @{@"x": @(topLeft.x), @"y": @(topLeft.y)},
+        @"topRight": @{@"x": @(topRight.x), @"y": @(topRight.y)},
+        @"bottomLeft": @{@"x": @(bottomLeft.x), @"y": @(bottomLeft.y)},
+        @"bottomRight": @{@"x": @(bottomRight.x), @"y": @(bottomRight.y)}
+    };
+}
+
 BOOL rectangleDetectionConfidenceHighEnough(float confidence)
 {
     return (confidence > 1.0);