react-native-rectangle-doc-scanner 0.21.0 → 0.23.0

package/dist/utils/overlay.js

@@ -35,6 +35,7 @@ var __importStar = (this && this.__importStar) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 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' }) => {
     const path = (0, react_1.useMemo)(() => {
@@ -46,13 +47,29 @@ const Overlay = ({ quad, color = '#e7a649' }) => {
         }
         if (__DEV__) {
             console.log('[Overlay] drawing quad:', quad);
+            console.log('[Overlay] color:', color);
         }
         const skPath = react_native_skia_1.Skia.Path.Make();
         skPath.moveTo(quad[0].x, quad[0].y);
         quad.slice(1).forEach((p) => skPath.lineTo(p.x, p.y));
         skPath.close();
         return skPath;
-    }, [quad]);
-    return (react_1.default.createElement(react_native_skia_1.Canvas, { style: { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 } }, path && react_1.default.createElement(react_native_skia_1.Path, { path: path, color: color, style: "stroke", strokeWidth: 4 })));
+    }, [quad, color]);
+    return (react_1.default.createElement(react_native_1.View, { style: styles.container, pointerEvents: "none" },
+        react_1.default.createElement(react_native_skia_1.Canvas, { style: styles.canvas }, 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" }))))));
 };
 exports.Overlay = Overlay;
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+    },
+    canvas: {
+        flex: 1,
+    },
+});

package/package.json

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

package/src/utils/overlay.tsx

@@ -1,4 +1,5 @@
 import React, { useMemo } from 'react';
+import { View, StyleSheet } from 'react-native';
 import { Canvas, Path, Skia } from '@shopify/react-native-skia';
 import type { Point } from '../types';
 
@@ -18,6 +19,7 @@ export const Overlay: React.FC<OverlayProps> = ({ quad, color = '#e7a649' }) =>
 
     if (__DEV__) {
       console.log('[Overlay] drawing quad:', quad);
+      console.log('[Overlay] color:', color);
     }
 
     const skPath = Skia.Path.Make();
@@ -25,11 +27,31 @@ export const Overlay: React.FC<OverlayProps> = ({ quad, color = '#e7a649' }) =>
     quad.slice(1).forEach((p) => skPath.lineTo(p.x, p.y));
     skPath.close();
     return skPath;
-  }, [quad]);
+  }, [quad, color]);
 
   return (
-    <Canvas style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }}>
-      {path && <Path path={path} color={color} style="stroke" strokeWidth={4} />}
-    </Canvas>
+    <View style={styles.container} pointerEvents="none">
+      <Canvas style={styles.canvas}>
+        {path && (
+          <>
+            <Path path={path} color={color} style="stroke" strokeWidth={8} />
+            <Path path={path} color="rgba(231, 166, 73, 0.2)" style="fill" />
+          </>
+        )}
+      </Canvas>
+    </View>
   );
 };
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+  },
+  canvas: {
+    flex: 1,
+  },
+});