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

package/src/components/DrawCore/DrawPad.tsx

@@ -27,11 +27,11 @@ const DrawPad = ({
           <Circle
             id="selectionIndicator"
             fill="#3a6cff"
-            r={5}
+            r={10}
             cx={0}
             cy={0}
             strokeWidth={1}
-            stroke="white"
+            stroke="black"
           />
           <Marker
             id="arrowhead"
@@ -47,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"
@@ -78,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,
     ]
   );
 

package/src/components/DrawCore/Item.tsx

@@ -1,16 +1,24 @@
 import React from 'react';
 import { View, Text, StyleSheet } from 'react-native';
-import { G, Line, Ellipse, Rect, Path, ForeignObject } from 'react-native-svg';
+import {
+  G,
+  Line,
+  Ellipse,
+  Rect,
+  Path,
+  ForeignObject,
+  Text as SvgText,
+} from 'react-native-svg';
 import type { DrawItem } from '../../types';
-import { pointsToPath } from './CurrentAnimatedItem';
+import { hslToRgb, pointsToPath } from './CurrentAnimatedItem';
 
 const styles = StyleSheet.create({
   textZone: {
     paddingHorizontal: 10,
   },
   textContainer: {
-    backgroundColor: 'rgba(0, 0, 0, 0.6)',
-    borderRadius: 10,
+    //backgroundColor: 'rgba(0, 0, 0, 0.6)',
+    //borderRadius: 10,
     paddingVertical: 13,
     paddingHorizontal: 18,
   },
@@ -19,6 +27,139 @@ const styles = StyleSheet.create({
   },
 });
 
+export const distance = (x1: number, y1: number, x2: number, y2: number) => {
+  return Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1));
+};
+
+export const getGetcoordinateValue = ({
+  x1,
+  y1,
+  x2,
+  y2,
+  first = true,
+  text = '',
+}: {
+  x1: number;
+  y1: number;
+  x2: number;
+  y2: number;
+  first: boolean;
+  text: string;
+}) => {
+  const dist = distance(x1, y1, x2, y2);
+  const textLength = text && text.length > 5 ? text.length * 10 : 50;
+  //const isShortArrow = textLength > dist;
+  const newDist = (!textLength ? dist : dist - textLength) / 2;
+
+  const ratio = newDist / dist;
+  let newX1 = x1;
+  let newY1 = y1;
+  let newX2 = x2;
+  let newY2 = y2;
+
+  if (newDist > 10) {
+    [newX1, newX2] = getCoordinatesWithRatio({
+      c1: x1,
+      c2: x2,
+      ratio,
+      first,
+    });
+    [newY1, newY2] = getCoordinatesWithRatio({
+      c1: y1,
+      c2: y2,
+      ratio,
+      first,
+    });
+  }
+  return [newX1, newY1, newX2, newY2];
+};
+
+export const getCoordinatesWithRatio = ({
+  c1,
+  c2,
+  ratio,
+  first = true,
+}: {
+  c1: number;
+  c2: number;
+  ratio: number;
+  first?: boolean;
+}): [number, number] => {
+  let newC1 = c1;
+  let newC2 = c2;
+
+  if (c1 > c2) {
+    if (first) {
+      newC2 = c1 - (c1 - c2) * ratio;
+    } else {
+      newC1 = c2 + (c1 - c2) * ratio;
+    }
+  } else {
+    if (first) {
+      newC2 = c1 + (c2 - c1) * ratio;
+    } else {
+      newC1 = c2 - (c2 - c1) * ratio;
+    }
+  }
+
+  return [newC1 as number, newC2 as number];
+};
+
+export const doubleArrowsProps = (item: DrawItem, first: boolean) => {
+  const coordinates =
+    item.type === 'doubleArrows'
+      ? item.data
+      : { x1: -10, y1: -10, x2: -10, y2: -10 };
+
+  const [x1, y1, x2, y2] = getGetcoordinateValue({
+    x1: Number(coordinates.x1),
+    y1: Number(coordinates.y1),
+    x2: Number(coordinates.x2),
+    y2: Number(coordinates.y2),
+    first: first,
+    text: item.type === 'doubleArrows' && item.text ? item.text : '',
+  });
+  return {
+    x1: String(x1),
+    y1: String(y1),
+    x2: String(x2),
+    y2: String(y2),
+  };
+};
+
+export const getTextValues = ({
+  x1,
+  y1,
+  x2,
+  y2,
+}: {
+  x1: number;
+  y1: number;
+  x2: number;
+  y2: number;
+}) => {
+  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];
+};
 export default function Item({
   item,
   onPress,
@@ -29,7 +170,7 @@ export default function Item({
   switch (item.type) {
     case 'singleHead':
       return (
-        <G onPressIn={onPress}>
+        <G onPress={onPress}>
           <Line
             {...item.data}
             fill="none"
@@ -41,7 +182,7 @@ export default function Item({
       );
     case 'doubleHead':
       return (
-        <G onPressIn={onPress}>
+        <G onPress={onPress}>
           <Line
             {...item.data}
             fill="none"
@@ -52,6 +193,45 @@ export default function Item({
           />
         </G>
       );
+    case 'doubleArrows':
+      const [textX, textY, angle] = getTextValues({
+        x1: Number(item.data.x1),
+        y1: Number(item.data.y1),
+        x2: Number(item.data.x2),
+        y2: Number(item.data.y2),
+      });
+      return (
+        <G>
+          <Line
+            {...doubleArrowsProps(item, true)}
+            fill="none"
+            stroke={item.color}
+            strokeWidth={item.strokeWidth}
+            markerStart="url(#arrowheadStart)"
+            onPress={onPress}
+          />
+          <G x={String(textX)} y={String(textY)} rotation={String(angle)}>
+            <SvgText
+              stroke={item.color}
+              fill={item.color}
+              textAnchor="middle"
+              fontSize={item.strokeWidth + 10}
+              onPress={onPress}
+            >
+              {item.text}
+            </SvgText>
+          </G>
+
+          <Line
+            {...doubleArrowsProps(item, false)}
+            fill="none"
+            stroke={item.color}
+            strokeWidth={item.strokeWidth}
+            markerEnd="url(#arrowhead)"
+            onPress={onPress}
+          />
+        </G>
+      );
     case 'ellipse':
       return (
         <Ellipse
@@ -105,7 +285,8 @@ export default function Item({
                   style={[
                     styles.text,
                     {
-                      fontSize: 14 + item.strokeWidth,
+                      fontSize: 10 + item.strokeWidth * 2,
+                      color: item.color ? hslToRgb(item.color) : 'white',
                     },
                   ]}
                 >