react-native-rectangle-doc-scanner 3.118.0 → 3.120.0

package/dist/DocScanner.d.ts

@@ -7,6 +7,7 @@ type PictureEvent = {
     width?: number;
     height?: number;
     rectangleCoordinates?: NativeRectangle | null;
+    rectangleOnScreen?: NativeRectangle | null;
 };
 export type RectangleDetectEvent = Omit<RectangleEventPayload, 'rectangleCoordinates' | 'rectangleOnScreen'> & {
     rectangleCoordinates?: Rectangle | null;

package/dist/DocScanner.js

@@ -118,7 +118,9 @@ exports.DocScanner = (0, react_1.forwardRef)(({ onCapture, overlayColor = DEFAUL
             height: event.height,
         });
         setIsAutoCapturing(false);
-        const normalizedRectangle = normalizeRectangle(event.rectangleCoordinates ?? null) ?? lastRectangleRef.current;
+        const normalizedRectangle = normalizeRectangle(event.rectangleCoordinates ?? null) ??
+            normalizeRectangle(event.rectangleOnScreen ?? null) ??
+            lastRectangleRef.current;
         const quad = normalizedRectangle ? (0, coordinate_1.rectangleToQuad)(normalizedRectangle) : null;
         const origin = captureOriginRef.current;
         captureOriginRef.current = 'auto';
@@ -286,8 +288,8 @@ exports.DocScanner = (0, react_1.forwardRef)(({ onCapture, overlayColor = DEFAUL
                 setIsAutoCapturing(false);
             }
         }
-        if (payload.rectangleCoordinates) {
-            lastRectangleRef.current = payload.rectangleCoordinates;
+        if (payload.rectangleCoordinates || payload.rectangleOnScreen) {
+            lastRectangleRef.current = payload.rectangleCoordinates ?? payload.rectangleOnScreen ?? null;
         }
         const isGoodRectangle = payload.lastDetectionType === 0;
         const hasValidRectangle = isGoodRectangle && rectangleOnScreen;
@@ -321,6 +323,13 @@ exports.DocScanner = (0, react_1.forwardRef)(({ onCapture, overlayColor = DEFAUL
                 captureResolvers.current.reject(new Error('reset'));
                 captureResolvers.current = null;
             }
+            if (rectangleClearTimeoutRef.current) {
+                clearTimeout(rectangleClearTimeoutRef.current);
+                rectangleClearTimeoutRef.current = null;
+            }
+            lastRectangleRef.current = null;
+            setDetectedRectangle(null);
+            setIsAutoCapturing(false);
             captureOriginRef.current = 'auto';
         },
     }), [capture]);

package/dist/FullDocScanner.js

@@ -207,6 +207,10 @@ const FullDocScanner = ({ onResult, onClose, detectionConfig, overlayColor = '#3
                 errorMessage.includes('cancelled') ||
                 errorMessage.includes('cancel')) {
                 console.log('[FullDocScanner] User cancelled cropper');
+                // DocScanner 상태를 리셋하여 카메라가 다시 작동하도록 함
+                if (docScannerRef.current?.reset) {
+                    docScannerRef.current.reset();
+                }
             }
             else {
                 emitError(error instanceof Error ? error : new Error(errorMessage), 'Failed to crop image. Please try again.');
@@ -515,9 +519,14 @@ const FullDocScanner = ({ onResult, onClose, detectionConfig, overlayColor = '#3
         croppedImageData ? (
         // check_DP: Show confirmation screen
         react_1.default.createElement(react_native_1.View, { style: styles.confirmationContainer },
-            isBusinessMode && (react_1.default.createElement(react_native_1.View, { style: styles.photoHeader },
-                react_1.default.createElement(react_native_1.Text, { style: styles.photoHeaderText }, currentPhotoIndex === 0 ? mergedStrings.first : mergedStrings.second))),
-            isImageRotationSupported() ? (react_1.default.createElement(react_native_1.View, { style: styles.rotateButtonsCenter },
+            isBusinessMode && isImageRotationSupported() ? (react_1.default.createElement(react_native_1.View, { style: styles.businessHeaderRow },
+                react_1.default.createElement(react_native_1.TouchableOpacity, { style: styles.rotateButtonLeft, 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.View, { style: styles.photoHeaderCenter },
+                    react_1.default.createElement(react_native_1.Text, { style: styles.photoHeaderText }, currentPhotoIndex === 0 ? mergedStrings.first : mergedStrings.second)),
+                react_1.default.createElement(react_native_1.TouchableOpacity, { style: styles.rotateButtonRight, 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")))) : isBusinessMode ? (react_1.default.createElement(react_native_1.View, { style: styles.photoHeader },
+                react_1.default.createElement(react_native_1.Text, { style: styles.photoHeaderText }, currentPhotoIndex === 0 ? mergedStrings.first : mergedStrings.second))) : isImageRotationSupported() ? (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")),
@@ -817,4 +826,38 @@ const styles = react_native_1.StyleSheet.create({
         borderColor: '#fff',
         overflow: 'hidden',
     },
+    businessHeaderRow: {
+        position: 'absolute',
+        top: 80,
+        left: 0,
+        right: 0,
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        paddingHorizontal: 20,
+        zIndex: 10,
+    },
+    rotateButtonLeft: {
+        width: 48,
+        height: 48,
+        borderRadius: 24,
+        backgroundColor: 'rgba(50,50,50,0.8)',
+        justifyContent: 'center',
+        alignItems: 'center',
+        borderWidth: 1,
+        borderColor: 'rgba(255,255,255,0.3)',
+    },
+    rotateButtonRight: {
+        width: 48,
+        height: 48,
+        borderRadius: 24,
+        backgroundColor: 'rgba(50,50,50,0.8)',
+        justifyContent: 'center',
+        alignItems: 'center',
+        borderWidth: 1,
+        borderColor: 'rgba(255,255,255,0.3)',
+    },
+    photoHeaderCenter: {
+        alignItems: 'center',
+    },
 });

package/package.json

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

package/src/DocScanner.tsx

@@ -28,6 +28,7 @@ type PictureEvent = {
   width?: number;
   height?: number;
   rectangleCoordinates?: NativeRectangle | null;
+  rectangleOnScreen?: NativeRectangle | null;
 };
 
 export type RectangleDetectEvent = Omit<RectangleEventPayload, 'rectangleCoordinates' | 'rectangleOnScreen'> & {
@@ -195,7 +196,9 @@ export const DocScanner = forwardRef<DocScannerHandle, Props>(
         setIsAutoCapturing(false);
 
         const normalizedRectangle =
-          normalizeRectangle(event.rectangleCoordinates ?? null) ?? lastRectangleRef.current;
+          normalizeRectangle(event.rectangleCoordinates ?? null) ??
+          normalizeRectangle(event.rectangleOnScreen ?? null) ??
+          lastRectangleRef.current;
         const quad = normalizedRectangle ? rectangleToQuad(normalizedRectangle) : null;
         const origin = captureOriginRef.current;
         captureOriginRef.current = 'auto';
@@ -390,8 +393,8 @@ export const DocScanner = forwardRef<DocScannerHandle, Props>(
           }
         }
 
-        if (payload.rectangleCoordinates) {
-          lastRectangleRef.current = payload.rectangleCoordinates;
+        if (payload.rectangleCoordinates || payload.rectangleOnScreen) {
+          lastRectangleRef.current = payload.rectangleCoordinates ?? payload.rectangleOnScreen ?? null;
         }
 
         const isGoodRectangle = payload.lastDetectionType === 0;
@@ -432,6 +435,15 @@ export const DocScanner = forwardRef<DocScannerHandle, Props>(
             captureResolvers.current.reject(new Error('reset'));
             captureResolvers.current = null;
           }
+
+          if (rectangleClearTimeoutRef.current) {
+            clearTimeout(rectangleClearTimeoutRef.current);
+            rectangleClearTimeoutRef.current = null;
+          }
+
+          lastRectangleRef.current = null;
+          setDetectedRectangle(null);
+          setIsAutoCapturing(false);
           captureOriginRef.current = 'auto';
         },
       }),

package/src/FullDocScanner.tsx

@@ -291,6 +291,10 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
           errorMessage.includes('cancel')
         ) {
           console.log('[FullDocScanner] User cancelled cropper');
+          // DocScanner 상태를 리셋하여 카메라가 다시 작동하도록 함
+          if (docScannerRef.current?.reset) {
+            docScannerRef.current.reset();
+          }
         } else {
           emitError(
             error instanceof Error ? error : new Error(errorMessage),
@@ -672,17 +676,40 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
       {croppedImageData ? (
         // check_DP: Show confirmation screen
         <View style={styles.confirmationContainer}>
-          {/* 헤더 - 앞면/뒷면 표시 */}
-          {isBusinessMode && (
+          {/* Business 모드: 회전 버튼(왼쪽/오른쪽) + 헤더(가운데) 한 줄 배치 */}
+          {isBusinessMode && isImageRotationSupported() ? (
+            <View style={styles.businessHeaderRow}>
+              <TouchableOpacity
+                style={styles.rotateButtonLeft}
+                onPress={() => handleRotateImage(-90)}
+                accessibilityLabel="왼쪽으로 90도 회전"
+                accessibilityRole="button"
+              >
+                <Text style={styles.rotateIconText}>↺</Text>
+              </TouchableOpacity>
+
+              <View style={styles.photoHeaderCenter}>
+                <Text style={styles.photoHeaderText}>
+                  {currentPhotoIndex === 0 ? mergedStrings.first : mergedStrings.second}
+                </Text>
+              </View>
+
+              <TouchableOpacity
+                style={styles.rotateButtonRight}
+                onPress={() => handleRotateImage(90)}
+                accessibilityLabel="오른쪽으로 90도 회전"
+                accessibilityRole="button"
+              >
+                <Text style={styles.rotateIconText}>↻</Text>
+              </TouchableOpacity>
+            </View>
+          ) : isBusinessMode ? (
             <View style={styles.photoHeader}>
               <Text style={styles.photoHeaderText}>
                 {currentPhotoIndex === 0 ? mergedStrings.first : mergedStrings.second}
               </Text>
             </View>
-          )}
-
-          {/* 회전 버튼들 - 가운데 정렬 */}
-          {isImageRotationSupported() ? (
+          ) : isImageRotationSupported() ? (
             <View style={styles.rotateButtonsCenter}>
               <TouchableOpacity
                 style={styles.rotateButtonTop}
@@ -1105,4 +1132,38 @@ const styles = StyleSheet.create({
     borderColor: '#fff',
     overflow: 'hidden',
   },
+  businessHeaderRow: {
+    position: 'absolute',
+    top: 80,
+    left: 0,
+    right: 0,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 20,
+    zIndex: 10,
+  },
+  rotateButtonLeft: {
+    width: 48,
+    height: 48,
+    borderRadius: 24,
+    backgroundColor: 'rgba(50,50,50,0.8)',
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderWidth: 1,
+    borderColor: 'rgba(255,255,255,0.3)',
+  },
+  rotateButtonRight: {
+    width: 48,
+    height: 48,
+    borderRadius: 24,
+    backgroundColor: 'rgba(50,50,50,0.8)',
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderWidth: 1,
+    borderColor: 'rgba(255,255,255,0.3)',
+  },
+  photoHeaderCenter: {
+    alignItems: 'center',
+  },
 });