@archireport/react-native-svg-draw 1.3.0 → 2.0.0

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

@@ -1,50 +1,25 @@
-import React, { useCallback, useEffect, useImperativeHandle, useReducer, useRef, useState } from 'react';
-import { StyleSheet, TextInput, View, Keyboard, ImageBackground, Image, Platform, InputAccessoryView } from 'react-native';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { StyleSheet, TextInput, View, Keyboard, ImageBackground, Image, InputAccessoryView, Platform } from 'react-native';
 import Animated, { runOnJS, useAnimatedGestureHandler, useAnimatedReaction, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
 import { PanGestureHandler } from 'react-native-gesture-handler';
-import ColorSlider from './ColorSlider';
-import StrokeSlider from './StrokeSlider';
 import DrawPad from './DrawPad';
 import ViewShot from 'react-native-view-shot';
-const RIGHT_PANE_WIDTH = 60;
+import useDrawHook from './useDrawHook';
 const styles = StyleSheet.create({
   container: {
     flex: 1
   },
   drawZone: {
     flex: 1,
-    justifyContent: 'center',
+    alignContent: 'center',
     alignItems: 'center'
   },
-  rightPaneBaseStyle: {
-    position: 'absolute',
-    right: 0,
-    top: 0,
-    bottom: 0,
-    backgroundColor: '#000000cc',
-    width: RIGHT_PANE_WIDTH,
-    justifyContent: 'space-evenly',
-    marginVertical: 20,
-    borderTopLeftRadius: 20,
-    borderBottomLeftRadius: 20,
-    paddingVertical: 30
-  },
-  strokeSliderContainer: {
-    flex: 1,
-    paddingBottom: 15,
-    borderBottomColor: '#000000',
-    borderBottomWidth: 2
-  },
-  colorSliderContainer: {
-    flex: 1,
-    paddingTop: 15
-  },
   bgImage: {
     width: '100%',
     height: '100%'
   },
   textInput: {
-    backgroundColor: '#000000c5',
+    backgroundColor: '#262626',
     paddingVertical: 16,
     paddingHorizontal: 24,
     fontSize: 16,
@@ -52,7 +27,6 @@ const styles = StyleSheet.create({
     width: '100%'
   }
 });
-
 const pDistance = (point, line) => {
   'worklet';
 
@@ -73,14 +47,11 @@ const pDistance = (point, line) => {
   var dot = A * C + B * D;
   var len_sq = C * C + D * D;
   var param = -1;
-
   if (len_sq !== 0) {
     //in case of 0 length line
     param = dot / len_sq;
   }
-
   var xx, yy;
-
   if (param < 0) {
     xx = x1;
     yy = y1;
@@ -91,23 +62,19 @@ const pDistance = (point, line) => {
     xx = x1 + param * C;
     yy = y1 + param * D;
   }
-
   var dx = x - xx;
   var dy = y - yy;
   return Math.sqrt(dx * dx + dy * dy);
 };
-
 const AnimatedTextInput = Animated.createAnimatedComponent(TextInput);
 const DEFAULT_TEXT = '';
 const THRESHOLD = 20;
-
 const drawNewItem = (mode, currentItem, addDoneItem, position, style) => {
   'worklet';
 
   if (currentItem.value) {
     runOnJS(addDoneItem)(currentItem.value);
   }
-
   switch (mode.value) {
     case 'ellipse':
       currentItem.value = {
@@ -122,7 +89,6 @@ const drawNewItem = (mode, currentItem, addDoneItem, position, style) => {
         color: style.color.value
       };
       break;
-
     case 'rectangle':
       currentItem.value = {
         type: mode.value,
@@ -136,7 +102,6 @@ const drawNewItem = (mode, currentItem, addDoneItem, position, style) => {
         color: style.color.value
       };
       break;
-
     case 'singleHead':
     case 'doubleHead':
       currentItem.value = {
@@ -151,7 +116,6 @@ const drawNewItem = (mode, currentItem, addDoneItem, position, style) => {
         color: style.color.value
       };
       break;
-
     case 'text':
       currentItem.value = {
         type: mode.value,
@@ -166,7 +130,6 @@ const drawNewItem = (mode, currentItem, addDoneItem, position, style) => {
         color: style.color.value
       };
       break;
-
     case 'pen':
       currentItem.value = {
         type: mode.value,
@@ -177,16 +140,15 @@ const drawNewItem = (mode, currentItem, addDoneItem, position, style) => {
       break;
   }
 };
-
 const onTextHeightUpdate = (currentItem, textBaseHeight, height) => {
   'worklet';
 
   var _currentItem$value;
-
   if (((_currentItem$value = currentItem.value) === null || _currentItem$value === void 0 ? void 0 : _currentItem$value.type) === 'text') {
     textBaseHeight.value = textBaseHeight.value || height;
     currentItem.value = {
-      data: { ...currentItem.value.data,
+      data: {
+        ...currentItem.value.data,
         height: height
       },
       type: currentItem.value.type,
@@ -196,165 +158,68 @@ const onTextHeightUpdate = (currentItem, textBaseHeight, height) => {
     };
   }
 };
-
-const reducerDrawStates = (drawStates, action) => {
-  'worklet';
-
-  switch (action.type) {
-    case 'ADD_DONE_ITEM':
-      return { ...drawStates,
-        doneItems: drawStates.doneItems.concat(action.item)
-      };
-
-    case 'DELETE_DONE_ITEM':
-      const newDoneItems = drawStates.doneItems;
-      newDoneItems.splice(action.indice, 1);
-      return { ...drawStates,
-        doneItems: newDoneItems
-      };
-
-    case 'ADD_SCREEN_STATE':
-      if (action.currentItem) {
-        return { ...drawStates,
-          screenStates: drawStates.screenStates.concat([[...drawStates.doneItems, action.currentItem]])
-        };
-      } else {
-        return { ...drawStates,
-          screenStates: drawStates.screenStates.concat([[...drawStates.doneItems]])
-        };
-      }
-
-    case 'CANCEL':
-      const len = drawStates.screenStates.length;
-
-      if (len > 1) {
-        const newScreenStates = drawStates.screenStates;
-        newScreenStates.pop();
-
-        if (newScreenStates.length === 1) {
-          var _action$onCancelChang;
-
-          (_action$onCancelChang = action.onCancelChange) === null || _action$onCancelChang === void 0 ? void 0 : _action$onCancelChang.call(action, false);
-        }
-
-        return {
-          doneItems: drawStates.screenStates[len - 2],
-          screenStates: newScreenStates
-        };
-      } else {
-        return drawStates;
-      }
-
-  }
-};
-
-const DrawCore = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+const DrawCore = _ref => {
   var _textInputRef$current3, _textInputRef$current4;
-
   let {
-    drawingMode,
     image,
-    linearGradient,
-    onSelectionChange,
-    onCancelChange,
     backgroundColor
   } = _ref;
+  const {
+    drawState,
+    dispatchDrawStates,
+    strokeWidth,
+    color,
+    currentItem,
+    itemIsSelected,
+    viewShot
+  } = useDrawHook();
+  const onCancelChangeWrapper = arg => {
+    dispatchDrawStates({
+      type: 'SET_CANCEL_ENABLED',
+      cancelEnabled: arg
+    });
+  };
   const mode = useSharedValue('pen');
   const [drawRegion, setDrawRegion] = useState(null);
   const [originalImageSize, setOriginalImageSize] = useState(null);
   const [imageSize, setImageSize] = useState(null);
   const drawContainer = useRef(null);
-  const viewShot = useRef(null);
   const [textVal, setTextVal] = useState('');
-  const currentItem = useSharedValue(null);
   const initialItem = useSharedValue(null);
-  const [drawStates, dispatchDrawStates] = useReducer(reducerDrawStates, {
-    doneItems: [],
-    screenStates: [[]]
-  });
   const textBaseHeight = useSharedValue(null);
   const addDoneItem = useCallback(item => {
     dispatchDrawStates({
       type: 'ADD_DONE_ITEM',
       item: item
     });
-  }, []);
+  }, [dispatchDrawStates]);
   const deleteDoneItem = useCallback(indice => {
     dispatchDrawStates({
       type: 'DELETE_DONE_ITEM',
       indice: indice
     });
-  }, []);
+  }, [dispatchDrawStates]);
   const addScreenStates = useCallback(item => {
     dispatchDrawStates({
       type: 'ADD_SCREEN_STATE',
       currentItem: item
     });
-  }, []);
-  const cancelAction = useCallback(() => {
-    dispatchDrawStates({
-      type: 'CANCEL',
-      onCancelChange: onCancelChange
-    });
-  }, [onCancelChange]);
-  useImperativeHandle(ref, () => ({
-    drawingContainer: drawContainer,
-    deleteSelectedItem: () => {
-      if (currentItem.value) {
-        currentItem.value = null;
-        addScreenStates(null);
-      }
-
-      onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(false);
-      onCancelChange === null || onCancelChange === void 0 ? void 0 : onCancelChange(true);
-    },
-    cancelLastAction: () => {
-      onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(false);
-
-      if (currentItem.value) {
-        currentItem.value = null;
-      }
-
-      cancelAction();
-    },
-    takeSnapshot: async () => {
-      var _viewShot$current, _viewShot$current$cap;
-
-      if (currentItem.value) {
-        addDoneItem(currentItem.value);
-        currentItem.value = null;
-      }
-
-      return (_viewShot$current = viewShot.current) === null || _viewShot$current === void 0 ? void 0 : (_viewShot$current$cap = _viewShot$current.capture) === null || _viewShot$current$cap === void 0 ? void 0 : _viewShot$current$cap.call(_viewShot$current);
-    }
-  }), [currentItem, onSelectionChange, onCancelChange, addScreenStates, cancelAction, addDoneItem]);
+  }, [dispatchDrawStates]);
   useEffect(() => {
-    mode.value = drawingMode;
-
+    mode.value = drawState.drawingMode;
     if (currentItem.value) {
       addDoneItem(currentItem.value);
     }
-
     currentItem.value = null;
-    onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(false);
-  }, [drawingMode, mode, currentItem, onSelectionChange, addDoneItem]);
-  const strokeWidth = useSharedValue(2);
-  const color = useSharedValue('hsl(0, 100%, 0%)');
-  const panPosition = useSharedValue(0);
+    itemIsSelected.value = false;
+  }, [drawState.drawingMode, mode, currentItem, addDoneItem, itemIsSelected]);
   const showTextInput = useSharedValue(false);
   const textFocus = useCallback(() => {
     var _textInputRef$current;
-
     (_textInputRef$current = textInputRef.current) === null || _textInputRef$current === void 0 ? void 0 : _textInputRef$current.focus();
   }, []);
-  const onColorStrokeChange = useCallback(() => {
-    if (currentItem.value) {
-      addScreenStates(currentItem.value);
-    }
-  }, [addScreenStates, currentItem.value]);
   useEffect(() => {
     var _currentItem$value2;
-
     if (((_currentItem$value2 = currentItem.value) === null || _currentItem$value2 === void 0 ? void 0 : _currentItem$value2.type) === 'text') {
       currentItem.value = {
         data: currentItem.value.data,
@@ -368,7 +233,6 @@ const DrawCore = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   const onGestureEvent = useAnimatedGestureHandler({
     onStart: (_ref2, ctx) => {
       var _currentItem$value3;
-
       let {
         x: startX,
         y: startY
@@ -376,16 +240,16 @@ const DrawCore = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       ctx.startX = startX;
       ctx.startY = startY;
       ctx.newlyCreated = false;
-      panPosition.value = withTiming(RIGHT_PANE_WIDTH);
-      initialItem.value = currentItem.value;
 
+      //panPosition.value = withTiming(RIGHT_PANE_WIDTH);
+
+      initialItem.value = currentItem.value;
       switch ((_currentItem$value3 = currentItem.value) === null || _currentItem$value3 === void 0 ? void 0 : _currentItem$value3.type) {
         case 'ellipse':
           const cx = typeof currentItem.value.data.cx === 'string' ? parseFloat(currentItem.value.data.cx) : currentItem.value.data.cx || 0;
           const cy = typeof currentItem.value.data.cy === 'string' ? parseFloat(currentItem.value.data.cy) : currentItem.value.data.cy || 0;
           const rx = typeof currentItem.value.data.rx === 'string' ? parseFloat(currentItem.value.data.rx) : currentItem.value.data.rx || 0;
           const ry = typeof currentItem.value.data.ry === 'string' ? parseFloat(currentItem.value.data.ry) : currentItem.value.data.ry || 0;
-
           if (startX <= cx + THRESHOLD && startX >= cx - THRESHOLD && startY <= cy - ry + THRESHOLD && startY >= cy - ry - THRESHOLD) {
             ctx.zone = 'TOP';
           } else if (startX <= cx + THRESHOLD && startX >= cx - THRESHOLD && startY <= cy + ry + THRESHOLD && startY >= cy + ry - THRESHOLD) {
@@ -400,15 +264,12 @@ const DrawCore = /*#__PURE__*/React.forwardRef((_ref, ref) => {
             ctx.zone = 'OUT';
             initialItem.value = null;
           }
-
           break;
-
         case 'rectangle':
           const x = typeof currentItem.value.data.x === 'string' ? parseFloat(currentItem.value.data.x) : currentItem.value.data.x || 0;
           const y = typeof currentItem.value.data.y === 'string' ? parseFloat(currentItem.value.data.y) : currentItem.value.data.y || 0;
           const height = typeof currentItem.value.data.height === 'string' ? parseFloat(currentItem.value.data.height) : currentItem.value.data.height || 0;
           const width = typeof currentItem.value.data.width === 'string' ? parseFloat(currentItem.value.data.width) : currentItem.value.data.width || 0;
-
           if (startX <= x + THRESHOLD && startX >= x - THRESHOLD) {
             if (startY <= y + THRESHOLD && startY >= y - THRESHOLD) {
               ctx.zone = 'TOP_LEFT';
@@ -427,16 +288,13 @@ const DrawCore = /*#__PURE__*/React.forwardRef((_ref, ref) => {
             ctx.zone = 'OUT';
             initialItem.value = null;
           }
-
           break;
-
         case 'doubleHead':
         case 'singleHead':
           const x1 = typeof currentItem.value.data.x1 === 'string' ? parseFloat(currentItem.value.data.x1) : currentItem.value.data.x1 || 0;
           const y1 = typeof currentItem.value.data.y1 === 'string' ? parseFloat(currentItem.value.data.y1) : currentItem.value.data.y1 || 0;
           const x2 = typeof currentItem.value.data.x2 === 'string' ? parseFloat(currentItem.value.data.x2) : currentItem.value.data.x2 || 0;
           const y2 = typeof currentItem.value.data.y2 === 'string' ? parseFloat(currentItem.value.data.y2) : currentItem.value.data.y2 || 0;
-
           if (startX <= x1 + THRESHOLD && startX >= x1 - THRESHOLD && startY <= y1 + THRESHOLD && startY >= y1 - THRESHOLD) {
             ctx.zone = 'TOP';
           } else if (startX <= x2 + THRESHOLD && startX >= x2 - THRESHOLD && startY - THRESHOLD <= y2 + THRESHOLD && startY + THRESHOLD >= y2 - THRESHOLD) {
@@ -455,15 +313,12 @@ const DrawCore = /*#__PURE__*/React.forwardRef((_ref, ref) => {
             ctx.zone = 'OUT';
             initialItem.value = null;
           }
-
           break;
-
         case 'text':
           const xText = typeof currentItem.value.data.x === 'string' ? parseFloat(currentItem.value.data.x) : currentItem.value.data.x || 0;
           const yText = typeof currentItem.value.data.y === 'string' ? parseFloat(currentItem.value.data.y) : currentItem.value.data.y || 0;
           const widthText = typeof currentItem.value.data.width === 'string' ? parseFloat(currentItem.value.data.width) : currentItem.value.data.width || 0;
           const heightText = typeof currentItem.value.data.height === 'string' ? parseFloat(currentItem.value.data.height) : currentItem.value.data.height || 0;
-
           if (startX <= xText + THRESHOLD && startX >= xText - THRESHOLD && startY <= yText + heightText / 2 + THRESHOLD && startY >= yText + heightText / 2 - THRESHOLD) {
             ctx.zone = 'LEFT';
           } else if (startX <= xText + widthText + THRESHOLD && startX >= xText + widthText - THRESHOLD && startY <= yText + heightText / 2 + THRESHOLD && startY >= yText + heightText / 2 - THRESHOLD) {
@@ -474,9 +329,7 @@ const DrawCore = /*#__PURE__*/React.forwardRef((_ref, ref) => {
             ctx.zone = 'OUT';
             initialItem.value = null;
           }
-
           break;
-
         case 'pen':
           if (currentItem.value.data.some(p => startX <= p.x + THRESHOLD && startX >= p.x - THRESHOLD && startY <= p.y + THRESHOLD && startY >= p.y - THRESHOLD)) {
             ctx.zone = 'CENTER';
@@ -484,9 +337,7 @@ const DrawCore = /*#__PURE__*/React.forwardRef((_ref, ref) => {
             ctx.zone = 'OUT';
             initialItem.value = null;
           }
-
           break;
-
         default:
           ctx.zone = 'OUT';
           initialItem.value = null;
@@ -495,7 +346,6 @@ const DrawCore = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     },
     onActive: (_ref3, ctx) => {
       var _currentItem$value4, _initialItem$value, _initialItem$value2, _initialItem$value4, _initialItem$value17, _initialItem$value30;
-
       let {
         x: currentX,
         y: currentY,
@@ -508,14 +358,11 @@ const DrawCore = /*#__PURE__*/React.forwardRef((_ref, ref) => {
         zone,
         newlyCreated
       } = ctx;
-
       if (zone === 'OUT' && newlyCreated === false) {
         ctx.newlyCreated = true;
-
         if (mode.value === 'text') {
           runOnJS(setTextVal)('');
         }
-
         drawNewItem(mode, currentItem, addDoneItem, {
           x: startX,
           y: startY
@@ -524,10 +371,9 @@ const DrawCore = /*#__PURE__*/React.forwardRef((_ref, ref) => {
           strokeWidth,
           color
         });
-        onSelectionChange && runOnJS(onSelectionChange)(true);
-        onCancelChange && runOnJS(onCancelChange)(true);
+        itemIsSelected.value = true;
+        onCancelChangeWrapper && runOnJS(onCancelChangeWrapper)(true);
       }
-
       switch ((_currentItem$value4 = currentItem.value) === null || _currentItem$value4 === void 0 ? void 0 : _currentItem$value4.type) {
         case 'pen':
           if (((_initialItem$value = initialItem.value) === null || _initialItem$value === void 0 ? void 0 : _initialItem$value.type) === currentItem.value.type && zone === 'CENTER') {
@@ -551,18 +397,14 @@ const DrawCore = /*#__PURE__*/React.forwardRef((_ref, ref) => {
               })
             };
           }
-
           break;
-
         case 'ellipse':
           if (((_initialItem$value2 = initialItem.value) === null || _initialItem$value2 === void 0 ? void 0 : _initialItem$value2.type) === currentItem.value.type) {
             var _initialItem$value3;
-
             const rx = typeof initialItem.value.data.rx === 'string' ? parseFloat((_initialItem$value3 = initialItem.value) === null || _initialItem$value3 === void 0 ? void 0 : _initialItem$value3.data.rx) : initialItem.value.data.rx || 0;
             const ry = typeof initialItem.value.data.ry === 'string' ? parseFloat(initialItem.value.data.ry) : initialItem.value.data.ry || 0;
             const cx = typeof initialItem.value.data.cx === 'string' ? parseFloat(initialItem.value.data.cx) : initialItem.value.data.cx || 0;
             const cy = typeof initialItem.value.data.cy === 'string' ? parseFloat(initialItem.value.data.cy) : initialItem.value.data.cy || 0;
-
             switch (zone) {
               case 'TOP':
                 currentItem.value = {
@@ -577,7 +419,6 @@ const DrawCore = /*#__PURE__*/React.forwardRef((_ref, ref) => {
                   }
                 };
                 break;
-
               case 'BOTTOM':
                 currentItem.value = {
                   type: currentItem.value.type,
@@ -591,7 +432,6 @@ const DrawCore = /*#__PURE__*/React.forwardRef((_ref, ref) => {
                   }
                 };
                 break;
-
               case 'LEFT':
                 currentItem.value = {
                   type: currentItem.value.type,
@@ -605,7 +445,6 @@ const DrawCore = /*#__PURE__*/React.forwardRef((_ref, ref) => {
                   }
                 };
                 break;
-
               case 'RIGHT':
                 currentItem.value = {
                   type: currentItem.value.type,
@@ -619,7 +458,6 @@ const DrawCore = /*#__PURE__*/React.forwardRef((_ref, ref) => {
                   }
                 };
                 break;
-
               case 'CENTER':
                 currentItem.value = {
                   type: currentItem.value.type,
@@ -647,18 +485,14 @@ const DrawCore = /*#__PURE__*/React.forwardRef((_ref, ref) => {
               }
             };
           }
-
           break;
-
         case 'rectangle':
           if (((_initialItem$value4 = initialItem.value) === null || _initialItem$value4 === void 0 ? void 0 : _initialItem$value4.type) === currentItem.value.type) {
             var _initialItem$value5, _initialItem$value6, _initialItem$value7, _initialItem$value8, _initialItem$value9, _initialItem$value10, _initialItem$value11, _initialItem$value12, _initialItem$value13, _initialItem$value14, _initialItem$value15, _initialItem$value16;
-
             const height = typeof ((_initialItem$value5 = initialItem.value) === null || _initialItem$value5 === void 0 ? void 0 : _initialItem$value5.data.height) === 'string' ? parseFloat((_initialItem$value6 = initialItem.value) === null || _initialItem$value6 === void 0 ? void 0 : _initialItem$value6.data.height) : ((_initialItem$value7 = initialItem.value) === null || _initialItem$value7 === void 0 ? void 0 : _initialItem$value7.data.height) || 0;
             const width = typeof ((_initialItem$value8 = initialItem.value) === null || _initialItem$value8 === void 0 ? void 0 : _initialItem$value8.data.width) === 'string' ? parseFloat((_initialItem$value9 = initialItem.value) === null || _initialItem$value9 === void 0 ? void 0 : _initialItem$value9.data.width) : ((_initialItem$value10 = initialItem.value) === null || _initialItem$value10 === void 0 ? void 0 : _initialItem$value10.data.width) || 0;
             const x = typeof ((_initialItem$value11 = initialItem.value) === null || _initialItem$value11 === void 0 ? void 0 : _initialItem$value11.data.x) === 'string' ? parseFloat((_initialItem$value12 = initialItem.value) === null || _initialItem$value12 === void 0 ? void 0 : _initialItem$value12.data.x) : ((_initialItem$value13 = initialItem.value) === null || _initialItem$value13 === void 0 ? void 0 : _initialItem$value13.data.x) || 0;
             const y = typeof ((_initialItem$value14 = initialItem.value) === null || _initialItem$value14 === void 0 ? void 0 : _initialItem$value14.data.y) === 'string' ? parseFloat((_initialItem$value15 = initialItem.value) === null || _initialItem$value15 === void 0 ? void 0 : _initialItem$value15.data.y) : ((_initialItem$value16 = initialItem.value) === null || _initialItem$value16 === void 0 ? void 0 : _initialItem$value16.data.y) || 0;
-
             switch (zone) {
               case 'TOP_LEFT':
                 currentItem.value = {
@@ -673,7 +507,6 @@ const DrawCore = /*#__PURE__*/React.forwardRef((_ref, ref) => {
                   }
                 };
                 break;
-
               case 'TOP_RIGHT':
                 currentItem.value = {
                   type: 'rectangle',
@@ -687,7 +520,6 @@ const DrawCore = /*#__PURE__*/React.forwardRef((_ref, ref) => {
                   }
                 };
                 break;
-
               case 'BOTTOM_LEFT':
                 currentItem.value = {
                   type: 'rectangle',
@@ -701,7 +533,6 @@ const DrawCore = /*#__PURE__*/React.forwardRef((_ref, ref) => {
                   }
                 };
                 break;
-
               case 'BOTTOM_RIGHT':
                 currentItem.value = {
                   type: 'rectangle',
@@ -715,7 +546,6 @@ const DrawCore = /*#__PURE__*/React.forwardRef((_ref, ref) => {
                   }
                 };
                 break;
-
               case 'CENTER':
                 currentItem.value = {
                   type: 'rectangle',
@@ -743,19 +573,15 @@ const DrawCore = /*#__PURE__*/React.forwardRef((_ref, ref) => {
               }
             };
           }
-
           break;
-
         case 'singleHead':
         case 'doubleHead':
           if (((_initialItem$value17 = initialItem.value) === null || _initialItem$value17 === void 0 ? void 0 : _initialItem$value17.type) === currentItem.value.type) {
             var _initialItem$value18, _initialItem$value19, _initialItem$value20, _initialItem$value21, _initialItem$value22, _initialItem$value23, _initialItem$value24, _initialItem$value25, _initialItem$value26, _initialItem$value27, _initialItem$value28, _initialItem$value29;
-
             const x1 = typeof ((_initialItem$value18 = initialItem.value) === null || _initialItem$value18 === void 0 ? void 0 : _initialItem$value18.data.x1) === 'string' ? parseFloat((_initialItem$value19 = initialItem.value) === null || _initialItem$value19 === void 0 ? void 0 : _initialItem$value19.data.x1) : ((_initialItem$value20 = initialItem.value) === null || _initialItem$value20 === void 0 ? void 0 : _initialItem$value20.data.x1) || 0;
             const y1 = typeof ((_initialItem$value21 = initialItem.value) === null || _initialItem$value21 === void 0 ? void 0 : _initialItem$value21.data.y1) === 'string' ? parseFloat((_initialItem$value22 = initialItem.value) === null || _initialItem$value22 === void 0 ? void 0 : _initialItem$value22.data.y1) : ((_initialItem$value23 = initialItem.value) === null || _initialItem$value23 === void 0 ? void 0 : _initialItem$value23.data.y1) || 0;
             const x2 = typeof ((_initialItem$value24 = initialItem.value) === null || _initialItem$value24 === void 0 ? void 0 : _initialItem$value24.data.x2) === 'string' ? parseFloat((_initialItem$value25 = initialItem.value) === null || _initialItem$value25 === void 0 ? void 0 : _initialItem$value25.data.x2) : ((_initialItem$value26 = initialItem.value) === null || _initialItem$value26 === void 0 ? void 0 : _initialItem$value26.data.x2) || 0;
             const y2 = typeof ((_initialItem$value27 = initialItem.value) === null || _initialItem$value27 === void 0 ? void 0 : _initialItem$value27.data.y2) === 'string' ? parseFloat((_initialItem$value28 = initialItem.value) === null || _initialItem$value28 === void 0 ? void 0 : _initialItem$value28.data.y2) : ((_initialItem$value29 = initialItem.value) === null || _initialItem$value29 === void 0 ? void 0 : _initialItem$value29.data.y2) || 0;
-
             switch (zone) {
               case 'TOP':
                 currentItem.value = {
@@ -770,7 +596,6 @@ const DrawCore = /*#__PURE__*/React.forwardRef((_ref, ref) => {
                   }
                 };
                 break;
-
               case 'BOTTOM':
                 currentItem.value = {
                   type: currentItem.value.type,
@@ -784,7 +609,6 @@ const DrawCore = /*#__PURE__*/React.forwardRef((_ref, ref) => {
                   }
                 };
                 break;
-
               case 'CENTER':
                 currentItem.value = {
                   type: currentItem.value.type,
@@ -812,18 +636,14 @@ const DrawCore = /*#__PURE__*/React.forwardRef((_ref, ref) => {
               }
             };
           }
-
           break;
-
         case 'text':
           if (((_initialItem$value30 = initialItem.value) === null || _initialItem$value30 === void 0 ? void 0 : _initialItem$value30.type) === currentItem.value.type) {
             var _initialItem$value31, _initialItem$value32, _initialItem$value33, _initialItem$value34, _initialItem$value35, _initialItem$value36, _initialItem$value37, _initialItem$value38, _initialItem$value39, _initialItem$value40, _initialItem$value41, _initialItem$value42;
-
             const xText = typeof ((_initialItem$value31 = initialItem.value) === null || _initialItem$value31 === void 0 ? void 0 : _initialItem$value31.data.x) === 'string' ? parseFloat((_initialItem$value32 = initialItem.value) === null || _initialItem$value32 === void 0 ? void 0 : _initialItem$value32.data.x) : ((_initialItem$value33 = initialItem.value) === null || _initialItem$value33 === void 0 ? void 0 : _initialItem$value33.data.x) || 0;
             const yText = typeof ((_initialItem$value34 = initialItem.value) === null || _initialItem$value34 === void 0 ? void 0 : _initialItem$value34.data.y) === 'string' ? parseFloat((_initialItem$value35 = initialItem.value) === null || _initialItem$value35 === void 0 ? void 0 : _initialItem$value35.data.y) : ((_initialItem$value36 = initialItem.value) === null || _initialItem$value36 === void 0 ? void 0 : _initialItem$value36.data.y) || 0;
             const widthText = typeof ((_initialItem$value37 = initialItem.value) === null || _initialItem$value37 === void 0 ? void 0 : _initialItem$value37.data.width) === 'string' ? parseFloat((_initialItem$value38 = initialItem.value) === null || _initialItem$value38 === void 0 ? void 0 : _initialItem$value38.data.width) : ((_initialItem$value39 = initialItem.value) === null || _initialItem$value39 === void 0 ? void 0 : _initialItem$value39.data.width) || 0;
             const heightText = typeof ((_initialItem$value40 = initialItem.value) === null || _initialItem$value40 === void 0 ? void 0 : _initialItem$value40.data.height) === 'string' ? parseFloat((_initialItem$value41 = initialItem.value) === null || _initialItem$value41 === void 0 ? void 0 : _initialItem$value41.data.height) : ((_initialItem$value42 = initialItem.value) === null || _initialItem$value42 === void 0 ? void 0 : _initialItem$value42.data.height) || 0;
-
             switch (zone) {
               case 'LEFT':
                 currentItem.value = {
@@ -839,7 +659,6 @@ const DrawCore = /*#__PURE__*/React.forwardRef((_ref, ref) => {
                   }
                 };
                 break;
-
               case 'RIGHT':
                 currentItem.value = {
                   type: currentItem.value.type,
@@ -854,7 +673,6 @@ const DrawCore = /*#__PURE__*/React.forwardRef((_ref, ref) => {
                   }
                 };
                 break;
-
               case 'CENTER':
                 currentItem.value = {
                   type: currentItem.value.type,
@@ -884,36 +702,22 @@ const DrawCore = /*#__PURE__*/React.forwardRef((_ref, ref) => {
               }
             };
           }
-
       }
     },
     onEnd: _event => {
       var _currentItem$value5;
-
-      panPosition.value = withTiming(0);
-
       if (((_currentItem$value5 = currentItem.value) === null || _currentItem$value5 === void 0 ? void 0 : _currentItem$value5.type) === 'text') {
-        var _currentItem$value$te;
-
         runOnJS(textFocus)();
         currentItem.value = {
           type: currentItem.value.type,
           strokeWidth: currentItem.value.strokeWidth,
           color: currentItem.value.color,
           data: currentItem.value.data,
-          text: currentItem.value.text !== DEFAULT_TEXT ? (_currentItem$value$te = currentItem.value.text) !== null && _currentItem$value$te !== void 0 ? _currentItem$value$te : '' : ''
+          text: currentItem.value.text !== DEFAULT_TEXT ? currentItem.value.text ?? '' : ''
         };
       }
-
       runOnJS(addScreenStates)(currentItem.value);
     }
-  }, []);
-  const rightPaneStyle = useAnimatedStyle(() => {
-    return {
-      transform: [{
-        translateX: panPosition.value
-      }]
-    };
   });
   useEffect(() => {
     const sudDidHide = Keyboard.addListener('keyboardDidHide', () => {
@@ -924,8 +728,9 @@ const DrawCore = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       if (event.endCoordinates.height > 100) {
         showTextInput.value = true;
       }
-    }); // cleanup function
+    });
 
+    // cleanup function
     return () => {
       sudDidShow.remove();
       sudDidHide.remove();
@@ -935,13 +740,14 @@ const DrawCore = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   const textInputContainerStyle = useAnimatedStyle(() => {
     return {
       height: 'auto',
-      backgroundColor: 'white',
+      backgroundColor: 'red',
       display: 'flex',
       opacity: showTextInput.value ? withTiming(1) : withTiming(0)
     };
   }, [showTextInput.value]);
   const textInputStyle = useAnimatedStyle(() => {
     return {
+      backgroundColor: 'blue',
       display: showTextInput.value ? 'flex' : 'none',
       opacity: showTextInput.value ? withTiming(1) : withTiming(0)
     };
@@ -949,16 +755,14 @@ const DrawCore = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   useAnimatedReaction(() => {
     return {
       strokeWidth: strokeWidth.value,
-      color: color.value
+      color: color === null || color === void 0 ? void 0 : color.value
     };
   }, _ref4 => {
     var _currentItem$value6;
-
     let {
       strokeWidth: sw,
       color: c
     } = _ref4;
-
     switch ((_currentItem$value6 = currentItem.value) === null || _currentItem$value6 === void 0 ? void 0 : _currentItem$value6.type) {
       case 'singleHead':
         currentItem.value = {
@@ -968,7 +772,6 @@ const DrawCore = /*#__PURE__*/React.forwardRef((_ref, ref) => {
           color: c
         };
         break;
-
       case 'doubleHead':
         currentItem.value = {
           type: currentItem.value.type,
@@ -977,7 +780,6 @@ const DrawCore = /*#__PURE__*/React.forwardRef((_ref, ref) => {
           color: c
         };
         break;
-
       case 'ellipse':
         currentItem.value = {
           type: currentItem.value.type,
@@ -986,7 +788,6 @@ const DrawCore = /*#__PURE__*/React.forwardRef((_ref, ref) => {
           color: c
         };
         break;
-
       case 'rectangle':
         currentItem.value = {
           type: currentItem.value.type,
@@ -995,7 +796,6 @@ const DrawCore = /*#__PURE__*/React.forwardRef((_ref, ref) => {
           color: c
         };
         break;
-
       case 'pen':
         currentItem.value = {
           type: currentItem.value.type,
@@ -1004,7 +804,6 @@ const DrawCore = /*#__PURE__*/React.forwardRef((_ref, ref) => {
           color: c
         };
         break;
-
       case 'text':
         currentItem.value = {
           type: currentItem.value.type,
@@ -1015,29 +814,24 @@ const DrawCore = /*#__PURE__*/React.forwardRef((_ref, ref) => {
         };
         break;
     }
-  }, [strokeWidth.value, color.value]);
+  }, [strokeWidth.value, color === null || color === void 0 ? void 0 : color.value]);
   const onPressItem = useCallback((item, index) => () => {
-    onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(true);
+    itemIsSelected.value = true;
     const previousItem = currentItem.value;
     strokeWidth.value = item.strokeWidth;
     color.value = item.color;
     currentItem.value = item;
     deleteDoneItem(index);
-
     if (previousItem) {
       addDoneItem(previousItem);
     }
-
     if (item.type === 'text') {
-      var _item$text;
-
-      setTextVal((_item$text = item.text) !== null && _item$text !== void 0 ? _item$text : '');
+      setTextVal(item.text ?? '');
     } else {
       var _textInputRef$current2;
-
       (_textInputRef$current2 = textInputRef.current) === null || _textInputRef$current2 === void 0 ? void 0 : _textInputRef$current2.blur();
     }
-  }, [onSelectionChange, currentItem, strokeWidth, color, deleteDoneItem, addDoneItem]);
+  }, [itemIsSelected, currentItem, strokeWidth, color, deleteDoneItem, addDoneItem]);
   const onTextHeightChange = useCallback(height => {
     onTextHeightUpdate(currentItem, textBaseHeight, height);
   }, [currentItem, textBaseHeight]);
@@ -1048,7 +842,6 @@ const DrawCore = /*#__PURE__*/React.forwardRef((_ref, ref) => {
         height: imageHeight
       });
       const ratioImageHeight = Math.round(imageHeight * drawRegion.width / imageWidth * 100) / 100;
-
       if (ratioImageHeight < drawRegion.height) {
         setImageSize({
           width: drawRegion.width,
@@ -1078,7 +871,7 @@ const DrawCore = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     style: styles.container
   }, /*#__PURE__*/React.createElement(View, {
     style: [styles.drawZone, {
-      backgroundColor: backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : '#FFF'
+      backgroundColor: backgroundColor ?? 'none'
     }],
     onLayout: event => {
       setDrawRegion({
@@ -1104,7 +897,7 @@ const DrawCore = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     style: styles.bgImage
   }, /*#__PURE__*/React.createElement(DrawPad, {
     currentItem: currentItem,
-    doneItems: drawStates.doneItems,
+    doneItems: drawState.doneItems,
     onPressItem: onPressItem,
     onTextHeightChange: onTextHeightChange
   }))) : null : drawRegion ? /*#__PURE__*/React.createElement(ViewShot, {
@@ -1117,25 +910,10 @@ const DrawCore = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     style: drawRegion
   }, /*#__PURE__*/React.createElement(DrawPad, {
     currentItem: currentItem,
-    doneItems: drawStates.doneItems,
+    doneItems: drawState.doneItems,
     onPressItem: onPressItem,
     onTextHeightChange: onTextHeightChange
-  })) : null))), /*#__PURE__*/React.createElement(Animated.View, {
-    style: [styles.rightPaneBaseStyle, rightPaneStyle]
-  }, /*#__PURE__*/React.createElement(View, {
-    style: styles.strokeSliderContainer
-  }, /*#__PURE__*/React.createElement(StrokeSlider, {
-    minValue: 2,
-    maxValue: 10,
-    stroke: strokeWidth,
-    onStrokeChange: onColorStrokeChange
-  })), /*#__PURE__*/React.createElement(View, {
-    style: styles.colorSliderContainer
-  }, /*#__PURE__*/React.createElement(ColorSlider, {
-    color: color,
-    linearGradient: linearGradient,
-    onColorChange: onColorStrokeChange
-  })))), Platform.OS === 'ios' ? /*#__PURE__*/React.createElement(InputAccessoryView, null, /*#__PURE__*/React.createElement(AnimatedTextInput, {
+  })) : null)))), Platform.OS === 'ios' ? /*#__PURE__*/React.createElement(InputAccessoryView, null, /*#__PURE__*/React.createElement(AnimatedTextInput, {
     ref: textInputRef,
     style: [styles.textInput, textInputStyle],
     onEndEditing: (_textInputRef$current3 = textInputRef.current) === null || _textInputRef$current3 === void 0 ? void 0 : _textInputRef$current3.clear,
@@ -1152,6 +930,6 @@ const DrawCore = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     value: textVal,
     autoCorrect: false
   })));
-});
+};
 export default DrawCore;
 //# sourceMappingURL=index.js.map