react-native-expo-cropper 1.2.38 → 1.2.39

package/src/ImageCropper.js

@@ -1103,58 +1103,152 @@ const ImageCropper = ({ onConfirm, openCameraFirst, initialImage ,addheight}) =>
         />
       ) : (
         <>
-          {!showResult && (
-            <View style={image ? styles.buttonContainer : styles.centerButtonsContainer}>
- 
-              {image && Platform.OS === 'android' && (
-                <>                  
-                  <TouchableOpacity 
-                    style={styles.iconButton} 
-                    onPress={() => enableRotation && rotatePreviewImage(90)}
-                    disabled={isRotating}
-                  >
-                    <Ionicons name="sync" size={24} color="white" />
-                  </TouchableOpacity>
-                </>
-              )}
-              
-              {image && (
-                <TouchableOpacity style={styles.button} onPress={handleReset}>
-                  <Text style={styles.buttonText}>Reset</Text>
+          {image && (
+            <View
+              style={{
+                width: Dimensions.get('window').width,
+                aspectRatio: 9 / 16,
+                borderRadius: 30,
+                overflow: 'hidden',
+                alignItems: 'center',
+                justifyContent: 'center',
+                position: 'relative',
+                backgroundColor: 'black',
+                marginBottom: 0, // ✅ Les boutons sont maintenant en position absolue en bas
+              }}
+              ref={commonWrapperRef}
+              onLayout={onCommonWrapperLayout}
+            >
+              <View
+                ref={viewRef}
+                collapsable={false}
+                style={StyleSheet.absoluteFill}
+                onStartShouldSetResponder={() => true}
+                onMoveShouldSetResponder={(evt, gestureState) => {
+                  // ✅ CRITICAL: Always capture movement when a point is selected
+                  // This ensures vertical movement is captured correctly
+                  if (selectedPointIndex.current !== null) {
+                    return true;
+                  }
+                  // ✅ CRITICAL: Capture ANY movement immediately (even 0px) to prevent ScrollView interception
+                  // This is especially important for vertical movement which ScrollView tries to intercept
+                  // We return true for ANY movement to ensure we capture it before ScrollView
+                  const hasMovement = Math.abs(gestureState.dx) > 0 || Math.abs(gestureState.dy) > 0;
+                  if (hasMovement && Math.abs(gestureState.dy) > 5) {
+                    console.log("🔄 Vertical movement detected in responder:", { 
+                      dx: gestureState.dx.toFixed(2), 
+                      dy: gestureState.dy.toFixed(2),
+                      selectedPoint: selectedPointIndex.current
+                    });
+                  }
+                  return true;
+                }}
+                onResponderGrant={(e) => {
+                  // ✅ CRITICAL: Grant responder immediately to prevent ScrollView from intercepting
+                  // This ensures we capture all movement, especially vertical
+                  // Handle tap to select point if needed
+                  if (selectedPointIndex.current === null) {
+                    handleTap(e);
+                  }
+                }}
+                onResponderStart={handleTap}
+                onResponderMove={(e) => {
+                  // ✅ CRITICAL: Always handle move events to ensure smooth movement in all directions
+                  // This is called for every move event, ensuring vertical movement is captured
+                  // handleMove now uses incremental delta calculation which is more reliable
+                  handleMove(e);
+                }}
+                onResponderRelease={handleRelease}
+                onResponderTerminationRequest={() => {
+                  // ✅ CRITICAL: Never allow termination when dragging a point
+                  // This prevents ScrollView from stealing the responder during vertical movement
+                  return selectedPointIndex.current === null;
+                }}
+                // ✅ CRITICAL: Prevent parent ScrollView from intercepting touches
+                // Capture responder BEFORE parent ScrollView can intercept
+                onStartShouldSetResponderCapture={() => {
+                  // Always capture start events
+                  return true;
+                }}
+                onMoveShouldSetResponderCapture={(evt, gestureState) => {
+                  // ✅ CRITICAL: Always capture movement events before parent ScrollView
+                  // This is essential for vertical movement which ScrollView tries to intercept
+                  // Especially important when a point is selected or when there's any movement
+                  if (selectedPointIndex.current !== null) {
+                    return true;
+                  }
+                  // ✅ CRITICAL: Capture movement BEFORE ScrollView can intercept
+                  // This ensures we get vertical movement even if ScrollView tries to steal it
+                  const hasMovement = Math.abs(gestureState.dx) > 0 || Math.abs(gestureState.dy) > 0;
+                  return hasMovement;
+                }}
+              >
+                <Image
+                  source={{ uri: image }}
+                  style={styles.image}
+                  resizeMode={cameraFrameData.current?.greenFrame ? 'cover' : 'contain'}
+                  onLayout={onImageLayout}
+                />
+                {/* ✅ RÉFÉRENTIEL UNIQUE : SVG overlay utilise les dimensions du wrapper commun */}
+                {/* IMPORTANT: prevent SVG overlay from stealing touch events so dragging works reliably */}
+                <Svg style={styles.overlay} pointerEvents="none">
+                  {(() => {
+                    // ✅ Use wrapper dimensions for SVG path (wrapper coordinates)
+                    const wrapperWidth = commonWrapperLayout.current.width || Dimensions.get('window').width;
+                    const wrapperHeight = commonWrapperLayout.current.height || (Dimensions.get('window').width * 16 / 9);
+                    return (
+                      <>
+                        <Path
+                          d={`M 0 0 H ${wrapperWidth} V ${wrapperHeight} H 0 Z ${createPath()}`}
+                          fill={showResult ? 'white' : 'rgba(0, 0, 0, 0.8)'}
+                          fillRule="evenodd"
+                        />
+                        {!showResult && points.length > 0 && (
+                          <Path d={createPath()} fill="transparent" stroke="white" strokeWidth={2} />
+                        )}
+                        {!showResult && points.map((point, index) => (
+                          <Circle key={index} cx={point.x} cy={point.y} r={10} fill="white" />
+                        ))}
+                      </>
+                    );
+                  })()}
+                </Svg>
+              </View>
+            </View>
+          )}
+
+          {/* ✅ Buttons positioned BELOW the image, not overlapping */}
+          {!showResult && image && (
+            <View style={[styles.buttonContainerBelow, { paddingBottom: Math.max(insets.bottom, 16) }]}>
+              {Platform.OS === 'android' && (
+                <TouchableOpacity 
+                  style={styles.rotationButton} 
+                  onPress={() => enableRotation && rotatePreviewImage(90)}
+                  disabled={isRotating}
+                >
+                  <Ionicons name="sync" size={24} color="white" />
                 </TouchableOpacity>
               )}
-              {image && (
+              
+              <TouchableOpacity style={styles.button} onPress={handleReset}>
+                <Text style={styles.buttonText}>Reset</Text>
+              </TouchableOpacity>
+              
               <TouchableOpacity
                 style={styles.button}
-                      onPress={async () => {
+                onPress={async () => {
                         setIsLoading(true);
                         try {
                           console.log("=== Starting pixel-perfect metadata export (no bitmap crop on mobile) ===");
                           
-                          // ✅ REFACTORISATION : Utiliser les dimensions stockées (plus efficace)
                           const actualImageWidth = originalImageDimensions.current.width;
                           const actualImageHeight = originalImageDimensions.current.height;
                           
-                          // Vérifier que les dimensions sont valides
                           if (actualImageWidth === 0 || actualImageHeight === 0) {
                             throw new Error("Original image dimensions not available. Please wait for image to load.");
                           }
                           
-                          console.log("Original image dimensions:", {
-                            width: actualImageWidth,
-                            height: actualImageHeight
-                          });
-                          
-                          // ✅ CORRECTION : Utiliser le rectangle de contenu réel (contain)
-                          // ✅ CRITICAL: Recalculate displayedContentRect if not available
                           const layout = displayedImageLayout.current;
-                          
-                          console.log("🔍 Checking displayedContentRect before crop:", {
-                            displayedContentRect: displayedContentRect.current,
-                            displayedImageLayout: layout,
-                            originalImageDimensions: originalImageDimensions.current
-                          });
-                          
                           if (layout.width > 0 && layout.height > 0) {
                             updateDisplayedContentRect(layout.width, layout.height);
                           }
@@ -1163,12 +1257,8 @@ const ImageCropper = ({ onConfirm, openCameraFirst, initialImage ,addheight}) =>
                           let displayedWidth = contentRect.width;
                           let displayedHeight = contentRect.height;
                           
-                          // Vérifier que les dimensions d'affichage sont valides
                           if (displayedWidth === 0 || displayedHeight === 0) {
-                            // ✅ FALLBACK: Try to use displayedImageLayout if contentRect is not available
                             if (layout.width > 0 && layout.height > 0) {
-                              console.warn("⚠️ displayedContentRect not available, using displayedImageLayout as fallback");
-                              // Use layout dimensions as fallback (assuming no letterboxing)
                               contentRect = {
                                 x: layout.x,
                                 y: layout.y,
@@ -1177,22 +1267,12 @@ const ImageCropper = ({ onConfirm, openCameraFirst, initialImage ,addheight}) =>
                               };
                               displayedWidth = contentRect.width;
                               displayedHeight = contentRect.height;
-                              // Update the ref for consistency
                               displayedContentRect.current = contentRect;
                             } else {
-                              throw new Error("Displayed image dimensions not available. Image may not be laid out yet. Please wait a moment and try again.");
+                              throw new Error("Displayed image dimensions not available.");
                             }
                           }
                           
-                          console.log("✅ Using contentRect for crop:", contentRect);
-                          
-                          console.log("Displayed image dimensions:", {
-                            width: displayedWidth,
-                            height: displayedHeight
-                          });
-                          
-                          // ✅ CAMERA (cover mode): scale = max, image fills wrapper, has offset
-                          // ✅ GALLERY (contain mode): scale = min, uniform
                           const isCoverMode = !!(cameraFrameData.current && cameraFrameData.current.greenFrame);
                           let scale, coverOffsetX = 0, coverOffsetY = 0;
                           if (isCoverMode) {
@@ -1201,17 +1281,8 @@ const ImageCropper = ({ onConfirm, openCameraFirst, initialImage ,addheight}) =>
                             const scaledHeight = actualImageHeight * scale;
                             coverOffsetX = (scaledWidth - displayedWidth) / 2;
                             coverOffsetY = (scaledHeight - displayedHeight) / 2;
-                            console.log("Scale factor (COVER mode for camera):", { scale, coverOffsetX, coverOffsetY });
                           } else {
-                            const scaleX = actualImageWidth / displayedWidth;
-                            const scaleY = actualImageHeight / displayedHeight;
-                            if (Math.abs(scaleX - scaleY) > 0.01) {
-                              console.warn("Scale mismatch detected! This may cause incorrect crop coordinates.", {
-                                scaleX, scaleY, actualImageWidth, actualImageHeight, displayedWidth, displayedHeight
-                              });
-                            }
-                            scale = scaleX;
-                            console.log("Scale factor (contain, uniform):", { scale, contentRect });
+                            scale = actualImageWidth / displayedWidth;
                           }
                           
                           const originalUri = sourceImageUri.current || image;
@@ -1219,15 +1290,9 @@ const ImageCropper = ({ onConfirm, openCameraFirst, initialImage ,addheight}) =>
                           
                           if (points.length > 0) {
                             try {
-                              console.log("Calculating crop boundaries from points...");
-                              console.log("Points (display coordinates):", points);
-                              console.log("Content rect (offsets):", contentRect);
-                              
-                              // ✅ Conversion display -> image px (contain or cover)
                               const imagePoints = points.map(point => {
                                 let clampedX, clampedY, origX, origY;
                                 if (isCoverMode) {
-                                  // Cover: display = wrapper, scale = max, image centered with offset
                                   clampedX = Math.max(0, Math.min(point.x, contentRect.width));
                                   clampedY = Math.max(0, Math.min(point.y, contentRect.height));
                                   origX = (clampedX + coverOffsetX) / scale;
@@ -1243,16 +1308,11 @@ const ImageCropper = ({ onConfirm, openCameraFirst, initialImage ,addheight}) =>
                                 return { x: finalX, y: finalY };
                               });
                               
-                              console.log("Converted image points (original coordinates):", imagePoints);
-                              
-                              // Calculer la bounding box : min X, min Y, max X, max Y
                               const minX = Math.min(...imagePoints.map(p => p.x));
                               const minY = Math.min(...imagePoints.map(p => p.y));
                               const maxX = Math.max(...imagePoints.map(p => p.x));
                               const maxY = Math.max(...imagePoints.map(p => p.y));
                               
-                              // ✅ CORRECTION : arrondi "conservateur" (floor origin + ceil end)
-                              // évite de rogner des pixels et réduit le risque de crop plus petit (perte de détails).
                               const cropX = Math.max(0, Math.floor(minX));
                               const cropY = Math.max(0, Math.floor(minY));
                               const cropEndX = Math.min(actualImageWidth, Math.ceil(maxX));
@@ -1260,25 +1320,8 @@ const ImageCropper = ({ onConfirm, openCameraFirst, initialImage ,addheight}) =>
                               const cropWidth = Math.max(0, cropEndX - cropX);
                               const cropHeight = Math.max(0, cropEndY - cropY);
                               
-                              console.log("Crop parameters (pixel-perfect):", {
-                                x: cropX,
-                                y: cropY,
-                                width: cropWidth,
-                                height: cropHeight,
-                                imageWidth: actualImageWidth,
-                                imageHeight: actualImageHeight,
-                                boundingBox: {
-                                  minX,
-                                  minY,
-                                  maxX,
-                                  maxY
-                                }
-                              });
-                              
                               if (cropWidth > 0 && cropHeight > 0) {
-                                // 1) bbox in ORIGINAL image pixel coords
                                 const bbox = { x: cropX, y: cropY, width: cropWidth, height: cropHeight };
-                                // 2) polygon points relative to bbox (still in ORIGINAL pixel grid)
                                 const polygon = imagePoints.map(point => ({
                                   x: point.x - cropX,
                                   y: point.y - cropY
@@ -1289,21 +1332,14 @@ const ImageCropper = ({ onConfirm, openCameraFirst, initialImage ,addheight}) =>
                                   rotation: 0,
                                   imageSize: { width: actualImageWidth, height: actualImageHeight },
                                 };
-                                console.log("Crop meta ready:", cropMeta);
-                              } else {
-                                console.warn("Invalid crop dimensions, cannot export crop meta");
                               }
                             } catch (cropError) {
                               console.error("Error computing crop meta:", cropError);
                             }
-                          } else {
-                            console.log("No crop points defined, using original image");
                           }
                           
                           const name = `IMAGE XTK${Date.now()}`;
-
                           if (onConfirm) {
-                            console.log("Calling onConfirm with:", originalUri, name, cropMeta);
                             onConfirm(originalUri, name, cropMeta);
                           }
                         } catch (error) {
@@ -1315,131 +1351,16 @@ const ImageCropper = ({ onConfirm, openCameraFirst, initialImage ,addheight}) =>
                           setShowFullScreenCapture(false);
                         }
                       }}
-  >
-    <Text style={styles.buttonText}>Confirm</Text>
-  </TouchableOpacity>
-)}
-
+              >
+                <Text style={styles.buttonText}>Confirm</Text>
+              </TouchableOpacity>
             </View>
           )}
 
-
-          {image && (
-            <View
-              style={{
-                width: Dimensions.get('window').width,
-                aspectRatio: 9 / 16,
-                borderRadius: 30,
-                overflow: 'hidden',
-                alignItems: 'center',
-                justifyContent: 'center',
-                position: 'relative',
-                backgroundColor: 'black',
-              }}
-              ref={commonWrapperRef}
-              onLayout={onCommonWrapperLayout}
-            >
-              <View
-                ref={viewRef}
-                collapsable={false}
-                style={StyleSheet.absoluteFill}
-                onStartShouldSetResponder={() => true}
-                onMoveShouldSetResponder={(evt, gestureState) => {
-                  // ✅ CRITICAL: Always capture movement when a point is selected
-                  // This ensures vertical movement is captured correctly
-                  if (selectedPointIndex.current !== null) {
-                    return true;
-                  }
-                  // ✅ CRITICAL: Capture ANY movement immediately (even 0px) to prevent ScrollView interception
-                  // This is especially important for vertical movement which ScrollView tries to intercept
-                  // We return true for ANY movement to ensure we capture it before ScrollView
-                  const hasMovement = Math.abs(gestureState.dx) > 0 || Math.abs(gestureState.dy) > 0;
-                  if (hasMovement && Math.abs(gestureState.dy) > 5) {
-                    console.log("🔄 Vertical movement detected in responder:", { 
-                      dx: gestureState.dx.toFixed(2), 
-                      dy: gestureState.dy.toFixed(2),
-                      selectedPoint: selectedPointIndex.current
-                    });
-                  }
-                  return true;
-                }}
-                onResponderGrant={(e) => {
-                  // ✅ CRITICAL: Grant responder immediately to prevent ScrollView from intercepting
-                  // This ensures we capture all movement, especially vertical
-                  // Handle tap to select point if needed
-                  if (selectedPointIndex.current === null) {
-                    handleTap(e);
-                  }
-                }}
-                onResponderStart={handleTap}
-                onResponderMove={(e) => {
-                  // ✅ CRITICAL: Always handle move events to ensure smooth movement in all directions
-                  // This is called for every move event, ensuring vertical movement is captured
-                  // handleMove now uses incremental delta calculation which is more reliable
-                  handleMove(e);
-                }}
-                onResponderRelease={handleRelease}
-                onResponderTerminationRequest={() => {
-                  // ✅ CRITICAL: Never allow termination when dragging a point
-                  // This prevents ScrollView from stealing the responder during vertical movement
-                  return selectedPointIndex.current === null;
-                }}
-                // ✅ CRITICAL: Prevent parent ScrollView from intercepting touches
-                // Capture responder BEFORE parent ScrollView can intercept
-                onStartShouldSetResponderCapture={() => {
-                  // Always capture start events
-                  return true;
-                }}
-                onMoveShouldSetResponderCapture={(evt, gestureState) => {
-                  // ✅ CRITICAL: Always capture movement events before parent ScrollView
-                  // This is essential for vertical movement which ScrollView tries to intercept
-                  // Especially important when a point is selected or when there's any movement
-                  if (selectedPointIndex.current !== null) {
-                    return true;
-                  }
-                  // Also capture if there's any movement to prevent ScrollView from intercepting
-                  const hasMovement = Math.abs(gestureState.dx) > 0 || Math.abs(gestureState.dy) > 0;
-                  if (hasMovement && Math.abs(gestureState.dy) > 2) {
-                    console.log("🔄 Capturing vertical movement before ScrollView:", { dy: gestureState.dy.toFixed(2) });
-                  }
-                  return hasMovement;
-                }}
-                // ✅ CRITICAL: Prevent ScrollView from scrolling by stopping propagation
-                onResponderReject={() => {
-                  console.warn("⚠️ Responder rejected - ScrollView may intercept");
-                }}
-              >
-                <Image
-                  source={{ uri: image }}
-                  style={styles.image}
-                  resizeMode={cameraFrameData.current?.greenFrame ? 'cover' : 'contain'}
-                  onLayout={onImageLayout}
-                />
-                {/* ✅ RÉFÉRENTIEL UNIQUE : SVG overlay utilise les dimensions du wrapper commun */}
-                {/* IMPORTANT: prevent SVG overlay from stealing touch events so dragging works reliably */}
-                <Svg style={styles.overlay} pointerEvents="none">
-                  {(() => {
-                    // ✅ Use wrapper dimensions for SVG path (wrapper coordinates)
-                    const wrapperWidth = commonWrapperLayout.current.width || Dimensions.get('window').width;
-                    const wrapperHeight = commonWrapperLayout.current.height || (Dimensions.get('window').width * 16 / 9);
-                    return (
-                      <>
-                        <Path
-                          d={`M 0 0 H ${wrapperWidth} V ${wrapperHeight} H 0 Z ${createPath()}`}
-                          fill={showResult ? 'white' : 'rgba(0, 0, 0, 0.8)'}
-                          fillRule="evenodd"
-                        />
-                        {!showResult && points.length > 0 && (
-                          <Path d={createPath()} fill="transparent" stroke="white" strokeWidth={2} />
-                        )}
-                        {!showResult && points.map((point, index) => (
-                          <Circle key={index} cx={point.x} cy={point.y} r={10} fill="white" />
-                        ))}
-                      </>
-                    );
-                  })()}
-                </Svg>
-              </View>
+          {/* ✅ Show welcome screen when no image */}
+          {!showResult && !image && (
+            <View style={styles.centerButtonsContainer}>
+              <Text style={styles.welcomeText}>Sélectionnez une image</Text>
             </View>
           )}
         </>
@@ -1452,13 +1373,13 @@ const ImageCropper = ({ onConfirm, openCameraFirst, initialImage ,addheight}) =>
               <View
                 style={{
                   position: 'absolute',
-                  left: -maskDimensions.width - 100, // Hors écran mais pas trop loin
+                  left: -maskDimensions.width - 100,
                   top: -maskDimensions.height - 100,
                   width: maskDimensions.width,
                   height: maskDimensions.height,
-                  opacity: 1, // Opacité normale pour la capture
+                  opacity: 1,
                   pointerEvents: 'none',
-                  zIndex: 9999, // Z-index élevé pour s'assurer qu'elle est au-dessus
+                  zIndex: 9999,
                   overflow: 'hidden',
                 }}
                 collapsable={false}

package/src/ImageCropperStyles.js

@@ -12,6 +12,7 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
     alignItems: 'center',
+    justifyContent: 'flex-start', // ✅ Start from top, allow content to flow down
     backgroundColor: DEEP_BLACK,
   },
   buttonContainer: {
@@ -27,6 +28,20 @@ const styles = StyleSheet.create({
     zIndex: 10,
     gap: 10,
   },
+  buttonContainerBelow: {
+    // ✅ Buttons positioned BELOW image, not overlapping, above Android navigation bar
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: 10,
+    paddingTop: 16,
+    gap: 8,
+    backgroundColor: DEEP_BLACK, // Fond noir pour séparer visuellement
+  },
   iconButton: {
     backgroundColor: PRIMARY_GREEN,
     width: 60,
@@ -36,16 +51,24 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     marginRight: 5,
   },
+  rotationButton: {
+    // Cercle, même couleur que Reset/Confirm (#549433), même hauteur que les autres boutons
+    backgroundColor: '#549433',
+    width: 56,
+    height: 48, // Même hauteur approximative que les boutons rectangulaires (padding 10 + texte)
+    borderRadius: 28,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
   button: {
     flex: 1,
-    width: "100%",
-    padding: 10,
+    minHeight: 48, // Même hauteur que le bouton de rotation
+    paddingVertical: 12,
+    paddingHorizontal: 10,
     alignItems: "center",
     justifyContent: "center",
     backgroundColor: "#549433",
     borderRadius: 5,
-    marginBottom: 20,
-    marginRight:5,
   },
   buttonText: {
     color: 'white',