react-native-rectangle-doc-scanner 0.22.0 → 0.24.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/utils/overlay.js +33 -4
  2. package/package.json +1 -1
  3. package/src/utils/overlay.tsx +45 -9
package/dist/utils/overlay.js CHANGED
@@ -35,8 +35,10 @@ var __importStar = (this && this.__importStar) || (function () {
35
35
  Object.defineProperty(exports, "__esModule", { value: true });
36
36
  exports.Overlay = void 0;
37
37
  const react_1 = __importStar(require("react"));
38
+ const react_native_1 = require("react-native");
38
39
  const react_native_skia_1 = require("@shopify/react-native-skia");
39
40
  const Overlay = ({ quad, color = '#e7a649' }) => {
41
+ const { width: screenWidth, height: screenHeight } = (0, react_native_1.useWindowDimensions)();
40
42
  const path = (0, react_1.useMemo)(() => {
41
43
  if (!quad) {
42
44
  if (__DEV__) {
@@ -46,15 +48,42 @@ const Overlay = ({ quad, color = '#e7a649' }) => {
46
48
  }
47
49
  if (__DEV__) {
48
50
  console.log('[Overlay] drawing quad:', quad);
51
+ console.log('[Overlay] color:', color);
52
+ console.log('[Overlay] screen dimensions:', screenWidth, 'x', screenHeight);
49
53
  }
50
54
  const skPath = react_native_skia_1.Skia.Path.Make();
51
55
  skPath.moveTo(quad[0].x, quad[0].y);
52
56
  quad.slice(1).forEach((p) => skPath.lineTo(p.x, p.y));
53
57
  skPath.close();
54
58
  return skPath;
55
- }, [quad]);
56
- return (react_1.default.createElement(react_native_skia_1.Canvas, { style: { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, zIndex: 1000 } }, path && (react_1.default.createElement(react_1.default.Fragment, null,
57
- react_1.default.createElement(react_native_skia_1.Path, { path: path, color: color, style: "stroke", strokeWidth: 8 }),
58
- react_1.default.createElement(react_native_skia_1.Path, { path: path, color: "rgba(231, 166, 73, 0.2)", style: "fill" })))));
59
+ }, [quad, color, screenWidth, screenHeight]);
60
+ // Test path - always visible for debugging
61
+ const testPath = (0, react_1.useMemo)(() => {
62
+ const tp = react_native_skia_1.Skia.Path.Make();
63
+ tp.moveTo(100, 100);
64
+ tp.lineTo(300, 100);
65
+ tp.lineTo(300, 300);
66
+ tp.lineTo(100, 300);
67
+ tp.close();
68
+ return tp;
69
+ }, []);
70
+ if (__DEV__) {
71
+ console.log('[Overlay] rendering Canvas with dimensions:', screenWidth, 'x', screenHeight);
72
+ }
73
+ return (react_1.default.createElement(react_native_1.View, { style: styles.container, pointerEvents: "none" },
74
+ react_1.default.createElement(react_native_skia_1.Canvas, { style: { width: screenWidth, height: screenHeight } },
75
+ react_1.default.createElement(react_native_skia_1.Path, { path: testPath, color: "red", style: "stroke", strokeWidth: 4 }),
76
+ path && (react_1.default.createElement(react_1.default.Fragment, null,
77
+ react_1.default.createElement(react_native_skia_1.Path, { path: path, color: color, style: "stroke", strokeWidth: 8 }),
78
+ react_1.default.createElement(react_native_skia_1.Path, { path: path, color: "rgba(231, 166, 73, 0.2)", style: "fill" }))))));
59
79
  };
60
80
  exports.Overlay = Overlay;
81
+ const styles = react_native_1.StyleSheet.create({
82
+ container: {
83
+ position: 'absolute',
84
+ top: 0,
85
+ left: 0,
86
+ right: 0,
87
+ bottom: 0,
88
+ },
89
+ });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-native-rectangle-doc-scanner",
3
- "version": "0.22.0",
3
+ "version": "0.24.0",
4
4
  "main": "dist/index.js",
5
5
  "types": "dist/index.d.ts",
6
6
  "repository": {
package/src/utils/overlay.tsx CHANGED
@@ -1,4 +1,5 @@
1
1
  import React, { useMemo } from 'react';
2
+ import { View, StyleSheet, useWindowDimensions } from 'react-native';
2
3
  import { Canvas, Path, Skia } from '@shopify/react-native-skia';
3
4
  import type { Point } from '../types';
4
5
 
@@ -8,6 +9,8 @@ type OverlayProps = {
8
9
  };
9
10
 
10
11
  export const Overlay: React.FC<OverlayProps> = ({ quad, color = '#e7a649' }) => {
12
+ const { width: screenWidth, height: screenHeight } = useWindowDimensions();
13
+
11
14
  const path = useMemo(() => {
12
15
  if (!quad) {
13
16
  if (__DEV__) {
@@ -18,6 +21,8 @@ export const Overlay: React.FC<OverlayProps> = ({ quad, color = '#e7a649' }) =>
18
21
 
19
22
  if (__DEV__) {
20
23
  console.log('[Overlay] drawing quad:', quad);
24
+ console.log('[Overlay] color:', color);
25
+ console.log('[Overlay] screen dimensions:', screenWidth, 'x', screenHeight);
21
26
  }
22
27
 
23
28
  const skPath = Skia.Path.Make();
@@ -25,16 +30,47 @@ export const Overlay: React.FC<OverlayProps> = ({ quad, color = '#e7a649' }) =>
25
30
  quad.slice(1).forEach((p) => skPath.lineTo(p.x, p.y));
26
31
  skPath.close();
27
32
  return skPath;
28
- }, [quad]);
33
+ }, [quad, color, screenWidth, screenHeight]);
34
+
35
+ // Test path - always visible for debugging
36
+ const testPath = useMemo(() => {
37
+ const tp = Skia.Path.Make();
38
+ tp.moveTo(100, 100);
39
+ tp.lineTo(300, 100);
40
+ tp.lineTo(300, 300);
41
+ tp.lineTo(100, 300);
42
+ tp.close();
43
+ return tp;
44
+ }, []);
45
+
46
+ if (__DEV__) {
47
+ console.log('[Overlay] rendering Canvas with dimensions:', screenWidth, 'x', screenHeight);
48
+ }
29
49
 
30
50
  return (
31
- <Canvas style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, zIndex: 1000 }}>
32
- {path && (
33
- <>
34
- <Path path={path} color={color} style="stroke" strokeWidth={8} />
35
- <Path path={path} color="rgba(231, 166, 73, 0.2)" style="fill" />
36
- </>
37
- )}
38
- </Canvas>
51
+ <View style={styles.container} pointerEvents="none">
52
+ <Canvas style={{ width: screenWidth, height: screenHeight }}>
53
+ {/* Debug: always show a test rectangle */}
54
+ <Path path={testPath} color="red" style="stroke" strokeWidth={4} />
55
+
56
+ {/* Actual quad overlay */}
57
+ {path && (
58
+ <>
59
+ <Path path={path} color={color} style="stroke" strokeWidth={8} />
60
+ <Path path={path} color="rgba(231, 166, 73, 0.2)" style="fill" />
61
+ </>
62
+ )}
63
+ </Canvas>
64
+ </View>
39
65
  );
40
66
  };
67
+
68
+ const styles = StyleSheet.create({
69
+ container: {
70
+ position: 'absolute',
71
+ top: 0,
72
+ left: 0,
73
+ right: 0,
74
+ bottom: 0,
75
+ },
76
+ });