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

package/lib/typescript/components/DrawCore/Item.d.ts

@@ -1,5 +1,31 @@
-/// <reference types="react" />
 import type { DrawItem } from '../../types';
+export declare const distance: (x1: number, y1: number, x2: number, y2: number) => number;
+export declare const getGetcoordinateValue: ({ x1, y1, x2, y2, first, text, }: {
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
+    first: boolean;
+    text: string;
+}) => number[];
+export declare const getCoordinatesWithRatio: ({ c1, c2, ratio, first, }: {
+    c1: number;
+    c2: number;
+    ratio: number;
+    first?: boolean | undefined;
+}) => [number, number];
+export declare const doubleArrowsProps: (item: DrawItem, first: boolean) => {
+    x1: string;
+    y1: string;
+    x2: string;
+    y2: string;
+};
+export declare const getTextValues: ({ x1, y1, x2, y2, }: {
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
+}) => number[];
 export default function Item({ item, onPress, }: {
     item: DrawItem;
     onPress: () => void;

package/lib/typescript/components/DrawCore/Item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../../../../src/components/DrawCore/Item.tsx"],"names":[],"mappings":";AAGA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAkB5C,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAC3B,IAAI,EACJ,OAAO,GACR,EAAE;IACD,IAAI,EAAE,QAAQ,CAAC;IACf,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,sBA+FA"}
+{"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../../../../src/components/DrawCore/Item.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAkB5C,eAAO,MAAM,QAAQ,OAAQ,MAAM,MAAM,MAAM,MAAM,MAAM,MAAM,MAAM,WAEtE,CAAC;AAEF,eAAO,MAAM,qBAAqB;QAQ5B,MAAM;QACN,MAAM;QACN,MAAM;QACN,MAAM;WACH,OAAO;UACR,MAAM;cA4Bb,CAAC;AAEF,eAAO,MAAM,uBAAuB;QAM9B,MAAM;QACN,MAAM;WACH,MAAM;;MAEX,CAAC,MAAM,EAAE,MAAM,CAmBlB,CAAC;AAEF,eAAO,MAAM,iBAAiB,SAAU,QAAQ,SAAS,OAAO;;;;;CAoB/D,CAAC;AAEF,eAAO,MAAM,aAAa;QAMpB,MAAM;QACN,MAAM;QACN,MAAM;QACN,MAAM;cAuBX,CAAC;AACF,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAC3B,IAAI,EACJ,OAAO,GACR,EAAE;IACD,IAAI,EAAE,QAAQ,CAAC;IACf,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,sBAuIA"}

package/lib/typescript/components/DrawCore/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ImageRequireSource, ImageURISource } from 'react-native';
 declare const DrawCore: ({ image, backgroundColor, }: {
     image?: number | ImageURISource | undefined;

package/lib/typescript/components/DrawCore/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/DrawCore/index.tsx"],"names":[],"mappings":";AACA,OAAO,EAOL,kBAAkB,EAClB,cAAc,EAGf,MAAM,cAAc,CAAC;AA0MtB,QAAA,MAAM,QAAQ;;;iBAohCb,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/DrawCore/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAOL,kBAAkB,EAClB,cAAc,EAEf,MAAM,cAAc,CAAC;AAsNtB,QAAA,MAAM,QAAQ;;;iBAgoCb,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/lib/typescript/components/DrawCore/useDrawHook.d.ts

@@ -13,6 +13,7 @@ declare const useDrawHook: () => {
     takeSnapshot: () => Promise<string | undefined>;
     viewShot: import("react").RefObject<import("react-native-view-shot").default>;
     deleteSelectedItem: () => void;
+    doubleArrowTextInput: import("react").RefObject<import("react-native/types").TextInput> | undefined;
 };
 export default useDrawHook;
 //# sourceMappingURL=useDrawHook.d.ts.map

package/lib/typescript/components/DrawCore/useDrawHook.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useDrawHook.d.ts","sourceRoot":"","sources":["../../../../src/components/DrawCore/useDrawHook.tsx"],"names":[],"mappings":";;;AAGA,QAAA,MAAM,WAAW;;;;;;;;;;;;CAgEhB,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"useDrawHook.d.ts","sourceRoot":"","sources":["../../../../src/components/DrawCore/useDrawHook.tsx"],"names":[],"mappings":";;;AAGA,QAAA,MAAM,WAAW;;;;;;;;;;;;;CAkEhB,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/typescript/components/DrawWithOptions/ArrowSvg.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { SvgProps } from 'react-native-svg';
 export default function ArrowSvg(props: SvgProps): JSX.Element;
 //# sourceMappingURL=ArrowSvg.d.ts.map

package/lib/typescript/components/DrawWithOptions/ArrowSvg.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ArrowSvg.d.ts","sourceRoot":"","sources":["../../../../src/components/DrawWithOptions/ArrowSvg.tsx"],"names":[],"mappings":";AACA,OAAY,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAAK,EAAE,QAAQ,eAM/C"}
+{"version":3,"file":"ArrowSvg.d.ts","sourceRoot":"","sources":["../../../../src/components/DrawWithOptions/ArrowSvg.tsx"],"names":[],"mappings":"AACA,OAAY,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAAK,EAAE,QAAQ,eAM/C"}

package/lib/typescript/components/DrawWithOptions/CancelSvg.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { SvgProps } from 'react-native-svg';
 export default function CancelSvg(props: SvgProps): JSX.Element;
 //# sourceMappingURL=CancelSvg.d.ts.map

package/lib/typescript/components/DrawWithOptions/CancelSvg.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CancelSvg.d.ts","sourceRoot":"","sources":["../../../../src/components/DrawWithOptions/CancelSvg.tsx"],"names":[],"mappings":";AACA,OAAY,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,KAAK,EAAE,QAAQ,eAmBhD"}
+{"version":3,"file":"CancelSvg.d.ts","sourceRoot":"","sources":["../../../../src/components/DrawWithOptions/CancelSvg.tsx"],"names":[],"mappings":"AACA,OAAY,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,KAAK,EAAE,QAAQ,eAmBhD"}

package/lib/typescript/components/DrawWithOptions/CircleSvg.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { SvgProps } from 'react-native-svg';
 export default function CircleSvg(props: SvgProps): JSX.Element;
 //# sourceMappingURL=CircleSvg.d.ts.map

package/lib/typescript/components/DrawWithOptions/CircleSvg.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CircleSvg.d.ts","sourceRoot":"","sources":["../../../../src/components/DrawWithOptions/CircleSvg.tsx"],"names":[],"mappings":";AACA,OAAY,EAA4B,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE3E,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,KAAK,EAAE,QAAQ,eAoBhD"}
+{"version":3,"file":"CircleSvg.d.ts","sourceRoot":"","sources":["../../../../src/components/DrawWithOptions/CircleSvg.tsx"],"names":[],"mappings":"AACA,OAAY,EAA4B,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE3E,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,KAAK,EAAE,QAAQ,eAoBhD"}

package/lib/typescript/components/DrawWithOptions/CloseSvg.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { SvgProps } from 'react-native-svg';
 export default function CloseSvg(props: SvgProps): JSX.Element;
 //# sourceMappingURL=CloseSvg.d.ts.map

package/lib/typescript/components/DrawWithOptions/CloseSvg.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CloseSvg.d.ts","sourceRoot":"","sources":["../../../../src/components/DrawWithOptions/CloseSvg.tsx"],"names":[],"mappings":";AACA,OAAY,EAAE,QAAQ,EAAQ,MAAM,kBAAkB,CAAC;AAEvD,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAAK,EAAE,QAAQ,eAM/C"}
+{"version":3,"file":"CloseSvg.d.ts","sourceRoot":"","sources":["../../../../src/components/DrawWithOptions/CloseSvg.tsx"],"names":[],"mappings":"AACA,OAAY,EAAE,QAAQ,EAAQ,MAAM,kBAAkB,CAAC;AAEvD,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAAK,EAAE,QAAQ,eAM/C"}

package/lib/typescript/components/DrawWithOptions/DoubleHeadSvg.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { SvgProps } from 'react-native-svg';
 export default function DoubleHeadSvg(props: SvgProps): JSX.Element;
 //# sourceMappingURL=DoubleHeadSvg.d.ts.map

package/lib/typescript/components/DrawWithOptions/DoubleHeadSvg.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DoubleHeadSvg.d.ts","sourceRoot":"","sources":["../../../../src/components/DrawWithOptions/DoubleHeadSvg.tsx"],"names":[],"mappings":";AACA,OAAY,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,KAAK,EAAE,QAAQ,eAMpD"}
+{"version":3,"file":"DoubleHeadSvg.d.ts","sourceRoot":"","sources":["../../../../src/components/DrawWithOptions/DoubleHeadSvg.tsx"],"names":[],"mappings":"AACA,OAAY,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,KAAK,EAAE,QAAQ,eAMpD"}

package/lib/typescript/components/DrawWithOptions/PenSvg.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { SvgProps } from 'react-native-svg';
 export default function PenSvg(props: SvgProps): JSX.Element;
 //# sourceMappingURL=PenSvg.d.ts.map

package/lib/typescript/components/DrawWithOptions/PenSvg.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PenSvg.d.ts","sourceRoot":"","sources":["../../../../src/components/DrawWithOptions/PenSvg.tsx"],"names":[],"mappings":";AACA,OAAY,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,KAAK,EAAE,QAAQ,eAU7C"}
+{"version":3,"file":"PenSvg.d.ts","sourceRoot":"","sources":["../../../../src/components/DrawWithOptions/PenSvg.tsx"],"names":[],"mappings":"AACA,OAAY,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,KAAK,EAAE,QAAQ,eAU7C"}

package/lib/typescript/components/DrawWithOptions/SendSvg.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { SvgProps } from 'react-native-svg';
 declare function SendSvg(props: SvgProps): JSX.Element;
 export default SendSvg;

package/lib/typescript/components/DrawWithOptions/SendSvg.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SendSvg.d.ts","sourceRoot":"","sources":["../../../../src/components/DrawWithOptions/SendSvg.tsx"],"names":[],"mappings":";AACA,OAAY,EAAE,QAAQ,EAAW,MAAM,kBAAkB,CAAC;AAE1D,iBAAS,OAAO,CAAC,KAAK,EAAE,QAAQ,eAQ/B;AAED,eAAe,OAAO,CAAC"}
+{"version":3,"file":"SendSvg.d.ts","sourceRoot":"","sources":["../../../../src/components/DrawWithOptions/SendSvg.tsx"],"names":[],"mappings":"AACA,OAAY,EAAE,QAAQ,EAAW,MAAM,kBAAkB,CAAC;AAE1D,iBAAS,OAAO,CAAC,KAAK,EAAE,QAAQ,eAQ/B;AAED,eAAe,OAAO,CAAC"}

package/lib/typescript/components/DrawWithOptions/SliderSvg.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { SvgProps } from 'react-native-svg';
 declare function SvgSlider(props: SvgProps): JSX.Element;
 export default SvgSlider;

package/lib/typescript/components/DrawWithOptions/SliderSvg.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SliderSvg.d.ts","sourceRoot":"","sources":["../../../../src/components/DrawWithOptions/SliderSvg.tsx"],"names":[],"mappings":";AAEA,OAAY,EAAE,QAAQ,EAAQ,MAAM,kBAAkB,CAAC;AAEvD,iBAAS,SAAS,CAAC,KAAK,EAAE,QAAQ,eAiBjC;AAED,eAAe,SAAS,CAAC"}
+{"version":3,"file":"SliderSvg.d.ts","sourceRoot":"","sources":["../../../../src/components/DrawWithOptions/SliderSvg.tsx"],"names":[],"mappings":"AAEA,OAAY,EAAE,QAAQ,EAAQ,MAAM,kBAAkB,CAAC;AAEvD,iBAAS,SAAS,CAAC,KAAK,EAAE,QAAQ,eAiBjC;AAED,eAAe,SAAS,CAAC"}

package/lib/typescript/components/DrawWithOptions/SquareSvg.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { SvgProps } from 'react-native-svg';
 export default function SquareSvg(props: SvgProps): JSX.Element;
 //# sourceMappingURL=SquareSvg.d.ts.map

package/lib/typescript/components/DrawWithOptions/SquareSvg.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SquareSvg.d.ts","sourceRoot":"","sources":["../../../../src/components/DrawWithOptions/SquareSvg.tsx"],"names":[],"mappings":";AACA,OAAY,EAA4B,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE3E,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,KAAK,EAAE,QAAQ,eAoBhD"}
+{"version":3,"file":"SquareSvg.d.ts","sourceRoot":"","sources":["../../../../src/components/DrawWithOptions/SquareSvg.tsx"],"names":[],"mappings":"AACA,OAAY,EAA4B,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE3E,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,KAAK,EAAE,QAAQ,eAoBhD"}

package/lib/typescript/components/DrawWithOptions/TextSvg.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { SvgProps } from 'react-native-svg';
 declare function SvgComponent(props: SvgProps): JSX.Element;
 export default SvgComponent;

package/lib/typescript/components/DrawWithOptions/TextSvg.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextSvg.d.ts","sourceRoot":"","sources":["../../../../src/components/DrawWithOptions/TextSvg.tsx"],"names":[],"mappings":";AACA,OAAY,EAAE,QAAQ,EAA4B,MAAM,kBAAkB,CAAC;AAE3E,iBAAS,YAAY,CAAC,KAAK,EAAE,QAAQ,eAoBpC;AAED,eAAe,YAAY,CAAC"}
+{"version":3,"file":"TextSvg.d.ts","sourceRoot":"","sources":["../../../../src/components/DrawWithOptions/TextSvg.tsx"],"names":[],"mappings":"AACA,OAAY,EAAE,QAAQ,EAA4B,MAAM,kBAAkB,CAAC;AAE3E,iBAAS,YAAY,CAAC,KAAK,EAAE,QAAQ,eAoBpC;AAED,eAAe,YAAY,CAAC"}

package/lib/typescript/components/DrawWithOptions/ThrashSvg.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { SvgProps } from 'react-native-svg';
 declare function ThrashSvg(props: SvgProps): JSX.Element;
 export default ThrashSvg;

package/lib/typescript/components/DrawWithOptions/ThrashSvg.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThrashSvg.d.ts","sourceRoot":"","sources":["../../../../src/components/DrawWithOptions/ThrashSvg.tsx"],"names":[],"mappings":";AACA,OAAY,EAAE,QAAQ,EAAQ,MAAM,kBAAkB,CAAC;AAEvD,iBAAS,SAAS,CAAC,KAAK,EAAE,QAAQ,eAiCjC;AAED,eAAe,SAAS,CAAC"}
+{"version":3,"file":"ThrashSvg.d.ts","sourceRoot":"","sources":["../../../../src/components/DrawWithOptions/ThrashSvg.tsx"],"names":[],"mappings":"AACA,OAAY,EAAE,QAAQ,EAAQ,MAAM,kBAAkB,CAAC;AAEvD,iBAAS,SAAS,CAAC,KAAK,EAAE,QAAQ,eAiCjC;AAED,eAAe,SAAS,CAAC"}

package/lib/typescript/components/DrawWithOptions/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/DrawWithOptions/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAChE,OAAO,EAIL,SAAS,EACT,kBAAkB,EAClB,cAAc,EAEf,MAAM,cAAc,CAAC;AAiEtB,KAAK,oBAAoB,GAAG;IAC1B,cAAc,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,MAAM,EAAE,GAAG,EAAE,CAAA;KAAE,GAAG,SAAS,CAAC,CAAC;IACnE,KAAK,CAAC,EAAE,kBAAkB,GAAG,cAAc,CAAC;IAC5C,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;IACnB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,CAAC,MAAM,GAAG,SAAS,CAAC,KAAK,IAAI,CAAC;IAC3D,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC;AAgOF,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,KAAK,EAAE,oBAAoB,eAMlE"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/DrawWithOptions/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAChE,OAAO,EAIL,SAAS,EACT,kBAAkB,EAClB,cAAc,EAEf,MAAM,cAAc,CAAC;AAiEtB,KAAK,oBAAoB,GAAG;IAC1B,cAAc,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,MAAM,EAAE,GAAG,EAAE,CAAA;KAAE,GAAG,SAAS,CAAC,CAAC;IACnE,KAAK,CAAC,EAAE,kBAAkB,GAAG,cAAc,CAAC;IAC5C,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;IACnB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,CAAC,MAAM,GAAG,SAAS,CAAC,KAAK,IAAI,CAAC;IAC3D,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC;AAkPF,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,KAAK,EAAE,oBAAoB,eAMlE"}

package/lib/typescript/components/Slider/StrokeSlider.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare const StrokeSlider: ({ minValue, maxValue, }: {
     minValue: number;
     maxValue: number;

package/lib/typescript/components/Slider/StrokeSlider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StrokeSlider.d.ts","sourceRoot":"","sources":["../../../../src/components/Slider/StrokeSlider.tsx"],"names":[],"mappings":";AA6BA,QAAA,MAAM,YAAY;cAIN,MAAM;cACN,MAAM;iBAoEjB,CAAC;AACF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"StrokeSlider.d.ts","sourceRoot":"","sources":["../../../../src/components/Slider/StrokeSlider.tsx"],"names":[],"mappings":"AA6BA,QAAA,MAAM,YAAY;cAIN,MAAM;cACN,MAAM;iBAoEjB,CAAC;AACF,eAAe,YAAY,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@archireport/react-native-svg-draw",
-  "version": "2.2.1",
+  "version": "2.3.0",
   "description": "React Native drawing component based on SVG with editable annotations",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

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: [],