react-native-rectangle-doc-scanner 0.53.0 → 0.55.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/CropEditor.js +21 -16
  2. package/package.json +3 -3
  3. package/src/CropEditor.tsx +21 -18
package/dist/CropEditor.js CHANGED
@@ -66,6 +66,20 @@ const CropEditor = ({ document, overlayColor = 'rgba(0,0,0,0.5)', overlayStrokeC
66
66
  console.log('[CropEditor] Document path:', document.path);
67
67
  console.log('[CropEditor] Document dimensions:', document.width, 'x', document.height);
68
68
  console.log('[CropEditor] Document quad:', document.quad);
69
+ // Load image size using Image.getSize
70
+ const imageUri = `file://${document.path}`;
71
+ react_native_1.Image.getSize(imageUri, (width, height) => {
72
+ console.log('[CropEditor] Image.getSize success:', { width, height });
73
+ setImageSize({ width, height });
74
+ setIsImageLoading(false);
75
+ setLoadError(null);
76
+ }, (error) => {
77
+ console.error('[CropEditor] Image.getSize error:', error);
78
+ // Fallback to document dimensions
79
+ console.log('[CropEditor] Using fallback dimensions:', document.width, 'x', document.height);
80
+ setImageSize({ width: document.width, height: document.height });
81
+ setIsImageLoading(false);
82
+ });
69
83
  }, [document]);
70
84
  // Get initial rectangle from detected quad or use default
71
85
  const getInitialRectangle = (0, react_1.useCallback)(() => {
@@ -81,11 +95,8 @@ const CropEditor = ({ document, overlayColor = 'rgba(0,0,0,0.5)', overlayStrokeC
81
95
  return scaled;
82
96
  }, [document.quad, document.width, document.height, imageSize]);
83
97
  const handleImageLoad = (0, react_1.useCallback)((event) => {
84
- const { width, height } = event.nativeEvent.source;
85
- console.log('[CropEditor] Image loaded successfully with size:', { width, height });
86
- setImageSize({ width, height });
87
- setIsImageLoading(false);
88
- setLoadError(null);
98
+ // This is just for debugging - actual size is loaded via Image.getSize in useEffect
99
+ console.log('[CropEditor] Image onLoad event triggered');
89
100
  }, []);
90
101
  const handleLayout = (0, react_1.useCallback)((event) => {
91
102
  const { width, height } = event.nativeEvent.layout;
@@ -105,17 +116,11 @@ const CropEditor = ({ document, overlayColor = 'rgba(0,0,0,0.5)', overlayStrokeC
105
116
  onCropChange?.(rect);
106
117
  }, [imageSize, onCropChange]);
107
118
  const imageUri = `file://${document.path}`;
108
- return (react_1.default.createElement(react_native_1.View, { style: styles.container, onLayout: handleLayout },
109
- react_1.default.createElement(react_native_1.Image, { source: { uri: imageUri }, style: styles.hiddenImage, onLoad: handleImageLoad, onError: (error) => {
110
- console.error('[CropEditor] Image load error:', error, 'Path:', imageUri);
111
- setLoadError('Failed to load image');
112
- setIsImageLoading(false);
113
- }, resizeMode: "contain" }),
114
- loadError ? (react_1.default.createElement(react_native_1.View, { style: styles.errorContainer },
115
- react_1.default.createElement(react_native_1.Text, { style: styles.errorText }, "Failed to load image"),
116
- react_1.default.createElement(react_native_1.Text, { style: styles.errorPath }, imageUri))) : !imageSize || isImageLoading ? (react_1.default.createElement(react_native_1.View, { style: styles.loadingContainer },
117
- react_1.default.createElement(react_native_1.ActivityIndicator, { size: "large", color: handlerColor }),
118
- react_1.default.createElement(react_native_1.Text, { style: styles.loadingText }, "Loading image..."))) : (react_1.default.createElement(react_native_perspective_image_cropper_1.default, { height: displaySize.height, width: displaySize.width, image: imageUri, rectangleCoordinates: getInitialRectangle(), overlayColor: overlayColor, overlayStrokeColor: overlayStrokeColor, handlerColor: handlerColor, enablePanStrict: enablePanStrict, onDragEnd: handleDragEnd }))));
119
+ return (react_1.default.createElement(react_native_1.View, { style: styles.container, onLayout: handleLayout }, loadError ? (react_1.default.createElement(react_native_1.View, { style: styles.errorContainer },
120
+ react_1.default.createElement(react_native_1.Text, { style: styles.errorText }, "Failed to load image"),
121
+ react_1.default.createElement(react_native_1.Text, { style: styles.errorPath }, imageUri))) : !imageSize || isImageLoading ? (react_1.default.createElement(react_native_1.View, { style: styles.loadingContainer },
122
+ react_1.default.createElement(react_native_1.ActivityIndicator, { size: "large", color: handlerColor }),
123
+ react_1.default.createElement(react_native_1.Text, { style: styles.loadingText }, "Loading image..."))) : (react_1.default.createElement(react_native_perspective_image_cropper_1.default, { height: displaySize.height, width: displaySize.width, image: imageUri, rectangleCoordinates: getInitialRectangle(), overlayColor: overlayColor, overlayStrokeColor: overlayStrokeColor, handlerColor: handlerColor, enablePanStrict: enablePanStrict, onDragEnd: handleDragEnd }))));
119
124
  };
120
125
  exports.CropEditor = CropEditor;
121
126
  const styles = react_native_1.StyleSheet.create({
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-native-rectangle-doc-scanner",
3
- "version": "0.53.0",
3
+ "version": "0.55.0",
4
4
  "main": "dist/index.js",
5
5
  "types": "dist/index.d.ts",
6
6
  "repository": {
@@ -19,8 +19,6 @@
19
19
  "@shopify/react-native-skia": "*",
20
20
  "react": "*",
21
21
  "react-native": "*",
22
- "react-native-fast-opencv": "*",
23
- "react-native-perspective-image-cropper": "*",
24
22
  "react-native-reanimated": "*",
25
23
  "react-native-vision-camera": "*",
26
24
  "react-native-worklets-core": "*",
@@ -32,6 +30,8 @@
32
30
  "typescript": "^5.3.3"
33
31
  },
34
32
  "dependencies": {
33
+ "react-native-fast-opencv": "0.4.6",
34
+ "react-native-perspective-image-cropper": "^0.4.4",
35
35
  "react-native-worklets-core": "^1.6.2"
36
36
  }
37
37
  }
package/src/CropEditor.tsx CHANGED
@@ -47,6 +47,25 @@ export const CropEditor: React.FC<CropEditorProps> = ({
47
47
  console.log('[CropEditor] Document path:', document.path);
48
48
  console.log('[CropEditor] Document dimensions:', document.width, 'x', document.height);
49
49
  console.log('[CropEditor] Document quad:', document.quad);
50
+
51
+ // Load image size using Image.getSize
52
+ const imageUri = `file://${document.path}`;
53
+ Image.getSize(
54
+ imageUri,
55
+ (width, height) => {
56
+ console.log('[CropEditor] Image.getSize success:', { width, height });
57
+ setImageSize({ width, height });
58
+ setIsImageLoading(false);
59
+ setLoadError(null);
60
+ },
61
+ (error) => {
62
+ console.error('[CropEditor] Image.getSize error:', error);
63
+ // Fallback to document dimensions
64
+ console.log('[CropEditor] Using fallback dimensions:', document.width, 'x', document.height);
65
+ setImageSize({ width: document.width, height: document.height });
66
+ setIsImageLoading(false);
67
+ }
68
+ );
50
69
  }, [document]);
51
70
 
52
71
  // Get initial rectangle from detected quad or use default
@@ -73,11 +92,8 @@ export const CropEditor: React.FC<CropEditorProps> = ({
73
92
  }, [document.quad, document.width, document.height, imageSize]);
74
93
 
75
94
  const handleImageLoad = useCallback((event: any) => {
76
- const { width, height } = event.nativeEvent.source;
77
- console.log('[CropEditor] Image loaded successfully with size:', { width, height });
78
- setImageSize({ width, height });
79
- setIsImageLoading(false);
80
- setLoadError(null);
95
+ // This is just for debugging - actual size is loaded via Image.getSize in useEffect
96
+ console.log('[CropEditor] Image onLoad event triggered');
81
97
  }, []);
82
98
 
83
99
  const handleLayout = useCallback((event: any) => {
@@ -105,19 +121,6 @@ export const CropEditor: React.FC<CropEditorProps> = ({
105
121
 
106
122
  return (
107
123
  <View style={styles.container} onLayout={handleLayout}>
108
- {/* Always load the hidden image to get dimensions */}
109
- <Image
110
- source={{ uri: imageUri }}
111
- style={styles.hiddenImage}
112
- onLoad={handleImageLoad}
113
- onError={(error) => {
114
- console.error('[CropEditor] Image load error:', error, 'Path:', imageUri);
115
- setLoadError('Failed to load image');
116
- setIsImageLoading(false);
117
- }}
118
- resizeMode="contain"
119
- />
120
-
121
124
  {/* Show loading, error, or cropper */}
122
125
  {loadError ? (
123
126
  <View style={styles.errorContainer}>