Skip to content

Commit

Permalink
docs: update docs
Browse files Browse the repository at this point in the history
  • Loading branch information
@mym0404
mym0404 committed May 3, 2024
1 parent 1f4fb01 commit c1796e6
Show file tree
Hide file tree
Showing 7 changed files with 324 additions and 135 deletions.
232 changes: 116 additions & 116 deletions .github/workflows/ci.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,17 +23,17 @@ jobs:
- name: Typecheck files
run: yarn typecheck

test:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v3

- name: Setup
uses: ./.github/actions/setup

- name: Run unit tests
run: yarn test --maxWorkers=2 --coverage
# test:
# runs-on: ubuntu-latest
# steps:
# - name: Checkout
# uses: actions/checkout@v3
#
# - name: Setup
# uses: ./.github/actions/setup
#
# - name: Run unit tests
# run: yarn test --maxWorkers=2 --coverage

build-library:
runs-on: ubuntu-latest
Expand All @@ -47,108 +47,108 @@ jobs:
- name: Build package
run: yarn prepare

build-android:
runs-on: ubuntu-latest
env:
TURBO_CACHE_DIR: .turbo/android
steps:
- name: Checkout
uses: actions/checkout@v3

- name: Setup
uses: ./.github/actions/setup

- name: Cache turborepo for Android
uses: actions/cache@v3
with:
path: ${{ env.TURBO_CACHE_DIR }}
key: ${{ runner.os }}-turborepo-android-${{ hashFiles('yarn.lock') }}
restore-keys: |
${{ runner.os }}-turborepo-android-
- name: Check turborepo cache for Android
run: |
TURBO_CACHE_STATUS=$(node -p "($(yarn turbo run build:android --cache-dir="${{ env.TURBO_CACHE_DIR }}" --dry=json)).tasks.find(t => t.task === 'build:android').cache.status")
if [[ $TURBO_CACHE_STATUS == "HIT" ]]; then
echo "turbo_cache_hit=1" >> $GITHUB_ENV
fi
- name: Install JDK
if: env.turbo_cache_hit != 1
uses: actions/setup-java@v3
with:
distribution: 'zulu'
java-version: '17'

- name: Finalize Android SDK
if: env.turbo_cache_hit != 1
run: |
/bin/bash -c "yes | $ANDROID_HOME/cmdline-tools/latest/bin/sdkmanager --licenses > /dev/null"
- name: Cache Gradle
if: env.turbo_cache_hit != 1
uses: actions/cache@v3
with:
path: |
~/.gradle/wrapper
~/.gradle/caches
key: ${{ runner.os }}-gradle-${{ hashFiles('example/android/gradle/wrapper/gradle-wrapper.properties') }}
restore-keys: |
${{ runner.os }}-gradle-
- name: Build example for Android
env:
JAVA_OPTS: "-XX:MaxHeapSize=6g"
run: |
yarn turbo run build:android --cache-dir="${{ env.TURBO_CACHE_DIR }}"
build-ios:
runs-on: macos-14
env:
TURBO_CACHE_DIR: .turbo/ios
steps:
- name: Checkout
uses: actions/checkout@v3

- name: Setup
uses: ./.github/actions/setup

- name: Cache turborepo for iOS
uses: actions/cache@v3
with:
path: ${{ env.TURBO_CACHE_DIR }}
key: ${{ runner.os }}-turborepo-ios-${{ hashFiles('yarn.lock') }}
restore-keys: |
${{ runner.os }}-turborepo-ios-
- name: Check turborepo cache for iOS
run: |
TURBO_CACHE_STATUS=$(node -p "($(yarn turbo run build:ios --cache-dir="${{ env.TURBO_CACHE_DIR }}" --dry=json)).tasks.find(t => t.task === 'build:ios').cache.status")
if [[ $TURBO_CACHE_STATUS == "HIT" ]]; then
echo "turbo_cache_hit=1" >> $GITHUB_ENV
fi
- name: Cache cocoapods
if: env.turbo_cache_hit != 1
id: cocoapods-cache
uses: actions/cache@v3
with:
path: |
**/ios/Pods
key: ${{ runner.os }}-cocoapods-${{ hashFiles('example/ios/Podfile.lock') }}
restore-keys: |
${{ runner.os }}-cocoapods-
- name: Install cocoapods
if: env.turbo_cache_hit != 1 && steps.cocoapods-cache.outputs.cache-hit != 'true'
run: |
cd example/ios
pod install
env:
NO_FLIPPER: 1

- name: Build example for iOS
run: |
yarn turbo run build:ios --cache-dir="${{ env.TURBO_CACHE_DIR }}"
# build-android:
# runs-on: ubuntu-latest
# env:
# TURBO_CACHE_DIR: .turbo/android
# steps:
# - name: Checkout
# uses: actions/checkout@v3
#
# - name: Setup
# uses: ./.github/actions/setup
#
# - name: Cache turborepo for Android
# uses: actions/cache@v3
# with:
# path: ${{ env.TURBO_CACHE_DIR }}
# key: ${{ runner.os }}-turborepo-android-${{ hashFiles('yarn.lock') }}
# restore-keys: |
# ${{ runner.os }}-turborepo-android-
#
# - name: Check turborepo cache for Android
# run: |
# TURBO_CACHE_STATUS=$(node -p "($(yarn turbo run build:android --cache-dir="${{ env.TURBO_CACHE_DIR }}" --dry=json)).tasks.find(t => t.task === 'build:android').cache.status")
#
# if [[ $TURBO_CACHE_STATUS == "HIT" ]]; then
# echo "turbo_cache_hit=1" >> $GITHUB_ENV
# fi
#
# - name: Install JDK
# if: env.turbo_cache_hit != 1
# uses: actions/setup-java@v3
# with:
# distribution: 'zulu'
# java-version: '17'
#
# - name: Finalize Android SDK
# if: env.turbo_cache_hit != 1
# run: |
# /bin/bash -c "yes | $ANDROID_HOME/cmdline-tools/latest/bin/sdkmanager --licenses > /dev/null"
#
# - name: Cache Gradle
# if: env.turbo_cache_hit != 1
# uses: actions/cache@v3
# with:
# path: |
# ~/.gradle/wrapper
# ~/.gradle/caches
# key: ${{ runner.os }}-gradle-${{ hashFiles('example/android/gradle/wrapper/gradle-wrapper.properties') }}
# restore-keys: |
# ${{ runner.os }}-gradle-
#
# - name: Build example for Android
# env:
# JAVA_OPTS: "-XX:MaxHeapSize=6g"
# run: |
# yarn turbo run build:android --cache-dir="${{ env.TURBO_CACHE_DIR }}"

# build-ios:
# runs-on: macos-14
# env:
# TURBO_CACHE_DIR: .turbo/ios
# steps:
# - name: Checkout
# uses: actions/checkout@v3
#
# - name: Setup
# uses: ./.github/actions/setup
#
# - name: Cache turborepo for iOS
# uses: actions/cache@v3
# with:
# path: ${{ env.TURBO_CACHE_DIR }}
# key: ${{ runner.os }}-turborepo-ios-${{ hashFiles('yarn.lock') }}
# restore-keys: |
# ${{ runner.os }}-turborepo-ios-
#
# - name: Check turborepo cache for iOS
# run: |
# TURBO_CACHE_STATUS=$(node -p "($(yarn turbo run build:ios --cache-dir="${{ env.TURBO_CACHE_DIR }}" --dry=json)).tasks.find(t => t.task === 'build:ios').cache.status")
#
# if [[ $TURBO_CACHE_STATUS == "HIT" ]]; then
# echo "turbo_cache_hit=1" >> $GITHUB_ENV
# fi
#
# - name: Cache cocoapods
# if: env.turbo_cache_hit != 1
# id: cocoapods-cache
# uses: actions/cache@v3
# with:
# path: |
# **/ios/Pods
# key: ${{ runner.os }}-cocoapods-${{ hashFiles('example/ios/Podfile.lock') }}
# restore-keys: |
# ${{ runner.os }}-cocoapods-
#
# - name: Install cocoapods
# if: env.turbo_cache_hit != 1 && steps.cocoapods-cache.outputs.cache-hit != 'true'
# run: |
# cd example/ios
# pod install
# env:
# NO_FLIPPER: 1
#
# - name: Build example for iOS
# run: |
# yarn turbo run build:ios --cache-dir="${{ env.TURBO_CACHE_DIR }}"
124 changes: 112 additions & 12 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,106 @@ import PencilKitView, { type PencilKitRef, type PencilKitTool } from 'react-nati
<PencilKitView style={{ flex: 1 }} />
```

> [!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>

## Props

| Props | Description | Default |
Expand All @@ -55,18 +155,18 @@ import PencilKitView, { type PencilKitRef, type PencilKitTool } from 'react-nati
## 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) => void; | Save drawing data into file system, can return base 64 data if `withBase64Data` is true |
| loadDrawing: (path: string) => void; | Load drawing data from file system, can return base 64 data if `withBase64Data` is true |
| getBase64Data: () => void; | 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 |
|---------------------------------------------------------------------------------------------|--------------------------------------------------------|
| 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 |

## Tools

Expand Down
4 changes: 2 additions & 2 deletions example/src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,9 +57,9 @@ export default function App() {
<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)} text={'save'} />
<Btn onPress={() => ref.current?.saveDrawing(path).then(console.log)} text={'save'} />
<Btn onPress={() => ref.current?.loadDrawing(path)} text={'load'} />
<Btn onPress={() => ref.current?.getBase64Data()} text={'get base64'} />
<Btn onPress={() => ref.current?.getBase64Data().then(console.log)} text={'get base64'} />
<Btn onPress={() => ref.current?.loadBase64Data('')} text={'load base64'} />
{allPens.map((p) => (
<Btn
Expand Down
Loading

0 comments on commit c1796e6

Please sign in to comment.