react-native-expo-cropper 1.2.51 → 1.2.53

package/dist/CustomCamera.js

@@ -29,7 +29,9 @@ function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 var CAMERA_PREVIEW_MAX_WIDTH = 500;
 function CustomCamera(_ref) {
   var onPhotoCaptured = _ref.onPhotoCaptured,
-    onFrameCalculated = _ref.onFrameCalculated;
+    onFrameCalculated = _ref.onFrameCalculated,
+    _ref$instructionText = _ref.instructionText,
+    instructionText = _ref$instructionText === void 0 ? 'Place the tray inside the green box' : _ref$instructionText;
   var _useWindowDimensions = (0, _reactNative.useWindowDimensions)(),
     windowWidth = _useWindowDimensions.width;
   var cameraPreviewWidth = Math.min(windowWidth, CAMERA_PREVIEW_MAX_WIDTH);
@@ -318,7 +320,9 @@ function CustomCamera(_ref) {
       });
       console.log("Camera wrapper layout updated:", layout);
     }
-  }, /*#__PURE__*/_react["default"].createElement(_expoCamera.CameraView, {
+  }, /*#__PURE__*/_react["default"].createElement(_reactNative.Text, {
+    style: styles.cameraInstruction
+  }, instructionText), /*#__PURE__*/_react["default"].createElement(_expoCamera.CameraView, {
     style: styles.camera,
     facing: "back",
     ref: cameraRef,
@@ -397,6 +401,25 @@ var styles = _reactNative.StyleSheet.create({
     justifyContent: 'center',
     position: 'relative'
   },
+  cameraInstruction: {
+    position: 'absolute',
+    top: 8,
+    left: 12,
+    right: 12,
+    textAlign: 'center',
+    color: GLOW_WHITE,
+    fontSize: 14,
+    fontWeight: '600',
+    zIndex: 10,
+    textShadowColor: 'rgba(0, 0, 0, 0.7)',
+    textShadowOffset: {
+      width: 0,
+      height: 1
+    },
+    textShadowRadius: 2,
+    // Allow camera/scan frame to still receive touches
+    pointerEvents: 'none'
+  },
   camera: _objectSpread({}, _reactNative.StyleSheet.absoluteFillObject),
   scanFrame: {
     position: 'absolute',

package/dist/ImageCropper.js

@@ -50,7 +50,9 @@ var ImageCropper = function ImageCropper(_ref) {
     _ref$confirmText = _ref.confirmText,
     confirmText = _ref$confirmText === void 0 ? 'Confirm' : _ref$confirmText,
     _ref$resetText = _ref.resetText,
-    resetText = _ref$resetText === void 0 ? 'Reset' : _ref$resetText;
+    resetText = _ref$resetText === void 0 ? 'Reset' : _ref$resetText,
+    _ref$cameraInstructio = _ref.cameraInstructionText,
+    cameraInstructionText = _ref$cameraInstructio === void 0 ? 'Place the tray inside the green box' : _ref$cameraInstructio;
   var _useWindowDimensions = (0, _reactNative.useWindowDimensions)(),
     windowWidth = _useWindowDimensions.width,
     windowHeight = _useWindowDimensions.height;
@@ -911,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;
@@ -924,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
@@ -1228,6 +1240,7 @@ var ImageCropper = function ImageCropper(_ref) {
   return /*#__PURE__*/_react["default"].createElement(_reactNative.View, {
     style: _ImageCropperStyles["default"].container
   }, showCustomCamera ? /*#__PURE__*/_react["default"].createElement(_CustomCamera["default"], {
+    instructionText: cameraInstructionText,
     onPhotoCaptured: function onPhotoCaptured(uri, frameData) {
       // ✅ CRITICAL FIX: Store green frame coordinates for coordinate conversion
       if (frameData && frameData.greenFrame) {
@@ -1440,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;
@@ -1616,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.51",
+  "version": "1.2.53",
   "description": "Recadrage polygonal d'images.",
   "main": "index.js",
   "author": "PCS AGRI",

package/src/CustomCamera.js

@@ -16,7 +16,11 @@ import { Camera, CameraView } from 'expo-camera';
 // Max width for camera preview on large screens (tablets) so it doesn't stretch full width
 const CAMERA_PREVIEW_MAX_WIDTH = 500;
 
-export default function CustomCamera({ onPhotoCaptured, onFrameCalculated }) {
+export default function CustomCamera({
+  onPhotoCaptured,
+  onFrameCalculated,
+  instructionText = 'Place the tray inside the green box',
+}) {
   const { width: windowWidth } = useWindowDimensions();
   const cameraPreviewWidth = Math.min(windowWidth, CAMERA_PREVIEW_MAX_WIDTH);
   const [isReady, setIsReady] = useState(false);
@@ -250,6 +254,9 @@ export default function CustomCamera({ onPhotoCaptured, onFrameCalculated }) {
               console.log("Camera wrapper layout updated:", layout);
             }}
           >
+            <Text style={styles.cameraInstruction}>
+              {instructionText}
+            </Text>
             <CameraView
               style={styles.camera}
               facing="back"
@@ -345,6 +352,22 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     position: 'relative',
   },
+  cameraInstruction: {
+    position: 'absolute',
+    top: 8,
+    left: 12,
+    right: 12,
+    textAlign: 'center',
+    color: GLOW_WHITE,
+    fontSize: 14,
+    fontWeight: '600',
+    zIndex: 10,
+    textShadowColor: 'rgba(0, 0, 0, 0.7)',
+    textShadowOffset: { width: 0, height: 1 },
+    textShadowRadius: 2,
+    // Allow camera/scan frame to still receive touches
+    pointerEvents: 'none',
+  },
   camera: {
     ...StyleSheet.absoluteFillObject,
   },

package/src/ImageCropper.js

@@ -22,6 +22,7 @@ const ImageCropper = ({
   onCancel,
   confirmText = 'Confirm',
   resetText = 'Reset',
+  cameraInstructionText = 'Place the tray inside the green box',
 }) => {
   const { width: windowWidth, height: windowHeight } = useWindowDimensions();
 
@@ -772,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;
@@ -783,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)
@@ -1053,6 +1064,7 @@ const rotatePreviewImage = async (degrees) => {
 
       {showCustomCamera ? (
         <CustomCamera
+          instructionText={cameraInstructionText}
           onPhotoCaptured={(uri, frameData) => { 
             // ✅ CRITICAL FIX: Store green frame coordinates for coordinate conversion
             if (frameData && frameData.greenFrame) {
@@ -1271,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>
@@ -1421,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>