react-native-rectangle-doc-scanner 0.63.0 → 0.65.0

package/dist/utils/overlay.js

@@ -37,14 +37,18 @@ exports.Overlay = void 0;
 const react_1 = __importStar(require("react"));
 const react_native_1 = require("react-native");
 const react_native_skia_1 = require("@shopify/react-native-skia");
-const Overlay = ({ quad, color = '#e7a649', frameSize }) => {
+const lerp = (start, end, t) => ({
+    x: start.x + (end.x - start.x) * t,
+    y: start.y + (end.y - start.y) * t,
+});
+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)();
-    const path = (0, react_1.useMemo)(() => {
+    const { outlinePath, gridPaths } = (0, react_1.useMemo)(() => {
         if (!quad || !frameSize) {
             if (__DEV__) {
                 console.log('[Overlay] no quad or frameSize', { quad, frameSize });
             }
-            return null;
+            return { outlinePath: null, gridPaths: [] };
         }
         if (__DEV__) {
             console.log('[Overlay] drawing quad:', quad);
@@ -93,15 +97,41 @@ const Overlay = ({ quad, color = '#e7a649', frameSize }) => {
         skPath.moveTo(transformedQuad[0].x, transformedQuad[0].y);
         transformedQuad.slice(1).forEach((p) => skPath.lineTo(p.x, p.y));
         skPath.close();
-        return skPath;
-    }, [quad, color, screenWidth, screenHeight, frameSize]);
+        const grid = [];
+        if (showGrid) {
+            const [topLeft, topRight, bottomRight, bottomLeft] = transformedQuad;
+            const steps = [1 / 3, 2 / 3];
+            steps.forEach((t) => {
+                const start = lerp(topLeft, topRight, t);
+                const end = lerp(bottomLeft, bottomRight, t);
+                const verticalPath = react_native_skia_1.Skia.Path.Make();
+                verticalPath.moveTo(start.x, start.y);
+                verticalPath.lineTo(end.x, end.y);
+                grid.push(verticalPath);
+            });
+            steps.forEach((t) => {
+                const start = lerp(topLeft, bottomLeft, t);
+                const end = lerp(topRight, bottomRight, t);
+                const horizontalPath = react_native_skia_1.Skia.Path.Make();
+                horizontalPath.moveTo(start.x, start.y);
+                horizontalPath.lineTo(end.x, end.y);
+                grid.push(horizontalPath);
+            });
+        }
+        return { outlinePath: skPath, gridPaths: grid };
+    }, [quad, screenWidth, screenHeight, frameSize, showGrid]);
     if (__DEV__) {
         console.log('[Overlay] rendering Canvas with dimensions:', screenWidth, 'x', screenHeight);
     }
     return (react_1.default.createElement(react_native_1.View, { style: styles.container, pointerEvents: "none" },
-        react_1.default.createElement(react_native_skia_1.Canvas, { style: { width: screenWidth, height: screenHeight } }, path && (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(react_native_skia_1.Path, { path: path, color: color, style: "stroke", strokeWidth: 8 }),
-            react_1.default.createElement(react_native_skia_1.Path, { path: path, color: "rgba(231, 166, 73, 0.2)", style: "fill" }))))));
+        react_1.default.createElement(react_native_skia_1.Canvas, { style: { width: screenWidth, height: screenHeight } }, outlinePath && (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(react_native_skia_1.Path, { path: outlinePath, color: color, style: "stroke", strokeWidth: 8 }),
+            react_1.default.createElement(react_native_skia_1.Path, { path: outlinePath, color: "rgba(231, 166, 73, 0.2)", style: "fill" }),
+            gridPaths.map((gridPath, index) => (react_1.default.createElement(react_native_skia_1.Path
+            // eslint-disable-next-line react/no-array-index-key
+            , { 
+                // eslint-disable-next-line react/no-array-index-key
+                key: `grid-${index}`, path: gridPath, color: gridColor, style: "stroke", strokeWidth: gridLineWidth }))))))));
 };
 exports.Overlay = Overlay;
 const styles = react_native_1.StyleSheet.create({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-rectangle-doc-scanner",
-  "version": "0.63.0",
+  "version": "0.65.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "repository": {
@@ -18,13 +18,7 @@
   "peerDependencies": {
     "@shopify/react-native-skia": "*",
     "react": "*",
-    "react-native": "*",
-    "react-native-fast-opencv": "*",
-    "react-native-perspective-image-cropper": "*",
-    "react-native-reanimated": "*",
-    "react-native-vision-camera": "*",
-    "react-native-worklets-core": "*",
-    "vision-camera-resize-plugin": "*"
+    "react-native": "*"
   },
   "devDependencies": {
     "@types/react": "^18.2.41",
@@ -32,7 +26,6 @@
     "typescript": "^5.3.3"
   },
   "dependencies": {
-    "react-native-rectangle-doc-scanner": "^0.55.0",
-    "react-native-worklets-core": "^1.6.2"
+    "react-native-document-scanner-plugin": "^1.6.3"
   }
 }