@archireport/react-native-svg-draw 1.0.1 → 1.1.0

package/src/components/DrawWithOptions/CancelSvg.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import Svg, { Path, SvgProps } from 'react-native-svg';
+
+export default function CancelSvg(props: SvgProps) {
+  return (
+    <Svg viewBox="0 0 24 24" {...props}>
+      <Path
+        d="M2 4L2 10L8 10"
+        stroke="#F1F1F5"
+        stroke-width="1.99277"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <Path
+        d="M4.51 15.0004C5.15839 16.8408 6.38734 18.4206 8.01166 19.5018C9.63598 20.583 11.5677 21.107 13.5157 20.9949C15.4637 20.8828 17.3226 20.1406 18.8121 18.8802C20.3017 17.6198 21.3413 15.9094 21.7742 14.0068C22.2072 12.1042 22.0101 10.1124 21.2126 8.33154C20.4152 6.55068 19.0605 5.07723 17.3528 4.1332C15.6451 3.18917 13.6769 2.8257 11.7447 3.09755C9.81245 3.36941 8.02091 4.26186 6.64 5.64044L2 10.0004"
+        stroke="#F1F1F5"
+        stroke-width="1.99277"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </Svg>
+  );
+}

package/src/components/DrawWithOptions/PenSvg.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import Svg, { Path, SvgProps } from 'react-native-svg';
+
+export default function PenSvg(props: SvgProps) {
+  return (
+    <Svg viewBox="0 0 22 23" {...props}>
+      <Path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M16.1298 2.09927C16.3947 1.83435 16.7092 1.62421 17.0553 1.48084C17.4015 1.33746 17.7725 1.26367 18.1471 1.26367C18.5217 1.26367 18.8927 1.33746 19.2389 1.48084C19.585 1.62421 19.8995 1.83435 20.1644 2.09927C20.4293 2.36418 20.6395 2.67869 20.7828 3.02482C20.9262 3.37094 21 3.74192 21 4.11657C21 4.49122 20.9262 4.8622 20.7828 5.20833C20.6395 5.55446 20.4293 5.86896 20.1644 6.13388L6.54759 19.7507L1 21.2637L2.51298 15.7161L16.1298 2.09927Z"
+      />
+    </Svg>
+  );
+}

package/src/components/DrawWithOptions/index.tsx

@@ -10,6 +10,7 @@ import {
 } from 'react-native';
 import DrawCore from '../DrawCore';
 import type { DrawItemType, DrawCoreProps } from '../../types';
+import PenSvg from './PenSvg';
 import DoubleHeadSvg from './DoubleHeadSvg';
 import CircleSvg from './CircleSvg';
 import SquareSvg from './SquareSvg';
@@ -18,6 +19,7 @@ import TextSvg from './TextSvg';
 import CloseSvg from './CloseSvg';
 import ThrashSvg from './ThrashSvg';
 import SendSvg from './SendSvg';
+import CancelSvg from './CancelSvg';
 
 const styles = StyleSheet.create({
   container: { flex: 1, backgroundColor: '#000000' },
@@ -76,6 +78,8 @@ export default function DrawWithOptions({
 
   const [selectedItem, setSelectedItem] = useState(false);
 
+  const [cancelEnabled, setCancelEnabled] = useState(false);
+
   const onPressSend = useCallback(() => {
     if (drawRef.current) {
       takeSnapshot?.(drawRef.current.takeSnapshot());
@@ -110,6 +114,20 @@ export default function DrawWithOptions({
           <CloseSvg height={20} width={20} fill="#ffffff" />
         </Pressable>
         <View style={styles.drawOptions}>
+          <Pressable
+            style={styles.option}
+            onPress={() => {
+              setDrawingMode('pen');
+            }}
+          >
+            <PenSvg
+              height={23}
+              width={22}
+              stroke="#ffffff"
+              strokeWidth="2"
+              opacity={drawingMode === 'pen' ? 1 : 0.5}
+            />
+          </Pressable>
           <Pressable
             style={styles.option}
             onPress={() => {
@@ -184,6 +202,7 @@ export default function DrawWithOptions({
         image={image}
         linearGradient={linearGradient}
         onSelectionChange={setSelectedItem}
+        onCancelChange={setCancelEnabled}
       />
 
       {showToolbar ? (
@@ -198,6 +217,21 @@ export default function DrawWithOptions({
               <ThrashSvg width={28} height={28} fill="white" />
             </Pressable>
           ) : null}
+          {cancelEnabled ? (
+            <Pressable
+              style={styles.option}
+              onPress={() => {
+                drawRef.current?.cancelLastAction();
+              }}
+            >
+              <CancelSvg
+                width={27}
+                height={27}
+                stroke="#ffffff"
+                strokeWidth={2}
+              />
+            </Pressable>
+          ) : null}
           <Pressable style={styles.sendButton} onPress={onPressSend}>
             <SendSvg fill="#fff" width={20} height={20} />
           </Pressable>

package/src/types.d.ts

@@ -9,7 +9,9 @@ import {
 
 export type Point = { x: number; y: number };
 
-export type hslColor = `hsl(${number}, ${number}%, ${number}%)`;
+export type hslColor = `hsl(${number}, ${number | string}%, ${
+  | number
+  | string}%)`;
 
 type Size = { width: number; height: number };
 
@@ -27,5 +29,6 @@ export type DrawItemType = DrawItem['type'];
 export type DrawCoreProps = {
   drawingContainer: React.Ref<View>;
   deleteSelectedItem: () => void;
+  cancelLastAction: () => void;
   takeSnapshot: () => Promise<string | undefined>;
 };