@archireport/react-native-svg-draw 1.2.0 → 1.4.0

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

@@ -4,31 +4,18 @@ 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"));
-
 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
@@ -36,8 +23,7 @@ const styles = _reactNative.StyleSheet.create({
   drawZone: {
     flex: 1,
     justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: 'white'
+    alignItems: 'center'
   },
   rightPaneBaseStyle: {
     position: 'absolute',
@@ -75,7 +61,6 @@ const styles = _reactNative.StyleSheet.create({
     width: '100%'
   }
 });
-
 const pDistance = (point, line) => {
   'worklet';
 
@@ -96,14 +81,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;
@@ -114,24 +96,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 = {
@@ -146,7 +123,6 @@ const drawNewItem = (mode, currentItem, addDoneItem, position, style) => {
         color: style.color.value
       };
       break;
-
     case 'rectangle':
       currentItem.value = {
         type: mode.value,
@@ -160,7 +136,6 @@ const drawNewItem = (mode, currentItem, addDoneItem, position, style) => {
         color: style.color.value
       };
       break;
-
     case 'singleHead':
     case 'doubleHead':
       currentItem.value = {
@@ -175,7 +150,6 @@ const drawNewItem = (mode, currentItem, addDoneItem, position, style) => {
         color: style.color.value
       };
       break;
-
     case 'text':
       currentItem.value = {
         type: mode.value,
@@ -190,7 +164,6 @@ const drawNewItem = (mode, currentItem, addDoneItem, position, style) => {
         color: style.color.value
       };
       break;
-
     case 'pen':
       currentItem.value = {
         type: mode.value,
@@ -201,16 +174,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,
@@ -220,67 +192,65 @@ const onTextHeightUpdate = (currentItem, textBaseHeight, height) => {
     };
   }
 };
-
 const reducerDrawStates = (drawStates, action) => {
   'worklet';
 
   switch (action.type) {
     case 'ADD_DONE_ITEM':
-      return { ...drawStates,
+      return {
+        ...drawStates,
         doneItems: drawStates.doneItems.concat(action.item)
       };
-
     case 'DELETE_DONE_ITEM':
       const newDoneItems = drawStates.doneItems;
       newDoneItems.splice(action.indice, 1);
-      return { ...drawStates,
+      return {
+        ...drawStates,
         doneItems: newDoneItems
       };
-
     case 'ADD_SCREEN_STATE':
       if (action.currentItem) {
-        return { ...drawStates,
+        return {
+          ...drawStates,
           screenStates: drawStates.screenStates.concat([[...drawStates.doneItems, action.currentItem]])
         };
       } else {
-        return { ...drawStates,
+        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],
+          doneItems: drawStates.screenStates[len - 2] ?? [],
           screenStates: newScreenStates
         };
       } else {
         return drawStates;
       }
-
   }
 };
-
+const initialState = {
+  doneItems: [],
+  screenStates: [[]]
+};
 const DrawCore = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   var _textInputRef$current3, _textInputRef$current4;
-
   let {
     drawingMode,
     image,
     linearGradient,
     onSelectionChange,
-    onCancelChange
+    onCancelChange,
+    backgroundColor
   } = _ref;
   const mode = (0, _reactNativeReanimated.useSharedValue)('pen');
   const [drawRegion, setDrawRegion] = (0, _react.useState)(null);
@@ -291,10 +261,7 @@ const DrawCore = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   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 [drawStates, dispatchDrawStates] = (0, _react.useReducer)(reducerDrawStates, initialState);
   const textBaseHeight = (0, _reactNativeReanimated.useSharedValue)(null);
   const addDoneItem = (0, _react.useCallback)(item => {
     dispatchDrawStates({
@@ -327,37 +294,30 @@ const DrawCore = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
         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]);
   (0, _react.useEffect)(() => {
     mode.value = drawingMode;
-
     if (currentItem.value) {
       addDoneItem(currentItem.value);
     }
-
     currentItem.value = null;
     onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(false);
   }, [drawingMode, mode, currentItem, onSelectionChange, addDoneItem]);
@@ -367,7 +327,6 @@ const DrawCore = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   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)(() => {
@@ -377,7 +336,6 @@ const DrawCore = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   }, [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 +349,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
@@ -401,14 +358,12 @@ const DrawCore = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
       ctx.newlyCreated = false;
       panPosition.value = (0, _reactNativeReanimated.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 +378,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 +402,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 +427,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 +443,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 +451,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 +460,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 +472,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
@@ -550,7 +488,6 @@ const DrawCore = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
         onSelectionChange && (0, _reactNativeReanimated.runOnJS)(onSelectionChange)(true);
         onCancelChange && (0, _reactNativeReanimated.runOnJS)(onCancelChange)(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 +511,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 +533,6 @@ const DrawCore = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
                   }
                 };
                 break;
-
               case 'BOTTOM':
                 currentItem.value = {
                   type: currentItem.value.type,
@@ -614,7 +546,6 @@ const DrawCore = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
                   }
                 };
                 break;
-
               case 'LEFT':
                 currentItem.value = {
                   type: currentItem.value.type,
@@ -628,7 +559,6 @@ const DrawCore = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
                   }
                 };
                 break;
-
               case 'RIGHT':
                 currentItem.value = {
                   type: currentItem.value.type,
@@ -642,7 +572,6 @@ const DrawCore = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
                   }
                 };
                 break;
-
               case 'CENTER':
                 currentItem.value = {
                   type: currentItem.value.type,
@@ -670,18 +599,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 +621,6 @@ const DrawCore = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
                   }
                 };
                 break;
-
               case 'TOP_RIGHT':
                 currentItem.value = {
                   type: 'rectangle',
@@ -710,7 +634,6 @@ const DrawCore = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
                   }
                 };
                 break;
-
               case 'BOTTOM_LEFT':
                 currentItem.value = {
                   type: 'rectangle',
@@ -724,7 +647,6 @@ const DrawCore = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
                   }
                 };
                 break;
-
               case 'BOTTOM_RIGHT':
                 currentItem.value = {
                   type: 'rectangle',
@@ -738,7 +660,6 @@ const DrawCore = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
                   }
                 };
                 break;
-
               case 'CENTER':
                 currentItem.value = {
                   type: 'rectangle',
@@ -766,19 +687,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 +710,6 @@ const DrawCore = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
                   }
                 };
                 break;
-
               case 'BOTTOM':
                 currentItem.value = {
                   type: currentItem.value.type,
@@ -807,7 +723,6 @@ const DrawCore = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
                   }
                 };
                 break;
-
               case 'CENTER':
                 currentItem.value = {
                   type: currentItem.value.type,
@@ -835,18 +750,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 +773,6 @@ const DrawCore = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
                   }
                 };
                 break;
-
               case 'RIGHT':
                 currentItem.value = {
                   type: currentItem.value.type,
@@ -877,7 +787,6 @@ const DrawCore = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
                   }
                 };
                 break;
-
               case 'CENTER':
                 currentItem.value = {
                   type: currentItem.value.type,
@@ -907,27 +816,21 @@ 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);
     }
   }, []);
@@ -942,15 +845,14 @@ const DrawCore = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     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();
@@ -978,12 +880,10 @@ const DrawCore = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     };
   }, _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 +893,6 @@ const DrawCore = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
           color: c
         };
         break;
-
       case 'doubleHead':
         currentItem.value = {
           type: currentItem.value.type,
@@ -1002,7 +901,6 @@ const DrawCore = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
           color: c
         };
         break;
-
       case 'ellipse':
         currentItem.value = {
           type: currentItem.value.type,
@@ -1011,7 +909,6 @@ const DrawCore = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
           color: c
         };
         break;
-
       case 'rectangle':
         currentItem.value = {
           type: currentItem.value.type,
@@ -1020,7 +917,6 @@ const DrawCore = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
           color: c
         };
         break;
-
       case 'pen':
         currentItem.value = {
           type: currentItem.value.type,
@@ -1029,7 +925,6 @@ const DrawCore = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
           color: c
         };
         break;
-
       case 'text':
         currentItem.value = {
           type: currentItem.value.type,
@@ -1048,18 +943,13 @@ const DrawCore = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     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]);
@@ -1073,7 +963,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 +980,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) => {
@@ -1103,7 +991,9 @@ const DrawCore = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
     style: styles.container
   }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: styles.drawZone,
+    style: [styles.drawZone, {
+      backgroundColor: backgroundColor ?? '#FFF'
+    }],
     onLayout: event => {
       setDrawRegion({
         height: event.nativeEvent.layout.height,
@@ -1177,7 +1067,6 @@ const DrawCore = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     autoCorrect: false
   })));
 });
-
 var _default = DrawCore;
 exports.default = _default;
 //# sourceMappingURL=index.js.map