Skip to content

Commit 143b75f

Browse files
iBotPeachesiBotPeaches
authored
chore: cleanup documentation post preloaded lines (#113)
1 parent 5ebfebe commit 143b75f

File tree

1 file changed

+11
-29
lines changed

1 file changed

+11
-29
lines changed

‎README.md‎

Lines changed: 11 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -25,14 +25,14 @@ A React Native component for drawing by touching on both iOS and Android, with T
2525
- Can draw multiple multiline text on canvas
2626
- Support for custom UI components
2727
- Permission handling for Android image saving
28-
- **Initial paths loading with native batch processing for optimal performance**
29-
- **Real-time path loading feedback with onInitialPathsLoaded callback**
28+
- Initial paths loading with native batch processing for optimal performance
29+
- Real-time path loading feedback with onInitialPathsLoaded callback
3030

3131
## Installation
3232

3333
---
3434

35-
Install from `yarn` (only support RN >= 0.40)
35+
Install from `yarn` (RN >= 0.79)
3636

3737
```bash
3838
yarn install @sourcetoad/react-native-sketch-canvas
@@ -101,8 +101,8 @@ AppRegistry.registerComponent('example', () => Example);
101101
| permissionDialogMessage | `string` | Android Only: Provide a Dialog Message for the Image Saving PermissionDialog. Defaults to empty string if not set |
102102
| onGenerateBase64 | `function` | An optional function which accepts 1 argument `result` containing the base64 string of the canvas. Called when `getBase64()` is invoked. |
103103
| onCanvasReady | `function` | An optional function called when the canvas is ready for interaction. |
104-
| initialPaths | `array` | Array of paths to load into the canvas when it becomes ready. Uses native batch processing for optimal performance. Each path should follow the [Path object](#objects) format. |
105-
| onInitialPathsLoaded | `function` | An optional function which accepts 1 argument `eventData`. Called when `initialPaths` have been processed and loaded into the canvas. `eventData` is an object with `{ loadedCount: number }` property containing the number of paths successfully loaded. |
104+
| initialPaths | `array` | Array of paths to load into the canvas when it becomes ready. Uses native batch processing for optimal performance. Each path should follow the [Path object](#objects) format. |
105+
| onInitialPathsLoaded | `function` | An optional function which accepts 1 argument `eventData`. Called when `initialPaths` have been processed and loaded into the canvas. `eventData` is an object with `{ loadedCount: number }` property containing the number of paths successfully loaded. |
106106

107107
#### Methods
108108

@@ -117,7 +117,7 @@ AppRegistry.registerComponent('example', () => Example);
117117
| save(imageType, transparent, folder, filename, includeImage, cropToImageSize) | Save image to camera roll or filesystem. If `localSourceImage` is set and a background image is loaded successfully, set `includeImage` to true to include background image and set `cropToImageSize` to true to crop output image to background image.<br/>Android: Save image in `imageType` format with transparent background (if `transparent` sets to True) to **/sdcard/Pictures/`folder`/`filename`** (which is Environment.DIRECTORY_PICTURES).<br/>iOS: Save image in `imageType` format with transparent background (if `transparent` sets to True) to camera roll or file system. If `folder` and `filename` are set, image will save to **temporary directory/`folder`/`filename`** (which is NSTemporaryDirectory()) |
118118
| getPaths() | Get the paths that drawn on the canvas |
119119
| getBase64(imageType, transparent, includeImage, includeText, cropToImageSize) | Get the base64 string of the canvas. The result will be sent through the `onGenerateBase64` event handler. Parameters:<br/>- `imageType`: "png" or "jpg"<br/>- `transparent`: whether to include transparency<br/>- `includeImage`: whether to include background image<br/>- `includeText`: whether to include text<br/>- `cropToImageSize`: whether to crop to background image size |
120-
| setInitialPaths(initialPaths) | Set initial paths to the canvas using native batch processing. This method is called automatically when the `initialPaths` prop is provided, but can also be called manually for dynamic path loading. |
120+
| setInitialPaths(initialPaths) | Set initial paths to the canvas using native batch processing. This method is called automatically when the `initialPaths` prop is provided, but can also be called manually for dynamic path loading. |
121121

122122
#### Constants
123123

@@ -261,8 +261,8 @@ AppRegistry.registerComponent('example', () => Example);
261261
| savePreference | `function` | A function which is called when saving image and should return an object (see [below](#objects)). |
262262
| onSketchSaved | `function` | See [above](#properties) |
263263
| onCanvasReady | `function` | An optional function called when the canvas is ready for interaction. |
264-
| initialPaths | `array` | Array of paths to load into the canvas when it becomes ready. Uses native batch processing for optimal performance. Each path should follow the [Path object](#objects) format. |
265-
| onInitialPathsLoaded | `function` | An optional function which accepts 1 argument `eventData`. Called when `initialPaths` have been processed and loaded into the canvas. `eventData` is an object with `{ loadedCount: number }` property containing the number of paths successfully loaded. |
264+
| initialPaths | `array` | Array of paths to load into the canvas when it becomes ready. Uses native batch processing for optimal performance. Each path should follow the [Path object](#objects) format. |
265+
| onInitialPathsLoaded | `function` | An optional function which accepts 1 argument `eventData`. Called when `initialPaths` have been processed and loaded into the canvas. `eventData` is an object with `{ loadedCount: number }` property containing the number of paths successfully loaded. |
266266

267267
#### Methods
268268

@@ -291,7 +291,7 @@ AppRegistry.registerComponent('example', () => Example);
291291

292292
---
293293

294-
To use an image as background, `localSourceImage`(see [below](#background-image)) reqires an object, which consists of `filename`, `directory`(optional) and `mode`(optional). <br/>
294+
To use an image as background, `localSourceImage`(see [below](#background-image)) requires an object, which consists of `filename`, `directory`(optional) and `mode`(optional). <br/>
295295
Note: Because native module cannot read the file in JS bundle, file path cannot be relative to JS side. For example, '../assets/image/image.png' will fail to load image.
296296

297297
### Typical Usage
@@ -323,7 +323,7 @@ Note: Because native module cannot read the file in JS bundle, file path cannot
323323

324324
---
325325

326-
The `initialPaths` prop allows you to pre-load paths into the canvas when it becomes ready. This feature uses native batch processing for optimal performance, making it ideal for loading saved sketches or collaborative drawing sessions.
326+
The `initialPaths` prop allows you to preload paths into the canvas when it becomes ready. This feature uses native batch processing for optimal performance, making it ideal for loading saved sketches or collaborative drawing sessions.
327327

328328
### Usage
329329

@@ -368,27 +368,14 @@ export default function Example() {
368368
}
369369
```
370370

371-
### Performance Benefits
372-
373-
- **Batch Processing**: Paths are loaded in a single native operation instead of individual calls
374-
- **Optimized Rendering**: Native layer handles path scaling and coordinate conversion efficiently
375-
- **Memory Efficient**: Reduces JavaScript bridge overhead for large path datasets
376-
377-
### Use Cases
378-
379-
- **Saved Sketches**: Restore previously saved drawings
380-
- **Collaborative Drawing**: Load paths from other users in real-time
381-
- **Template Loading**: Pre-populate canvas with template drawings
382-
- **Undo/Redo**: Efficiently restore canvas state
383-
384371
### Event Handling
385372

386373
The `onInitialPathsLoaded` callback provides feedback when initial paths have been processed:
387374

388375
```tsx
389376
onInitialPathsLoaded={(eventData) => {
390377
const loadedCount = eventData.loadedCount || 0;
391-
378+
392379
if (loadedCount > 0) {
393380
console.log(`Successfully loaded ${loadedCount} paths`);
394381
} else {
@@ -501,11 +488,6 @@ The source code includes 9 examples, using built-in UI components, using with on
501488

502489
Check full example app in the [example](./example) folder
503490

504-
### New Examples
505-
506-
- **Example 8**: API consistency testing for initial paths loading with various edge cases
507-
- **Example 9**: Performance testing suite for large datasets using the new `initialPaths` feature
508-
509491
### Jest Setup
510492

511493
If you're using Jest in your project, you'll need to mock the TurboModule registry. Add the following to your Jest setup file:

0 commit comments

Comments
 (0)