react-native-expo-cropper 1.2.39 → 1.2.41

package/dist/CustomCamera.js

@@ -97,7 +97,7 @@ function CustomCamera(_ref) {
   // ✅ CRITICAL FIX: Calculate green frame coordinates relative to camera preview
   // The green frame should be calculated on the wrapper (as it's visually drawn there)
   // But we store it with wrapper dimensions so ImageCropper can map it correctly
-  // 
+  //
   // NOTE: Camera capture aspect ratio (typically 4:3) may differ from wrapper aspect ratio (9:16)
   // This is handled in ImageCropper by using "cover" mode to match preview content
   var calculateGreenFrameCoordinates = function calculateGreenFrameCoordinates() {

package/dist/ImageCropper.js

@@ -35,12 +35,14 @@ function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r)
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+var PRIMARY_GREEN = '#198754';
 var ImageCropper = function ImageCropper(_ref) {
   var _cameraFrameData$curr3;
   var onConfirm = _ref.onConfirm,
     openCameraFirst = _ref.openCameraFirst,
     initialImage = _ref.initialImage,
-    addheight = _ref.addheight;
+    addheight = _ref.addheight,
+    rotationLabel = _ref.rotationLabel;
   var _useState = (0, _react.useState)(null),
     _useState2 = _slicedToArray(_useState, 2),
     image = _useState2[0],
@@ -242,6 +244,7 @@ var ImageCropper = function ImageCropper(_ref) {
     _useState20 = _slicedToArray(_useState19, 2),
     isRotating = _useState20[0],
     setIsRotating = _useState20[1];
+  var rotationInProgressRef = (0, _react.useRef)(false); // block duplicate taps immediately
   var lastValidPosition = (0, _react.useRef)(null);
   var insets = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
 
@@ -249,7 +252,7 @@ var ImageCropper = function ImageCropper(_ref) {
 
   // No view-shot / captureRef / bitmap masking on device.
   var enableMask = false;
-  var enableRotation = false; // rotation would require careful coord transforms; keep off for pixel-perfect pipeline.
+  var enableRotation = true; // rotation resets crop box so it is re-initialized on rotated image.
 
   (0, _react.useEffect)(function () {
     if (openCameraFirst) {
@@ -1212,45 +1215,54 @@ var ImageCropper = function ImageCropper(_ref) {
       return _regenerator().w(function (_context) {
         while (1) switch (_context.p = _context.n) {
           case 0:
-            if (!(!image || isRotating)) {
+            if (image) {
               _context.n = 1;
               break;
             }
             return _context.a(2);
           case 1:
+            if (!rotationInProgressRef.current) {
+              _context.n = 2;
+              break;
+            }
+            return _context.a(2);
+          case 2:
+            // block duplicate taps immediately (no re-render delay)
+            rotationInProgressRef.current = true;
             setIsRotating(true);
-            _context.p = 2;
-            // ✅ CORRECTION : appliquer la rotation de façon incrémentale sur le fichier (pas cumulée sur un fichier déjà roté).
-            // L'ancienne version rotait l'image déjà rotée par l'angle total, ce qui donnait des rotations incorrectes (90 + 180 => 270).
+            _context.p = 3;
             rotationAngle.current = (rotationAngle.current + degrees) % 360;
-            _context.n = 3;
+
+            // Use JPEG for preview rotation (faster than PNG for large images; quality 0.92 is fine for preview)
+            _context.n = 4;
             return ImageManipulator.manipulateAsync(image, [{
               rotate: degrees
             }], {
-              compress: 1,
-              // Qualité maximale (pas de compression)
-              format: ImageManipulator.SaveFormat.PNG // Format sans perte
+              compress: 0.92,
+              format: ImageManipulator.SaveFormat.JPEG
             });
-          case 3:
+          case 4:
             rotated = _context.v;
-            // Update image pour l'aperçu - onImageLayout will call initializeCropBox automatically
+            setPoints([]);
+            hasInitializedCropBox.current = false;
             setImage(rotated.uri);
-            console.log("Rotation applied (preview increment):", degrees, "degrees; accumulated:", rotationAngle.current);
-            _context.n = 5;
+            console.log("Rotation applied:", degrees, "degrees; accumulated:", rotationAngle.current);
+            _context.n = 6;
             break;
-          case 4:
-            _context.p = 4;
+          case 5:
+            _context.p = 5;
             _t = _context.v;
             console.error("Error rotating image:", _t);
             alert("Error rotating image");
-          case 5:
-            _context.p = 5;
-            setIsRotating(false);
-            return _context.f(5);
           case 6:
+            _context.p = 6;
+            rotationInProgressRef.current = false;
+            setIsRotating(false);
+            return _context.f(6);
+          case 7:
             return _context.a(2);
         }
-      }, _callee, null, [[2, 4, 5, 6]]);
+      }, _callee, null, [[3, 5, 6, 7]]);
     }));
     return function rotatePreviewImage(_x) {
       return _ref2.apply(this, arguments);
@@ -1411,17 +1423,42 @@ var ImageCropper = function ImageCropper(_ref) {
         fill: "white"
       });
     }));
-  }()))), !showResult && image && /*#__PURE__*/_react["default"].createElement(_reactNative.View, {
+  }())), isRotating && /*#__PURE__*/_react["default"].createElement(_reactNative.View, {
+    style: {
+      position: 'absolute',
+      left: 0,
+      right: 0,
+      top: 0,
+      bottom: 0,
+      backgroundColor: 'rgba(0,0,0,0.6)',
+      justifyContent: 'center',
+      alignItems: 'center'
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_reactNative.ActivityIndicator, {
+    size: "large",
+    color: PRIMARY_GREEN
+  }), /*#__PURE__*/_react["default"].createElement(_reactNative.Text, {
+    style: {
+      color: PRIMARY_GREEN,
+      marginTop: 8,
+      fontSize: 14
+    }
+  }, rotationLabel !== null && rotationLabel !== void 0 ? rotationLabel : 'Rotation...'))), !showResult && image && /*#__PURE__*/_react["default"].createElement(_reactNative.View, {
     style: [_ImageCropperStyles["default"].buttonContainerBelow, {
       paddingBottom: Math.max(insets.bottom, 16)
     }]
   }, _reactNative.Platform.OS === 'android' && /*#__PURE__*/_react["default"].createElement(_reactNative.TouchableOpacity, {
-    style: _ImageCropperStyles["default"].rotationButton,
+    style: [_ImageCropperStyles["default"].rotationButton, isRotating && {
+      opacity: 0.7
+    }],
     onPress: function onPress() {
       return enableRotation && rotatePreviewImage(90);
     },
     disabled: isRotating
-  }, /*#__PURE__*/_react["default"].createElement(_vectorIcons.Ionicons, {
+  }, isRotating ? /*#__PURE__*/_react["default"].createElement(_reactNative.ActivityIndicator, {
+    size: "small",
+    color: "white"
+  }) : /*#__PURE__*/_react["default"].createElement(_vectorIcons.Ionicons, {
     name: "sync",
     size: 24,
     color: "white"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-expo-cropper",
-  "version": "1.2.39",
+  "version": "1.2.41",
   "description": "Recadrage polygonal d'images.",
   "main": "index.js",
   "author": "PCS AGRI",

package/src/CustomCamera.js

@@ -52,24 +52,24 @@ export default function CustomCamera({ onPhotoCaptured, onFrameCalculated }) {
   // ✅ CRITICAL FIX: Calculate green frame coordinates relative to camera preview
   // The green frame should be calculated on the wrapper (as it's visually drawn there)
   // But we store it with wrapper dimensions so ImageCropper can map it correctly
-  // 
+  //
   // NOTE: Camera capture aspect ratio (typically 4:3) may differ from wrapper aspect ratio (9:16)
   // This is handled in ImageCropper by using "cover" mode to match preview content
   const calculateGreenFrameCoordinates = () => {
     const wrapperWidth = cameraWrapperLayout.width;
     const wrapperHeight = cameraWrapperLayout.height;
-    
+
     if (wrapperWidth === 0 || wrapperHeight === 0) {
       console.warn("Camera wrapper layout not ready, cannot calculate green frame");
       return null;
     }
-    
+
     // ✅ Calculate green frame as percentage of WRAPPER
     const frameWidth = wrapperWidth * 0.85;   // 85% of wrapper width
     const frameHeight = wrapperHeight * 0.70; // 70% of wrapper height
     const frameX = (wrapperWidth - frameWidth) / 2;  // Centered horizontally
     const frameY = (wrapperHeight - frameHeight) / 2; // Centered vertically
-    
+
     const frameCoords = {
       x: frameX,
       y: frameY,
@@ -83,7 +83,7 @@ export default function CustomCamera({ onPhotoCaptured, onFrameCalculated }) {
       percentWidth: 85,  // 85% of wrapper width
       percentHeight: 70  // 70% of wrapper height
     };
-    
+
     console.log("✅ Green frame coordinates calculated:", frameCoords);
     return frameCoords;
   };
@@ -104,26 +104,26 @@ export default function CustomCamera({ onPhotoCaptured, onFrameCalculated }) {
           waitForRender(5).then(() => {
             setLoadingBeforeCapture(true);
           });
-  
+
         // Wait a bit before taking picture (works on iOS)
         await waitForRender(2);
-  
+
           // ✅ OPTIMIZED: Capture with maximum quality and native camera ratio
           // Platform-specific optimizations for best quality
           const captureOptions = {
             // Maximum quality (0-1, 1 = best quality, no compression)
             quality: 1,
-            
+
             // Disable shutter sound for better UX
             shutterSound: false,
-            
+
             // ✅ CRITICAL: skipProcessing preserves original resolution and avoids interpolation
             // This ensures pixel-perfect quality and prevents premature resizing
             skipProcessing: true,
-            
+
             // Include EXIF metadata (orientation, camera settings, etc.)
             exif: true,
-            
+
             // ✅ Platform-specific optimizations
             ...(Platform.OS === 'ios' && {
               // iOS: Use native capture format (typically 4:3 or 16:9 depending on device)
@@ -162,39 +162,39 @@ export default function CustomCamera({ onPhotoCaptured, onFrameCalculated }) {
           // ✅ CRITICAL FIX: Use the same green frame coordinates that are used for rendering
           // Fallback to recalculation if, for some reason, state is not yet set
           const greenFrameCoords = greenFrame || calculateGreenFrameCoordinates();
-          
+
           if (!greenFrameCoords) {
             throw new Error("Green frame coordinates not available");
           }
-  
+
           // ✅ Send photo URI and frame data to ImageCropper
           // The photo maintains its native resolution and aspect ratio
           // ImageCropper will handle display and cropping while preserving quality
           onPhotoCaptured(photo.uri, {
             greenFrame: greenFrameCoords,
-            capturedImageSize: { 
-              width: photo.width, 
+            capturedImageSize: {
+              width: photo.width,
               height: photo.height,
               aspectRatio: capturedAspectRatio
             }
           });
-          
+
           setLoadingBeforeCapture(false);
       } catch (error) {
         console.error("❌ Error capturing photo:", error);
         setLoadingBeforeCapture(false);
         Alert.alert(
-          "Erreur", 
+          "Erreur",
           `Impossible de capturer la photo: ${error.message || "Erreur inconnue"}. Veuillez réessayer.`
         );
       }
     }
   };
-  
+
 
   return (
     <SafeAreaView style={styles.outerContainer}>
-      <View 
+      <View
         style={styles.cameraWrapper}
         ref={cameraWrapperRef}
         onLayout={(e) => {
@@ -349,4 +349,4 @@ const styles = StyleSheet.create({
     color: GLOW_WHITE,
     fontWeight: '600',
   },
-});
+});

package/src/ImageCropper.js

@@ -1,6 +1,6 @@
 import styles from './ImageCropperStyles';
 import React, { useState, useRef, useEffect } from 'react';
-import { Modal, View, Image, Dimensions, TouchableOpacity, Animated, Text, Platform, SafeAreaView, PixelRatio, StyleSheet } from 'react-native';
+import { Modal, View, Image, Dimensions, TouchableOpacity, Animated, Text, Platform, SafeAreaView, PixelRatio, StyleSheet, ActivityIndicator } from 'react-native';
 import Svg, { Path, Circle } from 'react-native-svg';
 import CustomCamera from './CustomCamera';
 import * as ImageManipulator from 'expo-image-manipulator';
@@ -8,7 +8,8 @@ import { Ionicons } from '@expo/vector-icons';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { applyMaskToImage, MaskView } from './ImageMaskProcessor';
 
-const ImageCropper = ({ onConfirm, openCameraFirst, initialImage ,addheight}) => {
+const PRIMARY_GREEN = '#198754';
+const ImageCropper = ({ onConfirm, openCameraFirst, initialImage, addheight, rotationLabel }) => {
 
 
   const [image, setImage] = useState(null);
@@ -132,6 +133,7 @@ const ImageCropper = ({ onConfirm, openCameraFirst, initialImage ,addheight}) =>
   const [isLoading, setIsLoading] = useState(false);
   const [showFullScreenCapture, setShowFullScreenCapture] = useState(false);
   const [isRotating, setIsRotating] = useState(false);
+  const rotationInProgressRef = useRef(false); // block duplicate taps immediately
   const lastValidPosition = useRef(null);
   const insets = useSafeAreaInsets();
   
@@ -139,7 +141,7 @@ const ImageCropper = ({ onConfirm, openCameraFirst, initialImage ,addheight}) =>
 
   // No view-shot / captureRef / bitmap masking on device.
   const enableMask = false;
-  const enableRotation = false; // rotation would require careful coord transforms; keep off for pixel-perfect pipeline.
+  const enableRotation = true; // rotation resets crop box so it is re-initialized on rotated image.
   
 
 
@@ -1027,32 +1029,34 @@ const ImageCropper = ({ onConfirm, openCameraFirst, initialImage ,addheight}) =>
 
   // ✅ REFACTORISATION : Stocker l'angle de rotation au lieu de modifier l'image immédiatement
   // La rotation sera appliquée uniquement lors du crop final pour éviter les interpolations multiples
-  const rotatePreviewImage = async (degrees) => {
-    if (!image || isRotating) return;
+const rotatePreviewImage = async (degrees) => {
+    if (!image) return;
+    if (rotationInProgressRef.current) return; // block duplicate taps immediately (no re-render delay)
+    rotationInProgressRef.current = true;
     setIsRotating(true);
-    
+
     try {
-      // ✅ CORRECTION : appliquer la rotation de façon incrémentale sur le fichier (pas cumulée sur un fichier déjà roté).
-      // L'ancienne version rotait l'image déjà rotée par l'angle total, ce qui donnait des rotations incorrectes (90 + 180 => 270).
       rotationAngle.current = (rotationAngle.current + degrees) % 360;
 
+      // Use JPEG for preview rotation (faster than PNG for large images; quality 0.92 is fine for preview)
       const rotated = await ImageManipulator.manipulateAsync(
         image,
         [{ rotate: degrees }],
-        { 
-          compress: 1, // Qualité maximale (pas de compression)
-          format: ImageManipulator.SaveFormat.PNG // Format sans perte
+        {
+          compress: 0.92,
+          format: ImageManipulator.SaveFormat.JPEG,
         }
       );
-      
-      // Update image pour l'aperçu - onImageLayout will call initializeCropBox automatically
+
+      setPoints([]);
+      hasInitializedCropBox.current = false;
       setImage(rotated.uri);
-      
-      console.log("Rotation applied (preview increment):", degrees, "degrees; accumulated:", rotationAngle.current);
+      console.log("Rotation applied:", degrees, "degrees; accumulated:", rotationAngle.current);
     } catch (error) {
       console.error("Error rotating image:", error);
       alert("Error rotating image");
     } finally {
+      rotationInProgressRef.current = false;
       setIsRotating(false);
     }
   };
@@ -1214,6 +1218,12 @@ const ImageCropper = ({ onConfirm, openCameraFirst, initialImage ,addheight}) =>
                   })()}
                 </Svg>
               </View>
+              {isRotating && (
+                <View style={{ position: 'absolute', left: 0, right: 0, top: 0, bottom: 0, backgroundColor: 'rgba(0,0,0,0.6)', justifyContent: 'center', alignItems: 'center' }}>
+                  <ActivityIndicator size="large" color={PRIMARY_GREEN} />
+                  <Text style={{ color: PRIMARY_GREEN, marginTop: 8, fontSize: 14 }}>{rotationLabel ?? 'Rotation...'}</Text>
+                </View>
+              )}
             </View>
           )}
 
@@ -1222,11 +1232,15 @@ const ImageCropper = ({ onConfirm, openCameraFirst, initialImage ,addheight}) =>
             <View style={[styles.buttonContainerBelow, { paddingBottom: Math.max(insets.bottom, 16) }]}>
               {Platform.OS === 'android' && (
                 <TouchableOpacity 
-                  style={styles.rotationButton} 
+                  style={[styles.rotationButton, isRotating && { opacity: 0.7 }]} 
                   onPress={() => enableRotation && rotatePreviewImage(90)}
                   disabled={isRotating}
                 >
-                  <Ionicons name="sync" size={24} color="white" />
+                  {isRotating ? (
+                    <ActivityIndicator size="small" color="white" />
+                  ) : (
+                    <Ionicons name="sync" size={24} color="white" />
+                  )}
                 </TouchableOpacity>
               )}