react-native-expo-cropper 1.2.52 → 1.2.53

package/dist/ImageCropper.js

@@ -913,8 +913,10 @@ var ImageCropper = function ImageCropper(_ref) {
     // ✅ STRICT BOUNDS: visible image area (wrapper-relative) for lastValidPosition
     var strictMinX = contentRect.x;
     var strictMaxX = contentRect.x + contentRect.width;
+    // Tiny safety margin at bottom (2px) so point can almost reach bottom edge
+    var bottomSafePadding = 2;
     var strictMinY = contentRect.y;
-    var strictMaxY = contentRect.y + contentRect.height;
+    var strictMaxY = contentRect.y + contentRect.height - bottomSafePadding;
 
     // ✅ DRAG BOUNDS: keep points strictly on the visible picture (no going outside image)
     var overshootMinX = strictMinX;
@@ -926,7 +928,15 @@ var ImageCropper = function ImageCropper(_ref) {
     var dragX = Math.max(overshootMinX, Math.min(newX, overshootMaxX));
     var dragY = Math.max(overshootMinY, Math.min(newY, overshootMaxY));
 
-    // ✅ UPDATE POINT: Use drag bounds (overshoot) - allows visual freedom
+    // ✅ Bottom-band "stickiness": if the point is already in the last few pixels
+    // near the bottom, ignore any move that would suddenly pull it back up.
+    var bottomBandThreshold = strictMaxY - 3; // last ~3px of allowed area
+    var prevPoint = points[selectedPointIndex.current];
+    if (prevPoint && prevPoint.y >= bottomBandThreshold && dragY < prevPoint.y) {
+      dragY = prevPoint.y;
+    }
+
+    // ✅ UPDATE POINT: Use (possibly adjusted) dragY
     var updatedPoint = {
       x: dragX,
       y: dragY
@@ -1443,8 +1453,11 @@ var ImageCropper = function ImageCropper(_ref) {
     onPress: handleReset
   }, /*#__PURE__*/_react["default"].createElement(_reactNative.Text, {
     style: [_ImageCropperStyles["default"].buttonText, {
-      fontSize: Math.max(14, Math.round(18 * responsiveScale))
-    }]
+      // Smaller font for longer labels so they stay on one line
+      fontSize: Math.max(12, Math.round((resetText && resetText.length > 10 ? 14 : 18) * responsiveScale))
+    }],
+    numberOfLines: 1,
+    ellipsizeMode: "tail"
   }, resetText)), /*#__PURE__*/_react["default"].createElement(_reactNative.TouchableOpacity, {
     onPress: /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2() {
       var _cameraFrameData$curr4, actualImageWidth, actualImageHeight, isCoverMode, captured, layout, contentRect, displayedWidth, displayedHeight, scale, coverOffsetX, coverOffsetY, scaledWidth, scaledHeight, originalUri, cropMeta, imagePoints, minX, minY, maxX, maxY, cropX, cropY, cropEndX, cropEndY, cropWidth, cropHeight, bbox, polygon, ext, safeExt, name, _t2;
@@ -1619,8 +1632,11 @@ var ImageCropper = function ImageCropper(_ref) {
     }]
   }, /*#__PURE__*/_react["default"].createElement(_reactNative.Text, {
     style: [_ImageCropperStyles["default"].buttonText, {
-      fontSize: Math.max(14, Math.round(18 * responsiveScale))
-    }]
+      // Smaller font for longer labels so they stay on one line
+      fontSize: Math.max(12, Math.round((confirmText && confirmText.length > 10 ? 14 : 18) * responsiveScale))
+    }],
+    numberOfLines: 1,
+    ellipsizeMode: "tail"
   }, confirmText))), !showResult && !image && /*#__PURE__*/_react["default"].createElement(_reactNative.View, {
     style: _ImageCropperStyles["default"].centerButtonsContainer
   }, /*#__PURE__*/_react["default"].createElement(_reactNative.Text, {

package/package.json

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

package/src/ImageCropper.js

@@ -773,8 +773,10 @@ const ImageCropper = ({
     // ✅ STRICT BOUNDS: visible image area (wrapper-relative) for lastValidPosition
     const strictMinX = contentRect.x;
     const strictMaxX = contentRect.x + contentRect.width;
+    // Tiny safety margin at bottom (2px) so point can almost reach bottom edge
+    const bottomSafePadding = 2;
     const strictMinY = contentRect.y;
-    const strictMaxY = contentRect.y + contentRect.height;
+    const strictMaxY = contentRect.y + contentRect.height - bottomSafePadding;
     
     // ✅ DRAG BOUNDS: keep points strictly on the visible picture (no going outside image)
     const overshootMinX = strictMinX;
@@ -784,9 +786,17 @@ const ImageCropper = ({
     
     // ✅ Clamp to visible image so points always stay on the picture
     const dragX = Math.max(overshootMinX, Math.min(newX, overshootMaxX));
-    const dragY = Math.max(overshootMinY, Math.min(newY, overshootMaxY));
+    let dragY = Math.max(overshootMinY, Math.min(newY, overshootMaxY));
   
-    // ✅ UPDATE POINT: Use drag bounds (overshoot) - allows visual freedom
+    // ✅ Bottom-band "stickiness": if the point is already in the last few pixels
+    // near the bottom, ignore any move that would suddenly pull it back up.
+    const bottomBandThreshold = strictMaxY - 3; // last ~3px of allowed area
+    const prevPoint = points[selectedPointIndex.current];
+    if (prevPoint && prevPoint.y >= bottomBandThreshold && dragY < prevPoint.y) {
+      dragY = prevPoint.y;
+    }
+  
+    // ✅ UPDATE POINT: Use (possibly adjusted) dragY
     const updatedPoint = { x: dragX, y: dragY };
     
     // ✅ CRITICAL: Detect if point is AT overshoot boundary (not just clamped)
@@ -1273,8 +1283,19 @@ const rotatePreviewImage = async (degrees) => {
                 <Text
                   style={[
                     styles.buttonText,
-                    { fontSize: Math.max(14, Math.round(18 * responsiveScale)) },
+                    {
+                      // Smaller font for longer labels so they stay on one line
+                      fontSize: Math.max(
+                        12,
+                        Math.round(
+                          (resetText && resetText.length > 10 ? 14 : 18) *
+                            responsiveScale
+                        )
+                      ),
+                    },
                   ]}
+                  numberOfLines={1}
+                  ellipsizeMode="tail"
                 >
                   {resetText}
                 </Text>
@@ -1423,8 +1444,19 @@ const rotatePreviewImage = async (degrees) => {
                 <Text
                   style={[
                     styles.buttonText,
-                    { fontSize: Math.max(14, Math.round(18 * responsiveScale)) },
+                    {
+                      // Smaller font for longer labels so they stay on one line
+                      fontSize: Math.max(
+                        12,
+                        Math.round(
+                          (confirmText && confirmText.length > 10 ? 14 : 18) *
+                            responsiveScale
+                        )
+                      ),
+                    },
                   ]}
+                  numberOfLines={1}
+                  ellipsizeMode="tail"
                 >
                   {confirmText}
                 </Text>