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

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

@@ -4,69 +4,31 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _reactNative = require("react-native");
-
 var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
-
 var _reactNativeGestureHandler = require("react-native-gesture-handler");
-
-var _ColorSlider = _interopRequireDefault(require("./ColorSlider"));
-
-var _StrokeSlider = _interopRequireDefault(require("./StrokeSlider"));
-
 var _DrawPad = _interopRequireDefault(require("./DrawPad"));
-
 var _reactNativeViewShot = _interopRequireDefault(require("react-native-view-shot"));
-
+var _useDrawHook = _interopRequireDefault(require("./useDrawHook"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-const RIGHT_PANE_WIDTH = 60;
-
 const styles = _reactNative.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,
@@ -74,7 +36,6 @@ const styles = _reactNative.StyleSheet.create({
     width: '100%'
   }
 });
-
 const pDistance = (point, line) => {
   'worklet';
 
@@ -95,14 +56,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;
@@ -113,24 +71,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 = _reactNativeReanimated.default.createAnimatedComponent(_reactNative.TextInput);
-
 const DEFAULT_TEXT = '';
 const THRESHOLD = 20;
-
 const drawNewItem = (mode, currentItem, addDoneItem, position, style) => {
   'worklet';
 
   if (currentItem.value) {
     (0, _reactNativeReanimated.runOnJS)(addDoneItem)(currentItem.value);
   }
-
   switch (mode.value) {
     case 'ellipse':
       currentItem.value = {
@@ -145,7 +98,6 @@ const drawNewItem = (mode, currentItem, addDoneItem, position, style) => {
         color: style.color.value
       };
       break;
-
     case 'rectangle':
       currentItem.value = {
         type: mode.value,
@@ -159,7 +111,6 @@ const drawNewItem = (mode, currentItem, addDoneItem, position, style) => {
         color: style.color.value
       };
       break;
-
     case 'singleHead':
     case 'doubleHead':
       currentItem.value = {
@@ -174,7 +125,6 @@ const drawNewItem = (mode, currentItem, addDoneItem, position, style) => {
         color: style.color.value
       };
       break;
-
     case 'text':
       currentItem.value = {
         type: mode.value,
@@ -189,7 +139,6 @@ const drawNewItem = (mode, currentItem, addDoneItem, position, style) => {
         color: style.color.value
       };
       break;
-
     case 'pen':
       currentItem.value = {
         type: mode.value,
@@ -200,16 +149,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,
@@ -219,165 +167,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.default.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
+  } = (0, _useDrawHook.default)();
+  const onCancelChangeWrapper = arg => {
+    dispatchDrawStates({
+      type: 'SET_CANCEL_ENABLED',
+      cancelEnabled: arg
+    });
+  };
   const mode = (0, _reactNativeReanimated.useSharedValue)('pen');
   const [drawRegion, setDrawRegion] = (0, _react.useState)(null);
   const [originalImageSize, setOriginalImageSize] = (0, _react.useState)(null);
   const [imageSize, setImageSize] = (0, _react.useState)(null);
   const drawContainer = (0, _react.useRef)(null);
-  const viewShot = (0, _react.useRef)(null);
   const [textVal, setTextVal] = (0, _react.useState)('');
-  const currentItem = (0, _reactNativeReanimated.useSharedValue)(null);
   const initialItem = (0, _reactNativeReanimated.useSharedValue)(null);
-  const [drawStates, dispatchDrawStates] = (0, _react.useReducer)(reducerDrawStates, {
-    doneItems: [],
-    screenStates: [[]]
-  });
   const textBaseHeight = (0, _reactNativeReanimated.useSharedValue)(null);
   const addDoneItem = (0, _react.useCallback)(item => {
     dispatchDrawStates({
       type: 'ADD_DONE_ITEM',
       item: item
     });
-  }, []);
+  }, [dispatchDrawStates]);
   const deleteDoneItem = (0, _react.useCallback)(indice => {
     dispatchDrawStates({
       type: 'DELETE_DONE_ITEM',
       indice: indice
     });
-  }, []);
+  }, [dispatchDrawStates]);
   const addScreenStates = (0, _react.useCallback)(item => {
     dispatchDrawStates({
       type: 'ADD_SCREEN_STATE',
       currentItem: item
     });
-  }, []);
-  const cancelAction = (0, _react.useCallback)(() => {
-    dispatchDrawStates({
-      type: 'CANCEL',
-      onCancelChange: onCancelChange
-    });
-  }, [onCancelChange]);
-  (0, _react.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]);
   (0, _react.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 = (0, _reactNativeReanimated.useSharedValue)(2);
-  const color = (0, _reactNativeReanimated.useSharedValue)('hsl(0, 100%, 0%)');
-  const panPosition = (0, _reactNativeReanimated.useSharedValue)(0);
+    itemIsSelected.value = false;
+  }, [drawState.drawingMode, mode, currentItem, addDoneItem, itemIsSelected]);
   const showTextInput = (0, _reactNativeReanimated.useSharedValue)(false);
   const textFocus = (0, _react.useCallback)(() => {
     var _textInputRef$current;
-
     (_textInputRef$current = textInputRef.current) === null || _textInputRef$current === void 0 ? void 0 : _textInputRef$current.focus();
   }, []);
-  const onColorStrokeChange = (0, _react.useCallback)(() => {
-    if (currentItem.value) {
-      addScreenStates(currentItem.value);
-    }
-  }, [addScreenStates, currentItem.value]);
   (0, _react.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,
@@ -391,7 +242,6 @@ const DrawCore = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   const onGestureEvent = (0, _reactNativeReanimated.useAnimatedGestureHandler)({
     onStart: (_ref2, ctx) => {
       var _currentItem$value3;
-
       let {
         x: startX,
         y: startY
@@ -399,16 +249,16 @@ const DrawCore = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
       ctx.startX = startX;
       ctx.startY = startY;
       ctx.newlyCreated = false;
-      panPosition.value = (0, _reactNativeReanimated.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) {
@@ -423,15 +273,12 @@ const DrawCore = /*#__PURE__*/_react.default.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';
@@ -450,16 +297,13 @@ const DrawCore = /*#__PURE__*/_react.default.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) {
@@ -478,15 +322,12 @@ const DrawCore = /*#__PURE__*/_react.default.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) {
@@ -497,9 +338,7 @@ const DrawCore = /*#__PURE__*/_react.default.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';
@@ -507,9 +346,7 @@ const DrawCore = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
             ctx.zone = 'OUT';
             initialItem.value = null;
           }
-
           break;
-
         default:
           ctx.zone = 'OUT';
           initialItem.value = null;
@@ -518,7 +355,6 @@ const DrawCore = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     },
     onActive: (_ref3, ctx) => {
       var _currentItem$value4, _initialItem$value, _initialItem$value2, _initialItem$value4, _initialItem$value17, _initialItem$value30;
-
       let {
         x: currentX,
         y: currentY,
@@ -531,14 +367,11 @@ const DrawCore = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
         zone,
         newlyCreated
       } = ctx;
-
       if (zone === 'OUT' && newlyCreated === false) {
         ctx.newlyCreated = true;
-
         if (mode.value === 'text') {
           (0, _reactNativeReanimated.runOnJS)(setTextVal)('');
         }
-
         drawNewItem(mode, currentItem, addDoneItem, {
           x: startX,
           y: startY
@@ -547,10 +380,9 @@ const DrawCore = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
           strokeWidth,
           color
         });
-        onSelectionChange && (0, _reactNativeReanimated.runOnJS)(onSelectionChange)(true);
-        onCancelChange && (0, _reactNativeReanimated.runOnJS)(onCancelChange)(true);
+        itemIsSelected.value = true;
+        onCancelChangeWrapper && (0, _reactNativeReanimated.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') {
@@ -574,18 +406,14 @@ const DrawCore = /*#__PURE__*/_react.default.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 = {
@@ -600,7 +428,6 @@ const DrawCore = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
                   }
                 };
                 break;
-
               case 'BOTTOM':
                 currentItem.value = {
                   type: currentItem.value.type,
@@ -614,7 +441,6 @@ const DrawCore = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
                   }
                 };
                 break;
-
               case 'LEFT':
                 currentItem.value = {
                   type: currentItem.value.type,
@@ -628,7 +454,6 @@ const DrawCore = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
                   }
                 };
                 break;
-
               case 'RIGHT':
                 currentItem.value = {
                   type: currentItem.value.type,
@@ -642,7 +467,6 @@ const DrawCore = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
                   }
                 };
                 break;
-
               case 'CENTER':
                 currentItem.value = {
                   type: currentItem.value.type,
@@ -670,18 +494,14 @@ const DrawCore = /*#__PURE__*/_react.default.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 = {
@@ -696,7 +516,6 @@ const DrawCore = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
                   }
                 };
                 break;
-
               case 'TOP_RIGHT':
                 currentItem.value = {
                   type: 'rectangle',
@@ -710,7 +529,6 @@ const DrawCore = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
                   }
                 };
                 break;
-
               case 'BOTTOM_LEFT':
                 currentItem.value = {
                   type: 'rectangle',
@@ -724,7 +542,6 @@ const DrawCore = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
                   }
                 };
                 break;
-
               case 'BOTTOM_RIGHT':
                 currentItem.value = {
                   type: 'rectangle',
@@ -738,7 +555,6 @@ const DrawCore = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
                   }
                 };
                 break;
-
               case 'CENTER':
                 currentItem.value = {
                   type: 'rectangle',
@@ -766,19 +582,15 @@ const DrawCore = /*#__PURE__*/_react.default.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 = {
@@ -793,7 +605,6 @@ const DrawCore = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
                   }
                 };
                 break;
-
               case 'BOTTOM':
                 currentItem.value = {
                   type: currentItem.value.type,
@@ -807,7 +618,6 @@ const DrawCore = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
                   }
                 };
                 break;
-
               case 'CENTER':
                 currentItem.value = {
                   type: currentItem.value.type,
@@ -835,18 +645,14 @@ const DrawCore = /*#__PURE__*/_react.default.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 = {
@@ -862,7 +668,6 @@ const DrawCore = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
                   }
                 };
                 break;
-
               case 'RIGHT':
                 currentItem.value = {
                   type: currentItem.value.type,
@@ -877,7 +682,6 @@ const DrawCore = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
                   }
                 };
                 break;
-
               case 'CENTER':
                 currentItem.value = {
                   type: currentItem.value.type,
@@ -907,50 +711,35 @@ const DrawCore = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
               }
             };
           }
-
       }
     },
     onEnd: _event => {
       var _currentItem$value5;
-
-      panPosition.value = (0, _reactNativeReanimated.withTiming)(0);
-
       if (((_currentItem$value5 = currentItem.value) === null || _currentItem$value5 === void 0 ? void 0 : _currentItem$value5.type) === 'text') {
-        var _currentItem$value$te;
-
         (0, _reactNativeReanimated.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 ?? '' : ''
         };
       }
-
       (0, _reactNativeReanimated.runOnJS)(addScreenStates)(currentItem.value);
     }
-  }, []);
-  const rightPaneStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
-    return {
-      transform: [{
-        translateX: panPosition.value
-      }]
-    };
   });
   (0, _react.useEffect)(() => {
     const sudDidHide = _reactNative.Keyboard.addListener('keyboardDidHide', () => {
       showTextInput.value = false;
     });
-
     const sudDidShow = _reactNative.Keyboard.addListener('keyboardDidShow', event => {
       // avoid events triggered by InputAccessoryView
       if (event.endCoordinates.height > 100) {
         showTextInput.value = true;
       }
-    }); // cleanup function
-
+    });
 
+    // cleanup function
     return () => {
       sudDidShow.remove();
       sudDidHide.remove();
@@ -960,13 +749,14 @@ const DrawCore = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   const textInputContainerStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
     return {
       height: 'auto',
-      backgroundColor: 'white',
+      backgroundColor: 'red',
       display: 'flex',
       opacity: showTextInput.value ? (0, _reactNativeReanimated.withTiming)(1) : (0, _reactNativeReanimated.withTiming)(0)
     };
   }, [showTextInput.value]);
   const textInputStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
     return {
+      backgroundColor: 'blue',
       display: showTextInput.value ? 'flex' : 'none',
       opacity: showTextInput.value ? (0, _reactNativeReanimated.withTiming)(1) : (0, _reactNativeReanimated.withTiming)(0)
     };
@@ -974,16 +764,14 @@ const DrawCore = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   (0, _reactNativeReanimated.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 = {
@@ -993,7 +781,6 @@ const DrawCore = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
           color: c
         };
         break;
-
       case 'doubleHead':
         currentItem.value = {
           type: currentItem.value.type,
@@ -1002,7 +789,6 @@ const DrawCore = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
           color: c
         };
         break;
-
       case 'ellipse':
         currentItem.value = {
           type: currentItem.value.type,
@@ -1011,7 +797,6 @@ const DrawCore = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
           color: c
         };
         break;
-
       case 'rectangle':
         currentItem.value = {
           type: currentItem.value.type,
@@ -1020,7 +805,6 @@ const DrawCore = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
           color: c
         };
         break;
-
       case 'pen':
         currentItem.value = {
           type: currentItem.value.type,
@@ -1029,7 +813,6 @@ const DrawCore = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
           color: c
         };
         break;
-
       case 'text':
         currentItem.value = {
           type: currentItem.value.type,
@@ -1040,29 +823,24 @@ const DrawCore = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
         };
         break;
     }
-  }, [strokeWidth.value, color.value]);
+  }, [strokeWidth.value, color === null || color === void 0 ? void 0 : color.value]);
   const onPressItem = (0, _react.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 = (0, _react.useCallback)(height => {
     onTextHeightUpdate(currentItem, textBaseHeight, height);
   }, [currentItem, textBaseHeight]);
@@ -1073,7 +851,6 @@ const DrawCore = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
         height: imageHeight
       });
       const ratioImageHeight = Math.round(imageHeight * drawRegion.width / imageWidth * 100) / 100;
-
       if (ratioImageHeight < drawRegion.height) {
         setImageSize({
           width: drawRegion.width,
@@ -1091,7 +868,6 @@ const DrawCore = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     if (drawRegion && image) {
       if (typeof image === 'number') {
         const infos = _reactNative.Image.resolveAssetSource(image);
-
         calculateSizes(infos.width, infos.height);
       } else if (image.uri) {
         _reactNative.Image.getSize(image.uri, (imageWidth, imageHeight) => {
@@ -1104,7 +880,7 @@ const DrawCore = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     style: styles.container
   }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
     style: [styles.drawZone, {
-      backgroundColor: backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : '#FFF'
+      backgroundColor: backgroundColor ?? 'none'
     }],
     onLayout: event => {
       setDrawRegion({
@@ -1130,7 +906,7 @@ const DrawCore = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     style: styles.bgImage
   }, /*#__PURE__*/_react.default.createElement(_DrawPad.default, {
     currentItem: currentItem,
-    doneItems: drawStates.doneItems,
+    doneItems: drawState.doneItems,
     onPressItem: onPressItem,
     onTextHeightChange: onTextHeightChange
   }))) : null : drawRegion ? /*#__PURE__*/_react.default.createElement(_reactNativeViewShot.default, {
@@ -1143,25 +919,10 @@ const DrawCore = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     style: drawRegion
   }, /*#__PURE__*/_react.default.createElement(_DrawPad.default, {
     currentItem: currentItem,
-    doneItems: drawStates.doneItems,
+    doneItems: drawState.doneItems,
     onPressItem: onPressItem,
     onTextHeightChange: onTextHeightChange
-  })) : null))), /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
-    style: [styles.rightPaneBaseStyle, rightPaneStyle]
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: styles.strokeSliderContainer
-  }, /*#__PURE__*/_react.default.createElement(_StrokeSlider.default, {
-    minValue: 2,
-    maxValue: 10,
-    stroke: strokeWidth,
-    onStrokeChange: onColorStrokeChange
-  })), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: styles.colorSliderContainer
-  }, /*#__PURE__*/_react.default.createElement(_ColorSlider.default, {
-    color: color,
-    linearGradient: linearGradient,
-    onColorChange: onColorStrokeChange
-  })))), _reactNative.Platform.OS === 'ios' ? /*#__PURE__*/_react.default.createElement(_reactNative.InputAccessoryView, null, /*#__PURE__*/_react.default.createElement(AnimatedTextInput, {
+  })) : null)))), _reactNative.Platform.OS === 'ios' ? /*#__PURE__*/_react.default.createElement(_reactNative.InputAccessoryView, null, /*#__PURE__*/_react.default.createElement(AnimatedTextInput, {
     ref: textInputRef,
     style: [styles.textInput, textInputStyle],
     onEndEditing: (_textInputRef$current3 = textInputRef.current) === null || _textInputRef$current3 === void 0 ? void 0 : _textInputRef$current3.clear,
@@ -1178,8 +939,7 @@ const DrawCore = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     value: textVal,
     autoCorrect: false
   })));
-});
-
+};
 var _default = DrawCore;
 exports.default = _default;
 //# sourceMappingURL=index.js.map