react-native-rectangle-doc-scanner 3.89.0 → 3.91.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,
@@ -301,14 +303,18 @@ const FullDocScanner = ({ onResult, onClose, detectionConfig, overlayColor = '#3
                 hasAssets: !!result.assets,
                 assetsLength: result.assets?.length,
             });
-            setIsGalleryOpen(false);
             if (result.didCancel || !result.assets?.[0]?.uri) {
                 console.log('[FullDocScanner] User cancelled gallery picker or no image selected');
+                setIsGalleryOpen(false);
                 return;
             }
             const imageUri = result.assets[0].uri;
             console.log('[FullDocScanner] Gallery image selected:', imageUri);
-            // Skip waitForModalDismissal for gallery - go directly to cropper
+            // Set gallery closed state immediately but wait for modal to dismiss
+            setIsGalleryOpen(false);
+            // Wait for the image picker modal to fully dismiss before opening cropper
+            await new Promise(resolve => setTimeout(resolve, 500));
+            // Now open cropper after picker is dismissed
             await openCropper(imageUri, { waitForPickerDismissal: false });
         }
         catch (error) {
@@ -323,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({
@@ -416,6 +459,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" },
@@ -567,6 +617,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.89.0",
+  "version": "3.91.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,
@@ -402,17 +405,22 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
         assetsLength: result.assets?.length,
       });
 
-      setIsGalleryOpen(false);
-
       if (result.didCancel || !result.assets?.[0]?.uri) {
         console.log('[FullDocScanner] User cancelled gallery picker or no image selected');
+        setIsGalleryOpen(false);
         return;
       }
 
       const imageUri = result.assets[0].uri;
       console.log('[FullDocScanner] Gallery image selected:', imageUri);
 
-      // Skip waitForModalDismissal for gallery - go directly to cropper
+      // Set gallery closed state immediately but wait for modal to dismiss
+      setIsGalleryOpen(false);
+
+      // Wait for the image picker modal to fully dismiss before opening cropper
+      await new Promise(resolve => setTimeout(resolve, 500));
+
+      // Now open cropper after picker is dismissed
       await openCropper(imageUri, { waitForPickerDismissal: false });
     } catch (error) {
       console.error('[FullDocScanner] Gallery pick error:', error);
@@ -432,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({
@@ -537,6 +586,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}
@@ -774,6 +846,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%',