diff --git a/example/src/App.tsx b/example/src/App.tsx index 4a79d41..c508356 100644 --- a/example/src/App.tsx +++ b/example/src/App.tsx @@ -1,8 +1,32 @@ import { useRef } from 'react'; import { Text, TouchableOpacity, View } from 'react-native'; -import PencilKitView, { type PencilKitRef } from 'react-native-pencil-kit'; +import PencilKitView, { type PencilKitRef, type PencilKitTool } from 'react-native-pencil-kit'; import { DocumentDirectoryPath } from '@dr.pogodin/react-native-fs'; +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(null); @@ -16,16 +40,16 @@ export default function App() { alwaysBounceVertical={false} alwaysBounceHorizontal={false} drawingPolicy={'anyinput'} - backgroundColor={'blue'} + backgroundColor={'#aaaaff22'} /> ref.current?.showToolPicker()} text={'show'} /> @@ -37,16 +61,32 @@ export default function App() { ref.current?.loadDrawing(path)} text={'load'} /> ref.current?.getBase64Data()} text={'get base64'} /> ref.current?.loadBase64Data('')} text={'load base64'} /> - - ref.current?.setTool({ - toolType: 'pen', - width: 2, - color: 'red', - }) - } - text={'pen'} - /> + {allPens.map((p) => ( + + ref.current?.setTool({ + toolType: p, + width: 3 + Math.random() * 5, + color: getRandomColor(), + }) + } + text={p} + /> + ))} + {allErasers.map((p) => ( + + ref.current?.setTool({ + toolType: p, + width: 3 + Math.random() * 5, + color: getRandomColor(), + }) + } + text={p} + /> + ))} ); diff --git a/ios/RNPencilKit.mm b/ios/RNPencilKit.mm index 10e6837..ef41515 100644 --- a/ios/RNPencilKit.mm +++ b/ios/RNPencilKit.mm @@ -76,7 +76,6 @@ - (void)updateProps:(Props::Shared const&)props oldProps:(Props::Shared const&)o } - (void)clear { - NSLog(@"clear"); [_view setDrawing:[[PKDrawing alloc] init]]; } @@ -145,12 +144,35 @@ - (BOOL)loadWithData:(NSData*)data { if (error || !drawing) { return NO; } else { - [_view setDrawing:drawing]; + PKCanvasView* newCanvas = [self copyCanvas:_view]; + [_view removeFromSuperview]; + _view = newCanvas; + self.contentView = newCanvas; + [_view.undoManager removeAllActions]; + [_view setDrawing:drawing]; return YES; } } +- (PKCanvasView*)copyCanvas:(PKCanvasView*)v { + PKCanvasView* newView = [[PKCanvasView alloc] initWithFrame:v.frame]; + newView.alwaysBounceVertical = v.alwaysBounceVertical; + newView.alwaysBounceHorizontal = v.alwaysBounceHorizontal; + [newView setRulerActive:v.isRulerActive]; + [newView setBackgroundColor:v.backgroundColor]; + [newView setDrawingPolicy:v.drawingPolicy]; + [newView setOpaque:v.isOpaque]; + newView.delegate = self; + [_toolPicker removeObserver:v]; + [_toolPicker addObserver:newView]; + [_toolPicker setVisible:true forFirstResponder:newView]; + if (_toolPicker.isVisible) { + [newView becomeFirstResponder]; + } + return newView; +} + - (void)setTool:(NSString*)toolType width:(double)width color:(NSInteger)color { std::string tool = [toolType UTF8String]; BOOL isWidthValid = width != 0; diff --git a/src/index.tsx b/src/index.tsx index 09d0c25..38a689d 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -77,15 +77,13 @@ function PencilKit( loadDrawing: (path) => Commands.loadDrawing(nativeRef.current!, path), getBase64Data: () => Commands.getBase64Data(nativeRef.current!), loadBase64Data: (base64) => Commands.loadBase64Data(nativeRef.current!, base64), - setTool: ({ color, toolType, width }) => { - console.log(color, processColor(color)); + setTool: ({ color, toolType, width }) => Commands.setTool( nativeRef.current!, toolType, width ?? 0, color ? (processColor(color) as number) : 0, - ); - }, + ), }), [], );