@archireport/react-native-svg-draw 3.1.2 → 3.2.0

package/src/components/DrawCore/CurrentAnimatedText.tsx

@@ -2,8 +2,8 @@ import React, { useState } from 'react';
 import { StyleSheet, View } from 'react-native';
 import Animated, {
   runOnJS,
+  useAnimatedReaction,
   useAnimatedStyle,
-  useDerivedValue,
 } from 'react-native-reanimated';
 import type { DrawItem } from '../../types';
 import { hslToRgb } from './CurrentAnimatedItem';
@@ -49,15 +49,18 @@ export default function CurrentAnimatedText({
   currentItem: Animated.SharedValue<DrawItem | null>;
   onHeightChange: (height: number) => void;
 }) {
-  const [text, setText] = useState(
-    currentItem.value?.type === 'text' ? currentItem.value.text || '' : ''
-  );
+  const [text, setText] = useState('');
 
-  useDerivedValue(() => {
-    runOnJS(setText)(
-      currentItem.value?.type === 'text' ? currentItem.value.text || '' : ''
-    );
-  }, [currentItem.value]);
+  useAnimatedReaction(
+    () => {
+      return currentItem.value?.type === 'text'
+        ? currentItem.value.text || ''
+        : '';
+    },
+    (value) => {
+      runOnJS(setText)(value);
+    }
+  );
 
   const textAnimatedStyle = useAnimatedStyle(() => {
     return {
@@ -66,7 +69,7 @@ export default function CurrentAnimatedText({
         ? hslToRgb(currentItem.value?.color)
         : 'white',
     };
-  }, [currentItem.value?.strokeWidth]);
+  });
 
   const containerStyle = useAnimatedStyle(() => {
     return {
@@ -104,7 +107,7 @@ export default function CurrentAnimatedText({
         },
       ],
     };
-  }, [currentItem.value]);
+  });
 
   return (
     <Animated.View style={containerStyle}>

package/src/components/DrawCore/DrawPad.tsx

@@ -1,7 +1,9 @@
 import React from 'react';
 import type Animated from 'react-native-reanimated';
 import Svg, { Circle, Defs, G, Marker, Polyline, Use } from 'react-native-svg';
-import CurrentAnimatedItem from './CurrentAnimatedItem';
+import CurrentAnimatedItem, {
+  DoubleArrowsTextInput,
+} from './CurrentAnimatedItem';
 import CurrentAnimatedText from './CurrentAnimatedText';
 import Item from './Item';
 import type { DrawItem } from '../../types';
@@ -107,6 +109,7 @@ const DrawPad = ({
         currentItem={currentItem}
         onHeightChange={onTextHeightChange}
       />
+      <DoubleArrowsTextInput />
     </>
   );
 };

package/src/components/DrawCore/index.tsx

@@ -107,7 +107,7 @@ type Context = {
     | 'OUT';
 };
 
-const drawNewItem = (
+function drawNewItem(
   mode: Animated.SharedValue<DrawItemType>,
   currentItem: Animated.SharedValue<DrawItem | null>,
   addDoneItem: (item: DrawItem) => void,
@@ -117,7 +117,7 @@ const drawNewItem = (
     strokeWidth: Animated.SharedValue<number>;
     color: Animated.SharedValue<hslColor>;
   }
-) => {
+) {
   'worklet';
   if (currentItem.value) {
     runOnJS(addDoneItem)(currentItem.value);
@@ -195,13 +195,13 @@ const drawNewItem = (
       };
       break;
   }
-};
+}
 
-const onTextHeightUpdate = (
+function onTextHeightUpdate(
   currentItem: Animated.SharedValue<DrawItem | null>,
   textBaseHeight: Animated.SharedValue<number | null>,
   height: number
-) => {
+) {
   'worklet';
   if (currentItem.value?.type === 'text') {
     textBaseHeight.value = textBaseHeight.value || height;
@@ -217,7 +217,7 @@ const onTextHeightUpdate = (
       text: currentItem.value.text,
     };
   }
-};
+}
 
 const DrawCore = ({
   image,
@@ -593,15 +593,27 @@ const DrawCore = ({
 
           break;
         case 'pen':
-          if (
-            currentItem.value.data.some(
-              (p) =>
-                startX <= p.x + THRESHOLD &&
-                startX >= p.x - THRESHOLD &&
-                startY <= p.y + THRESHOLD &&
-                startY >= p.y - THRESHOLD
-            )
+          let isPointSelected = false;
+          for (
+            let index = 0;
+            index < currentItem.value.data.length;
+            index += 1
           ) {
+            const point = currentItem.value.data[index];
+
+            if (
+              point &&
+              startX <= point.x + THRESHOLD &&
+              startX >= point.x - THRESHOLD &&
+              startY <= point.y + THRESHOLD &&
+              startY >= point.y - THRESHOLD
+            ) {
+              isPointSelected = true;
+              break;
+            }
+          }
+
+          if (isPointSelected) {
             gestureContext.value.zone = 'CENTER';
           } else {
             gestureContext.value.zone = 'OUT';
@@ -611,7 +623,7 @@ const DrawCore = ({
         default:
           gestureContext.value.zone = 'OUT';
           initialItem.value = null;
-          if (drawState.drawingMode === 'text') {
+          if (mode.value === 'text') {
             gestureContext.value.newlyCreated = true;
 
             runOnJS(setTextVal)('');
@@ -658,14 +670,30 @@ const DrawCore = ({
             initialItem.value?.type === currentItem.value.type &&
             zone === 'CENTER'
           ) {
+            const translatedData = [];
+
+            for (
+              let index = 0;
+              index < initialItem.value.data.length;
+              index += 1
+            ) {
+              const point = initialItem.value.data[index];
+
+              if (!point) {
+                continue;
+              }
+
+              translatedData.push({
+                x: point.x + translationX,
+                y: point.y + translationY,
+              });
+            }
+
             currentItem.value = {
               type: 'pen',
               strokeWidth: currentItem.value.strokeWidth,
               color: currentItem.value.color,
-              data: initialItem.value.data.map((p) => ({
-                x: p.x + translationX,
-                y: p.y + translationY,
-              })),
+              data: translatedData,
             };
           } else {
             currentItem.value = {
@@ -1081,6 +1109,30 @@ const DrawCore = ({
       runOnJS(addScreenStates)(currentItem.value);
     });
 
+  const tapGesture = Gesture.Tap()
+    .onStart((event) => {
+      if (mode.value === 'text') {
+        const { x: startX, y: startY } = event;
+
+        runOnJS(setTextVal)('');
+
+        drawNewItem(
+          mode,
+          currentItem,
+          addDoneItem,
+          { x: startX, y: startY },
+          { textBaseHeight, strokeWidth, color }
+        );
+
+        itemIsSelected!.value = true;
+        onCancelChangeWrapper && runOnJS(onCancelChangeWrapper)(true);
+
+        runOnJS(textFocus)();
+      }
+    });
+
+  const composedGesture = Gesture.Race(tapGesture, panGesture);
+
   useEffect(() => {
     const sudDidHide = Keyboard.addListener('keyboardDidHide', () => {
       showTextInput.value = false;
@@ -1140,8 +1192,7 @@ const DrawCore = ({
           };
           break;
       }
-    },
-    [strokeWidth.value, color?.value]
+    }
   );
 
   const onPressItem = useCallback(
@@ -1163,8 +1214,10 @@ const DrawCore = ({
         setTextVal(item.text ?? '');
         textInputRef.current?.focus();
       } else if (item.type === 'doubleArrows') {
-        //setTextVal(item.text ?? '');
-        //textInputRef.current?.focus();
+        doubleArrowTextInput?.current?.setNativeProps({
+          text: item.text ?? '',
+        });
+        doubleArrowTextInput?.current?.focus();
       } else {
         textInputRef.current?.blur();
       }
@@ -1267,7 +1320,6 @@ const DrawCore = ({
 
   const onLayout = useCallback(async () => {
     if (newLayoutRequested) {
-
       const uri = await captureSnapshot();
       if (uri && typeof actionWithSnapShotUri === 'function') {
         await actionWithSnapShotUri(uri);
@@ -1294,7 +1346,7 @@ const DrawCore = ({
         }}
       >
         <KeyboardAvoidingView behavior="position" keyboardVerticalOffset={70}>
-          <GestureDetector gesture={panGesture}>
+          <GestureDetector gesture={composedGesture}>
             <Animated.View
               style={{ ...(imageSize || drawRegion), opacity: opacity }}
               onLayout={onLayout}

package/src/components/DrawCore/useDrawHook.tsx

@@ -50,14 +50,13 @@ const useDrawHook = () => {
   }, [currentItem, dispatchDrawStates, itemIsSelected]);
 
   const onColorStrokeChange = useCallback(() => {
-    'worklet';
     if (currentItem?.value) {
       dispatchDrawStates({
         type: 'ADD_SCREEN_STATE',
         currentItem: currentItem.value,
       });
     }
-  }, [currentItem?.value, dispatchDrawStates]);
+  }, [currentItem, dispatchDrawStates]);
 
   return {
     drawState: drawState!,

package/src/components/DrawWithOptions/index.tsx

@@ -3,11 +3,11 @@ import {
   Pressable,
   View,
   StyleSheet,
-  ViewProps,
   ImageRequireSource,
   ImageURISource,
   Keyboard,
 } from 'react-native';
+import { useAnimatedReaction, runOnJS } from 'react-native-reanimated';
 import DoubleHeadSvg from './DoubleHeadSvg';
 import CircleSvg from './CircleSvg';
 import SquareSvg from './SquareSvg';
@@ -22,6 +22,7 @@ import ThrashSvg from './ThrashSvg';
 import CancelSvg from './CancelSvg';
 import SendSvg from './SendSvg';
 import DrawProvider from '../DrawCore/DrawProvider';
+import type { LinearGradientComponentProps } from '../../types';
 
 const styles = StyleSheet.create({
   container: { flex: 1 },
@@ -73,7 +74,7 @@ const styles = StyleSheet.create({
 });
 
 type DrawWithOptionsProps = {
-  linearGradient: React.ComponentType<{ colors: any[] } & ViewProps>;
+  linearGradient: React.ComponentType<LinearGradientComponentProps>;
   image?: ImageRequireSource | ImageURISource;
   close?: () => void;
   actionWithSnapShotUri?: (uri: string) => Promise<void>;
@@ -97,6 +98,14 @@ function DrawWithOptionsCore({
   } = useDrawHook();
 
   const [showToolbar, setShowToolbar] = useState(true);
+  const [isSelected, setIsSelected] = useState(false);
+
+  useAnimatedReaction(
+    () => itemIsSelected.value,
+    (value) => {
+      runOnJS(setIsSelected)(value);
+    }
+  );
 
   useEffect(() => {
     const sudDidHide = Keyboard.addListener('keyboardDidHide', () => {
@@ -106,7 +115,6 @@ function DrawWithOptionsCore({
     const sudDidShow = Keyboard.addListener(
       'keyboardDidShow',
       (event: { endCoordinates: { height: number } }) => {
-        console.log('keyboardDidShow dwo');
         // avoid events triggered by InputAccessoryView
         if (event.endCoordinates.height > 100) {
           setShowToolbar(false);
@@ -284,7 +292,7 @@ function DrawWithOptionsCore({
       <View style={{ height: 70 }}>
         {showToolbar ? (
           <View style={styles.bottomToolBar}>
-            {itemIsSelected.value ? (
+            {isSelected ? (
               <View style={{ ...styles.actionButton, marginRight: 10 }}>
                 <Pressable style={styles.option} onPress={deleteSelectedItem}>
                   <ThrashSvg

package/src/components/Slider/ColorSlider.tsx

@@ -1,19 +1,15 @@
 import { sliderStyle, TRACK_R } from './sliderStyle';
 import React, { useCallback } from 'react';
-import { LayoutChangeEvent, View, ViewProps } from 'react-native';
+import { LayoutChangeEvent, View } from 'react-native';
 
-import {
-  PanGestureHandler,
-  PanGestureHandlerGestureEvent,
-} from 'react-native-gesture-handler';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import Animated, {
   runOnJS,
-  useAnimatedGestureHandler,
   useAnimatedStyle,
   useDerivedValue,
   useSharedValue,
 } from 'react-native-reanimated';
-import type { LinearGradientType } from '../../types';
+import type { LinearGradientComponentProps } from '../../types';
 import useDrawHook from '../DrawCore/useDrawHook';
 
 const gradientColors = [
@@ -36,10 +32,11 @@ const gradientEnd = { x: 1, y: 0 };
 const ColorSlider = ({
   linearGradient: LinearGradient,
 }: {
-  linearGradient: React.ComponentType<LinearGradientType & ViewProps>;
+  linearGradient: React.ComponentType<LinearGradientComponentProps>;
 }) => {
   const { onColorStrokeChange, color } = useDrawHook();
   const sliderWidth = useSharedValue(0);
+  const gestureStartX = useSharedValue(0);
 
   const position = useDerivedValue(() => {
     const hslRegExp = new RegExp(/hsl\(([\d.]+),\s*(\d+)%,\s*([\d.]+)%\)/);
@@ -65,56 +62,51 @@ const ColorSlider = ({
           tint * ((sliderWidth.value - sliderWidth.value * 0.2) / 360)
       )
     );
-  }, [sliderWidth.value]);
+  });
 
   const wrapperOnColorChange = () => {
     onColorStrokeChange();
   };
 
-  const onGestureEvent = useAnimatedGestureHandler<
-    PanGestureHandlerGestureEvent,
-    { startX: number }
-  >(
-    {
-      onStart: ({ x }, ctx) => {
-        ctx.startX = x;
-      },
-      onActive: ({ translationX }, { startX }) => {
-        const slidePos = Math.min(sliderWidth.value, startX + translationX);
-
-        if (slidePos < 0.1 * sliderWidth.value) {
-          color!.value = `hsl(0, 100%, ${Math.min(
-            100,
-            100 - (slidePos / (0.1 * sliderWidth.value)) * 50
-          ).toFixed(10)}%)`;
-        } else if (slidePos > 0.9 * sliderWidth.value) {
-          color!.value = `hsl(0, 100%, ${Math.max(
-            50 -
-              ((slidePos - 0.9 * sliderWidth.value) /
-                (0.1 * sliderWidth.value)) *
-                50,
-            0
-          ).toFixed(10)}%)`;
-        } else {
-          color!.value = `hsl(${
-            ((slidePos - sliderWidth.value * 0.1) /
-              (sliderWidth.value - sliderWidth.value * 0.2)) *
-            360
-          }, 100%, 50%)`;
-        }
-      },
-      onEnd: () => {
-        runOnJS(wrapperOnColorChange)();
-      },
-    },
-    []
-  );
+  const panGesture = Gesture.Pan()
+    .onStart((event) => {
+      gestureStartX.value = event.x;
+    })
+    .onUpdate((event) => {
+      const slidePos = Math.min(
+        sliderWidth.value,
+        gestureStartX.value + event.translationX
+      );
+
+      if (slidePos < 0.1 * sliderWidth.value) {
+        color!.value = `hsl(0, 100%, ${Math.min(
+          100,
+          100 - (slidePos / (0.1 * sliderWidth.value)) * 50
+        ).toFixed(10)}%)`;
+      } else if (slidePos > 0.9 * sliderWidth.value) {
+        color!.value = `hsl(0, 100%, ${Math.max(
+          50 -
+            ((slidePos - 0.9 * sliderWidth.value) / (0.1 * sliderWidth.value)) *
+              50,
+          0
+        ).toFixed(10)}%)`;
+      } else {
+        color!.value = `hsl(${
+          ((slidePos - sliderWidth.value * 0.1) /
+            (sliderWidth.value - sliderWidth.value * 0.2)) *
+          360
+        }, 100%, 50%)`;
+      }
+    })
+    .onEnd(() => {
+      runOnJS(wrapperOnColorChange)();
+    });
 
   const style = useAnimatedStyle(() => {
     return {
       transform: [{ translateX: position.value - TRACK_R }],
     };
-  }, [position.value]);
+  });
 
   const onLayout = useCallback(
     (event: LayoutChangeEvent) => {
@@ -125,7 +117,7 @@ const ColorSlider = ({
 
   return (
     <View style={sliderStyle.container}>
-      <PanGestureHandler onGestureEvent={onGestureEvent}>
+      <GestureDetector gesture={panGesture}>
         <Animated.View style={sliderStyle.container}>
           <LinearGradient
             start={gradientStart}
@@ -136,7 +128,7 @@ const ColorSlider = ({
           />
           <Animated.View style={[sliderStyle.thumb, style]} />
         </Animated.View>
-      </PanGestureHandler>
+      </GestureDetector>
     </View>
   );
 };

package/src/components/Slider/Sliders.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import { View, ViewProps } from 'react-native';
+import { View } from 'react-native';
 import Animated, { useAnimatedStyle } from 'react-native-reanimated';
 import StrokeSlider from './StrokeSlider';
 import ColorSlider from './ColorSlider';
-import type { LinearGradientType } from '../../types';
+import type { LinearGradientComponentProps } from '../../types';
 import useDrawHook from '../DrawCore/useDrawHook';
 import { StyleSheet } from 'react-native';
 
@@ -46,7 +46,7 @@ const styles = StyleSheet.create({
 const Sliders = ({
   linearGradient,
 }: {
-  linearGradient: React.ComponentType<LinearGradientType & ViewProps>;
+  linearGradient: React.ComponentType<LinearGradientComponentProps>;
 }) => {
   const { strokeWidth, color } = useDrawHook();
 
@@ -55,7 +55,7 @@ const Sliders = ({
       borderWidth: strokeWidth!.value,
       borderColor: color!.value,
     };
-  }, [strokeWidth, color]);
+  });
 
   return (
     <View style={styles.strokeContainer}>

package/src/components/Slider/StrokeSlider.tsx

@@ -1,11 +1,7 @@
 import React from 'react';
-import {
-  PanGestureHandler,
-  PanGestureHandlerGestureEvent,
-} from 'react-native-gesture-handler';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import Animated, {
   runOnJS,
-  useAnimatedGestureHandler,
   useAnimatedStyle,
   useDerivedValue,
   useSharedValue,
@@ -37,6 +33,7 @@ const StrokeSlider = ({
   const { onColorStrokeChange, strokeWidth } = useDrawHook();
 
   const sliderWidth = useSharedValue(0);
+  const gestureStartX = useSharedValue(0);
 
   const position = useDerivedValue(() => {
     return (
@@ -47,41 +44,35 @@ const StrokeSlider = ({
   const wrapperOnColorStrokeChange = () => {
     onColorStrokeChange();
   };
-  const onGestureEvent = useAnimatedGestureHandler<
-    PanGestureHandlerGestureEvent,
-    { startX: number }
-  >(
-    {
-      onStart: ({ x }, ctx) => {
-        ctx.startX = x;
-      },
-      onActive: ({ translationX }, { startX }) => {
-        strokeWidth!.value = Math.min(
-          maxValue,
-          Math.max(
-            minValue,
-            ((startX + translationX) / sliderWidth.value) *
-              (maxValue - minValue) +
-              minValue
-          )
-        );
-      },
-      onEnd: () => {
-        runOnJS(wrapperOnColorStrokeChange)();
-      },
-    },
-    []
-  );
+
+  const panGesture = Gesture.Pan()
+    .onStart((event) => {
+      gestureStartX.value = event.x;
+    })
+    .onUpdate((event) => {
+      strokeWidth!.value = Math.min(
+        maxValue,
+        Math.max(
+          minValue,
+          ((gestureStartX.value + event.translationX) / sliderWidth.value) *
+            (maxValue - minValue) +
+            minValue
+        )
+      );
+    })
+    .onEnd(() => {
+      runOnJS(wrapperOnColorStrokeChange)();
+    });
 
   const style = useAnimatedStyle(() => {
     return {
       transform: [{ translateX: position.value - TRACK_R }],
     };
-  }, [position.value]);
+  });
 
   return (
     <View style={sliderStyle.container}>
-      <PanGestureHandler onGestureEvent={onGestureEvent}>
+      <GestureDetector gesture={panGesture}>
         <Animated.View style={sliderStyle.container}>
           <View
             onLayout={(event) => {
@@ -97,7 +88,7 @@ const StrokeSlider = ({
           </View>
           <Animated.View style={[sliderStyle.thumb, style]} />
         </Animated.View>
-      </PanGestureHandler>
+      </GestureDetector>
     </View>
   );
 };

package/src/types.d.ts

@@ -55,6 +55,11 @@ export type LinearGradientType = {
   end?: { x: number; y: number };
 };
 
+export type LinearGradientComponentProps = LinearGradientType & {
+  style?: any;
+  onLayout?: (...args: any[]) => void;
+};
+
 export type Action =
   | { type: 'ADD_DONE_ITEM'; item: DrawItem }
   | { type: 'DELETE_DONE_ITEM'; indice: number }