react-native-rectangle-doc-scanner 0.23.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 +21 -7
  2. package/package.json +1 -1
  3. package/src/utils/overlay.tsx +25 -6
package/dist/utils/overlay.js CHANGED
@@ -38,6 +38,7 @@ const react_1 = __importStar(require("react"));
38
38
  const react_native_1 = require("react-native");
39
39
  const react_native_skia_1 = require("@shopify/react-native-skia");
40
40
  const Overlay = ({ quad, color = '#e7a649' }) => {
41
+ const { width: screenWidth, height: screenHeight } = (0, react_native_1.useWindowDimensions)();
41
42
  const path = (0, react_1.useMemo)(() => {
42
43
  if (!quad) {
43
44
  if (__DEV__) {
@@ -48,17 +49,33 @@ const Overlay = ({ quad, color = '#e7a649' }) => {
48
49
  if (__DEV__) {
49
50
  console.log('[Overlay] drawing quad:', quad);
50
51
  console.log('[Overlay] color:', color);
52
+ console.log('[Overlay] screen dimensions:', screenWidth, 'x', screenHeight);
51
53
  }
52
54
  const skPath = react_native_skia_1.Skia.Path.Make();
53
55
  skPath.moveTo(quad[0].x, quad[0].y);
54
56
  quad.slice(1).forEach((p) => skPath.lineTo(p.x, p.y));
55
57
  skPath.close();
56
58
  return skPath;
57
- }, [quad, color]);
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
+ }
58
73
  return (react_1.default.createElement(react_native_1.View, { style: styles.container, pointerEvents: "none" },
59
- react_1.default.createElement(react_native_skia_1.Canvas, { style: styles.canvas }, path && (react_1.default.createElement(react_1.default.Fragment, null,
60
- react_1.default.createElement(react_native_skia_1.Path, { path: path, color: color, style: "stroke", strokeWidth: 8 }),
61
- react_1.default.createElement(react_native_skia_1.Path, { path: path, color: "rgba(231, 166, 73, 0.2)", style: "fill" }))))));
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" }))))));
62
79
  };
63
80
  exports.Overlay = Overlay;
64
81
  const styles = react_native_1.StyleSheet.create({
@@ -69,7 +86,4 @@ const styles = react_native_1.StyleSheet.create({
69
86
  right: 0,
70
87
  bottom: 0,
71
88
  },
72
- canvas: {
73
- flex: 1,
74
- },
75
89
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-native-rectangle-doc-scanner",
3
- "version": "0.23.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,5 +1,5 @@
1
1
  import React, { useMemo } from 'react';
2
- import { View, StyleSheet } from 'react-native';
2
+ import { View, StyleSheet, useWindowDimensions } from 'react-native';
3
3
  import { Canvas, Path, Skia } from '@shopify/react-native-skia';
4
4
  import type { Point } from '../types';
5
5
 
@@ -9,6 +9,8 @@ type OverlayProps = {
9
9
  };
10
10
 
11
11
  export const Overlay: React.FC<OverlayProps> = ({ quad, color = '#e7a649' }) => {
12
+ const { width: screenWidth, height: screenHeight } = useWindowDimensions();
13
+
12
14
  const path = useMemo(() => {
13
15
  if (!quad) {
14
16
  if (__DEV__) {
@@ -20,6 +22,7 @@ export const Overlay: React.FC<OverlayProps> = ({ quad, color = '#e7a649' }) =>
20
22
  if (__DEV__) {
21
23
  console.log('[Overlay] drawing quad:', quad);
22
24
  console.log('[Overlay] color:', color);
25
+ console.log('[Overlay] screen dimensions:', screenWidth, 'x', screenHeight);
23
26
  }
24
27
 
25
28
  const skPath = Skia.Path.Make();
@@ -27,11 +30,30 @@ export const Overlay: React.FC<OverlayProps> = ({ quad, color = '#e7a649' }) =>
27
30
  quad.slice(1).forEach((p) => skPath.lineTo(p.x, p.y));
28
31
  skPath.close();
29
32
  return skPath;
30
- }, [quad, color]);
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
+ }
31
49
 
32
50
  return (
33
51
  <View style={styles.container} pointerEvents="none">
34
- <Canvas style={styles.canvas}>
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 */}
35
57
  {path && (
36
58
  <>
37
59
  <Path path={path} color={color} style="stroke" strokeWidth={8} />
@@ -51,7 +73,4 @@ const styles = StyleSheet.create({
51
73
  right: 0,
52
74
  bottom: 0,
53
75
  },
54
- canvas: {
55
- flex: 1,
56
- },
57
76
  });