react-native-rectangle-doc-scanner 0.51.0 → 0.53.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 +42 -11
  2. package/package.json +1 -1
  3. package/src/CropEditor.tsx +71 -31
package/dist/CropEditor.js CHANGED
@@ -61,6 +61,12 @@ const CropEditor = ({ document, overlayColor = 'rgba(0,0,0,0.5)', overlayStrokeC
61
61
  height: react_native_1.Dimensions.get('window').height,
62
62
  });
63
63
  const [isImageLoading, setIsImageLoading] = (0, react_1.useState)(true);
64
+ const [loadError, setLoadError] = (0, react_1.useState)(null);
65
+ (0, react_1.useEffect)(() => {
66
+ console.log('[CropEditor] Document path:', document.path);
67
+ console.log('[CropEditor] Document dimensions:', document.width, 'x', document.height);
68
+ console.log('[CropEditor] Document quad:', document.quad);
69
+ }, [document]);
64
70
  // Get initial rectangle from detected quad or use default
65
71
  const getInitialRectangle = (0, react_1.useCallback)(() => {
66
72
  if (!document.quad || !imageSize) {
@@ -76,9 +82,10 @@ const CropEditor = ({ document, overlayColor = 'rgba(0,0,0,0.5)', overlayStrokeC
76
82
  }, [document.quad, document.width, document.height, imageSize]);
77
83
  const handleImageLoad = (0, react_1.useCallback)((event) => {
78
84
  const { width, height } = event.nativeEvent.source;
79
- console.log('Image loaded with size:', { width, height });
85
+ console.log('[CropEditor] Image loaded successfully with size:', { width, height });
80
86
  setImageSize({ width, height });
81
87
  setIsImageLoading(false);
88
+ setLoadError(null);
82
89
  }, []);
83
90
  const handleLayout = (0, react_1.useCallback)((event) => {
84
91
  const { width, height } = event.nativeEvent.layout;
@@ -97,17 +104,18 @@ const CropEditor = ({ document, overlayColor = 'rgba(0,0,0,0.5)', overlayStrokeC
97
104
  };
98
105
  onCropChange?.(rect);
99
106
  }, [imageSize, onCropChange]);
100
- // Wait for image to load to get dimensions
101
- if (!imageSize || isImageLoading) {
102
- return (react_1.default.createElement(react_native_1.View, { style: [styles.container, styles.loadingContainer], onLayout: handleLayout },
103
- react_1.default.createElement(react_native_1.Image, { source: { uri: `file://${document.path}` }, style: styles.hiddenImage, onLoad: handleImageLoad, onError: (error) => {
104
- console.error('Image load error:', error);
105
- setIsImageLoading(false);
106
- }, resizeMode: "contain" }),
107
- react_1.default.createElement(react_native_1.ActivityIndicator, { size: "large", color: handlerColor })));
108
- }
107
+ const imageUri = `file://${document.path}`;
109
108
  return (react_1.default.createElement(react_native_1.View, { style: styles.container, onLayout: handleLayout },
110
- react_1.default.createElement(react_native_perspective_image_cropper_1.default, { height: displaySize.height, width: displaySize.width, image: `file://${document.path}`, rectangleCoordinates: getInitialRectangle(), overlayColor: overlayColor, overlayStrokeColor: overlayStrokeColor, handlerColor: handlerColor, enablePanStrict: enablePanStrict, onDragEnd: handleDragEnd })));
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 }))));
111
119
  };
112
120
  exports.CropEditor = CropEditor;
113
121
  const styles = react_native_1.StyleSheet.create({
@@ -116,9 +124,32 @@ const styles = react_native_1.StyleSheet.create({
116
124
  backgroundColor: '#000',
117
125
  },
118
126
  loadingContainer: {
127
+ flex: 1,
119
128
  justifyContent: 'center',
120
129
  alignItems: 'center',
121
130
  },
131
+ loadingText: {
132
+ color: '#fff',
133
+ marginTop: 16,
134
+ fontSize: 16,
135
+ },
136
+ errorContainer: {
137
+ flex: 1,
138
+ justifyContent: 'center',
139
+ alignItems: 'center',
140
+ padding: 20,
141
+ },
142
+ errorText: {
143
+ color: '#ff4444',
144
+ fontSize: 18,
145
+ fontWeight: 'bold',
146
+ marginBottom: 10,
147
+ },
148
+ errorPath: {
149
+ color: '#999',
150
+ fontSize: 12,
151
+ textAlign: 'center',
152
+ },
122
153
  hiddenImage: {
123
154
  width: 1,
124
155
  height: 1,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-native-rectangle-doc-scanner",
3
- "version": "0.51.0",
3
+ "version": "0.53.0",
4
4
  "main": "dist/index.js",
5
5
  "types": "dist/index.d.ts",
6
6
  "repository": {
package/src/CropEditor.tsx CHANGED
@@ -1,5 +1,5 @@
1
- import React, { useState, useCallback } from 'react';
2
- import { View, StyleSheet, Image, Dimensions, ActivityIndicator } from 'react-native';
1
+ import React, { useState, useCallback, useEffect } from 'react';
2
+ import { View, StyleSheet, Image, Dimensions, ActivityIndicator, Text } from 'react-native';
3
3
  import CustomImageCropper from 'react-native-perspective-image-cropper';
4
4
  import type { Rectangle as CropperRectangle } from 'react-native-perspective-image-cropper';
5
5
  import type { Point, Rectangle, CapturedDocument } from './types';
@@ -41,6 +41,13 @@ export const CropEditor: React.FC<CropEditorProps> = ({
41
41
  height: Dimensions.get('window').height,
42
42
  });
43
43
  const [isImageLoading, setIsImageLoading] = useState(true);
44
+ const [loadError, setLoadError] = useState<string | null>(null);
45
+
46
+ useEffect(() => {
47
+ console.log('[CropEditor] Document path:', document.path);
48
+ console.log('[CropEditor] Document dimensions:', document.width, 'x', document.height);
49
+ console.log('[CropEditor] Document quad:', document.quad);
50
+ }, [document]);
44
51
 
45
52
  // Get initial rectangle from detected quad or use default
46
53
  const getInitialRectangle = useCallback((): CropperRectangle | undefined => {
@@ -67,9 +74,10 @@ export const CropEditor: React.FC<CropEditorProps> = ({
67
74
 
68
75
  const handleImageLoad = useCallback((event: any) => {
69
76
  const { width, height } = event.nativeEvent.source;
70
- console.log('Image loaded with size:', { width, height });
77
+ console.log('[CropEditor] Image loaded successfully with size:', { width, height });
71
78
  setImageSize({ width, height });
72
79
  setIsImageLoading(false);
80
+ setLoadError(null);
73
81
  }, []);
74
82
 
75
83
  const handleLayout = useCallback((event: any) => {
@@ -93,38 +101,47 @@ export const CropEditor: React.FC<CropEditorProps> = ({
93
101
  onCropChange?.(rect);
94
102
  }, [imageSize, onCropChange]);
95
103
 
96
- // Wait for image to load to get dimensions
97
- if (!imageSize || isImageLoading) {
98
- return (
99
- <View style={[styles.container, styles.loadingContainer]} onLayout={handleLayout}>
100
- <Image
101
- source={{ uri: `file://${document.path}` }}
102
- style={styles.hiddenImage}
103
- onLoad={handleImageLoad}
104
- onError={(error) => {
105
- console.error('Image load error:', error);
106
- setIsImageLoading(false);
107
- }}
108
- resizeMode="contain"
109
- />
110
- <ActivityIndicator size="large" color={handlerColor} />
111
- </View>
112
- );
113
- }
104
+ const imageUri = `file://${document.path}`;
114
105
 
115
106
  return (
116
107
  <View style={styles.container} onLayout={handleLayout}>
117
- <CustomImageCropper
118
- height={displaySize.height}
119
- width={displaySize.width}
120
- image={`file://${document.path}`}
121
- rectangleCoordinates={getInitialRectangle()}
122
- overlayColor={overlayColor}
123
- overlayStrokeColor={overlayStrokeColor}
124
- handlerColor={handlerColor}
125
- enablePanStrict={enablePanStrict}
126
- onDragEnd={handleDragEnd}
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"
127
119
  />
120
+
121
+ {/* Show loading, error, or cropper */}
122
+ {loadError ? (
123
+ <View style={styles.errorContainer}>
124
+ <Text style={styles.errorText}>Failed to load image</Text>
125
+ <Text style={styles.errorPath}>{imageUri}</Text>
126
+ </View>
127
+ ) : !imageSize || isImageLoading ? (
128
+ <View style={styles.loadingContainer}>
129
+ <ActivityIndicator size="large" color={handlerColor} />
130
+ <Text style={styles.loadingText}>Loading image...</Text>
131
+ </View>
132
+ ) : (
133
+ <CustomImageCropper
134
+ height={displaySize.height}
135
+ width={displaySize.width}
136
+ image={imageUri}
137
+ rectangleCoordinates={getInitialRectangle()}
138
+ overlayColor={overlayColor}
139
+ overlayStrokeColor={overlayStrokeColor}
140
+ handlerColor={handlerColor}
141
+ enablePanStrict={enablePanStrict}
142
+ onDragEnd={handleDragEnd}
143
+ />
144
+ )}
128
145
  </View>
129
146
  );
130
147
  };
@@ -135,9 +152,32 @@ const styles = StyleSheet.create({
135
152
  backgroundColor: '#000',
136
153
  },
137
154
  loadingContainer: {
155
+ flex: 1,
138
156
  justifyContent: 'center',
139
157
  alignItems: 'center',
140
158
  },
159
+ loadingText: {
160
+ color: '#fff',
161
+ marginTop: 16,
162
+ fontSize: 16,
163
+ },
164
+ errorContainer: {
165
+ flex: 1,
166
+ justifyContent: 'center',
167
+ alignItems: 'center',
168
+ padding: 20,
169
+ },
170
+ errorText: {
171
+ color: '#ff4444',
172
+ fontSize: 18,
173
+ fontWeight: 'bold',
174
+ marginBottom: 10,
175
+ },
176
+ errorPath: {
177
+ color: '#999',
178
+ fontSize: 12,
179
+ textAlign: 'center',
180
+ },
141
181
  hiddenImage: {
142
182
  width: 1,
143
183
  height: 1,