@archireport/react-native-svg-draw 2.2.0 → 2.3.0

package/src/components/DrawCore/CurrentAnimatedItem.tsx

@@ -2,10 +2,16 @@ import React from 'react';
 import Animated, {
   createAnimatedPropAdapter,
   processColor,
+  runOnJS,
   useAnimatedProps,
+  useAnimatedReaction,
 } from 'react-native-reanimated';
 import { Path, Ellipse, Rect, Line, G } from 'react-native-svg';
-import type { DrawItem, hslColor, Point } from '../../types';
+import type { hslColor, Point } from '../../types';
+import { TextInput } from 'react-native';
+import useDrawHook from './useDrawHook';
+
+//import { TextInput } from 'react-native-gesture-handler';
 
 const AnimatedPath = Animated.createAnimatedComponent(Path);
 
@@ -15,6 +21,10 @@ const AnimatedRectangle = Animated.createAnimatedComponent(Rect);
 
 const AnimatedLine = Animated.createAnimatedComponent(Line);
 
+//const AnimatedText = Animated.createAnimatedComponent(Text);
+
+const AnimatedTextInput = Animated.createAnimatedComponent(TextInput);
+
 // properties of a line
 const line = (pointA: Point, pointB: Point) => {
   'worklet';
@@ -109,7 +119,7 @@ function hue2rgb(p: number, q: number, t: number) {
 }
 
 // see https://github.com/software-mansion/react-native-reanimated/issues/1909
-function hslToRgb(col: hslColor) {
+export function hslToRgb(col: hslColor) {
   'worklet';
   const hslRegExp = new RegExp(/hsl\(([\d.]+),\s*(\d+)%,\s*([\d.]+)%\)/);
   const res = hslRegExp.exec(col);
@@ -153,11 +163,18 @@ const propAdapter = createAnimatedPropAdapter(
   ['fill', 'stroke']
 );
 
-export default function CurrentAnimatedItem({
-  currentItem,
-}: {
-  currentItem: Animated.SharedValue<DrawItem | null>;
-}) {
+export default function CurrentAnimatedItem() {
+  const { currentItem, doubleArrowTextInput } = useDrawHook();
+
+  const getTextLength = () => {
+    'worklet';
+    const text =
+      currentItem.value?.type === 'doubleArrows' ? currentItem.value?.text : '';
+
+    const textLength = text && text.length > 5 ? text.length * 10 : 50;
+    return textLength;
+  };
+
   const ellipseAnimatedProps = useAnimatedProps(
     () => {
       const coordinates =
@@ -235,6 +252,237 @@ export default function CurrentAnimatedItem({
     null,
     propAdapter
   );
+  const distance = (x1: number, y1: number, x2: number, y2: number) => {
+    'worklet';
+    return Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1));
+  };
+
+  const getCoordinatesWithRatio = ({
+    c1,
+    c2,
+    ratio,
+    first = true,
+  }: {
+    c1: number;
+    c2: number;
+    ratio: number;
+    first?: boolean;
+  }): [number, number] => {
+    'worklet';
+    let newC1 = c1;
+    let newC2 = c2;
+
+    if (c1 > c2) {
+      if (first) {
+        newC1 = c1;
+        newC2 = c1 - (c1 - c2) * ratio;
+      } else {
+        newC1 = c2 + (c1 - c2) * ratio;
+        newC2 = c2;
+      }
+    } else {
+      if (first) {
+        newC1 = c1;
+        newC2 = c1 + (c2 - c1) * ratio;
+      } else {
+        newC1 = c2 - (c2 - c1) * ratio;
+        newC2 = c2;
+      }
+    }
+
+    return [newC1 as number, newC2 as number];
+  };
+
+  const getGetcoordinateValue = ({
+    x1,
+    y1,
+    x2,
+    y2,
+    first = true,
+  }: {
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
+    first: boolean;
+  }) => {
+    'worklet';
+    //console.log('*******************');
+    const dist = distance(x1, y1, x2, y2);
+    const textLength = getTextLength();
+    const newDist = (!textLength ? dist : dist - textLength) / 2;
+
+    let newX1 = x1;
+    let newY1 = y1;
+    let newX2 = x2;
+    let newY2 = y2;
+
+    //if (newDist > textLength / 2 && !isShortArrow) {
+    const ratio = newDist / dist;
+    [newX1, newX2] = getCoordinatesWithRatio({
+      c1: x1,
+      c2: x2,
+      ratio,
+      first,
+    });
+    [newY1, newY2] = getCoordinatesWithRatio({
+      c1: y1,
+      c2: y2,
+      ratio,
+      first,
+    });
+    //}
+    return [newX1, newY1, newX2, newY2];
+  };
+
+  const doubleArrowsAnimatedPropsFirst = useAnimatedProps(
+    () => {
+      let x1, y1, x2, y2;
+
+      if (currentItem.value?.type !== 'doubleArrows') {
+        x1 = -10;
+        y1 = -10;
+        x2 = -10;
+        y2 = -10;
+      } else {
+        const coordinates = currentItem.value.data;
+        [x1, y1, x2, y2] = getGetcoordinateValue({
+          x1: Number(coordinates.x1),
+          y1: Number(coordinates.y1),
+          x2: Number(coordinates.x2),
+          y2: Number(coordinates.y2),
+          first: true,
+          //text: currentItem.value?.text,
+        });
+      }
+
+      return {
+        x1,
+        y1,
+        x2,
+        y2,
+        fill: 'transparent',
+        stroke: hslToRgb(currentItem.value?.color || 'hsl(0, 0%, 0%)'),
+        opacity: currentItem.value?.type === 'doubleArrows' ? 1 : 0,
+        strokeWidth:
+          currentItem.value?.type === 'doubleArrows'
+            ? currentItem.value.strokeWidth
+            : 0,
+        markerStart: 'arrowheadStart',
+      };
+    },
+    null,
+    propAdapter
+  );
+
+  const doubleArrowsAnimatedPropsLast = useAnimatedProps(
+    () => {
+      let x1, y1, x2, y2;
+
+      if (currentItem.value?.type !== 'doubleArrows') {
+        x1 = -10;
+        y1 = -10;
+        x2 = -10;
+        y2 = -10;
+      } else {
+        const coordinates = currentItem.value.data;
+        [x1, y1, x2, y2] = getGetcoordinateValue({
+          x1: Number(coordinates.x1),
+          y1: Number(coordinates.y1),
+          x2: Number(coordinates.x2),
+          y2: Number(coordinates.y2),
+          first: false,
+          //text: currentItem.value?.text,
+        });
+      }
+
+      return {
+        x1,
+        y1,
+        x2,
+        y2,
+        fill: 'transparent',
+        stroke: hslToRgb(currentItem.value?.color || 'hsl(0, 0%, 0%)'),
+        opacity: currentItem.value?.type === 'doubleArrows' ? 1 : 0,
+        strokeWidth:
+          currentItem.value?.type === 'doubleArrows'
+            ? currentItem.value.strokeWidth
+            : 0,
+        markerEnd: 'arrowhead',
+      };
+    },
+    null,
+    propAdapter
+  );
+
+  const getTextValues = ({
+    x1,
+    y1,
+    x2,
+    y2,
+  }: {
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
+  }): [number, number, number] => {
+    'worklet';
+    const dist = distance(x1, y1, x2, y2);
+    const ratio = 0.5;
+    const newX = (x1 + x2) * ratio;
+    const newY = (y1 + y2) * ratio;
+
+    let angle = 0;
+    if (x1 > x2) {
+      if (y1 > y2) {
+        angle = Math.acos((x1 - x2) / dist) * (180 / Math.PI);
+      } else {
+        angle = 180 - Math.acos((x1 - x2) / dist) * (180 / Math.PI) + 180;
+      }
+    } else {
+      if (y1 > y2) {
+        angle = 180 - Math.acos((x2 - x1) / dist) * (180 / Math.PI) + 180;
+      } else {
+        angle = Math.acos((x2 - x1) / dist) * (180 / Math.PI);
+      }
+    }
+
+    return [newX, newY, angle];
+  };
+  const doubleArrowsAnimatedPropsText = useAnimatedProps(
+    () => {
+      let x = 0,
+        y = 0,
+        angle = 0;
+
+      if (currentItem.value?.type !== 'doubleArrows') {
+        x = -50;
+        y = -50;
+        angle = 0;
+      } else {
+        const coordinates = currentItem.value.data;
+        [x, y, angle] = getTextValues({
+          x1: Number(coordinates.x1),
+          y1: Number(coordinates.y1),
+          x2: Number(coordinates.x2),
+          y2: Number(coordinates.y2),
+        });
+      }
+
+      return {
+        top: y - 10,
+        left: x - getTextLength() / 2,
+        fontSize: 10 + (currentItem.value?.strokeWidth ?? 0) * 2,
+        color: currentItem.value?.color
+          ? hslToRgb(currentItem.value?.color)
+          : 'white',
+        transform: [{ rotateZ: `${angle}deg` }],
+        width: getTextLength(),
+      };
+    },
+    null,
+    propAdapter
+  );
 
   const rectangleAnimatedProps = useAnimatedProps(
     () => {
@@ -284,6 +532,24 @@ export default function CurrentAnimatedItem({
     propAdapter
   );
 
+  const updateText = (value: string) => {
+    if (!doubleArrowTextInput?.current) return;
+    doubleArrowTextInput.current.setNativeProps({
+      text: value,
+    });
+  };
+  useAnimatedReaction(
+    () => {
+      return currentItem.value?.type === 'doubleArrows'
+        ? currentItem.value?.text || ''
+        : '';
+    },
+    (value) => {
+      if (updateText) runOnJS(updateText)(value);
+    },
+    [updateText, doubleArrowTextInput]
+  );
+
   return (
     <>
       <AnimatedEllipse animatedProps={ellipseAnimatedProps} />
@@ -293,6 +559,40 @@ export default function CurrentAnimatedItem({
       <G markerStart="url(#selection)" markerEnd="url(#selection)">
         <AnimatedLine animatedProps={doubleHeadAnimatedProps} />
       </G>
+      <G markerStart="url(#selection)" markerEnd="url(#selection)">
+        <AnimatedLine animatedProps={doubleArrowsAnimatedPropsFirst} />
+
+        <AnimatedTextInput
+          animatedProps={{
+            ...(doubleArrowsAnimatedPropsText as any), // Type cast to bypass the type error
+            // Ensure other relevant props if needed
+          }}
+          value={
+            currentItem.value?.type === 'doubleArrows'
+              ? currentItem.value.text
+              : ''
+          }
+          ref={doubleArrowTextInput}
+          underlineColorAndroid={'transparent'}
+          onChangeText={(text) => {
+            console.log('onChangeText', text);
+            if (currentItem.value?.type === 'doubleArrows') {
+              currentItem.value = {
+                ...currentItem.value,
+                text,
+              };
+            }
+          }}
+          style={{
+            color: 'black',
+            fontSize: 24,
+            position: 'absolute',
+          }}
+        />
+
+        <AnimatedLine animatedProps={doubleArrowsAnimatedPropsLast} />
+      </G>
+
       <AnimatedRectangle animatedProps={rectangleAnimatedProps} />
       <AnimatedPath animatedProps={penAnimatedProps} />
     </>

package/src/components/DrawCore/CurrentAnimatedText.tsx

@@ -6,6 +6,7 @@ import Animated, {
   useDerivedValue,
 } from 'react-native-reanimated';
 import type { DrawItem } from '../../types';
+import { hslToRgb } from './CurrentAnimatedItem';
 
 const styles = StyleSheet.create({
   textBackground: {
@@ -60,8 +61,10 @@ export default function CurrentAnimatedText({
 
   const textAnimatedStyle = useAnimatedStyle(() => {
     return {
-      fontSize: 16 + (currentItem.value?.strokeWidth ?? 0),
-      color: 'white',
+      fontSize: 10 + (currentItem.value?.strokeWidth ?? 0) * 2,
+      color: currentItem.value?.color
+        ? hslToRgb(currentItem.value?.color)
+        : 'white',
     };
   }, [currentItem.value?.strokeWidth]);
 

package/src/components/DrawCore/DrawContext.tsx

@@ -1,5 +1,6 @@
 import type { DrawItem, hslColor, DrawState, Action } from '../../types';
 import { createContext, RefObject } from 'react';
+import { TextInput } from 'react-native';
 import type { SharedValue } from 'react-native-reanimated';
 import type ViewShot from 'react-native-view-shot';
 
@@ -11,6 +12,7 @@ export const DrawContext = createContext<{
   currentItem?: SharedValue<DrawItem | null>;
   itemIsSelected?: SharedValue<boolean>;
   viewShot?: RefObject<ViewShot>;
+  doubleArrowTextInput?: RefObject<TextInput>;
 }>({
   drawState: {
     doneItems: [],

package/src/components/DrawCore/DrawPad.tsx

@@ -12,24 +12,26 @@ const DrawPad = ({
   doneItems,
   onPressItem,
   onTextHeightChange,
+  addBackground = false,
 }: {
   currentItem: Animated.SharedValue<DrawItem | null>;
   doneItems: Array<DrawItem>;
   onPressItem: (item: DrawItem, index: number) => () => void;
   onTextHeightChange: (height: number) => void;
+  addBackground?: boolean;
 }) => {
   return (
     <>
-      <Svg>
+      <Svg style={addBackground ? { backgroundColor: 'white' } : null}>
         <Defs>
           <Circle
             id="selectionIndicator"
             fill="#3a6cff"
-            r={5}
+            r={10}
             cx={0}
             cy={0}
             strokeWidth={1}
-            stroke="white"
+            stroke="black"
           />
           <Marker
             id="arrowhead"
@@ -45,6 +47,20 @@ const DrawPad = ({
               strokeLinejoin="round"
             />
           </Marker>
+          <Marker
+            id="arrowheadStart"
+            markerUnits={'strokeWidth' as MarkerUnits}
+            refX="0"
+            refY="0"
+            orient="auto"
+          >
+            <Polyline
+              points="2,-2 0,0 2,2 0,0"
+              stroke="context-stroke"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </Marker>
 
           <Marker
             id="side"
@@ -76,7 +92,7 @@ const DrawPad = ({
           <Item key={index} item={item} onPress={onPressItem(item, index)} />
         ))}
 
-        <CurrentAnimatedItem currentItem={currentItem} />
+        <CurrentAnimatedItem />
       </Svg>
       <CurrentAnimatedText
         currentItem={currentItem}

package/src/components/DrawCore/DrawProvider.tsx

@@ -3,6 +3,8 @@ import React, { ReactElement, useMemo, useReducer, useRef } from 'react';
 import type { Action, DrawItem, DrawState, hslColor } from '../../types';
 import { useSharedValue } from 'react-native-reanimated';
 import type ViewShot from 'react-native-view-shot';
+import { Keyboard } from 'react-native';
+import { TextInput } from 'react-native-gesture-handler';
 
 const initialState: DrawState = {
   doneItems: [],
@@ -20,6 +22,7 @@ const reducerDrawStates = (drawState: DrawState, action: Action): DrawState => {
         cancelEnabled: action.cancelEnabled,
       };
     case 'SET_DRAWING_MODE':
+      Keyboard.dismiss();
       return {
         ...drawState,
         drawingMode: action.drawingMode,
@@ -87,6 +90,7 @@ const DrawProvider = ({ children }: { children: ReactElement }) => {
   const color = useSharedValue<hslColor>('hsl(0, 100%, 0%)');
   const currentItem = useSharedValue<DrawItem | null>(null);
   const viewShot = useRef<ViewShot>(null);
+  const doubleArrowTextInput = useRef<TextInput>(null);
 
   const [drawState, dispatchDrawStates] = useReducer(
     reducerDrawStates,
@@ -102,6 +106,7 @@ const DrawProvider = ({ children }: { children: ReactElement }) => {
       currentItem,
       itemIsSelected,
       viewShot,
+      doubleArrowTextInput,
     }),
     [
       drawState,
@@ -111,6 +116,7 @@ const DrawProvider = ({ children }: { children: ReactElement }) => {
       currentItem,
       itemIsSelected,
       viewShot,
+      doubleArrowTextInput,
     ]
   );