react-native-rectangle-doc-scanner 0.40.0 → 0.41.0

package/dist/DocScanner.js

@@ -96,10 +96,18 @@ const DocScanner = ({ onCapture, overlayColor = '#e7a649', autoCapture = true, m
     const smoothingBufferRef = (0, react_1.useRef)([]);
     const anchorQuadRef = (0, react_1.useRef)(null);
     const missingFrameCountRef = (0, react_1.useRef)(0);
+    const lastMeasurementRef = (0, react_1.useRef)(null);
+    const frameSizeRef = (0, react_1.useRef)(null);
     const MAX_HISTORY = 5;
     const SNAP_DISTANCE = 5; // pixels; keep corners locked when movement is tiny
-    const BLEND_DISTANCE = 20; // pixels; softly ease between similar shapes
-    const BLEND_ALPHA = 0.35;
+    const SNAP_CENTER_DISTANCE = 12;
+    const BLEND_DISTANCE = 65; // pixels; softly ease between similar shapes
+    const MAX_CENTER_DELTA = 85;
+    const MAX_AREA_SHIFT = 0.45;
+    const HISTORY_RESET_DISTANCE = 70;
+    const MIN_AREA_RATIO = 0.0035;
+    const MAX_AREA_RATIO = 0.9;
+    const MIN_EDGE_RATIO = 0.025;
     const updateQuad = (0, react_native_worklets_core_1.useRunOnJS)((value) => {
         if (__DEV__) {
             console.log('[DocScanner] quad', value);
@@ -119,21 +127,63 @@ const DocScanner = ({ onCapture, overlayColor = '#e7a649', autoCapture = true, m
         missingFrameCountRef.current = 0;
         const ordered = (0, quad_1.orderQuadPoints)(value);
         const sanitized = (0, quad_1.sanitizeQuad)(ordered);
+        const frameSize = frameSizeRef.current;
+        const frameArea = frameSize ? frameSize.width * frameSize.height : null;
+        const area = (0, quad_1.quadArea)(sanitized);
+        const edges = (0, quad_1.quadEdgeLengths)(sanitized);
+        const minEdge = Math.min(...edges);
+        const maxEdge = Math.max(...edges);
+        const aspectRatio = maxEdge > 0 ? maxEdge / Math.max(minEdge, 1) : 0;
+        const minEdgeThreshold = frameSize
+            ? Math.max(14, Math.min(frameSize.width, frameSize.height) * MIN_EDGE_RATIO)
+            : 14;
+        const areaTooSmall = frameArea ? area < frameArea * MIN_AREA_RATIO : area === 0;
+        const areaTooLarge = frameArea ? area > frameArea * MAX_AREA_RATIO : false;
+        const edgesTooShort = minEdge < minEdgeThreshold;
+        const aspectTooExtreme = aspectRatio > 7;
+        if (areaTooSmall || areaTooLarge || edgesTooShort || aspectTooExtreme) {
+            missingFrameCountRef.current += 1;
+            if (lastQuadRef.current && missingFrameCountRef.current <= 2) {
+                setQuad(lastQuadRef.current);
+                return;
+            }
+            smoothingBufferRef.current = [];
+            anchorQuadRef.current = null;
+            lastQuadRef.current = null;
+            setQuad(null);
+            return;
+        }
+        const lastMeasurement = lastMeasurementRef.current;
+        if (lastMeasurement && (0, quad_1.quadDistance)(lastMeasurement, sanitized) > HISTORY_RESET_DISTANCE) {
+            smoothingBufferRef.current = [];
+        }
+        lastMeasurementRef.current = sanitized;
         smoothingBufferRef.current.push(sanitized);
         if (smoothingBufferRef.current.length > MAX_HISTORY) {
             smoothingBufferRef.current.shift();
         }
         const history = smoothingBufferRef.current;
         const hasHistory = history.length >= 2;
-        let candidate = hasHistory ? (0, quad_1.averageQuad)(history) : sanitized;
+        let candidate = hasHistory ? (0, quad_1.weightedAverageQuad)(history) : sanitized;
         const anchor = anchorQuadRef.current;
         if (anchor && (0, quad_1.isValidQuad)(anchor)) {
             const delta = (0, quad_1.quadDistance)(candidate, anchor);
-            if (delta <= SNAP_DISTANCE) {
+            const anchorCenter = (0, quad_1.quadCenter)(anchor);
+            const candidateCenter = (0, quad_1.quadCenter)(candidate);
+            const anchorArea = (0, quad_1.quadArea)(anchor);
+            const candidateArea = (0, quad_1.quadArea)(candidate);
+            const centerDelta = Math.hypot(candidateCenter.x - anchorCenter.x, candidateCenter.y - anchorCenter.y);
+            const areaShift = anchorArea > 0 ? Math.abs(anchorArea - candidateArea) / anchorArea : 0;
+            if (delta <= SNAP_DISTANCE && centerDelta <= SNAP_CENTER_DISTANCE && areaShift <= 0.08) {
                 candidate = anchor;
             }
-            else if (delta <= BLEND_DISTANCE) {
-                candidate = (0, quad_1.blendQuads)(anchor, candidate, BLEND_ALPHA);
+            else if (delta <= BLEND_DISTANCE && centerDelta <= MAX_CENTER_DELTA && areaShift <= MAX_AREA_SHIFT) {
+                const normalizedDelta = Math.min(1, delta / BLEND_DISTANCE);
+                const adaptiveAlpha = 0.25 + normalizedDelta * 0.45; // 0.25..0.7 range
+                candidate = (0, quad_1.blendQuads)(anchor, candidate, adaptiveAlpha);
+            }
+            else {
+                smoothingBufferRef.current = [sanitized];
             }
         }
         candidate = (0, quad_1.orderQuadPoints)(candidate);
@@ -150,6 +200,7 @@ const DocScanner = ({ onCapture, overlayColor = '#e7a649', autoCapture = true, m
     }, []);
     const [frameSize, setFrameSize] = (0, react_1.useState)(null);
     const updateFrameSize = (0, react_native_worklets_core_1.useRunOnJS)((width, height) => {
+        frameSizeRef.current = { width, height };
         setFrameSize({ width, height });
     }, []);
     const frameProcessor = (0, react_native_vision_camera_1.useFrameProcessor)((frame) => {

package/dist/utils/quad.d.ts

@@ -6,3 +6,7 @@ export declare const quadDistance: (a: Point[], b: Point[]) => number;
 export declare const averageQuad: (quads: Point[][]) => Point[];
 export declare const blendQuads: (base: Point[], target: Point[], alpha: number) => Point[];
 export declare const sanitizeQuad: (quad: Point[]) => Point[];
+export declare const quadArea: (quad: Point[]) => number;
+export declare const quadCenter: (quad: Point[]) => Point;
+export declare const quadEdgeLengths: (quad: Point[]) => number[];
+export declare const weightedAverageQuad: (quads: Point[][]) => Point[];

package/dist/utils/quad.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.sanitizeQuad = exports.blendQuads = exports.averageQuad = exports.quadDistance = exports.orderQuadPoints = exports.isValidQuad = exports.isValidPoint = void 0;
+exports.weightedAverageQuad = exports.quadEdgeLengths = exports.quadCenter = exports.quadArea = exports.sanitizeQuad = exports.blendQuads = exports.averageQuad = exports.quadDistance = exports.orderQuadPoints = exports.isValidQuad = exports.isValidPoint = void 0;
 const POINT_EPSILON = 1e-3;
 const isFiniteNumber = (value) => Number.isFinite(value) && !Number.isNaN(value);
 const isValidPoint = (point) => {
@@ -91,3 +91,59 @@ const sanitizeQuad = (quad) => {
     }));
 };
 exports.sanitizeQuad = sanitizeQuad;
+const quadArea = (quad) => {
+    if (!(0, exports.isValidQuad)(quad)) {
+        return 0;
+    }
+    let area = 0;
+    for (let i = 0; i < 4; i += 1) {
+        const current = quad[i];
+        const next = quad[(i + 1) % 4];
+        area += current.x * next.y - next.x * current.y;
+    }
+    return Math.abs(area) / 2;
+};
+exports.quadArea = quadArea;
+const quadCenter = (quad) => {
+    if (!(0, exports.isValidQuad)(quad)) {
+        return { x: 0, y: 0 };
+    }
+    const sum = quad.reduce((acc, point) => ({ x: acc.x + point.x, y: acc.y + point.y }), { x: 0, y: 0 });
+    return {
+        x: sum.x / quad.length,
+        y: sum.y / quad.length,
+    };
+};
+exports.quadCenter = quadCenter;
+const quadEdgeLengths = (quad) => {
+    if (!(0, exports.isValidQuad)(quad)) {
+        return [0, 0, 0, 0];
+    }
+    const lengths = [];
+    for (let i = 0; i < 4; i += 1) {
+        const current = quad[i];
+        const next = quad[(i + 1) % 4];
+        lengths.push(Math.hypot(next.x - current.x, next.y - current.y));
+    }
+    return lengths;
+};
+exports.quadEdgeLengths = quadEdgeLengths;
+const weightedAverageQuad = (quads) => {
+    if (!Array.isArray(quads) || quads.length === 0) {
+        throw new Error('Cannot average empty quad array');
+    }
+    const weights = quads.map((_, index) => index + 1);
+    const totalWeight = weights.reduce((acc, weight) => acc + weight, 0);
+    const accum = quads[0].map(() => ({ x: 0, y: 0 }));
+    quads.forEach((quad, quadIndex) => {
+        quad.forEach((point, pointIndex) => {
+            accum[pointIndex].x += point.x * weights[quadIndex];
+            accum[pointIndex].y += point.y * weights[quadIndex];
+        });
+    });
+    return accum.map((point) => ({
+        x: point.x / totalWeight,
+        y: point.y / totalWeight,
+    }));
+};
+exports.weightedAverageQuad = weightedAverageQuad;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-rectangle-doc-scanner",
-  "version": "0.40.0",
+  "version": "0.41.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "repository": {

package/src/DocScanner.tsx

@@ -14,7 +14,17 @@ import {
 } from 'react-native-fast-opencv';
 import { Overlay } from './utils/overlay';
 import { checkStability } from './utils/stability';
-import { averageQuad, blendQuads, isValidQuad, orderQuadPoints, quadDistance, sanitizeQuad } from './utils/quad';
+import {
+  blendQuads,
+  isValidQuad,
+  orderQuadPoints,
+  quadArea,
+  quadCenter,
+  quadDistance,
+  quadEdgeLengths,
+  sanitizeQuad,
+  weightedAverageQuad,
+} from './utils/quad';
 import type { Point } from './types';
 
 const isConvexQuadrilateral = (points: Point[]) => {
@@ -101,11 +111,19 @@ export const DocScanner: React.FC<Props> = ({
   const smoothingBufferRef = useRef<Point[][]>([]);
   const anchorQuadRef = useRef<Point[] | null>(null);
   const missingFrameCountRef = useRef(0);
+  const lastMeasurementRef = useRef<Point[] | null>(null);
+  const frameSizeRef = useRef<{ width: number; height: number } | null>(null);
 
   const MAX_HISTORY = 5;
   const SNAP_DISTANCE = 5; // pixels; keep corners locked when movement is tiny
-  const BLEND_DISTANCE = 20; // pixels; softly ease between similar shapes
-  const BLEND_ALPHA = 0.35;
+  const SNAP_CENTER_DISTANCE = 12;
+  const BLEND_DISTANCE = 65; // pixels; softly ease between similar shapes
+  const MAX_CENTER_DELTA = 85;
+  const MAX_AREA_SHIFT = 0.45;
+  const HISTORY_RESET_DISTANCE = 70;
+  const MIN_AREA_RATIO = 0.0035;
+  const MAX_AREA_RATIO = 0.9;
+  const MIN_EDGE_RATIO = 0.025;
 
   const updateQuad = useRunOnJS((value: Point[] | null) => {
     if (__DEV__) {
@@ -132,6 +150,44 @@ export const DocScanner: React.FC<Props> = ({
     const ordered = orderQuadPoints(value);
     const sanitized = sanitizeQuad(ordered);
 
+    const frameSize = frameSizeRef.current;
+    const frameArea = frameSize ? frameSize.width * frameSize.height : null;
+    const area = quadArea(sanitized);
+    const edges = quadEdgeLengths(sanitized);
+    const minEdge = Math.min(...edges);
+    const maxEdge = Math.max(...edges);
+    const aspectRatio = maxEdge > 0 ? maxEdge / Math.max(minEdge, 1) : 0;
+
+    const minEdgeThreshold = frameSize
+      ? Math.max(14, Math.min(frameSize.width, frameSize.height) * MIN_EDGE_RATIO)
+      : 14;
+
+    const areaTooSmall = frameArea ? area < frameArea * MIN_AREA_RATIO : area === 0;
+    const areaTooLarge = frameArea ? area > frameArea * MAX_AREA_RATIO : false;
+    const edgesTooShort = minEdge < minEdgeThreshold;
+    const aspectTooExtreme = aspectRatio > 7;
+
+    if (areaTooSmall || areaTooLarge || edgesTooShort || aspectTooExtreme) {
+      missingFrameCountRef.current += 1;
+
+      if (lastQuadRef.current && missingFrameCountRef.current <= 2) {
+        setQuad(lastQuadRef.current);
+        return;
+      }
+
+      smoothingBufferRef.current = [];
+      anchorQuadRef.current = null;
+      lastQuadRef.current = null;
+      setQuad(null);
+      return;
+    }
+
+    const lastMeasurement = lastMeasurementRef.current;
+    if (lastMeasurement && quadDistance(lastMeasurement, sanitized) > HISTORY_RESET_DISTANCE) {
+      smoothingBufferRef.current = [];
+    }
+    lastMeasurementRef.current = sanitized;
+
     smoothingBufferRef.current.push(sanitized);
     if (smoothingBufferRef.current.length > MAX_HISTORY) {
       smoothingBufferRef.current.shift();
@@ -139,16 +195,26 @@ export const DocScanner: React.FC<Props> = ({
 
     const history = smoothingBufferRef.current;
     const hasHistory = history.length >= 2;
-    let candidate = hasHistory ? averageQuad(history) : sanitized;
+    let candidate = hasHistory ? weightedAverageQuad(history) : sanitized;
 
     const anchor = anchorQuadRef.current;
     if (anchor && isValidQuad(anchor)) {
       const delta = quadDistance(candidate, anchor);
-
-      if (delta <= SNAP_DISTANCE) {
+      const anchorCenter = quadCenter(anchor);
+      const candidateCenter = quadCenter(candidate);
+      const anchorArea = quadArea(anchor);
+      const candidateArea = quadArea(candidate);
+      const centerDelta = Math.hypot(candidateCenter.x - anchorCenter.x, candidateCenter.y - anchorCenter.y);
+      const areaShift = anchorArea > 0 ? Math.abs(anchorArea - candidateArea) / anchorArea : 0;
+
+      if (delta <= SNAP_DISTANCE && centerDelta <= SNAP_CENTER_DISTANCE && areaShift <= 0.08) {
         candidate = anchor;
-      } else if (delta <= BLEND_DISTANCE) {
-        candidate = blendQuads(anchor, candidate, BLEND_ALPHA);
+      } else if (delta <= BLEND_DISTANCE && centerDelta <= MAX_CENTER_DELTA && areaShift <= MAX_AREA_SHIFT) {
+        const normalizedDelta = Math.min(1, delta / BLEND_DISTANCE);
+        const adaptiveAlpha = 0.25 + normalizedDelta * 0.45; // 0.25..0.7 range
+        candidate = blendQuads(anchor, candidate, adaptiveAlpha);
+      } else {
+        smoothingBufferRef.current = [sanitized];
       }
     }
 
@@ -169,6 +235,7 @@ export const DocScanner: React.FC<Props> = ({
 
   const [frameSize, setFrameSize] = useState<{ width: number; height: number } | null>(null);
   const updateFrameSize = useRunOnJS((width: number, height: number) => {
+    frameSizeRef.current = { width, height };
     setFrameSize({ width, height });
   }, []);
 

package/src/utils/quad.ts

@@ -109,3 +109,73 @@ export const sanitizeQuad = (quad: Point[]): Point[] => {
     y: Number.isFinite(point.y) ? point.y : 0,
   }));
 };
+
+export const quadArea = (quad: Point[]): number => {
+  if (!isValidQuad(quad)) {
+    return 0;
+  }
+
+  let area = 0;
+  for (let i = 0; i < 4; i += 1) {
+    const current = quad[i];
+    const next = quad[(i + 1) % 4];
+    area += current.x * next.y - next.x * current.y;
+  }
+
+  return Math.abs(area) / 2;
+};
+
+export const quadCenter = (quad: Point[]): Point => {
+  if (!isValidQuad(quad)) {
+    return { x: 0, y: 0 };
+  }
+
+  const sum = quad.reduce(
+    (acc, point) => ({ x: acc.x + point.x, y: acc.y + point.y }),
+    { x: 0, y: 0 },
+  );
+
+  return {
+    x: sum.x / quad.length,
+    y: sum.y / quad.length,
+  };
+};
+
+export const quadEdgeLengths = (quad: Point[]): number[] => {
+  if (!isValidQuad(quad)) {
+    return [0, 0, 0, 0];
+  }
+
+  const lengths: number[] = [];
+
+  for (let i = 0; i < 4; i += 1) {
+    const current = quad[i];
+    const next = quad[(i + 1) % 4];
+    lengths.push(Math.hypot(next.x - current.x, next.y - current.y));
+  }
+
+  return lengths;
+};
+
+export const weightedAverageQuad = (quads: Point[][]): Point[] => {
+  if (!Array.isArray(quads) || quads.length === 0) {
+    throw new Error('Cannot average empty quad array');
+  }
+
+  const weights = quads.map((_, index) => index + 1);
+  const totalWeight = weights.reduce((acc, weight) => acc + weight, 0);
+
+  const accum: Point[] = quads[0].map(() => ({ x: 0, y: 0 }));
+
+  quads.forEach((quad, quadIndex) => {
+    quad.forEach((point, pointIndex) => {
+      accum[pointIndex].x += point.x * weights[quadIndex];
+      accum[pointIndex].y += point.y * weights[quadIndex];
+    });
+  });
+
+  return accum.map((point) => ({
+    x: point.x / totalWeight,
+    y: point.y / totalWeight,
+  }));
+};