From 37e39ce9e3aafdbcd24864c430c9a1e6e52c645c Mon Sep 17 00:00:00 2001
From: mym0404 <mym0404@gmail.com>
Date: Sat, 4 May 2024 16:32:11 +0900
Subject: [PATCH] docs: update docs

---
 README.md | 129 +++++++-----------------------------------------------
 1 file changed, 17 insertions(+), 112 deletions(-)

diff --git a/README.md b/README.md
index 1a65f55..97be0f1 100644
--- a/README.md
+++ b/README.md
@@ -21,9 +21,9 @@
 yarn add react-native-pencil-kit
 ```
 
-Link `PencilKit.framework`
+Link `PencilKit.framework` in the Xcode application project settings
 
-![xcode](https://raw.githubusercontent.com/mym0404/image-archive/master/202405040319998.webp)
+![xcode](https://raw.githubusercontent.com/mym0404/image-archive/master/202405041628753.webp)
 
 > With Fabric, we should access c++ functions and we should use objective-c++.
 > This prevents us from Apple SDK framework module importing and we cannot link PencilKit automatically at now.
@@ -37,104 +37,7 @@ import PencilKitView, { type PencilKitRef, type PencilKitTool } from 'react-nati
 ```
 
 > [!NOTE]
-> You can expand to show full example!
-<details>
-<summary>Full Example</summary>
-
-```tsx
-const allPens = [
-  'pen',
-  'pencil',
-  'marker',
-  'crayon',
-  'monoline',
-  'watercolor',
-  'fountainPen',
-] satisfies PencilKitTool[];
-
-const allErasers = [
-  'eraserBitmap',
-  'eraserVector',
-  'eraserFixedWidthBitmap',
-] satisfies PencilKitTool[];
-
-function getRandomColor() {
-  const r = Math.floor(Math.random() * 256);
-  const g = Math.floor(Math.random() * 256);
-  const b = Math.floor(Math.random() * 256);
-
-  return 'rgb(' + r + ',' + g + ',' + b + ')';
-}
-
-export default function App() {
-  const ref = useRef<PencilKitRef>(null);
-
-  const path = `${DocumentDirectoryPath}/drawing.dat`;
-
-  return (
-    <View style={{ width: '100%', height: '100%' }}>
-      <PencilKitView
-        ref={ref}
-        style={{ flex: 1 }}
-        alwaysBounceVertical={false}
-        alwaysBounceHorizontal={false}
-        drawingPolicy={'anyinput'}
-        backgroundColor={'#aaaaff22'}
-      />
-      <View
-        style={{
-          flexDirection: 'row',
-          alignItems: 'center',
-          flexWrap: 'wrap',
-          gap: 4,
-          padding: 8,
-          paddingBottom: 120,
-        }}
-      >
-        <Btn onPress={() => ref.current?.showToolPicker()} text={'show'} />
-        <Btn onPress={() => ref.current?.hideToolPicker()} text={'hide'} />
-        <Btn onPress={() => ref.current?.clear()} text={'clear'} />
-        <Btn onPress={() => ref.current?.undo()} text={'undo'} />
-        <Btn onPress={() => ref.current?.redo()} text={'redo'} />
-        <Btn onPress={() => ref.current?.saveDrawing(path).then(console.log)} text={'save'} />
-        <Btn onPress={() => ref.current?.loadDrawing(path)} text={'load'} />
-        <Btn onPress={() => ref.current?.getBase64Data().then(console.log)} text={'get base64'} />
-        <Btn onPress={() => ref.current?.loadBase64Data('')} text={'load base64'} />
-        {allPens.map((p) => (
-          <Btn
-            key={p}
-            variant={1}
-            onPress={() =>
-              ref.current?.setTool({
-                toolType: p,
-                width: 3 + Math.random() * 5,
-                color: getRandomColor(),
-              })
-            }
-            text={p}
-          />
-        ))}
-        {allErasers.map((p) => (
-          <Btn
-            variant={2}
-            key={p}
-            onPress={() =>
-              ref.current?.setTool({
-                toolType: p,
-                width: 3 + Math.random() * 5,
-                color: getRandomColor(),
-              })
-            }
-            text={p}
-          />
-        ))}
-      </View>
-    </View>
-  );
-}
-```
-
-</details>
+> You can explorer full example! [Full Example](https://github.com/mym0404/react-native-pencil-kit/blob/main/example/src/App.tsx)
 
 ## Props
 
@@ -158,18 +61,20 @@ export default function App() {
 ## Commands
 
 
-| Method                                                                                      | Description                                            |
-|---------------------------------------------------------------------------------------------|--------------------------------------------------------|
-| clear()                                                                                     | Clear canvas                                           |
-| showToolPicker()                                                                            | Show Palette                                           |
-| hideToolPicker()                                                                            | Hide Palette                                           |
-| redo()                                                                                      | Redo last drawing action                               |
-| undo()                                                                                      | Undo last drawing action                               |
-| saveDrawing: (path: string) => Promise<string>;                                             | Save drawing data into file system, return base64 data |
-| loadDrawing: (path: string) => void;                                                        | Load drawing data from file system                     |
-| getBase64Data: () => Promise<string>;                                                       | Get current drawing data as base64 string form         |
-| loadBase64Data: (base64: string) => void;                                                   | Load base64 drawing data into canvas                   |
-| setTool: (params: { toolType: PencilKitTool; width?: number; color?: ColorValue }) => void; | Set `PencilKitTool` type with width and color          |
+| Method                                                                                   | Description                                            | Etc                                                                                |
+|------------------------------------------------------------------------------------------|--------------------------------------------------------|------------------------------------------------------------------------------------|
+| `clear(): void`                                                                          | Clear canvas                                           |                                                                                    |
+| `showToolPicker(): void`                                                                 | Show Palette                                           |                                                                                    |
+| `hideToolPicker(): void`                                                                 | Hide Palette                                           |                                                                                    |
+| `redo(): void`                                                                           | Redo last drawing action                               |                                                                                    |
+| `undo(): void`                                                                           | Undo last drawing action                               |                                                                                    |
+| `saveDrawing(path: string): Promise<string>`                                             | Save drawing data into file system, return base64 data |                                                                                    |
+| `getBase64Data(): Promise<string>`                                                       | Get current drawing data as base64 string form         |                                                                                    |
+| `getBase64PngData(options: { scale?: number }): Promise<string>`                         | Get current drawing data as base64 png  form           | `scale = 0` means use default `UIScreen.main.scale`                                |
+| `getBase64JpegData(options: { scale?: number; compression?: number }): Promise<string>`  | Get current drawing data as base64 jpeg  form          | `scale = 0` means use default `UIScreen.main.scale`. default compression is `0.93` |
+| `loadDrawing(path: string): Promise<void>`                                               | Load drawing data from file system                     |                                                                                    |
+| `loadBase64Data(base64: string): Promise<void>`                                          | Load base64 drawing data into canvas                   | Use base64 get from `getBase64Data()`                                              |
+| `setTool(params: { toolType: PencilKitTool; width?: number; color?: ColorValue }): void` | Set `PencilKitTool` type with width and color          |                                                                                    |
 
 ## Tools