react-native-rectangle-doc-scanner 3.92.0 → 3.93.0

package/dist/DocScanner.js

@@ -76,11 +76,20 @@ exports.DocScanner = (0, react_1.forwardRef)(({ onCapture, overlayColor = DEFAUL
     const [detectedRectangle, setDetectedRectangle] = (0, react_1.useState)(null);
     const lastRectangleRef = (0, react_1.useRef)(null);
     const captureOriginRef = (0, react_1.useRef)('auto');
+    const rectangleClearTimeoutRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
         if (!autoCapture) {
             setIsAutoCapturing(false);
         }
     }, [autoCapture]);
+    // Cleanup timeout on unmount
+    (0, react_1.useEffect)(() => {
+        return () => {
+            if (rectangleClearTimeoutRef.current) {
+                clearTimeout(rectangleClearTimeoutRef.current);
+            }
+        };
+    }, []);
     const normalizedQuality = (0, react_1.useMemo)(() => {
         if (react_native_1.Platform.OS === 'ios') {
             // iOS expects 0-1
@@ -281,7 +290,28 @@ exports.DocScanner = (0, react_1.forwardRef)(({ onCapture, overlayColor = DEFAUL
             lastRectangleRef.current = payload.rectangleCoordinates;
         }
         const isGoodRectangle = payload.lastDetectionType === 0;
-        setDetectedRectangle(isGoodRectangle && rectangleOnScreen ? payload : null);
+        const hasValidRectangle = isGoodRectangle && rectangleOnScreen;
+        // 그리드를 표시할 조건: 좋은 품질의 사각형이 화면에 있을 때만
+        if (hasValidRectangle) {
+            // 기존 타임아웃 클리어
+            if (rectangleClearTimeoutRef.current) {
+                clearTimeout(rectangleClearTimeoutRef.current);
+            }
+            setDetectedRectangle(payload);
+            // 500ms 후에 그리드 자동 클리어 (새로운 이벤트가 없으면)
+            rectangleClearTimeoutRef.current = setTimeout(() => {
+                setDetectedRectangle(null);
+                rectangleClearTimeoutRef.current = null;
+            }, 500);
+        }
+        else {
+            // 즉시 클리어
+            if (rectangleClearTimeoutRef.current) {
+                clearTimeout(rectangleClearTimeoutRef.current);
+                rectangleClearTimeoutRef.current = null;
+            }
+            setDetectedRectangle(null);
+        }
         onRectangleDetect?.(payload);
     }, [autoCapture, minStableFrames, onRectangleDetect]);
     (0, react_1.useImperativeHandle)(ref, () => ({

package/dist/FullDocScanner.js

@@ -110,7 +110,7 @@ const FullDocScanner = ({ onResult, onClose, detectionConfig, overlayColor = '#3
     const [rectangleDetected, setRectangleDetected] = (0, react_1.useState)(false);
     const [rectangleHint, setRectangleHint] = (0, react_1.useState)(false);
     const [flashEnabled, setFlashEnabled] = (0, react_1.useState)(false);
-    const [isRotating, setIsRotating] = (0, react_1.useState)(false);
+    const [rotationDegrees, setRotationDegrees] = (0, react_1.useState)(0);
     const resolvedGridColor = gridColor ?? overlayColor;
     const docScannerRef = (0, react_1.useRef)(null);
     const captureModeRef = (0, react_1.useRef)(null);
@@ -329,54 +329,57 @@ const FullDocScanner = ({ onResult, onClose, detectionConfig, overlayColor = '#3
     const handleFlashToggle = (0, react_1.useCallback)(() => {
         setFlashEnabled(prev => !prev);
     }, []);
-    const handleRotateImage = (0, react_1.useCallback)(async (degrees) => {
-        if (isRotating || !croppedImageData)
+    const handleRotateImage = (0, react_1.useCallback)((degrees) => {
+        if (!croppedImageData)
             return;
-        setIsRotating(true);
-        try {
-            console.log('[FullDocScanner] Rotating image by', degrees, 'degrees');
-            const rotatedImage = await react_native_image_crop_picker_1.default.openCropper({
-                path: croppedImageData.path,
-                mediaType: 'photo',
-                cropping: true,
-                freeStyleCropEnabled: true,
-                includeBase64: true,
-                compressImageQuality: 0.9,
-                cropperToolbarTitle: degrees === 90 ? '↻' : '↺',
-                cropperChooseText: '완료',
-                cropperCancelText: '취소',
-                cropperRotateButtonsHidden: false,
-            });
-            console.log('[FullDocScanner] Image rotated successfully');
-            setCroppedImageData({
-                path: rotatedImage.path,
-                base64: rotatedImage.data ?? undefined,
-            });
-        }
-        catch (error) {
-            console.error('[FullDocScanner] Image rotation error:', error);
-            if (error && typeof error === 'object' && 'message' in error) {
-                const errorMessage = error.message;
-                if (!errorMessage.includes('cancel') && !errorMessage.includes('User cancelled')) {
-                    emitError(error instanceof Error ? error : new Error(String(error)), 'Failed to rotate image.');
-                }
+        setRotationDegrees(prev => {
+            const newRotation = (prev + degrees + 360) % 360;
+            return newRotation;
+        });
+    }, [croppedImageData]);
+    const handleConfirm = (0, react_1.useCallback)(async () => {
+        if (!croppedImageData)
+            return;
+        // 회전이 필요한 경우 실제로 이미지를 회전
+        if (rotationDegrees !== 0) {
+            try {
+                const rotatedImage = await react_native_image_crop_picker_1.default.openCropper({
+                    path: croppedImageData.path,
+                    mediaType: 'photo',
+                    cropping: true,
+                    freeStyleCropEnabled: true,
+                    includeBase64: true,
+                    compressImageQuality: 0.9,
+                    cropperToolbarTitle: ' ',
+                    cropperChooseText: '완료',
+                    cropperCancelText: '취소',
+                    cropperRotateButtonsHidden: false,
+                });
+                onResult({
+                    path: rotatedImage.path,
+                    base64: rotatedImage.data ?? undefined,
+                });
+            }
+            catch (error) {
+                console.error('[FullDocScanner] Image rotation error:', error);
+                // 에러 발생 시 원본 이미지 전송
+                onResult({
+                    path: croppedImageData.path,
+                    base64: croppedImageData.base64,
+                });
             }
         }
-        finally {
-            setIsRotating(false);
-        }
-    }, [isRotating, croppedImageData, emitError]);
-    const handleConfirm = (0, react_1.useCallback)(() => {
-        if (croppedImageData) {
+        else {
             onResult({
                 path: croppedImageData.path,
                 base64: croppedImageData.base64,
             });
         }
-    }, [croppedImageData, onResult]);
+    }, [croppedImageData, rotationDegrees, onResult]);
     const handleRetake = (0, react_1.useCallback)(() => {
         console.log('[FullDocScanner] Retake - clearing cropped image and resetting scanner');
         setCroppedImageData(null);
+        setRotationDegrees(0);
         setProcessing(false);
         setRectangleDetected(false);
         setRectangleHint(false);
@@ -447,14 +450,17 @@ const FullDocScanner = ({ onResult, onClose, detectionConfig, overlayColor = '#3
         croppedImageData ? (
         // check_DP: Show confirmation screen
         react_1.default.createElement(react_native_1.View, { style: styles.confirmationContainer },
-            react_1.default.createElement(react_native_1.View, { style: styles.rotateButtonsTop },
-                react_1.default.createElement(react_native_1.TouchableOpacity, { style: [styles.rotateButtonTop, isRotating && styles.buttonDisabled], onPress: () => handleRotateImage(-90), disabled: isRotating, accessibilityLabel: "\uC67C\uCABD\uC73C\uB85C 90\uB3C4 \uD68C\uC804", accessibilityRole: "button" },
+            react_1.default.createElement(react_native_1.View, { style: styles.rotateButtonsCenter },
+                react_1.default.createElement(react_native_1.TouchableOpacity, { style: styles.rotateButtonTop, onPress: () => handleRotateImage(-90), accessibilityLabel: "\uC67C\uCABD\uC73C\uB85C 90\uB3C4 \uD68C\uC804", accessibilityRole: "button" },
                     react_1.default.createElement(react_native_1.Text, { style: styles.rotateIconText }, "\u21BA"),
                     react_1.default.createElement(react_native_1.Text, { style: styles.rotateButtonLabel }, "\uC88C\uB85C 90\u00B0")),
-                react_1.default.createElement(react_native_1.TouchableOpacity, { style: [styles.rotateButtonTop, isRotating && styles.buttonDisabled], onPress: () => handleRotateImage(90), disabled: isRotating, accessibilityLabel: "\uC624\uB978\uCABD\uC73C\uB85C 90\uB3C4 \uD68C\uC804", accessibilityRole: "button" },
+                react_1.default.createElement(react_native_1.TouchableOpacity, { style: styles.rotateButtonTop, onPress: () => handleRotateImage(90), accessibilityLabel: "\uC624\uB978\uCABD\uC73C\uB85C 90\uB3C4 \uD68C\uC804", accessibilityRole: "button" },
                     react_1.default.createElement(react_native_1.Text, { style: styles.rotateIconText }, "\u21BB"),
                     react_1.default.createElement(react_native_1.Text, { style: styles.rotateButtonLabel }, "\uC6B0\uB85C 90\u00B0"))),
-            react_1.default.createElement(react_native_1.Image, { source: { uri: croppedImageData.path }, style: styles.previewImage, resizeMode: "contain" }),
+            react_1.default.createElement(react_native_1.Image, { source: { uri: croppedImageData.path }, style: [
+                    styles.previewImage,
+                    { transform: [{ rotate: `${rotationDegrees}deg` }] }
+                ], resizeMode: "contain" }),
             react_1.default.createElement(react_native_1.View, { style: styles.confirmationButtons },
                 react_1.default.createElement(react_native_1.TouchableOpacity, { style: [styles.confirmButton, styles.retakeButton], onPress: handleRetake, accessibilityLabel: mergedStrings.retake, accessibilityRole: "button" },
                     react_1.default.createElement(react_native_1.Text, { style: styles.confirmButtonText }, mergedStrings.retake)),
@@ -613,6 +619,17 @@ const styles = react_native_1.StyleSheet.create({
         gap: 12,
         zIndex: 10,
     },
+    rotateButtonsCenter: {
+        position: 'absolute',
+        top: 60,
+        left: 0,
+        right: 0,
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'center',
+        gap: 12,
+        zIndex: 10,
+    },
     rotateButtonTop: {
         flexDirection: 'row',
         alignItems: 'center',

package/package.json

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

package/src/DocScanner.tsx

@@ -142,6 +142,7 @@ export const DocScanner = forwardRef<DocScannerHandle, Props>(
     const [detectedRectangle, setDetectedRectangle] = useState<RectangleDetectEvent | null>(null);
     const lastRectangleRef = useRef<Rectangle | null>(null);
     const captureOriginRef = useRef<'auto' | 'manual'>('auto');
+    const rectangleClearTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
     useEffect(() => {
       if (!autoCapture) {
@@ -149,6 +150,15 @@ export const DocScanner = forwardRef<DocScannerHandle, Props>(
       }
     }, [autoCapture]);
 
+    // Cleanup timeout on unmount
+    useEffect(() => {
+      return () => {
+        if (rectangleClearTimeoutRef.current) {
+          clearTimeout(rectangleClearTimeoutRef.current);
+        }
+      };
+    }, []);
+
     const normalizedQuality = useMemo(() => {
       if (Platform.OS === 'ios') {
         // iOS expects 0-1
@@ -385,7 +395,29 @@ export const DocScanner = forwardRef<DocScannerHandle, Props>(
         }
 
         const isGoodRectangle = payload.lastDetectionType === 0;
-        setDetectedRectangle(isGoodRectangle && rectangleOnScreen ? payload : null);
+        const hasValidRectangle = isGoodRectangle && rectangleOnScreen;
+
+        // 그리드를 표시할 조건: 좋은 품질의 사각형이 화면에 있을 때만
+        if (hasValidRectangle) {
+          // 기존 타임아웃 클리어
+          if (rectangleClearTimeoutRef.current) {
+            clearTimeout(rectangleClearTimeoutRef.current);
+          }
+          setDetectedRectangle(payload);
+          // 500ms 후에 그리드 자동 클리어 (새로운 이벤트가 없으면)
+          rectangleClearTimeoutRef.current = setTimeout(() => {
+            setDetectedRectangle(null);
+            rectangleClearTimeoutRef.current = null;
+          }, 500);
+        } else {
+          // 즉시 클리어
+          if (rectangleClearTimeoutRef.current) {
+            clearTimeout(rectangleClearTimeoutRef.current);
+            rectangleClearTimeoutRef.current = null;
+          }
+          setDetectedRectangle(null);
+        }
+
         onRectangleDetect?.(payload);
       },
       [autoCapture, minStableFrames, onRectangleDetect],

package/src/FullDocScanner.tsx

@@ -152,7 +152,7 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
   const [rectangleDetected, setRectangleDetected] = useState(false);
   const [rectangleHint, setRectangleHint] = useState(false);
   const [flashEnabled, setFlashEnabled] = useState(false);
-  const [isRotating, setIsRotating] = useState(false);
+  const [rotationDegrees, setRotationDegrees] = useState(0);
   const resolvedGridColor = gridColor ?? overlayColor;
   const docScannerRef = useRef<DocScannerHandle | null>(null);
   const captureModeRef = useRef<'grid' | 'no-grid' | null>(null);
@@ -440,59 +440,58 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
     setFlashEnabled(prev => !prev);
   }, []);
 
-  const handleRotateImage = useCallback(async (degrees: -90 | 90) => {
-    if (isRotating || !croppedImageData) return;
+  const handleRotateImage = useCallback((degrees: -90 | 90) => {
+    if (!croppedImageData) return;
 
-    setIsRotating(true);
-    try {
-      console.log('[FullDocScanner] Rotating image by', degrees, 'degrees');
+    setRotationDegrees(prev => {
+      const newRotation = (prev + degrees + 360) % 360;
+      return newRotation;
+    });
+  }, [croppedImageData]);
 
-      const rotatedImage = await ImageCropPicker.openCropper({
-        path: croppedImageData.path,
-        mediaType: 'photo',
-        cropping: true,
-        freeStyleCropEnabled: true,
-        includeBase64: true,
-        compressImageQuality: 0.9,
-        cropperToolbarTitle: degrees === 90 ? '↻' : '↺',
-        cropperChooseText: '완료',
-        cropperCancelText: '취소',
-        cropperRotateButtonsHidden: false,
-      });
+  const handleConfirm = useCallback(async () => {
+    if (!croppedImageData) return;
 
-      console.log('[FullDocScanner] Image rotated successfully');
-      setCroppedImageData({
-        path: rotatedImage.path,
-        base64: rotatedImage.data ?? undefined,
-      });
-    } catch (error) {
-      console.error('[FullDocScanner] Image rotation error:', error);
-      if (error && typeof error === 'object' && 'message' in error) {
-        const errorMessage = (error as Error).message;
-        if (!errorMessage.includes('cancel') && !errorMessage.includes('User cancelled')) {
-          emitError(
-            error instanceof Error ? error : new Error(String(error)),
-            'Failed to rotate image.',
-          );
-        }
-      }
-    } finally {
-      setIsRotating(false);
-    }
-  }, [isRotating, croppedImageData, emitError]);
+    // 회전이 필요한 경우 실제로 이미지를 회전
+    if (rotationDegrees !== 0) {
+      try {
+        const rotatedImage = await ImageCropPicker.openCropper({
+          path: croppedImageData.path,
+          mediaType: 'photo',
+          cropping: true,
+          freeStyleCropEnabled: true,
+          includeBase64: true,
+          compressImageQuality: 0.9,
+          cropperToolbarTitle: ' ',
+          cropperChooseText: '완료',
+          cropperCancelText: '취소',
+          cropperRotateButtonsHidden: false,
+        });
 
-  const handleConfirm = useCallback(() => {
-    if (croppedImageData) {
+        onResult({
+          path: rotatedImage.path,
+          base64: rotatedImage.data ?? undefined,
+        });
+      } catch (error) {
+        console.error('[FullDocScanner] Image rotation error:', error);
+        // 에러 발생 시 원본 이미지 전송
+        onResult({
+          path: croppedImageData.path,
+          base64: croppedImageData.base64,
+        });
+      }
+    } else {
       onResult({
         path: croppedImageData.path,
         base64: croppedImageData.base64,
       });
     }
-  }, [croppedImageData, onResult]);
+  }, [croppedImageData, rotationDegrees, onResult]);
 
   const handleRetake = useCallback(() => {
     console.log('[FullDocScanner] Retake - clearing cropped image and resetting scanner');
     setCroppedImageData(null);
+    setRotationDegrees(0);
     setProcessing(false);
     setRectangleDetected(false);
     setRectangleHint(false);
@@ -574,12 +573,11 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
       {croppedImageData ? (
         // check_DP: Show confirmation screen
         <View style={styles.confirmationContainer}>
-          {/* 상단 회전 버튼들 */}
-          <View style={styles.rotateButtonsTop}>
+          {/* 회전 버튼들 - 가운데 정렬 */}
+          <View style={styles.rotateButtonsCenter}>
             <TouchableOpacity
-              style={[styles.rotateButtonTop, isRotating && styles.buttonDisabled]}
+              style={styles.rotateButtonTop}
               onPress={() => handleRotateImage(-90)}
-              disabled={isRotating}
               accessibilityLabel="왼쪽으로 90도 회전"
               accessibilityRole="button"
             >
@@ -587,9 +585,8 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
               <Text style={styles.rotateButtonLabel}>좌로 90°</Text>
             </TouchableOpacity>
             <TouchableOpacity
-              style={[styles.rotateButtonTop, isRotating && styles.buttonDisabled]}
+              style={styles.rotateButtonTop}
               onPress={() => handleRotateImage(90)}
-              disabled={isRotating}
               accessibilityLabel="오른쪽으로 90도 회전"
               accessibilityRole="button"
             >
@@ -599,7 +596,10 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
           </View>
           <Image
             source={{ uri: croppedImageData.path }}
-            style={styles.previewImage}
+            style={[
+              styles.previewImage,
+              { transform: [{ rotate: `${rotationDegrees}deg` }] }
+            ]}
             resizeMode="contain"
           />
           <View style={styles.confirmationButtons}>
@@ -842,6 +842,17 @@ const styles = StyleSheet.create({
     gap: 12,
     zIndex: 10,
   },
+  rotateButtonsCenter: {
+    position: 'absolute',
+    top: 60,
+    left: 0,
+    right: 0,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    gap: 12,
+    zIndex: 10,
+  },
   rotateButtonTop: {
     flexDirection: 'row',
     alignItems: 'center',