react-native-rectangle-doc-scanner 0.52.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 +40 -5
  2. package/package.json +1 -1
  3. package/src/CropEditor.tsx +48 -8
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,13 +104,18 @@ const CropEditor = ({ document, overlayColor = 'rgba(0,0,0,0.5)', overlayStrokeC
97
104
  };
98
105
  onCropChange?.(rect);
99
106
  }, [imageSize, onCropChange]);
107
+ const imageUri = `file://${document.path}`;
100
108
  return (react_1.default.createElement(react_native_1.View, { style: styles.container, onLayout: handleLayout },
101
- react_1.default.createElement(react_native_1.Image, { source: { uri: `file://${document.path}` }, style: styles.hiddenImage, onLoad: handleImageLoad, onError: (error) => {
102
- console.error('Image load error:', error);
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');
103
112
  setIsImageLoading(false);
104
113
  }, resizeMode: "contain" }),
105
- !imageSize || isImageLoading ? (react_1.default.createElement(react_native_1.View, { style: styles.loadingContainer },
106
- react_1.default.createElement(react_native_1.ActivityIndicator, { size: "large", color: handlerColor }))) : (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 }))));
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 }))));
107
119
  };
108
120
  exports.CropEditor = CropEditor;
109
121
  const styles = react_native_1.StyleSheet.create({
@@ -112,8 +124,31 @@ const styles = react_native_1.StyleSheet.create({
112
124
  backgroundColor: '#000',
113
125
  },
114
126
  loadingContainer: {
127
+ flex: 1,
128
+ justifyContent: 'center',
129
+ alignItems: 'center',
130
+ },
131
+ loadingText: {
132
+ color: '#fff',
133
+ marginTop: 16,
134
+ fontSize: 16,
135
+ },
136
+ errorContainer: {
137
+ flex: 1,
115
138
  justifyContent: 'center',
116
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',
117
152
  },
118
153
  hiddenImage: {
119
154
  width: 1,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-native-rectangle-doc-scanner",
3
- "version": "0.52.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,30 +101,39 @@ export const CropEditor: React.FC<CropEditorProps> = ({
93
101
  onCropChange?.(rect);
94
102
  }, [imageSize, onCropChange]);
95
103
 
104
+ const imageUri = `file://${document.path}`;
105
+
96
106
  return (
97
107
  <View style={styles.container} onLayout={handleLayout}>
98
108
  {/* Always load the hidden image to get dimensions */}
99
109
  <Image
100
- source={{ uri: `file://${document.path}` }}
110
+ source={{ uri: imageUri }}
101
111
  style={styles.hiddenImage}
102
112
  onLoad={handleImageLoad}
103
113
  onError={(error) => {
104
- console.error('Image load error:', error);
114
+ console.error('[CropEditor] Image load error:', error, 'Path:', imageUri);
115
+ setLoadError('Failed to load image');
105
116
  setIsImageLoading(false);
106
117
  }}
107
118
  resizeMode="contain"
108
119
  />
109
120
 
110
- {/* Show loading or cropper */}
111
- {!imageSize || isImageLoading ? (
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 ? (
112
128
  <View style={styles.loadingContainer}>
113
129
  <ActivityIndicator size="large" color={handlerColor} />
130
+ <Text style={styles.loadingText}>Loading image...</Text>
114
131
  </View>
115
132
  ) : (
116
133
  <CustomImageCropper
117
134
  height={displaySize.height}
118
135
  width={displaySize.width}
119
- image={`file://${document.path}`}
136
+ image={imageUri}
120
137
  rectangleCoordinates={getInitialRectangle()}
121
138
  overlayColor={overlayColor}
122
139
  overlayStrokeColor={overlayStrokeColor}
@@ -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,