feat: add shouldCancelWhenOutside parameter in Canva.tsx

Motivation: - shouldCancelWhenOutside option which is hardcoded to true - I want have choice, set shouldCancelWhenOutside parameter Modifications: - add shouldCancelWhenOutside parameter in Canvas.tsx Result: user can set shouldCancelWhenOutside parameter BenJeau#64
Kwonkunkun · Apr 26, 2023 · d577c71 · d577c71
1 parent 13ff23f
commit d577c71
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 2 deletions.
diff --git a/packages/react-native-draw/README.md b/packages/react-native-draw/README.md
@@ -206,7 +206,7 @@ https://user-images.githubusercontent.com/22248828/152837922-757d3a13-1d35-409a-
 ### Canvas
 
 | name                    | description                                                                               | type                                           | default                       |
-| ----------------------- | ----------------------------------------------------------------------------------------- | ---------------------------------------------- | ----------------------------- |
+|-------------------------|-------------------------------------------------------------------------------------------| ---------------------------------------------- |-------------------------------|
 | `color`                 | Color of the brush strokes                                                                | `string`                                       | - (required)                  |
 | `thickness`             | Thickness of the brush strokes                                                            | `number`                                       | - (required)                  |
 | `opacity`               | Opacity of the brush strokes                                                              | `number`                                       | - (required)                  |
@@ -220,6 +220,7 @@ https://user-images.githubusercontent.com/22248828/152837922-757d3a13-1d35-409a-
 | `tool`                  | Initial tool of the canvas                                                                | `brush` or `eraser`                            | `brush`                       |
 | `combineWithLatestPath` | Combine current path with the last path if it's the same color, thickness, and opacity    | `boolean`                                      | `false`                       |
 | `enabled`               | Allows for the canvas to be drawn on, put to false if you want to disable/lock the canvas | `boolean`                                      | `true`                        |
+| `shouldCancelWhenOutside`| When true, drawing will cancel if the touch moves outside of the view                    | `boolean`                                      | `false`                       |
 
 ### SimplifyOptions
 

diff --git a/packages/react-native-draw/src/Canvas.tsx b/packages/react-native-draw/src/Canvas.tsx
@@ -110,6 +110,12 @@ export interface CanvasProps {
    * @default true
    */
   enabled?: boolean;
+
+  /**
+   * when true, drawing will cancel the gesture if the touch moves outside of the view
+   * @default false
+   */
+  shouldCancelWhenOutside?: boolean;
 }
 
 export interface SimplifyOptions {
@@ -219,6 +225,7 @@ const Canvas = forwardRef<CanvasRef, CanvasProps>(
       tool = DEFAULT_TOOL,
       combineWithLatestPath = false,
       enabled = true,
+      shouldCancelWhenOutside = false,
     },
     ref
   ) => {
@@ -435,7 +442,7 @@ const Canvas = forwardRef<CanvasRef, CanvasProps>(
         top: 0,
         left: 0,
       })
-      .shouldCancelWhenOutside(true)
+      .shouldCancelWhenOutside(shouldCancelWhenOutside)
       .enabled(enabled);
 
     return (