react-native-expo-cropper 1.0.3 → 1.0.5

package/package.json

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

package/src/ImageCropper.js

@@ -20,6 +20,7 @@ const ImageCropper = ({ onConfirm, openCameraFirst, initialImage ,addheight}) =>
 
   const [isLoading, setIsLoading] = useState(false);
   const [showFullScreenCapture, setShowFullScreenCapture] = useState(false);
+  const lastValidPosition = useRef(null);
   
 
 
@@ -94,24 +95,59 @@ const ImageCropper = ({ onConfirm, openCameraFirst, initialImage ,addheight}) =>
     if (!image || showResult) return;
     const now = Date.now();
     const { locationX: tapX, locationY: tapY } = e.nativeEvent;
+  
     if (lastTap.current && now - lastTap.current < 300) {
       const exists = points.some(p => Math.abs(p.x - tapX) < 15 && Math.abs(p.y - tapY) < 15);
       if (!exists) setPoints([...points, { x: tapX, y: tapY }]);
       lastTap.current = null;
     } else {
       const index = points.findIndex(p => Math.abs(p.x - tapX) < 20 && Math.abs(p.y - tapY) < 20);
-      if (index !== -1) selectedPointIndex.current = index;
+      if (index !== -1) {
+        selectedPointIndex.current = index;
+        lastValidPosition.current = { ...points[index] }; // store original position before move
+      }
       lastTap.current = now;
     }
   };
 
   const handleMove = (e) => {
     if (showResult || selectedPointIndex.current === null) return;
+  
     const { locationX: moveX, locationY: moveY } = e.nativeEvent;
-    const boundedX = Math.max(0, Math.min(moveX, imageMeasure.current.width));
-    const boundedY = Math.max(0, Math.min(moveY, imageMeasure.current.height));
+    const width = imageMeasure.current.width;
+    const height = imageMeasure.current.height;
+  
+    const boundedX = Math.max(0, Math.min(moveX, width));
+    const boundedY = Math.max(0, Math.min(moveY, height));
+  
+    const edgeThreshold = 10;
+    const isNearTopOrBottomEdge =
+      boundedY <= edgeThreshold || boundedY >= height - edgeThreshold;
+  
+    const isNearLeftOrRightEdge =
+      boundedX <= edgeThreshold || boundedX >= width - edgeThreshold;
+  
+    if (isNearTopOrBottomEdge || isNearLeftOrRightEdge) {
+      // Reset point to last known position
+      if (lastValidPosition.current && selectedPointIndex.current !== null) {
+        setPoints(prev =>
+          prev.map((p, i) =>
+            i === selectedPointIndex.current ? lastValidPosition.current : p
+          )
+        );
+      }
+      selectedPointIndex.current = null;
+      return;
+    }
+  
+    // Valid move — update point and store as new last valid position
+    const updatedPoint = { x: boundedX, y: boundedY };
+    lastValidPosition.current = updatedPoint;
+  
     setPoints(prev =>
-      prev.map((p, i) => i === selectedPointIndex.current ? { x: boundedX, y: boundedY } : p)
+      prev.map((p, i) =>
+        i === selectedPointIndex.current ? updatedPoint : p
+      )
     );
   };
 
@@ -197,7 +233,7 @@ const ImageCropper = ({ onConfirm, openCameraFirst, initialImage ,addheight}) =>
               <Svg style={styles.overlay}>
                 <Path
                   d={`M 0 0 H ${imageMeasure.current.width} V ${imageMeasure.current.height} H 0 Z ${createPath()}`}
-                  fill={showResult ? 'black' : 'rgba(0, 0, 0, 0.7)'}
+                  fill={showResult ? 'white' : 'rgba(255, 255, 255, 0.8)'}
                   fillRule="evenodd"
                 />
                 {!showResult && points.length > 0 && (