react-native-rectangle-doc-scanner 1.1.0 → 1.3.0

package/dist/utils/overlay.js

@@ -66,10 +66,27 @@ const orderQuad = (points) => {
     if (points.length !== 4) {
         return points;
     }
-    const sorted = [...points].sort((a, b) => (a.y === b.y ? a.x - b.x : a.y - b.y));
-    const top = sorted.slice(0, 2).sort((a, b) => a.x - b.x);
-    const bottom = sorted.slice(2, 4).sort((a, b) => a.x - b.x);
-    return [top[0], top[1], bottom[1], bottom[0]];
+    const center = points.reduce((acc, point) => ({ x: acc.x + point.x / 4, y: acc.y + point.y / 4 }), { x: 0, y: 0 });
+    const sorted = [...points].sort((a, b) => {
+        const angleA = Math.atan2(a.y - center.y, a.x - center.x);
+        const angleB = Math.atan2(b.y - center.y, b.x - center.x);
+        return angleA - angleB;
+    });
+    // Ensure the first point is the top-left (smallest y, then smallest x)
+    let startIndex = 0;
+    for (let i = 1; i < sorted.length; i += 1) {
+        const current = sorted[i];
+        const candidate = sorted[startIndex];
+        if (current.y < candidate.y || (current.y === candidate.y && current.x < candidate.x)) {
+            startIndex = i;
+        }
+    }
+    return [
+        sorted[startIndex % 4],
+        sorted[(startIndex + 1) % 4],
+        sorted[(startIndex + 2) % 4],
+        sorted[(startIndex + 3) % 4],
+    ];
 };
 const Overlay = ({ quad, color = '#e7a649', frameSize, showGrid = true, gridColor = 'rgba(231, 166, 73, 0.35)', gridLineWidth = 2, }) => {
     const { width: screenWidth, height: screenHeight } = (0, react_native_1.useWindowDimensions)();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-rectangle-doc-scanner",
-  "version": "1.1.0",
+  "version": "1.3.0",
   "description": "Native-backed document scanner for React Native with customizable overlays.",
   "license": "MIT",
   "main": "dist/index.js",

package/src/utils/overlay.tsx

@@ -52,11 +52,33 @@ const orderQuad = (points: Point[]): Point[] => {
     return points;
   }
 
-  const sorted = [...points].sort((a, b) => (a.y === b.y ? a.x - b.x : a.y - b.y));
-  const top = sorted.slice(0, 2).sort((a, b) => a.x - b.x);
-  const bottom = sorted.slice(2, 4).sort((a, b) => a.x - b.x);
+  const center = points.reduce(
+    (acc, point) => ({ x: acc.x + point.x / 4, y: acc.y + point.y / 4 }),
+    { x: 0, y: 0 },
+  );
+
+  const sorted = [...points].sort((a, b) => {
+    const angleA = Math.atan2(a.y - center.y, a.x - center.x);
+    const angleB = Math.atan2(b.y - center.y, b.x - center.x);
+    return angleA - angleB;
+  });
+
+  // Ensure the first point is the top-left (smallest y, then smallest x)
+  let startIndex = 0;
+  for (let i = 1; i < sorted.length; i += 1) {
+    const current = sorted[i];
+    const candidate = sorted[startIndex];
+    if (current.y < candidate.y || (current.y === candidate.y && current.x < candidate.x)) {
+      startIndex = i;
+    }
+  }
 
-  return [top[0], top[1], bottom[1], bottom[0]];
+  return [
+    sorted[startIndex % 4],
+    sorted[(startIndex + 1) % 4],
+    sorted[(startIndex + 2) % 4],
+    sorted[(startIndex + 3) % 4],
+  ];
 };
 
 export const Overlay: React.FC<OverlayProps> = ({