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

package/lib/commonjs/components/Slider/ColorSlider.js

@@ -31,6 +31,7 @@ const ColorSlider = _ref => {
     color
   } = (0, _useDrawHook.default)();
   const sliderWidth = (0, _reactNativeReanimated.useSharedValue)(0);
+  const gestureStartX = (0, _reactNativeReanimated.useSharedValue)(0);
   const position = (0, _reactNativeReanimated.useDerivedValue)(() => {
     const hslRegExp = new RegExp(/hsl\(([\d.]+),\s*(\d+)%,\s*([\d.]+)%\)/);
     const res = hslRegExp.exec(color.value);
@@ -43,51 +44,38 @@ const ColorSlider = _ref => {
       return sliderWidth.value - sliderWidth.value * 0.1 / 50 * lum;
     }
     return Math.min(sliderWidth.value, Math.max(0, sliderWidth.value * 0.1 + tint * ((sliderWidth.value - sliderWidth.value * 0.2) / 360)));
-  }, [sliderWidth.value]);
+  });
   const wrapperOnColorChange = () => {
     onColorStrokeChange();
   };
-  const onGestureEvent = (0, _reactNativeReanimated.useAnimatedGestureHandler)({
-    onStart: (_ref2, ctx) => {
-      let {
-        x
-      } = _ref2;
-      ctx.startX = x;
-    },
-    onActive: (_ref3, _ref4) => {
-      let {
-        translationX
-      } = _ref3;
-      let {
-        startX
-      } = _ref4;
-      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: () => {
-      (0, _reactNativeReanimated.runOnJS)(wrapperOnColorChange)();
+  const panGesture = _reactNativeGestureHandler.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(() => {
+    (0, _reactNativeReanimated.runOnJS)(wrapperOnColorChange)();
+  });
   const style = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
     return {
       transform: [{
         translateX: position.value - _sliderStyle.TRACK_R
       }]
     };
-  }, [position.value]);
+  });
   const onLayout = (0, _react.useCallback)(event => {
     sliderWidth.value = event.nativeEvent.layout.width;
   }, [sliderWidth]);
   return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
     style: _sliderStyle.sliderStyle.container
-  }, /*#__PURE__*/_react.default.createElement(_reactNativeGestureHandler.PanGestureHandler, {
-    onGestureEvent: onGestureEvent
+  }, /*#__PURE__*/_react.default.createElement(_reactNativeGestureHandler.GestureDetector, {
+    gesture: panGesture
   }, /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
     style: _sliderStyle.sliderStyle.container
   }, /*#__PURE__*/_react.default.createElement(LinearGradient, {

package/lib/commonjs/components/Slider/ColorSlider.js.map

@@ -1 +1 @@
-{"version":3,"names":["gradientColors","gradientStart","x","y","gradientEnd","ColorSlider","linearGradient","LinearGradient","onColorStrokeChange","color","useDrawHook","sliderWidth","useSharedValue","position","useDerivedValue","hslRegExp","RegExp","res","exec","value","lum","parseFloat","tint","Math","min","max","wrapperOnColorChange","onGestureEvent","useAnimatedGestureHandler","onStart","ctx","startX","onActive","translationX","slidePos","toFixed","onEnd","runOnJS","style","useAnimatedStyle","transform","translateX","TRACK_R","onLayout","useCallback","event","nativeEvent","layout","width","sliderStyle","container","track","thumb"],"sourceRoot":"../../../../src","sources":["components/Slider/ColorSlider.tsx"],"mappings":"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"}
+{"version":3,"names":["gradientColors","gradientStart","x","y","gradientEnd","ColorSlider","linearGradient","LinearGradient","onColorStrokeChange","color","useDrawHook","sliderWidth","useSharedValue","gestureStartX","position","useDerivedValue","hslRegExp","RegExp","res","exec","value","lum","parseFloat","tint","Math","min","max","wrapperOnColorChange","panGesture","Gesture","Pan","onStart","event","onUpdate","slidePos","translationX","toFixed","onEnd","runOnJS","style","useAnimatedStyle","transform","translateX","TRACK_R","onLayout","useCallback","nativeEvent","layout","width","sliderStyle","container","track","thumb"],"sourceRoot":"../../../../src","sources":["components/Slider/ColorSlider.tsx"],"mappings":"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"}

package/lib/commonjs/components/Slider/Sliders.js

@@ -65,7 +65,7 @@ const Sliders = _ref => {
       borderWidth: strokeWidth.value,
       borderColor: color.value
     };
-  }, [strokeWidth, color]);
+  });
   return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
     style: styles.strokeContainer
   }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {

package/lib/commonjs/components/Slider/Sliders.js.map

@@ -1 +1 @@
-{"version":3,"names":["styles","StyleSheet","create","strokeContainer","flexDirection","marginTop","borderColor","borderRadius","height","borderWidth","marginHorizontal","maxWidth","alignSelf","strokeWrapper","flex","justifyContent","currentColorContainer","alignContent","padding","currentColor","width","colorContainer","Sliders","linearGradient","strokeWidth","color","useDrawHook","styleStrokeColor","useAnimatedStyle","value"],"sourceRoot":"../../../../src","sources":["components/Slider/Sliders.tsx"],"mappings":";;;;;;AAAA;AACA;AACA;AACA;AACA;AAEA;AAAkD;AAAA;AAAA;AAGlD,MAAMA,MAAM,GAAGC,uBAAU,CAACC,MAAM,CAAC;EAC/BC,eAAe,EAAE;IACfC,aAAa,EAAE,KAAK;IACpBC,SAAS,EAAE,EAAE;IACbC,WAAW,EAAE,MAAM;IACnBC,YAAY,EAAE,EAAE;IAChBC,MAAM,EAAE,EAAE;IACVC,WAAW,EAAE,CAAC;IACdC,gBAAgB,EAAE,EAAE;IACpBC,QAAQ,EAAE,GAAG;IACbC,SAAS,EAAE;EACb,CAAC;EACDC,aAAa,EAAE;IACbC,IAAI,EAAE,CAAC;IACPN,MAAM,EAAE,EAAE;IACVE,gBAAgB,EAAE,EAAE;IACpBK,cAAc,EAAE;EAClB,CAAC;EACDC,qBAAqB,EAAE;IACrBT,YAAY,EAAE,EAAE;IAChBE,WAAW,EAAE,CAAC;IACdH,WAAW,EAAE,SAAS;IACtBS,cAAc,EAAE,QAAQ;IACxBE,YAAY,EAAE,QAAQ;IACtBL,SAAS,EAAE,QAAQ;IACnBM,OAAO,EAAE;EACX,CAAC;EACDC,YAAY,EAAE;IAAEC,KAAK,EAAE,EAAE;IAAEZ,MAAM,EAAE,EAAE;IAAED,YAAY,EAAE;EAAG,CAAC;EACzDc,cAAc,EAAE;IACdP,IAAI,EAAE,CAAC;IACPN,MAAM,EAAE,EAAE;IACVE,gBAAgB,EAAE,EAAE;IACpBK,cAAc,EAAE;EAClB;AACF,CAAC,CAAC;AAEF,MAAMO,OAAO,GAAG,QAIV;EAAA,IAJW;IACfC;EAGF,CAAC;EACC,MAAM;IAAEC,WAAW;IAAEC;EAAM,CAAC,GAAG,IAAAC,oBAAW,GAAE;EAE5C,MAAMC,gBAAgB,GAAG,IAAAC,uCAAgB,EAAC,MAAM;IAC9C,OAAO;MACLnB,WAAW,EAAEe,WAAW,CAAEK,KAAK;MAC/BvB,WAAW,EAAEmB,KAAK,CAAEI;IACtB,CAAC;EACH,CAAC,EAAE,CAACL,WAAW,EAAEC,KAAK,CAAC,CAAC;EAExB,oBACE,6BAAC,iBAAI;IAAC,KAAK,EAAEzB,MAAM,CAACG;EAAgB,gBAClC,6BAAC,iBAAI;IAAC,KAAK,EAAEH,MAAM,CAACa;EAAc,gBAChC,6BAAC,qBAAY;IAAC,QAAQ,EAAE,CAAE;IAAC,QAAQ,EAAE;EAAG,EAAG,CACtC,eACP,6BAAC,iBAAI;IAAC,KAAK,EAAEb,MAAM,CAACgB;EAAsB,gBACxC,6BAAC,8BAAQ,CAAC,IAAI;IAAC,KAAK,EAAE,CAAChB,MAAM,CAACmB,YAAY,EAAEQ,gBAAgB;EAAE,EAAG,CAC5D,eACP,6BAAC,iBAAI;IAAC,KAAK,EAAE3B,MAAM,CAACqB;EAAe,gBACjC,6BAAC,oBAAW;IAAC,cAAc,EAAEE;EAAe,EAAG,CAC1C,CACF;AAEX,CAAC;AAAC,eAEaD,OAAO;AAAA"}
+{"version":3,"names":["styles","StyleSheet","create","strokeContainer","flexDirection","marginTop","borderColor","borderRadius","height","borderWidth","marginHorizontal","maxWidth","alignSelf","strokeWrapper","flex","justifyContent","currentColorContainer","alignContent","padding","currentColor","width","colorContainer","Sliders","linearGradient","strokeWidth","color","useDrawHook","styleStrokeColor","useAnimatedStyle","value"],"sourceRoot":"../../../../src","sources":["components/Slider/Sliders.tsx"],"mappings":";;;;;;AAAA;AACA;AACA;AACA;AACA;AAEA;AAAkD;AAAA;AAAA;AAGlD,MAAMA,MAAM,GAAGC,uBAAU,CAACC,MAAM,CAAC;EAC/BC,eAAe,EAAE;IACfC,aAAa,EAAE,KAAK;IACpBC,SAAS,EAAE,EAAE;IACbC,WAAW,EAAE,MAAM;IACnBC,YAAY,EAAE,EAAE;IAChBC,MAAM,EAAE,EAAE;IACVC,WAAW,EAAE,CAAC;IACdC,gBAAgB,EAAE,EAAE;IACpBC,QAAQ,EAAE,GAAG;IACbC,SAAS,EAAE;EACb,CAAC;EACDC,aAAa,EAAE;IACbC,IAAI,EAAE,CAAC;IACPN,MAAM,EAAE,EAAE;IACVE,gBAAgB,EAAE,EAAE;IACpBK,cAAc,EAAE;EAClB,CAAC;EACDC,qBAAqB,EAAE;IACrBT,YAAY,EAAE,EAAE;IAChBE,WAAW,EAAE,CAAC;IACdH,WAAW,EAAE,SAAS;IACtBS,cAAc,EAAE,QAAQ;IACxBE,YAAY,EAAE,QAAQ;IACtBL,SAAS,EAAE,QAAQ;IACnBM,OAAO,EAAE;EACX,CAAC;EACDC,YAAY,EAAE;IAAEC,KAAK,EAAE,EAAE;IAAEZ,MAAM,EAAE,EAAE;IAAED,YAAY,EAAE;EAAG,CAAC;EACzDc,cAAc,EAAE;IACdP,IAAI,EAAE,CAAC;IACPN,MAAM,EAAE,EAAE;IACVE,gBAAgB,EAAE,EAAE;IACpBK,cAAc,EAAE;EAClB;AACF,CAAC,CAAC;AAEF,MAAMO,OAAO,GAAG,QAIV;EAAA,IAJW;IACfC;EAGF,CAAC;EACC,MAAM;IAAEC,WAAW;IAAEC;EAAM,CAAC,GAAG,IAAAC,oBAAW,GAAE;EAE5C,MAAMC,gBAAgB,GAAG,IAAAC,uCAAgB,EAAC,MAAM;IAC9C,OAAO;MACLnB,WAAW,EAAEe,WAAW,CAAEK,KAAK;MAC/BvB,WAAW,EAAEmB,KAAK,CAAEI;IACtB,CAAC;EACH,CAAC,CAAC;EAEF,oBACE,6BAAC,iBAAI;IAAC,KAAK,EAAE7B,MAAM,CAACG;EAAgB,gBAClC,6BAAC,iBAAI;IAAC,KAAK,EAAEH,MAAM,CAACa;EAAc,gBAChC,6BAAC,qBAAY;IAAC,QAAQ,EAAE,CAAE;IAAC,QAAQ,EAAE;EAAG,EAAG,CACtC,eACP,6BAAC,iBAAI;IAAC,KAAK,EAAEb,MAAM,CAACgB;EAAsB,gBACxC,6BAAC,8BAAQ,CAAC,IAAI;IAAC,KAAK,EAAE,CAAChB,MAAM,CAACmB,YAAY,EAAEQ,gBAAgB;EAAE,EAAG,CAC5D,eACP,6BAAC,iBAAI;IAAC,KAAK,EAAE3B,MAAM,CAACqB;EAAe,gBACjC,6BAAC,oBAAW;IAAC,cAAc,EAAEE;EAAe,EAAG,CAC1C,CACF;AAEX,CAAC;AAAC,eAEaD,OAAO;AAAA"}

package/lib/commonjs/components/Slider/StrokeSlider.js

@@ -34,43 +34,31 @@ const StrokeSlider = _ref => {
     strokeWidth
   } = (0, _useDrawHook.default)();
   const sliderWidth = (0, _reactNativeReanimated.useSharedValue)(0);
+  const gestureStartX = (0, _reactNativeReanimated.useSharedValue)(0);
   const position = (0, _reactNativeReanimated.useDerivedValue)(() => {
     return sliderWidth.value / (maxValue - minValue) * (strokeWidth.value - minValue);
   });
   const wrapperOnColorStrokeChange = () => {
     onColorStrokeChange();
   };
-  const onGestureEvent = (0, _reactNativeReanimated.useAnimatedGestureHandler)({
-    onStart: (_ref2, ctx) => {
-      let {
-        x
-      } = _ref2;
-      ctx.startX = x;
-    },
-    onActive: (_ref3, _ref4) => {
-      let {
-        translationX
-      } = _ref3;
-      let {
-        startX
-      } = _ref4;
-      strokeWidth.value = Math.min(maxValue, Math.max(minValue, (startX + translationX) / sliderWidth.value * (maxValue - minValue) + minValue));
-    },
-    onEnd: () => {
-      (0, _reactNativeReanimated.runOnJS)(wrapperOnColorStrokeChange)();
-    }
-  }, []);
+  const panGesture = _reactNativeGestureHandler.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(() => {
+    (0, _reactNativeReanimated.runOnJS)(wrapperOnColorStrokeChange)();
+  });
   const style = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
     return {
       transform: [{
         translateX: position.value - _sliderStyle.TRACK_R
       }]
     };
-  }, [position.value]);
+  });
   return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
     style: _sliderStyle.sliderStyle.container
-  }, /*#__PURE__*/_react.default.createElement(_reactNativeGestureHandler.PanGestureHandler, {
-    onGestureEvent: onGestureEvent
+  }, /*#__PURE__*/_react.default.createElement(_reactNativeGestureHandler.GestureDetector, {
+    gesture: panGesture
   }, /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
     style: _sliderStyle.sliderStyle.container
   }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {

package/lib/commonjs/components/Slider/StrokeSlider.js.map

@@ -1 +1 @@
-{"version":3,"names":["styles","StyleSheet","create","container","height","width","justifyContent","sliderBackground","maxHeight","StrokeSlider","minValue","maxValue","onColorStrokeChange","strokeWidth","useDrawHook","sliderWidth","useSharedValue","position","useDerivedValue","value","wrapperOnColorStrokeChange","onGestureEvent","useAnimatedGestureHandler","onStart","ctx","x","startX","onActive","translationX","Math","min","max","onEnd","runOnJS","style","useAnimatedStyle","transform","translateX","TRACK_R","sliderStyle","event","nativeEvent","layout","thumb"],"sourceRoot":"../../../../src","sources":["components/Slider/StrokeSlider.tsx"],"mappings":";;;;;;AAAA;AACA;AAIA;AAOA;AACA;AACA;AACA;AAAqD;AAAA;AAAA;AAGrD,MAAMA,MAAM,GAAGC,uBAAU,CAACC,MAAM,CAAC;EAC/BC,SAAS,EAAE;IACTC,MAAM,EAAE,EAAE;IACVC,KAAK,EAAE,MAAM;IACbC,cAAc,EAAE;EAClB,CAAC;EACDC,gBAAgB,EAAE;IAChBC,SAAS,EAAE;EACb;AACF,CAAC,CAAC;AAEF,MAAMC,YAAY,GAAG,QAMf;EAAA,IANgB;IACpBC,QAAQ;IACRC;EAIF,CAAC;EACC,MAAM;IAAEC,mBAAmB;IAAEC;EAAY,CAAC,GAAG,IAAAC,oBAAW,GAAE;EAE1D,MAAMC,WAAW,GAAG,IAAAC,qCAAc,EAAC,CAAC,CAAC;EAErC,MAAMC,QAAQ,GAAG,IAAAC,sCAAe,EAAC,MAAM;IACrC,OACGH,WAAW,CAACI,KAAK,IAAIR,QAAQ,GAAGD,QAAQ,CAAC,IACzCG,WAAW,CAAEM,KAAK,GAAGT,QAAQ,CAAC;EAEnC,CAAC,CAAC;EACF,MAAMU,0BAA0B,GAAG,MAAM;IACvCR,mBAAmB,EAAE;EACvB,CAAC;EACD,MAAMS,cAAc,GAAG,IAAAC,gDAAyB,EAI9C;IACEC,OAAO,EAAE,QAAQC,GAAG,KAAK;MAAA,IAAf;QAAEC;MAAE,CAAC;MACbD,GAAG,CAACE,MAAM,GAAGD,CAAC;IAChB,CAAC;IACDE,QAAQ,EAAE,kBAAkC;MAAA,IAAjC;QAAEC;MAAa,CAAC;MAAA,IAAE;QAAEF;MAAO,CAAC;MACrCb,WAAW,CAAEM,KAAK,GAAGU,IAAI,CAACC,GAAG,CAC3BnB,QAAQ,EACRkB,IAAI,CAACE,GAAG,CACNrB,QAAQ,EACP,CAACgB,MAAM,GAAGE,YAAY,IAAIb,WAAW,CAACI,KAAK,IACzCR,QAAQ,GAAGD,QAAQ,CAAC,GACrBA,QAAQ,CACX,CACF;IACH,CAAC;IACDsB,KAAK,EAAE,MAAM;MACX,IAAAC,8BAAO,EAACb,0BAA0B,CAAC,EAAE;IACvC;EACF,CAAC,EACD,EAAE,CACH;EAED,MAAMc,KAAK,GAAG,IAAAC,uCAAgB,EAAC,MAAM;IACnC,OAAO;MACLC,SAAS,EAAE,CAAC;QAAEC,UAAU,EAAEpB,QAAQ,CAACE,KAAK,GAAGmB;MAAQ,CAAC;IACtD,CAAC;EACH,CAAC,EAAE,CAACrB,QAAQ,CAACE,KAAK,CAAC,CAAC;EAEpB,oBACE,6BAAC,iBAAI;IAAC,KAAK,EAAEoB,wBAAW,CAACpC;EAAU,gBACjC,6BAAC,4CAAiB;IAAC,cAAc,EAAEkB;EAAe,gBAChD,6BAAC,8BAAQ,CAAC,IAAI;IAAC,KAAK,EAAEkB,wBAAW,CAACpC;EAAU,gBAC1C,6BAAC,iBAAI;IACH,QAAQ,EAAGqC,KAAK,IAAK;MACnBzB,WAAW,CAACI,KAAK,GAAGqB,KAAK,CAACC,WAAW,CAACC,MAAM,CAACrC,KAAK;IACpD,CAAE;IACF,KAAK,EAAEL,MAAM,CAACG;EAAU,gBAExB,6BAAC,kBAAS;IACR,KAAK,EAAC,MAAM;IACZ,mBAAmB,EAAC,MAAM;IAC1B,KAAK,EAAEH,MAAM,CAACO;EAAiB,EAC/B,CACG,eACP,6BAAC,8BAAQ,CAAC,IAAI;IAAC,KAAK,EAAE,CAACgC,wBAAW,CAACI,KAAK,EAAET,KAAK;EAAE,EAAG,CACtC,CACE,CACf;AAEX,CAAC;AAAC,eACazB,YAAY;AAAA"}
+{"version":3,"names":["styles","StyleSheet","create","container","height","width","justifyContent","sliderBackground","maxHeight","StrokeSlider","minValue","maxValue","onColorStrokeChange","strokeWidth","useDrawHook","sliderWidth","useSharedValue","gestureStartX","position","useDerivedValue","value","wrapperOnColorStrokeChange","panGesture","Gesture","Pan","onStart","event","x","onUpdate","Math","min","max","translationX","onEnd","runOnJS","style","useAnimatedStyle","transform","translateX","TRACK_R","sliderStyle","nativeEvent","layout","thumb"],"sourceRoot":"../../../../src","sources":["components/Slider/StrokeSlider.tsx"],"mappings":";;;;;;AAAA;AACA;AACA;AAMA;AACA;AACA;AACA;AAAqD;AAAA;AAAA;AAGrD,MAAMA,MAAM,GAAGC,uBAAU,CAACC,MAAM,CAAC;EAC/BC,SAAS,EAAE;IACTC,MAAM,EAAE,EAAE;IACVC,KAAK,EAAE,MAAM;IACbC,cAAc,EAAE;EAClB,CAAC;EACDC,gBAAgB,EAAE;IAChBC,SAAS,EAAE;EACb;AACF,CAAC,CAAC;AAEF,MAAMC,YAAY,GAAG,QAMf;EAAA,IANgB;IACpBC,QAAQ;IACRC;EAIF,CAAC;EACC,MAAM;IAAEC,mBAAmB;IAAEC;EAAY,CAAC,GAAG,IAAAC,oBAAW,GAAE;EAE1D,MAAMC,WAAW,GAAG,IAAAC,qCAAc,EAAC,CAAC,CAAC;EACrC,MAAMC,aAAa,GAAG,IAAAD,qCAAc,EAAC,CAAC,CAAC;EAEvC,MAAME,QAAQ,GAAG,IAAAC,sCAAe,EAAC,MAAM;IACrC,OACGJ,WAAW,CAACK,KAAK,IAAIT,QAAQ,GAAGD,QAAQ,CAAC,IACzCG,WAAW,CAAEO,KAAK,GAAGV,QAAQ,CAAC;EAEnC,CAAC,CAAC;EACF,MAAMW,0BAA0B,GAAG,MAAM;IACvCT,mBAAmB,EAAE;EACvB,CAAC;EAED,MAAMU,UAAU,GAAGC,kCAAO,CAACC,GAAG,EAAE,CAC7BC,OAAO,CAAEC,KAAK,IAAK;IAClBT,aAAa,CAACG,KAAK,GAAGM,KAAK,CAACC,CAAC;EAC/B,CAAC,CAAC,CACDC,QAAQ,CAAEF,KAAK,IAAK;IACnBb,WAAW,CAAEO,KAAK,GAAGS,IAAI,CAACC,GAAG,CAC3BnB,QAAQ,EACRkB,IAAI,CAACE,GAAG,CACNrB,QAAQ,EACP,CAACO,aAAa,CAACG,KAAK,GAAGM,KAAK,CAACM,YAAY,IAAIjB,WAAW,CAACK,KAAK,IAC5DT,QAAQ,GAAGD,QAAQ,CAAC,GACrBA,QAAQ,CACX,CACF;EACH,CAAC,CAAC,CACDuB,KAAK,CAAC,MAAM;IACX,IAAAC,8BAAO,EAACb,0BAA0B,CAAC,EAAE;EACvC,CAAC,CAAC;EAEJ,MAAMc,KAAK,GAAG,IAAAC,uCAAgB,EAAC,MAAM;IACnC,OAAO;MACLC,SAAS,EAAE,CAAC;QAAEC,UAAU,EAAEpB,QAAQ,CAACE,KAAK,GAAGmB;MAAQ,CAAC;IACtD,CAAC;EACH,CAAC,CAAC;EAEF,oBACE,6BAAC,iBAAI;IAAC,KAAK,EAAEC,wBAAW,CAACrC;EAAU,gBACjC,6BAAC,0CAAe;IAAC,OAAO,EAAEmB;EAAW,gBACnC,6BAAC,8BAAQ,CAAC,IAAI;IAAC,KAAK,EAAEkB,wBAAW,CAACrC;EAAU,gBAC1C,6BAAC,iBAAI;IACH,QAAQ,EAAGuB,KAAK,IAAK;MACnBX,WAAW,CAACK,KAAK,GAAGM,KAAK,CAACe,WAAW,CAACC,MAAM,CAACrC,KAAK;IACpD,CAAE;IACF,KAAK,EAAEL,MAAM,CAACG;EAAU,gBAExB,6BAAC,kBAAS;IACR,KAAK,EAAC,MAAM;IACZ,mBAAmB,EAAC,MAAM;IAC1B,KAAK,EAAEH,MAAM,CAACO;EAAiB,EAC/B,CACG,eACP,6BAAC,8BAAQ,CAAC,IAAI;IAAC,KAAK,EAAE,CAACiC,wBAAW,CAACG,KAAK,EAAER,KAAK;EAAE,EAAG,CACtC,CACA,CACb;AAEX,CAAC;AAAC,eACa1B,YAAY;AAAA"}

package/lib/module/components/DrawCore/CurrentAnimatedItem.js

@@ -1,5 +1,5 @@
-import React from 'react';
-import Animated, { createAnimatedPropAdapter, processColor, runOnJS, useAnimatedProps, useAnimatedReaction } from 'react-native-reanimated';
+import React, { useState } from 'react';
+import Animated, { runOnJS, useAnimatedProps, useAnimatedReaction, useAnimatedStyle } from 'react-native-reanimated';
 import { Path, Ellipse, Rect, Line, G } from 'react-native-svg';
 import { TextInput } from 'react-native';
 import useDrawHook from './useDrawHook';
@@ -13,8 +13,6 @@ const AnimatedLine = Animated.createAnimatedComponent(Line);
 
 //const AnimatedText = Animated.createAnimatedComponent(Text);
 
-const AnimatedTextInput = Animated.createAnimatedComponent(TextInput);
-
 // properties of a line
 const line = (pointA, pointB) => {
   'worklet';
@@ -71,7 +69,18 @@ const bezierCommand = (point, i, a) => {
 export const pointsToPath = points => {
   'worklet';
 
-  return points.length > 0 ? points.reduce((acc, point, i, a) => i === 0 ? `M ${point.x},${point.y}` : `${acc} ${bezierCommand(point, i, a)}`, '') : '';
+  if (points.length === 0) {
+    return '';
+  }
+  let path = '';
+  for (let index = 0; index < points.length; index += 1) {
+    const point = points[index];
+    if (!point) {
+      continue;
+    }
+    path = index === 0 ? `M ${point.x},${point.y}` : `${path} ${bezierCommand(point, index, points)}`;
+  }
+  return path;
 };
 function hue2rgb(p, q, t) {
   'worklet';
@@ -115,25 +124,9 @@ export function hslToRgb(col) {
   }
   return `rgb(${Math.round(r * 255)}, ${Math.round(g * 255)}, ${Math.round(b * 255)})`;
 }
-const propAdapter = createAnimatedPropAdapter(props => {
-  if (Object.keys(props).includes('fill') && (typeof props.fill === 'string' || typeof props.fill === 'number')) {
-    props.fill = {
-      type: 0,
-      payload: processColor(props.fill)
-    };
-  }
-  if (Object.keys(props).includes('stroke') && (typeof props.stroke === 'string' || typeof props.stroke === 'number')) {
-    props.stroke = {
-      type: 0,
-      payload: processColor(props.stroke)
-    };
-  }
-}, ['fill', 'stroke']);
 export default function CurrentAnimatedItem() {
-  var _currentItem$value30, _currentItem$value31, _currentItem$value32, _currentItem$value33, _currentItem$value34, _currentItem$value36, _currentItem$value37, _currentItem$value38;
   const {
-    currentItem,
-    doubleArrowTextInput
+    currentItem
   } = useDrawHook();
   const getTextLength = () => {
     'worklet';
@@ -144,7 +137,9 @@ export default function CurrentAnimatedItem() {
     return textLength;
   };
   const ellipseAnimatedProps = useAnimatedProps(() => {
-    var _currentItem$value3, _currentItem$value4, _currentItem$value5;
+    'worklet';
+
+    var _currentItem$value3, _currentItem$value4, _currentItem$value5, _currentItem$value6;
     const coordinates = ((_currentItem$value3 = currentItem.value) === null || _currentItem$value3 === void 0 ? void 0 : _currentItem$value3.type) === 'ellipse' ? currentItem.value.data : {
       cx: -10,
       cy: -10,
@@ -157,15 +152,17 @@ export default function CurrentAnimatedItem() {
       rx: coordinates.rx,
       ry: coordinates.ry,
       fill: 'transparent',
-      //stroke: hslToRgb(currentItem.value?.color || 'hsl(0, 0%, 0%)'),
-      opacity: ((_currentItem$value4 = currentItem.value) === null || _currentItem$value4 === void 0 ? void 0 : _currentItem$value4.type) === 'ellipse' ? 1 : 0,
-      strokeWidth: ((_currentItem$value5 = currentItem.value) === null || _currentItem$value5 === void 0 ? void 0 : _currentItem$value5.type) === 'ellipse' ? currentItem.value.strokeWidth : 0,
+      stroke: hslToRgb(((_currentItem$value4 = currentItem.value) === null || _currentItem$value4 === void 0 ? void 0 : _currentItem$value4.color) || 'hsl(0, 0%, 0%)'),
+      opacity: ((_currentItem$value5 = currentItem.value) === null || _currentItem$value5 === void 0 ? void 0 : _currentItem$value5.type) === 'ellipse' ? 1 : 0,
+      strokeWidth: ((_currentItem$value6 = currentItem.value) === null || _currentItem$value6 === void 0 ? void 0 : _currentItem$value6.type) === 'ellipse' ? currentItem.value.strokeWidth : 0,
       marker: 'url(#selection)'
     };
-  }, null, propAdapter);
+  });
   const singleHeadAnimatedProps = useAnimatedProps(() => {
-    var _currentItem$value6, _currentItem$value7, _currentItem$value8;
-    const coordinates = ((_currentItem$value6 = currentItem.value) === null || _currentItem$value6 === void 0 ? void 0 : _currentItem$value6.type) === 'singleHead' ? currentItem.value.data : {
+    'worklet';
+
+    var _currentItem$value7, _currentItem$value8, _currentItem$value9, _currentItem$value10;
+    const coordinates = ((_currentItem$value7 = currentItem.value) === null || _currentItem$value7 === void 0 ? void 0 : _currentItem$value7.type) === 'singleHead' ? currentItem.value.data : {
       x1: -10,
       y1: -10,
       x2: -10,
@@ -177,15 +174,17 @@ export default function CurrentAnimatedItem() {
       x2: coordinates.x2,
       y2: coordinates.y2,
       fill: 'transparent',
-      //stroke: hslToRgb(currentItem.value?.color || 'hsl(0, 0%, 0%)'),
-      opacity: ((_currentItem$value7 = currentItem.value) === null || _currentItem$value7 === void 0 ? void 0 : _currentItem$value7.type) === 'singleHead' ? 1 : 0,
-      strokeWidth: ((_currentItem$value8 = currentItem.value) === null || _currentItem$value8 === void 0 ? void 0 : _currentItem$value8.type) === 'singleHead' ? currentItem.value.strokeWidth : 0,
+      stroke: hslToRgb(((_currentItem$value8 = currentItem.value) === null || _currentItem$value8 === void 0 ? void 0 : _currentItem$value8.color) || 'hsl(0, 0%, 0%)'),
+      opacity: ((_currentItem$value9 = currentItem.value) === null || _currentItem$value9 === void 0 ? void 0 : _currentItem$value9.type) === 'singleHead' ? 1 : 0,
+      strokeWidth: ((_currentItem$value10 = currentItem.value) === null || _currentItem$value10 === void 0 ? void 0 : _currentItem$value10.type) === 'singleHead' ? currentItem.value.strokeWidth : 0,
       markerEnd: 'arrowhead'
     };
-  }, null, propAdapter);
+  });
   const doubleHeadAnimatedProps = useAnimatedProps(() => {
-    var _currentItem$value9, _currentItem$value10, _currentItem$value11;
-    const coordinates = ((_currentItem$value9 = currentItem.value) === null || _currentItem$value9 === void 0 ? void 0 : _currentItem$value9.type) === 'doubleHead' ? currentItem.value.data : {
+    'worklet';
+
+    var _currentItem$value11, _currentItem$value12, _currentItem$value13, _currentItem$value14;
+    const coordinates = ((_currentItem$value11 = currentItem.value) === null || _currentItem$value11 === void 0 ? void 0 : _currentItem$value11.type) === 'doubleHead' ? currentItem.value.data : {
       x1: -10,
       y1: -10,
       x2: -10,
@@ -197,13 +196,13 @@ export default function CurrentAnimatedItem() {
       x2: coordinates.x2,
       y2: coordinates.y2,
       fill: 'transparent',
-      //stroke: hslToRgb(currentItem.value?.color || 'hsl(0, 0%, 0%)'),
-      opacity: ((_currentItem$value10 = currentItem.value) === null || _currentItem$value10 === void 0 ? void 0 : _currentItem$value10.type) === 'doubleHead' ? 1 : 0,
-      strokeWidth: ((_currentItem$value11 = currentItem.value) === null || _currentItem$value11 === void 0 ? void 0 : _currentItem$value11.type) === 'doubleHead' ? currentItem.value.strokeWidth : 0,
+      stroke: hslToRgb(((_currentItem$value12 = currentItem.value) === null || _currentItem$value12 === void 0 ? void 0 : _currentItem$value12.color) || 'hsl(0, 0%, 0%)'),
+      opacity: ((_currentItem$value13 = currentItem.value) === null || _currentItem$value13 === void 0 ? void 0 : _currentItem$value13.type) === 'doubleHead' ? 1 : 0,
+      strokeWidth: ((_currentItem$value14 = currentItem.value) === null || _currentItem$value14 === void 0 ? void 0 : _currentItem$value14.type) === 'doubleHead' ? currentItem.value.strokeWidth : 0,
       markerStart: 'side',
       markerEnd: 'side'
     };
-  }, null, propAdapter);
+  });
   const distance = (x1, y1, x2, y2) => {
     'worklet';
 
@@ -275,9 +274,11 @@ export default function CurrentAnimatedItem() {
     return [newX1, newY1, newX2, newY2];
   };
   const doubleArrowsAnimatedPropsFirst = useAnimatedProps(() => {
-    var _currentItem$value12, _currentItem$value13, _currentItem$value14;
+    'worklet';
+
+    var _currentItem$value15, _currentItem$value16, _currentItem$value17, _currentItem$value18;
     let x1, y1, x2, y2;
-    if (((_currentItem$value12 = currentItem.value) === null || _currentItem$value12 === void 0 ? void 0 : _currentItem$value12.type) !== 'doubleArrows') {
+    if (((_currentItem$value15 = currentItem.value) === null || _currentItem$value15 === void 0 ? void 0 : _currentItem$value15.type) !== 'doubleArrows') {
       x1 = -10;
       y1 = -10;
       x2 = -10;
@@ -300,16 +301,18 @@ export default function CurrentAnimatedItem() {
       x2,
       y2,
       fill: 'transparent',
-      //stroke: hslToRgb(currentItem.value?.color || 'hsl(0, 0%, 0%)'),
-      opacity: ((_currentItem$value13 = currentItem.value) === null || _currentItem$value13 === void 0 ? void 0 : _currentItem$value13.type) === 'doubleArrows' ? 1 : 0,
-      strokeWidth: ((_currentItem$value14 = currentItem.value) === null || _currentItem$value14 === void 0 ? void 0 : _currentItem$value14.type) === 'doubleArrows' ? currentItem.value.strokeWidth : 0,
+      stroke: hslToRgb(((_currentItem$value16 = currentItem.value) === null || _currentItem$value16 === void 0 ? void 0 : _currentItem$value16.color) || 'hsl(0, 0%, 0%)'),
+      opacity: ((_currentItem$value17 = currentItem.value) === null || _currentItem$value17 === void 0 ? void 0 : _currentItem$value17.type) === 'doubleArrows' ? 1 : 0,
+      strokeWidth: ((_currentItem$value18 = currentItem.value) === null || _currentItem$value18 === void 0 ? void 0 : _currentItem$value18.type) === 'doubleArrows' ? currentItem.value.strokeWidth : 0,
       markerStart: 'arrowheadStart'
     };
-  }, null, propAdapter);
+  });
   const doubleArrowsAnimatedPropsLast = useAnimatedProps(() => {
-    var _currentItem$value15, _currentItem$value16, _currentItem$value17;
+    'worklet';
+
+    var _currentItem$value19, _currentItem$value20, _currentItem$value21, _currentItem$value22;
     let x1, y1, x2, y2;
-    if (((_currentItem$value15 = currentItem.value) === null || _currentItem$value15 === void 0 ? void 0 : _currentItem$value15.type) !== 'doubleArrows') {
+    if (((_currentItem$value19 = currentItem.value) === null || _currentItem$value19 === void 0 ? void 0 : _currentItem$value19.type) !== 'doubleArrows') {
       x1 = -10;
       y1 = -10;
       x2 = -10;
@@ -332,12 +335,95 @@ export default function CurrentAnimatedItem() {
       x2,
       y2,
       fill: 'transparent',
-      //stroke: hslToRgb(currentItem.value?.color || 'hsl(0, 0%, 0%)'),
-      opacity: ((_currentItem$value16 = currentItem.value) === null || _currentItem$value16 === void 0 ? void 0 : _currentItem$value16.type) === 'doubleArrows' ? 1 : 0,
-      strokeWidth: ((_currentItem$value17 = currentItem.value) === null || _currentItem$value17 === void 0 ? void 0 : _currentItem$value17.type) === 'doubleArrows' ? currentItem.value.strokeWidth : 0,
+      stroke: hslToRgb(((_currentItem$value20 = currentItem.value) === null || _currentItem$value20 === void 0 ? void 0 : _currentItem$value20.color) || 'hsl(0, 0%, 0%)'),
+      opacity: ((_currentItem$value21 = currentItem.value) === null || _currentItem$value21 === void 0 ? void 0 : _currentItem$value21.type) === 'doubleArrows' ? 1 : 0,
+      strokeWidth: ((_currentItem$value22 = currentItem.value) === null || _currentItem$value22 === void 0 ? void 0 : _currentItem$value22.type) === 'doubleArrows' ? currentItem.value.strokeWidth : 0,
       markerEnd: 'arrowhead'
     };
-  }, null, propAdapter);
+  });
+  const rectangleAnimatedProps = useAnimatedProps(() => {
+    'worklet';
+
+    var _currentItem$value23, _currentItem$value24, _currentItem$value25, _currentItem$value26;
+    const coordinates = ((_currentItem$value23 = currentItem.value) === null || _currentItem$value23 === void 0 ? void 0 : _currentItem$value23.type) === 'rectangle' ? currentItem.value.data : {
+      x: -10,
+      y: -10,
+      width: 0,
+      height: 0
+    };
+    return {
+      x: coordinates.x,
+      y: coordinates.y,
+      width: coordinates.width,
+      height: coordinates.height,
+      fill: 'transparent',
+      stroke: hslToRgb(((_currentItem$value24 = currentItem.value) === null || _currentItem$value24 === void 0 ? void 0 : _currentItem$value24.color) || 'hsl(0, 0%, 0%)'),
+      opacity: ((_currentItem$value25 = currentItem.value) === null || _currentItem$value25 === void 0 ? void 0 : _currentItem$value25.type) === 'rectangle' ? 1 : 0,
+      strokeWidth: ((_currentItem$value26 = currentItem.value) === null || _currentItem$value26 === void 0 ? void 0 : _currentItem$value26.type) === 'rectangle' ? currentItem.value.strokeWidth : 0,
+      marker: 'url(#selection)'
+    };
+  });
+  const penAnimatedProps = useAnimatedProps(() => {
+    'worklet';
+
+    var _currentItem$value27, _currentItem$value28, _currentItem$value29, _currentItem$value30;
+    const d = pointsToPath(((_currentItem$value27 = currentItem.value) === null || _currentItem$value27 === void 0 ? void 0 : _currentItem$value27.type) === 'pen' ? currentItem.value.data : [{
+      x: -10,
+      y: -10
+    }]);
+    return {
+      d: d,
+      opacity: ((_currentItem$value28 = currentItem.value) === null || _currentItem$value28 === void 0 ? void 0 : _currentItem$value28.type) === 'pen' ? 1 : 0,
+      stroke: hslToRgb(((_currentItem$value29 = currentItem.value) === null || _currentItem$value29 === void 0 ? void 0 : _currentItem$value29.color) || 'hsl(0, 0%, 0%)'),
+      strokeWidth: ((_currentItem$value30 = currentItem.value) === null || _currentItem$value30 === void 0 ? void 0 : _currentItem$value30.type) === 'pen' ? currentItem.value.strokeWidth : 0,
+      fill: 'transparent',
+      markerStart: 'selection',
+      markerEnd: 'selection'
+    };
+  });
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AnimatedEllipse, {
+    animatedProps: ellipseAnimatedProps
+  }), /*#__PURE__*/React.createElement(G, {
+    markerStart: "url(#selection)",
+    markerEnd: "url(#selection)"
+  }, /*#__PURE__*/React.createElement(AnimatedLine, {
+    animatedProps: singleHeadAnimatedProps
+  })), /*#__PURE__*/React.createElement(G, {
+    markerStart: "url(#selection)",
+    markerEnd: "url(#selection)"
+  }, /*#__PURE__*/React.createElement(AnimatedLine, {
+    animatedProps: doubleHeadAnimatedProps
+  })), /*#__PURE__*/React.createElement(G, {
+    markerStart: "url(#selection)",
+    markerEnd: "url(#selection)"
+  }, /*#__PURE__*/React.createElement(AnimatedLine, {
+    animatedProps: doubleArrowsAnimatedPropsFirst
+  }), /*#__PURE__*/React.createElement(AnimatedLine, {
+    animatedProps: doubleArrowsAnimatedPropsLast
+  })), /*#__PURE__*/React.createElement(AnimatedRectangle, {
+    animatedProps: rectangleAnimatedProps
+  }), /*#__PURE__*/React.createElement(AnimatedPath, {
+    animatedProps: penAnimatedProps
+  }));
+}
+export function DoubleArrowsTextInput() {
+  const {
+    currentItem,
+    doubleArrowTextInput
+  } = useDrawHook();
+  const getTextLength = () => {
+    'worklet';
+
+    var _currentItem$value31, _currentItem$value32;
+    const text = ((_currentItem$value31 = currentItem.value) === null || _currentItem$value31 === void 0 ? void 0 : _currentItem$value31.type) === 'doubleArrows' ? (_currentItem$value32 = currentItem.value) === null || _currentItem$value32 === void 0 ? void 0 : _currentItem$value32.text : '';
+    const textLength = text && text.length > 5 ? text.length * 10 : 50;
+    return textLength;
+  };
+  const distance = (x1, y1, x2, y2) => {
+    'worklet';
+
+    return Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1));
+  };
   const getTextValues = _ref3 => {
     'worklet';
 
@@ -367,12 +453,12 @@ export default function CurrentAnimatedItem() {
     }
     return [newX, newY, angle];
   };
-  const doubleArrowsAnimatedPropsText = useAnimatedProps(() => {
-    var _currentItem$value18, _currentItem$value19, _currentItem$value20, _currentItem$value21;
+  const containerStyle = useAnimatedStyle(() => {
+    var _currentItem$value33;
     let x = 0,
       y = 0,
       angle = 0;
-    if (((_currentItem$value18 = currentItem.value) === null || _currentItem$value18 === void 0 ? void 0 : _currentItem$value18.type) !== 'doubleArrows') {
+    if (((_currentItem$value33 = currentItem.value) === null || _currentItem$value33 === void 0 ? void 0 : _currentItem$value33.type) !== 'doubleArrows') {
       x = -50;
       y = -50;
       angle = 0;
@@ -386,120 +472,44 @@ export default function CurrentAnimatedItem() {
       });
     }
     return {
+      position: 'absolute',
       top: y - 25,
       left: x - getTextLength() / 2,
-      fontSize: 10 + (((_currentItem$value19 = currentItem.value) === null || _currentItem$value19 === void 0 ? void 0 : _currentItem$value19.strokeWidth) ?? 0) * 2,
-      color: (_currentItem$value20 = currentItem.value) !== null && _currentItem$value20 !== void 0 && _currentItem$value20.color ? hslToRgb((_currentItem$value21 = currentItem.value) === null || _currentItem$value21 === void 0 ? void 0 : _currentItem$value21.color) : 'white',
       transform: [{
         rotateZ: `${angle}deg`
       }],
-      //backgroundColor: 'red',
       width: getTextLength(),
       height: 50
     };
-  }, null, propAdapter);
-  const rectangleAnimatedProps = useAnimatedProps(() => {
-    var _currentItem$value22, _currentItem$value23, _currentItem$value24;
-    const coordinates = ((_currentItem$value22 = currentItem.value) === null || _currentItem$value22 === void 0 ? void 0 : _currentItem$value22.type) === 'rectangle' ? currentItem.value.data : {
-      x: -10,
-      y: -10,
-      width: 0,
-      height: 0
-    };
-    return {
-      x: coordinates.x,
-      y: coordinates.y,
-      width: coordinates.width,
-      height: coordinates.height,
-      fill: 'transparent',
-      //stroke: hslToRgb(currentItem.value?.color || 'hsl(0, 0%, 0%)'),
-      opacity: ((_currentItem$value23 = currentItem.value) === null || _currentItem$value23 === void 0 ? void 0 : _currentItem$value23.type) === 'rectangle' ? 1 : 0,
-      strokeWidth: ((_currentItem$value24 = currentItem.value) === null || _currentItem$value24 === void 0 ? void 0 : _currentItem$value24.type) === 'rectangle' ? currentItem.value.strokeWidth : 0,
-      marker: 'url(#selection)'
-    };
-  }, null, propAdapter);
-  const penAnimatedProps = useAnimatedProps(() => {
-    var _currentItem$value25, _currentItem$value26, _currentItem$value27;
-    const d = pointsToPath(((_currentItem$value25 = currentItem.value) === null || _currentItem$value25 === void 0 ? void 0 : _currentItem$value25.type) === 'pen' ? currentItem.value.data : [{
-      x: -10,
-      y: -10
-    }]);
+  });
+  const [textStyle, setTextStyle] = useState({
+    fontSize: 12,
+    color: 'white'
+  });
+  useAnimatedReaction(() => {
+    var _currentItem$value34, _currentItem$value35, _currentItem$value36;
     return {
-      d: d,
-      //opacity: 1,
-      opacity: ((_currentItem$value26 = currentItem.value) === null || _currentItem$value26 === void 0 ? void 0 : _currentItem$value26.type) === 'pen' ? 1 : 0,
-      //stroke: currentItem.value?.color || "black",
-      strokeWidth: ((_currentItem$value27 = currentItem.value) === null || _currentItem$value27 === void 0 ? void 0 : _currentItem$value27.type) === 'pen' ? currentItem.value.strokeWidth : 0,
-      fill: 'transparent',
-      markerStart: 'selection',
-      markerEnd: 'selection'
+      fontSize: 10 + (((_currentItem$value34 = currentItem.value) === null || _currentItem$value34 === void 0 ? void 0 : _currentItem$value34.strokeWidth) ?? 0) * 2,
+      color: (_currentItem$value35 = currentItem.value) !== null && _currentItem$value35 !== void 0 && _currentItem$value35.color ? hslToRgb((_currentItem$value36 = currentItem.value) === null || _currentItem$value36 === void 0 ? void 0 : _currentItem$value36.color) : 'white'
     };
-  }, null, propAdapter);
-  const updateText = value => {
-    if (!(doubleArrowTextInput !== null && doubleArrowTextInput !== void 0 && doubleArrowTextInput.current)) return;
-    doubleArrowTextInput.current.setNativeProps({
-      text: value
-    });
-  };
-  useAnimatedReaction(() => {
-    var _currentItem$value28, _currentItem$value29;
-    return ((_currentItem$value28 = currentItem.value) === null || _currentItem$value28 === void 0 ? void 0 : _currentItem$value28.type) === 'doubleArrows' ? ((_currentItem$value29 = currentItem.value) === null || _currentItem$value29 === void 0 ? void 0 : _currentItem$value29.text) || '' : '';
   }, value => {
-    if (updateText) runOnJS(updateText)(value);
-  }, [updateText, doubleArrowTextInput]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AnimatedEllipse, {
-    animatedProps: ellipseAnimatedProps,
-    stroke: ((_currentItem$value30 = currentItem.value) === null || _currentItem$value30 === void 0 ? void 0 : _currentItem$value30.color) || 'black'
-  }), /*#__PURE__*/React.createElement(G, {
-    markerStart: "url(#selection)",
-    markerEnd: "url(#selection)"
-  }, /*#__PURE__*/React.createElement(AnimatedLine, {
-    animatedProps: singleHeadAnimatedProps,
-    stroke: ((_currentItem$value31 = currentItem.value) === null || _currentItem$value31 === void 0 ? void 0 : _currentItem$value31.color) || 'black'
-  })), /*#__PURE__*/React.createElement(G, {
-    markerStart: "url(#selection)",
-    markerEnd: "url(#selection)"
-  }, /*#__PURE__*/React.createElement(AnimatedLine, {
-    animatedProps: doubleHeadAnimatedProps,
-    stroke: ((_currentItem$value32 = currentItem.value) === null || _currentItem$value32 === void 0 ? void 0 : _currentItem$value32.color) || 'black'
-  })), /*#__PURE__*/React.createElement(G, {
-    markerStart: "url(#selection)",
-    markerEnd: "url(#selection)"
-  }, /*#__PURE__*/React.createElement(AnimatedLine, {
-    animatedProps: doubleArrowsAnimatedPropsFirst,
-    stroke: ((_currentItem$value33 = currentItem.value) === null || _currentItem$value33 === void 0 ? void 0 : _currentItem$value33.color) || 'black'
-  }), /*#__PURE__*/React.createElement(AnimatedTextInput, {
-    animatedProps: {
-      ...doubleArrowsAnimatedPropsText // Type cast to bypass the type error
-      // Ensure other relevant props if needed
-    },
-
-    value: ((_currentItem$value34 = currentItem.value) === null || _currentItem$value34 === void 0 ? void 0 : _currentItem$value34.type) === 'doubleArrows' ? currentItem.value.text : '',
+    runOnJS(setTextStyle)(value);
+  });
+  return /*#__PURE__*/React.createElement(Animated.View, {
+    style: containerStyle
+  }, /*#__PURE__*/React.createElement(TextInput, {
     ref: doubleArrowTextInput,
     underlineColorAndroid: 'transparent',
     onChangeText: text => {
-      var _currentItem$value35;
-      if (((_currentItem$value35 = currentItem.value) === null || _currentItem$value35 === void 0 ? void 0 : _currentItem$value35.type) === 'doubleArrows') {
+      var _currentItem$value37;
+      if (((_currentItem$value37 = currentItem.value) === null || _currentItem$value37 === void 0 ? void 0 : _currentItem$value37.type) === 'doubleArrows') {
         currentItem.value = {
           ...currentItem.value,
           text
         };
       }
     },
-    style: {
-      color: 'black',
-      fontSize: 24,
-      position: 'absolute'
-    }
-  }), /*#__PURE__*/React.createElement(AnimatedLine, {
-    animatedProps: doubleArrowsAnimatedPropsLast,
-    stroke: ((_currentItem$value36 = currentItem.value) === null || _currentItem$value36 === void 0 ? void 0 : _currentItem$value36.color) || 'black'
-  })), /*#__PURE__*/React.createElement(AnimatedRectangle, {
-    animatedProps: rectangleAnimatedProps,
-    stroke: ((_currentItem$value37 = currentItem.value) === null || _currentItem$value37 === void 0 ? void 0 : _currentItem$value37.color) || 'black'
-  }), /*#__PURE__*/React.createElement(AnimatedPath, {
-    animatedProps: penAnimatedProps,
-    stroke: ((_currentItem$value38 = currentItem.value) === null || _currentItem$value38 === void 0 ? void 0 : _currentItem$value38.color) || 'black'
+    style: textStyle
   }));
 }
 //# sourceMappingURL=CurrentAnimatedItem.js.map