fix: loadl ogic

mym0404 · May 3, 2024 · 9a131cf · 9a131cf
1 parent 97cf69c
commit 9a131cf
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 19 deletions.
diff --git 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<PencilKitRef>(null);
 
@@ -16,16 +40,16 @@ export default function App() {
         alwaysBounceVertical={false}
         alwaysBounceHorizontal={false}
         drawingPolicy={'anyinput'}
-        backgroundColor={'blue'}
+        backgroundColor={'#aaaaff22'}
       />
       <View
         style={{
-          height: 300,
           flexDirection: 'row',
           alignItems: 'center',
           flexWrap: 'wrap',
           gap: 4,
           padding: 8,
+          paddingBottom: 120,
         }}
       >
         <Btn onPress={() => ref.current?.showToolPicker()} text={'show'} />
@@ -37,16 +61,32 @@ export default function App() {
         <Btn onPress={() => ref.current?.loadDrawing(path)} text={'load'} />
         <Btn onPress={() => ref.current?.getBase64Data()} text={'get base64'} />
         <Btn onPress={() => ref.current?.loadBase64Data('')} text={'load base64'} />
-        <Btn
-          onPress={() =>
-            ref.current?.setTool({
-              toolType: 'pen',
-              width: 2,
-              color: 'red',
-            })
-          }
-          text={'pen'}
-        />
+        {allPens.map((p) => (
+          <Btn
+            key={p}
+            onPress={() =>
+              ref.current?.setTool({
+                toolType: p,
+                width: 3 + Math.random() * 5,
+                color: getRandomColor(),
+              })
+            }
+            text={p}
+          />
+        ))}
+        {allErasers.map((p) => (
+          <Btn
+            key={p}
+            onPress={() =>
+              ref.current?.setTool({
+                toolType: p,
+                width: 3 + Math.random() * 5,
+                color: getRandomColor(),
+              })
+            }
+            text={p}
+          />
+        ))}
       </View>
     </View>
   );

diff --git 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
@@ -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,
-        );
-      },
+        ),
     }),
     [],
   );