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

package/dist/FullDocScanner.d.ts

@@ -17,6 +17,7 @@ export interface FullDocScannerStrings {
     galleryButton?: string;
     retake?: string;
     confirm?: string;
+    cropTitle?: string;
 }
 export interface FullDocScannerProps {
     onResult: (result: FullDocScannerResult) => void;

package/dist/FullDocScanner.js

@@ -110,6 +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 resolvedGridColor = gridColor ?? overlayColor;
     const docScannerRef = (0, react_1.useRef)(null);
     const captureModeRef = (0, react_1.useRef)(null);
@@ -124,6 +125,7 @@ const FullDocScanner = ({ onResult, onClose, detectionConfig, overlayColor = '#3
         galleryButton: strings?.galleryButton,
         retake: strings?.retake ?? 'Retake',
         confirm: strings?.confirm ?? 'Confirm',
+        cropTitle: strings?.cropTitle ?? 'Crop Document',
     }), [strings]);
     const emitError = (0, react_1.useCallback)((error, fallbackMessage) => {
         console.error('[FullDocScanner] error', error);
@@ -153,7 +155,7 @@ const FullDocScanner = ({ onResult, onClose, detectionConfig, overlayColor = '#3
                 width: cropWidth,
                 height: cropHeight,
                 cropping: true,
-                cropperToolbarTitle: 'Crop Document',
+                cropperToolbarTitle: mergedStrings.cropTitle || 'Crop Document',
                 freeStyleCropEnabled: true,
                 includeBase64: true,
                 compressImageQuality: 0.9,
@@ -327,6 +329,43 @@ 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)
+            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.');
+                }
+            }
+        }
+        finally {
+            setIsRotating(false);
+        }
+    }, [isRotating, croppedImageData, emitError]);
     const handleConfirm = (0, react_1.useCallback)(() => {
         if (croppedImageData) {
             onResult({
@@ -383,30 +422,18 @@ const FullDocScanner = ({ onResult, onClose, detectionConfig, overlayColor = '#3
         }
         if (captureReady) {
             scheduleClear(rectangleCaptureTimeoutRef, () => {
-                console.log('[FullDocScanner] Rectangle timeout - clearing detection');
                 setRectangleDetected(false);
             });
             setRectangleDetected(true);
         }
-        else if (!hasRectangle) {
+        else {
+            // 그리드가 없거나 품질이 좋지 않으면 즉시 상태 해제
             if (rectangleCaptureTimeoutRef.current) {
                 clearTimeout(rectangleCaptureTimeoutRef.current);
                 rectangleCaptureTimeoutRef.current = null;
             }
             setRectangleDetected(false);
         }
-        else if (rectangleDetected) {
-            scheduleClear(rectangleCaptureTimeoutRef, () => {
-                console.log('[FullDocScanner] Rectangle timeout - clearing detection');
-                setRectangleDetected(false);
-            });
-        }
-        console.log('[FullDocScanner] Rectangle detection update', {
-            lastDetectionType: event.lastDetectionType,
-            stableCounter,
-            hasRectangle,
-            captureReady,
-        });
     }, [rectangleDetected]);
     (0, react_1.useEffect)(() => () => {
         if (rectangleCaptureTimeoutRef.current) {
@@ -420,6 +447,13 @@ 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.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.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.View, { style: styles.confirmationButtons },
                 react_1.default.createElement(react_native_1.TouchableOpacity, { style: [styles.confirmButton, styles.retakeButton], onPress: handleRetake, accessibilityLabel: mergedStrings.retake, accessibilityRole: "button" },
@@ -571,6 +605,35 @@ const styles = react_native_1.StyleSheet.create({
         justifyContent: 'center',
         alignItems: 'center',
     },
+    rotateButtonsTop: {
+        position: 'absolute',
+        top: 60,
+        left: 20,
+        flexDirection: 'row',
+        gap: 12,
+        zIndex: 10,
+    },
+    rotateButtonTop: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        backgroundColor: 'rgba(50,50,50,0.8)',
+        paddingVertical: 10,
+        paddingHorizontal: 16,
+        borderRadius: 24,
+        borderWidth: 1,
+        borderColor: 'rgba(255,255,255,0.3)',
+        gap: 6,
+    },
+    rotateIconText: {
+        fontSize: 24,
+        color: '#fff',
+        fontWeight: 'bold',
+    },
+    rotateButtonLabel: {
+        fontSize: 14,
+        color: '#fff',
+        fontWeight: '500',
+    },
     previewImage: {
         width: '100%',
         height: '80%',

package/package.json

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

package/src/FullDocScanner.tsx

@@ -112,6 +112,7 @@ export interface FullDocScannerStrings {
   galleryButton?: string;
   retake?: string;
   confirm?: string;
+  cropTitle?: string;
 }
 
 export interface FullDocScannerProps {
@@ -151,6 +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 resolvedGridColor = gridColor ?? overlayColor;
   const docScannerRef = useRef<DocScannerHandle | null>(null);
   const captureModeRef = useRef<'grid' | 'no-grid' | null>(null);
@@ -167,6 +169,7 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
       galleryButton: strings?.galleryButton,
       retake: strings?.retake ?? 'Retake',
       confirm: strings?.confirm ?? 'Confirm',
+      cropTitle: strings?.cropTitle ?? 'Crop Document',
     }),
     [strings],
   );
@@ -209,7 +212,7 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
             width: cropWidth,
             height: cropHeight,
             cropping: true,
-            cropperToolbarTitle: 'Crop Document',
+            cropperToolbarTitle: mergedStrings.cropTitle || 'Crop Document',
             freeStyleCropEnabled: true,
             includeBase64: true,
             compressImageQuality: 0.9,
@@ -437,6 +440,47 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
     setFlashEnabled(prev => !prev);
   }, []);
 
+  const handleRotateImage = useCallback(async (degrees: -90 | 90) => {
+    if (isRotating || !croppedImageData) return;
+
+    setIsRotating(true);
+    try {
+      console.log('[FullDocScanner] Rotating image by', degrees, 'degrees');
+
+      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,
+      });
+
+      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]);
+
   const handleConfirm = useCallback(() => {
     if (croppedImageData) {
       onResult({
@@ -500,29 +544,17 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
 
     if (captureReady) {
       scheduleClear(rectangleCaptureTimeoutRef, () => {
-        console.log('[FullDocScanner] Rectangle timeout - clearing detection');
         setRectangleDetected(false);
       });
       setRectangleDetected(true);
-    } else if (!hasRectangle) {
+    } else {
+      // 그리드가 없거나 품질이 좋지 않으면 즉시 상태 해제
       if (rectangleCaptureTimeoutRef.current) {
         clearTimeout(rectangleCaptureTimeoutRef.current);
         rectangleCaptureTimeoutRef.current = null;
       }
       setRectangleDetected(false);
-    } else if (rectangleDetected) {
-      scheduleClear(rectangleCaptureTimeoutRef, () => {
-        console.log('[FullDocScanner] Rectangle timeout - clearing detection');
-        setRectangleDetected(false);
-      });
     }
-
-    console.log('[FullDocScanner] Rectangle detection update', {
-      lastDetectionType: event.lastDetectionType,
-      stableCounter,
-      hasRectangle,
-      captureReady,
-    });
   }, [rectangleDetected]);
 
   useEffect(
@@ -542,6 +574,29 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
       {croppedImageData ? (
         // check_DP: Show confirmation screen
         <View style={styles.confirmationContainer}>
+          {/* 상단 회전 버튼들 */}
+          <View style={styles.rotateButtonsTop}>
+            <TouchableOpacity
+              style={[styles.rotateButtonTop, isRotating && styles.buttonDisabled]}
+              onPress={() => handleRotateImage(-90)}
+              disabled={isRotating}
+              accessibilityLabel="왼쪽으로 90도 회전"
+              accessibilityRole="button"
+            >
+              <Text style={styles.rotateIconText}>↺</Text>
+              <Text style={styles.rotateButtonLabel}>좌로 90°</Text>
+            </TouchableOpacity>
+            <TouchableOpacity
+              style={[styles.rotateButtonTop, isRotating && styles.buttonDisabled]}
+              onPress={() => handleRotateImage(90)}
+              disabled={isRotating}
+              accessibilityLabel="오른쪽으로 90도 회전"
+              accessibilityRole="button"
+            >
+              <Text style={styles.rotateIconText}>↻</Text>
+              <Text style={styles.rotateButtonLabel}>우로 90°</Text>
+            </TouchableOpacity>
+          </View>
           <Image
             source={{ uri: croppedImageData.path }}
             style={styles.previewImage}
@@ -779,6 +834,35 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
   },
+  rotateButtonsTop: {
+    position: 'absolute',
+    top: 60,
+    left: 20,
+    flexDirection: 'row',
+    gap: 12,
+    zIndex: 10,
+  },
+  rotateButtonTop: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: 'rgba(50,50,50,0.8)',
+    paddingVertical: 10,
+    paddingHorizontal: 16,
+    borderRadius: 24,
+    borderWidth: 1,
+    borderColor: 'rgba(255,255,255,0.3)',
+    gap: 6,
+  },
+  rotateIconText: {
+    fontSize: 24,
+    color: '#fff',
+    fontWeight: 'bold',
+  },
+  rotateButtonLabel: {
+    fontSize: 14,
+    color: '#fff',
+    fontWeight: '500',
+  },
   previewImage: {
     width: '100%',
     height: '80%',