npm - @archireport/react-native-svg-draw - Versions diffs - 2.3.2 → 3.1.0 - Mend

@archireport/react-native-svg-draw 2.3.2 → 3.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (50) hide show

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

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { StyleSheet, TextInput, View, Keyboard, ImageBackground, Image, KeyboardAvoidingView } from 'react-native';
-import Animated, { runOnJS, useAnimatedGestureHandler, useAnimatedKeyboard, useAnimatedReaction, useSharedValue } from 'react-native-reanimated';
-import { PanGestureHandler } from 'react-native-gesture-handler';
+import Animated, { runOnJS, useAnimatedKeyboard, useAnimatedReaction, useSharedValue } from 'react-native-reanimated';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import DrawPad from './DrawPad';
 import ViewShot from 'react-native-view-shot';
 import useDrawHook from './useDrawHook';
@@ -178,7 +178,8 @@ const DrawCore = _ref => {
   var _textInputRef$current4;
   let {
     image,
-    backgroundColor
+    backgroundColor,
+    actionWithSnapShotUri
   } = _ref;
   const {
     drawState,
@@ -188,8 +189,34 @@ const DrawCore = _ref => {
     currentItem,
     itemIsSelected,
     viewShot,
-    doubleArrowTextInput
+    doubleArrowTextInput,
+    captureSnapshot,
+    snapShotRequested,
+    setSnapShotRequested
   } = useDrawHook();
+  const [drawRegion, setDrawRegion] = useState(null);
+  const [imageSize, setImageSize] = useState(null);
+  const [originalImageSize, setOriginalImageSize] = useState(null);
+  useEffect(() => {
+    if (snapShotRequested) {
+      setSnapShotRequested(false);
+      setNewLayoutRequested(true);
+      if (imageSize !== null && imageSize !== void 0 && imageSize.height && originalImageSize !== null && originalImageSize !== void 0 && originalImageSize.height && originalImageSize !== null && originalImageSize !== void 0 && originalImageSize.width && image) {
+        setOpacity(0);
+        setRatioImage(originalImageSize.height / (imageSize === null || imageSize === void 0 ? void 0 : imageSize.height));
+        setImageSize(originalImageSize);
+      } else if (!image && drawRegion !== null && drawRegion !== void 0 && drawRegion.height) {
+        const width = 1500;
+        const height = width / 1.3333333;
+        setOpacity(0);
+        setRatioImage(height / drawRegion.height);
+        setImageSize({
+          width,
+          height
+        });
+      }
+    }
+  }, [snapShotRequested, drawRegion === null || drawRegion === void 0 ? void 0 : drawRegion.height, image, imageSize === null || imageSize === void 0 ? void 0 : imageSize.height, originalImageSize, setSnapShotRequested]);
   const onCancelChangeWrapper = arg => {
     dispatchDrawStates({
       type: 'SET_CANCEL_ENABLED',
@@ -197,13 +224,15 @@ const DrawCore = _ref => {
     });
   };
   const mode = useSharedValue('pen');
-  const [drawRegion, setDrawRegion] = useState(null);
-  const [originalImageSize, setOriginalImageSize] = useState(null);
-  const [imageSize, setImageSize] = useState(null);
   const drawContainer = useRef(null);
   const [textVal, setTextVal] = useState('');
   const initialItem = useSharedValue(null);
   const textBaseHeight = useSharedValue(null);
+  const gestureContext = useSharedValue({
+    startX: 0,
+    startY: 0,
+    newlyCreated: false
+  });
   const addDoneItem = useCallback(item => {
     dispatchDrawStates({
       type: 'ADD_DONE_ITEM',
@@ -234,19 +263,16 @@ const DrawCore = _ref => {
   const textFocusState = useCallback(() => {
     var _doubleArrowTextInput;
-    //setShowTextInputState(true);
-    console.log('textFocusState');
     doubleArrowTextInput === null || doubleArrowTextInput === void 0 ? void 0 : (_doubleArrowTextInput = doubleArrowTextInput.current) === null || _doubleArrowTextInput === void 0 ? void 0 : _doubleArrowTextInput.focus();
   }, [doubleArrowTextInput]);
   const textFocus = useCallback(() => {
     var _textInputRef$current;
-    console.log('textFocus');
     (_textInputRef$current = textInputRef.current) === null || _textInputRef$current === void 0 ? void 0 : _textInputRef$current.focus();
   }, []);
   useEffect(() => {
     var _currentItem$value2;
     if (((_currentItem$value2 = currentItem.value) === null || _currentItem$value2 === void 0 ? void 0 : _currentItem$value2.type) === 'text') {
-      console.log('use effect text');
+      console.log('Updating text value:');
       showTextInput.value = true;
       textFocus();
       currentItem.value = {
@@ -258,541 +284,527 @@ const DrawCore = _ref => {
       };
     }
   }, [currentItem, showTextInput, textFocus, textVal]);
-  const onGestureEvent = useAnimatedGestureHandler({
-    onStart: (_ref2, ctx) => {
-      var _currentItem$value3, _currentItem$value4;
-      let {
-        x: startX,
-        y: startY
-      } = _ref2;
-      ctx.startX = startX;
-      ctx.startY = startY;
-      ctx.newlyCreated = false;
-      console.log('**********************************');
-      console.log('onGestureEvent');
-      //panPosition.value = withTiming(RIGHT_PANE_WIDTH);
-      console.log('onStart', (_currentItem$value3 = currentItem.value) === null || _currentItem$value3 === void 0 ? void 0 : _currentItem$value3.type);
-      initialItem.value = currentItem.value;
-      switch ((_currentItem$value4 = currentItem.value) === null || _currentItem$value4 === void 0 ? void 0 : _currentItem$value4.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) {
-            ctx.zone = 'BOTTOM';
-          } else if (startY <= cy + THRESHOLD && startY >= cy - THRESHOLD && startX <= cx - rx + THRESHOLD && startX >= cx - rx - THRESHOLD) {
-            ctx.zone = 'LEFT';
-          } else if (startY <= cy + THRESHOLD && startY >= cy - THRESHOLD && startX <= cx + rx + THRESHOLD && startX >= cx + rx - THRESHOLD) {
-            ctx.zone = 'RIGHT';
-          } else if ((rx > 0 && startX > cx - rx && startX < cx + rx || rx < 0 && startX < cx - rx && startX > cx + rx) && (ry > 0 && startY > cy - ry && startY < cy + ry || ry < 0 && startY < cy - ry && startY > cy + ry)) {
-            ctx.zone = 'CENTER';
-          } else {
-            ctx.zone = 'OUT';
-            initialItem.value = null;
+  const panGesture = Gesture.Pan().onStart(event => {
+    var _currentItem$value3;
+    const {
+      x: startX,
+      y: startY
+    } = event;
+    gestureContext.value = {
+      startX,
+      startY,
+      newlyCreated: false
+    };
+    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) {
+          gestureContext.value.zone = 'TOP';
+        } else if (startX <= cx + THRESHOLD && startX >= cx - THRESHOLD && startY <= cy + ry + THRESHOLD && startY >= cy + ry - THRESHOLD) {
+          gestureContext.value.zone = 'BOTTOM';
+        } else if (startY <= cy + THRESHOLD && startY >= cy - THRESHOLD && startX <= cx - rx + THRESHOLD && startX >= cx - rx - THRESHOLD) {
+          gestureContext.value.zone = 'LEFT';
+        } else if (startY <= cy + THRESHOLD && startY >= cy - THRESHOLD && startX <= cx + rx + THRESHOLD && startX >= cx + rx - THRESHOLD) {
+          gestureContext.value.zone = 'RIGHT';
+        } else if ((rx > 0 && startX > cx - rx && startX < cx + rx || rx < 0 && startX < cx - rx && startX > cx + rx) && (ry > 0 && startY > cy - ry && startY < cy + ry || ry < 0 && startY < cy - ry && startY > cy + ry)) {
+          gestureContext.value.zone = 'CENTER';
+        } else {
+          gestureContext.value.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) {
+            gestureContext.value.zone = 'TOP_LEFT';
+          } else if (startY <= y + height + THRESHOLD && startY >= y + height - THRESHOLD) {
+            gestureContext.value.zone = 'BOTTOM_LEFT';
           }
-          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';
-            } else if (startY <= y + height + THRESHOLD && startY >= y + height - THRESHOLD) {
-              ctx.zone = 'BOTTOM_LEFT';
-            }
-          } else if (startX <= x + width + THRESHOLD && startX >= x + width - THRESHOLD) {
-            if (startY <= y + THRESHOLD && startY >= y - THRESHOLD) {
-              ctx.zone = 'TOP_RIGHT';
-            } else if (startY <= y + height + THRESHOLD && startY >= y + height - THRESHOLD) {
-              ctx.zone = 'BOTTOM_RIGHT';
-            }
-          } else if ((width > 0 && startX > x && startX < x + width || width < 0 && startX < x && startX > x + width) && (height > 0 && startY > y && startY < y + height || height < 0 && startY < y && startY > y + height)) {
-            ctx.zone = 'CENTER';
-          } else {
-            ctx.zone = 'OUT';
-            initialItem.value = null;
+        } else if (startX <= x + width + THRESHOLD && startX >= x + width - THRESHOLD) {
+          if (startY <= y + THRESHOLD && startY >= y - THRESHOLD) {
+            gestureContext.value.zone = 'TOP_RIGHT';
+          } else if (startY <= y + height + THRESHOLD && startY >= y + height - THRESHOLD) {
+            gestureContext.value.zone = 'BOTTOM_RIGHT';
           }
-          break;
-        case 'doubleHead':
-        case 'doubleArrows':
-        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) {
-            ctx.zone = 'BOTTOM';
-          } else if (pDistance({
+        } else if ((width > 0 && startX > x && startX < x + width || width < 0 && startX < x && startX > x + width) && (height > 0 && startY > y && startY < y + height || height < 0 && startY < y && startY > y + height)) {
+          gestureContext.value.zone = 'CENTER';
+        } else {
+          gestureContext.value.zone = 'OUT';
+          initialItem.value = null;
+        }
+        break;
+      case 'doubleHead':
+      case 'doubleArrows':
+      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) {
+          gestureContext.value.zone = 'TOP';
+        } else if (startX <= x2 + THRESHOLD && startX >= x2 - THRESHOLD && startY - THRESHOLD <= y2 + THRESHOLD && startY + THRESHOLD >= y2 - THRESHOLD) {
+          gestureContext.value.zone = 'BOTTOM';
+        } else if (pDistance({
+          x: startX,
+          y: startY
+        }, {
+          x1,
+          x2,
+          y1,
+          y2
+        }) <= THRESHOLD && (startX > x1 && startX < x2 || startX < x1 && startX > x2) && (startY > y1 && startY < y2 || startY < y1 && startY > y2)) {
+          gestureContext.value.zone = 'CENTER';
+        } else {
+          gestureContext.value.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) {
+          gestureContext.value.zone = 'LEFT';
+        } else if (startX <= xText + widthText + THRESHOLD && startX >= xText + widthText - THRESHOLD && startY <= yText + heightText / 2 + THRESHOLD && startY >= yText + heightText / 2 - THRESHOLD) {
+          gestureContext.value.zone = 'RIGHT';
+        } else if ((widthText > 0 && startX > xText && startX < xText + widthText || widthText < 0 && startX < xText && startX > xText + widthText) && (heightText > 0 && startY > yText && startY < yText + heightText || heightText < 0 && startY < yText && startY > yText + heightText)) {
+          gestureContext.value.zone = 'CENTER';
+        } else {
+          gestureContext.value.zone = 'OUT';
+          initialItem.value = null;
+          gestureContext.value.newlyCreated = true;
+          runOnJS(setTextVal)('');
+          drawNewItem(mode, currentItem, addDoneItem, {
             x: startX,
             y: startY
           }, {
-            x1,
-            x2,
-            y1,
-            y2
-          }) <= THRESHOLD && (startX > x1 && startX < x2 || startX < x1 && startX > x2) && (startY > y1 && startY < y2 || startY < y1 && startY > y2)) {
-            ctx.zone = 'CENTER';
-          } else {
-            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;
-          console.log(heightText);
-          console.log(widthText);
-          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) {
-            ctx.zone = 'RIGHT';
-          } else if ((widthText > 0 && startX > xText && startX < xText + widthText || widthText < 0 && startX < xText && startX > xText + widthText) && (heightText > 0 && startY > yText && startY < yText + heightText || heightText < 0 && startY < yText && startY > yText + heightText)) {
-            ctx.zone = 'CENTER';
-            console.log('on active center');
-          } else {
-            ctx.zone = 'OUT';
-            console.log('on active out');
-            initialItem.value = null;
-            ctx.newlyCreated = true;
-            runOnJS(setTextVal)('');
-            drawNewItem(mode, currentItem, addDoneItem, {
-              x: startX,
-              y: startY
-            }, {
-              textBaseHeight,
-              strokeWidth,
-              color
-            });
-            itemIsSelected.value = true;
-            onCancelChangeWrapper && runOnJS(onCancelChangeWrapper)(true);
-            runOnJS(textFocus)();
-          }
-          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';
-          } else {
-            ctx.zone = 'OUT';
-            initialItem.value = null;
-          }
-          break;
-        default:
-          ctx.zone = 'OUT';
+            textBaseHeight,
+            strokeWidth,
+            color
+          });
+          itemIsSelected.value = true;
+          onCancelChangeWrapper && runOnJS(onCancelChangeWrapper)(true);
+          runOnJS(textFocus)();
+        }
+        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)) {
+          gestureContext.value.zone = 'CENTER';
+        } else {
+          gestureContext.value.zone = 'OUT';
           initialItem.value = null;
-          if (drawState.drawingMode === 'text') {
-            /* NEW GEOFF */
-            console.log('on active out');
-            ctx.newlyCreated = true;
-            runOnJS(setTextVal)('');
-            drawNewItem(mode, currentItem, addDoneItem, {
-              x: startX,
-              y: startY
-            }, {
-              textBaseHeight,
-              strokeWidth,
-              color
-            });
-            itemIsSelected.value = true;
-            onCancelChangeWrapper && runOnJS(onCancelChangeWrapper)(true);
-            runOnJS(textFocus)();
-          }
-          break;
-      }
-    },
-    onActive: (_ref3, ctx) => {
-      var _currentItem$value5, _initialItem$value, _initialItem$value2, _initialItem$value4, _initialItem$value17, _initialItem$value30;
-      let {
-        x: currentX,
-        y: currentY,
-        translationX,
-        translationY
-      } = _ref3;
-      const {
-        startX,
-        startY,
-        zone,
-        newlyCreated
-      } = ctx;
-      if (zone === 'OUT' && newlyCreated === false && mode.value !== 'text') {
-        console.log('on active out');
-        ctx.newlyCreated = true;
-        /*
-        if (mode.value === 'text') {
+        }
+        break;
+      default:
+        gestureContext.value.zone = 'OUT';
+        initialItem.value = null;
+        if (drawState.drawingMode === 'text') {
+          gestureContext.value.newlyCreated = true;
           runOnJS(setTextVal)('');
-        }*/
-        drawNewItem(mode, currentItem, addDoneItem, {
-          x: startX,
-          y: startY
-        }, {
-          textBaseHeight,
-          strokeWidth,
-          color
-        });
-        itemIsSelected.value = true;
-        onCancelChangeWrapper && runOnJS(onCancelChangeWrapper)(true);
-      }
-      switch ((_currentItem$value5 = currentItem.value) === null || _currentItem$value5 === void 0 ? void 0 : _currentItem$value5.type) {
-        case 'pen':
-          if (((_initialItem$value = initialItem.value) === null || _initialItem$value === void 0 ? void 0 : _initialItem$value.type) === currentItem.value.type && zone === 'CENTER') {
-            currentItem.value = {
-              type: 'pen',
-              strokeWidth: currentItem.value.strokeWidth,
-              color: currentItem.value.color,
-              data: initialItem.value.data.map(p => ({
-                x: p.x + translationX,
-                y: p.y + translationY
-              }))
-            };
-          } else {
-            currentItem.value = {
-              type: 'pen',
-              strokeWidth: currentItem.value.strokeWidth,
-              color: currentItem.value.color,
-              data: currentItem.value.data.concat({
-                x: currentX,
-                y: currentY
-              })
-            };
+          drawNewItem(mode, currentItem, addDoneItem, {
+            x: startX,
+            y: startY
+          }, {
+            textBaseHeight,
+            strokeWidth,
+            color
+          });
+          itemIsSelected.value = true;
+          onCancelChangeWrapper && runOnJS(onCancelChangeWrapper)(true);
+          runOnJS(textFocus)();
+        }
+        break;
+    }
+  }).onUpdate(event => {
+    var _currentItem$value4, _initialItem$value, _initialItem$value2, _initialItem$value4, _initialItem$value17, _initialItem$value30;
+    const {
+      x: currentX,
+      y: currentY,
+      translationX,
+      translationY
+    } = event;
+    const {
+      startX,
+      startY,
+      zone,
+      newlyCreated
+    } = gestureContext.value;
+    if (zone === 'OUT' && newlyCreated === false && mode.value !== 'text') {
+      gestureContext.value.newlyCreated = true;
+      /*
+      if (mode.value === 'text') {
+        runOnJS(setTextVal)('');
+      }*/
+      drawNewItem(mode, currentItem, addDoneItem, {
+        x: startX,
+        y: startY
+      }, {
+        textBaseHeight,
+        strokeWidth,
+        color
+      });
+      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') {
+          currentItem.value = {
+            type: 'pen',
+            strokeWidth: currentItem.value.strokeWidth,
+            color: currentItem.value.color,
+            data: initialItem.value.data.map(p => ({
+              x: p.x + translationX,
+              y: p.y + translationY
+            }))
+          };
+        } else {
+          currentItem.value = {
+            type: 'pen',
+            strokeWidth: currentItem.value.strokeWidth,
+            color: currentItem.value.color,
+            data: currentItem.value.data.concat({
+              x: currentX,
+              y: currentY
+            })
+          };
+        }
+        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 = {
+                type: currentItem.value.type,
+                strokeWidth: currentItem.value.strokeWidth,
+                color: currentItem.value.color,
+                data: {
+                  cx: cx,
+                  cy: cy + translationY,
+                  rx: rx,
+                  ry: ry - translationY
+                }
+              };
+              break;
+            case 'BOTTOM':
+              currentItem.value = {
+                type: currentItem.value.type,
+                strokeWidth: currentItem.value.strokeWidth,
+                color: currentItem.value.color,
+                data: {
+                  cx: cx,
+                  cy: cy + translationY,
+                  rx: rx,
+                  ry: ry + translationY
+                }
+              };
+              break;
+            case 'LEFT':
+              currentItem.value = {
+                type: currentItem.value.type,
+                strokeWidth: currentItem.value.strokeWidth,
+                color: currentItem.value.color,
+                data: {
+                  cx: cx + translationX,
+                  cy: cy,
+                  rx: rx - translationX,
+                  ry: ry
+                }
+              };
+              break;
+            case 'RIGHT':
+              currentItem.value = {
+                type: currentItem.value.type,
+                strokeWidth: currentItem.value.strokeWidth,
+                color: currentItem.value.color,
+                data: {
+                  cx: cx + translationX,
+                  cy: cy,
+                  rx: rx + translationX,
+                  ry: ry
+                }
+              };
+              break;
+            case 'CENTER':
+              currentItem.value = {
+                type: currentItem.value.type,
+                strokeWidth: currentItem.value.strokeWidth,
+                color: currentItem.value.color,
+                data: {
+                  cx: cx + translationX,
+                  cy: cy + translationY,
+                  rx: rx,
+                  ry: ry
+                }
+              };
+              break;
           }
-          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 = {
-                  type: currentItem.value.type,
-                  strokeWidth: currentItem.value.strokeWidth,
-                  color: currentItem.value.color,
-                  data: {
-                    cx: cx,
-                    cy: cy + translationY,
-                    rx: rx,
-                    ry: ry - translationY
-                  }
-                };
-                break;
-              case 'BOTTOM':
-                currentItem.value = {
-                  type: currentItem.value.type,
-                  strokeWidth: currentItem.value.strokeWidth,
-                  color: currentItem.value.color,
-                  data: {
-                    cx: cx,
-                    cy: cy + translationY,
-                    rx: rx,
-                    ry: ry + translationY
-                  }
-                };
-                break;
-              case 'LEFT':
-                currentItem.value = {
-                  type: currentItem.value.type,
-                  strokeWidth: currentItem.value.strokeWidth,
-                  color: currentItem.value.color,
-                  data: {
-                    cx: cx + translationX,
-                    cy: cy,
-                    rx: rx - translationX,
-                    ry: ry
-                  }
-                };
-                break;
-              case 'RIGHT':
-                currentItem.value = {
-                  type: currentItem.value.type,
-                  strokeWidth: currentItem.value.strokeWidth,
-                  color: currentItem.value.color,
-                  data: {
-                    cx: cx + translationX,
-                    cy: cy,
-                    rx: rx + translationX,
-                    ry: ry
-                  }
-                };
-                break;
-              case 'CENTER':
-                currentItem.value = {
-                  type: currentItem.value.type,
-                  strokeWidth: currentItem.value.strokeWidth,
-                  color: currentItem.value.color,
-                  data: {
-                    cx: cx + translationX,
-                    cy: cy + translationY,
-                    rx: rx,
-                    ry: ry
-                  }
-                };
-                break;
+        } else {
+          currentItem.value = {
+            type: currentItem.value.type,
+            strokeWidth: currentItem.value.strokeWidth,
+            color: currentItem.value.color,
+            data: {
+              cx: startX + translationX,
+              cy: startY + translationY,
+              rx: translationX,
+              ry: translationY
             }
-          } else {
-            currentItem.value = {
-              type: currentItem.value.type,
-              strokeWidth: currentItem.value.strokeWidth,
-              color: currentItem.value.color,
-              data: {
-                cx: startX + translationX,
-                cy: startY + translationY,
-                rx: translationX,
-                ry: translationY
-              }
-            };
+          };
+        }
+        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 = {
+                type: 'rectangle',
+                strokeWidth: currentItem.value.strokeWidth,
+                color: currentItem.value.color,
+                data: {
+                  x: startX + translationX,
+                  y: startY + translationY,
+                  width: width - translationX,
+                  height: height - translationY
+                }
+              };
+              break;
+            case 'TOP_RIGHT':
+              currentItem.value = {
+                type: 'rectangle',
+                strokeWidth: currentItem.value.strokeWidth,
+                color: currentItem.value.color,
+                data: {
+                  x: x,
+                  y: startY + translationY,
+                  width: width + translationX,
+                  height: height - translationY
+                }
+              };
+              break;
+            case 'BOTTOM_LEFT':
+              currentItem.value = {
+                type: 'rectangle',
+                strokeWidth: currentItem.value.strokeWidth,
+                color: currentItem.value.color,
+                data: {
+                  x: startX + translationX,
+                  y: y,
+                  width: width - translationX,
+                  height: height + translationY
+                }
+              };
+              break;
+            case 'BOTTOM_RIGHT':
+              currentItem.value = {
+                type: 'rectangle',
+                strokeWidth: currentItem.value.strokeWidth,
+                color: currentItem.value.color,
+                data: {
+                  x: x,
+                  y: y,
+                  width: width + translationX,
+                  height: height + translationY
+                }
+              };
+              break;
+            case 'CENTER':
+              currentItem.value = {
+                type: 'rectangle',
+                strokeWidth: currentItem.value.strokeWidth,
+                color: currentItem.value.color,
+                data: {
+                  x: x + translationX,
+                  y: y + translationY,
+                  width: width,
+                  height: height
+                }
+              };
+              break;
           }
-          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 = {
-                  type: 'rectangle',
-                  strokeWidth: currentItem.value.strokeWidth,
-                  color: currentItem.value.color,
-                  data: {
-                    x: startX + translationX,
-                    y: startY + translationY,
-                    width: width - translationX,
-                    height: height - translationY
-                  }
-                };
-                break;
-              case 'TOP_RIGHT':
-                currentItem.value = {
-                  type: 'rectangle',
-                  strokeWidth: currentItem.value.strokeWidth,
-                  color: currentItem.value.color,
-                  data: {
-                    x: x,
-                    y: startY + translationY,
-                    width: width + translationX,
-                    height: height - translationY
-                  }
-                };
-                break;
-              case 'BOTTOM_LEFT':
-                currentItem.value = {
-                  type: 'rectangle',
-                  strokeWidth: currentItem.value.strokeWidth,
-                  color: currentItem.value.color,
-                  data: {
-                    x: startX + translationX,
-                    y: y,
-                    width: width - translationX,
-                    height: height + translationY
-                  }
-                };
-                break;
-              case 'BOTTOM_RIGHT':
-                currentItem.value = {
-                  type: 'rectangle',
-                  strokeWidth: currentItem.value.strokeWidth,
-                  color: currentItem.value.color,
-                  data: {
-                    x: x,
-                    y: y,
-                    width: width + translationX,
-                    height: height + translationY
-                  }
-                };
-                break;
-              case 'CENTER':
-                currentItem.value = {
-                  type: 'rectangle',
-                  strokeWidth: currentItem.value.strokeWidth,
-                  color: currentItem.value.color,
-                  data: {
-                    x: x + translationX,
-                    y: y + translationY,
-                    width: width,
-                    height: height
-                  }
-                };
-                break;
+        } else {
+          currentItem.value = {
+            type: 'rectangle',
+            strokeWidth: currentItem.value.strokeWidth,
+            color: currentItem.value.color,
+            data: {
+              x: currentItem.value.data.x,
+              y: currentItem.value.data.y,
+              width: translationX,
+              height: translationY
             }
-          } else {
-            currentItem.value = {
-              type: 'rectangle',
-              strokeWidth: currentItem.value.strokeWidth,
-              color: currentItem.value.color,
-              data: {
-                x: currentItem.value.data.x,
-                y: currentItem.value.data.y,
-                width: translationX,
-                height: translationY
-              }
-            };
+          };
+        }
+        break;
+      case 'singleHead':
+      case 'doubleHead':
+      case 'doubleArrows':
+        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 = {
+                type: currentItem.value.type,
+                strokeWidth: currentItem.value.strokeWidth,
+                color: currentItem.value.color,
+                text: currentItem.value.type === 'doubleArrows' ? currentItem.value.text ?? '' : '',
+                data: {
+                  x1: x1 + translationX,
+                  y1: y1 + translationY,
+                  x2: x2,
+                  y2: y2
+                }
+              };
+              break;
+            case 'BOTTOM':
+              currentItem.value = {
+                type: currentItem.value.type,
+                strokeWidth: currentItem.value.strokeWidth,
+                color: currentItem.value.color,
+                text: currentItem.value.type === 'doubleArrows' ? currentItem.value.text ?? '' : '',
+                data: {
+                  x1: x1,
+                  y1: y1,
+                  x2: x2 + translationX,
+                  y2: y2 + translationY
+                }
+              };
+              break;
+            case 'CENTER':
+              currentItem.value = {
+                type: currentItem.value.type,
+                strokeWidth: currentItem.value.strokeWidth,
+                color: currentItem.value.color,
+                text: currentItem.value.type === 'doubleArrows' ? currentItem.value.text ?? '' : '',
+                data: {
+                  x1: x1 + translationX,
+                  y1: y1 + translationY,
+                  x2: x2 + translationX,
+                  y2: y2 + translationY
+                }
+              };
+              break;
           }
-          break;
-        case 'singleHead':
-        case 'doubleHead':
-        case 'doubleArrows':
-          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 = {
-                  type: currentItem.value.type,
-                  strokeWidth: currentItem.value.strokeWidth,
-                  color: currentItem.value.color,
-                  text: currentItem.value.type === 'doubleArrows' ? currentItem.value.text ?? '' : '',
-                  data: {
-                    x1: x1 + translationX,
-                    y1: y1 + translationY,
-                    x2: x2,
-                    y2: y2
-                  }
-                };
-                break;
-              case 'BOTTOM':
-                currentItem.value = {
-                  type: currentItem.value.type,
-                  strokeWidth: currentItem.value.strokeWidth,
-                  color: currentItem.value.color,
-                  text: currentItem.value.type === 'doubleArrows' ? currentItem.value.text ?? '' : '',
-                  data: {
-                    x1: x1,
-                    y1: y1,
-                    x2: x2 + translationX,
-                    y2: y2 + translationY
-                  }
-                };
-                break;
-              case 'CENTER':
-                currentItem.value = {
-                  type: currentItem.value.type,
-                  strokeWidth: currentItem.value.strokeWidth,
-                  color: currentItem.value.color,
-                  text: currentItem.value.type === 'doubleArrows' ? currentItem.value.text ?? '' : '',
-                  data: {
-                    x1: x1 + translationX,
-                    y1: y1 + translationY,
-                    x2: x2 + translationX,
-                    y2: y2 + translationY
-                  }
-                };
-                break;
+        } else {
+          currentItem.value = {
+            type: currentItem.value.type,
+            strokeWidth: currentItem.value.strokeWidth,
+            color: currentItem.value.color,
+            text: currentItem.value.type === 'doubleArrows' ? currentItem.value.text ?? '' : '',
+            data: {
+              x1: startX,
+              y1: startY,
+              x2: startX + translationX,
+              y2: startY + translationY
             }
-          } else {
-            currentItem.value = {
-              type: currentItem.value.type,
-              strokeWidth: currentItem.value.strokeWidth,
-              color: currentItem.value.color,
-              text: currentItem.value.type === 'doubleArrows' ? currentItem.value.text ?? '' : '',
-              data: {
-                x1: startX,
-                y1: startY,
-                x2: startX + translationX,
-                y2: startY + translationY
-              }
-            };
+          };
+        }
+        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 = {
+                type: currentItem.value.type,
+                strokeWidth: currentItem.value.strokeWidth,
+                color: currentItem.value.color,
+                text: currentItem.value.text,
+                data: {
+                  x: xText + translationX,
+                  y: yText,
+                  width: widthText - translationX,
+                  height: heightText
+                }
+              };
+              break;
+            case 'RIGHT':
+              currentItem.value = {
+                type: currentItem.value.type,
+                strokeWidth: currentItem.value.strokeWidth,
+                color: currentItem.value.color,
+                text: currentItem.value.text,
+                data: {
+                  x: xText,
+                  y: yText,
+                  width: widthText + translationX,
+                  height: heightText
+                }
+              };
+              break;
+            case 'CENTER':
+              currentItem.value = {
+                type: currentItem.value.type,
+                strokeWidth: currentItem.value.strokeWidth,
+                color: currentItem.value.color,
+                text: currentItem.value.text,
+                data: {
+                  x: xText + translationX,
+                  y: yText + translationY,
+                  width: widthText,
+                  height: heightText
+                }
+              };
+              break;
           }
-          break;
-        case 'text':
-          console.log('on active 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 = {
-                  type: currentItem.value.type,
-                  strokeWidth: currentItem.value.strokeWidth,
-                  color: currentItem.value.color,
-                  text: currentItem.value.text,
-                  data: {
-                    x: xText + translationX,
-                    y: yText,
-                    width: widthText - translationX,
-                    height: heightText
-                  }
-                };
-                break;
-              case 'RIGHT':
-                currentItem.value = {
-                  type: currentItem.value.type,
-                  strokeWidth: currentItem.value.strokeWidth,
-                  color: currentItem.value.color,
-                  text: currentItem.value.text,
-                  data: {
-                    x: xText,
-                    y: yText,
-                    width: widthText + translationX,
-                    height: heightText
-                  }
-                };
-                break;
-              case 'CENTER':
-                currentItem.value = {
-                  type: currentItem.value.type,
-                  strokeWidth: currentItem.value.strokeWidth,
-                  color: currentItem.value.color,
-                  text: currentItem.value.text,
-                  data: {
-                    x: xText + translationX,
-                    y: yText + translationY,
-                    width: widthText,
-                    height: heightText
-                  }
-                };
-                break;
+        } else {
+          currentItem.value = {
+            type: currentItem.value.type,
+            strokeWidth: currentItem.value.strokeWidth,
+            color: currentItem.value.color,
+            text: currentItem.value.text,
+            data: {
+              x: startX + translationX,
+              y: startY + translationY,
+              width: currentItem.value.data.width,
+              height: currentItem.value.data.height
             }
-          } else {
-            currentItem.value = {
-              type: currentItem.value.type,
-              strokeWidth: currentItem.value.strokeWidth,
-              color: currentItem.value.color,
-              text: currentItem.value.text,
-              data: {
-                x: startX + translationX,
-                y: startY + translationY,
-                width: currentItem.value.data.width,
-                height: currentItem.value.data.height
-              }
-            };
-          }
-      }
-    },
-    onEnd: _event => {
-      var _currentItem$value6, _currentItem$value7;
-      if (((_currentItem$value6 = currentItem.value) === null || _currentItem$value6 === void 0 ? void 0 : _currentItem$value6.type) === 'doubleArrows') {
-        runOnJS(textFocusState)();
-      }
-      if (((_currentItem$value7 = currentItem.value) === null || _currentItem$value7 === void 0 ? void 0 : _currentItem$value7.type) === 'text') {
-        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.text ?? '' : ''
-        };
-      }
-      runOnJS(addScreenStates)(currentItem.value);
+          };
+        }
+    }
+  }).onEnd(() => {
+    var _currentItem$value5, _currentItem$value6;
+    if (((_currentItem$value5 = currentItem.value) === null || _currentItem$value5 === void 0 ? void 0 : _currentItem$value5.type) === 'doubleArrows') {
+      runOnJS(textFocusState)();
+    }
+    if (((_currentItem$value6 = currentItem.value) === null || _currentItem$value6 === void 0 ? void 0 : _currentItem$value6.type) === 'text') {
+      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.text ?? '' : ''
+      };
     }
+    runOnJS(addScreenStates)(currentItem.value);
   });
   useEffect(() => {
     const sudDidHide = Keyboard.addListener('keyboardDidHide', () => {
@@ -800,7 +812,6 @@ const DrawCore = _ref => {
     });
     const sudDidShow = Keyboard.addListener('keyboardDidShow', event => {
       // avoid events triggered by InputAccessoryView
-      console.log('keyboardDidShow dc');
       if (event.endCoordinates.height > 100) {
         showTextInput.value = true;
       }
@@ -818,13 +829,13 @@ const DrawCore = _ref => {
       strokeWidth: strokeWidth.value,
       color: color === null || color === void 0 ? void 0 : color.value
     };
-  }, _ref4 => {
-    var _currentItem$value8;
+  }, _ref2 => {
+    var _currentItem$value7;
     let {
       strokeWidth: sw,
       color: c
-    } = _ref4;
-    switch ((_currentItem$value8 = currentItem.value) === null || _currentItem$value8 === void 0 ? void 0 : _currentItem$value8.type) {
+    } = _ref2;
+    switch ((_currentItem$value7 = currentItem.value) === null || _currentItem$value7 === void 0 ? void 0 : _currentItem$value7.type) {
       case 'singleHead':
       case 'doubleHead':
       case 'doubleArrows':
@@ -850,12 +861,10 @@ const DrawCore = _ref => {
     }
   }, [strokeWidth.value, color === null || color === void 0 ? void 0 : color.value]);
   const onPressItem = useCallback((item, index) => () => {
-    console.log('onPressItem');
-    itemIsSelected.value = true;
     const previousItem = currentItem.value;
+    itemIsSelected.value = true;
     strokeWidth.value = item.strokeWidth;
     color.value = item.color;
-    console.log('item', item);
     currentItem.value = item;
     deleteDoneItem(index);
     if (previousItem) {
@@ -906,11 +915,11 @@ const DrawCore = _ref => {
     onTextHeightUpdate(currentItem, textBaseHeight, height);
   }, [currentItem, textBaseHeight]);
   const calculateSizes = useCallback((imageWidth, imageHeight) => {
+    setOriginalImageSize({
+      width: imageWidth,
+      height: imageHeight
+    });
     if (drawRegion) {
-      setOriginalImageSize({
-        width: imageWidth,
-        height: imageHeight
-      });
       const ratioImageHeight = Math.round(imageHeight * drawRegion.width / imageWidth * 100) / 100;
       if (ratioImageHeight < drawRegion.height) {
         setImageSize({
@@ -940,35 +949,18 @@ const DrawCore = _ref => {
   // do not remove keyboard will appear over the drawing frame and not shift it
   useAnimatedKeyboard();
-  /*
-  const onEndEditingTextInput = useCallback(() => {
-    console.log('onEndEditingTextInput');
-    setShowTextInputState(false);
-    if (currentItem.value && currentItem.value.type === 'doubleArrows') {
-      console.log(currentItem.value.text);
-      addScreenStates(currentItem.value);
-    }
-  }, [currentItem, addScreenStates]);
-   const onChangeText = useCallback(
-    (value: string) => {
-      if (
-        value &&
-        currentItem.value &&
-        currentItem.value.type === 'doubleArrows'
-      ) {
-        console.log('******************');
-        console.log(value);
-        console.log(currentItem.value);
-         currentItem.value = {
-          ...currentItem.value,
-          text: value,
-        };
+  const [newLayoutRequested, setNewLayoutRequested] = useState(false);
+  const onLayout = useCallback(async () => {
+    if (newLayoutRequested) {
+      setNewLayoutRequested(false);
+      const uri = await captureSnapshot();
+      if (uri && typeof actionWithSnapShotUri === 'function') {
+        await actionWithSnapShotUri(uri);
       }
-    },
-    [currentItem]
-  );
-  */
+    }
+  }, [actionWithSnapShotUri, newLayoutRequested, captureSnapshot]);
+  const [ratioImage, setRatioImage] = useState(1);
+  const [opacity, setOpacity] = useState(1);
   return /*#__PURE__*/React.createElement(View, {
     style: styles.container
   }, /*#__PURE__*/React.createElement(View, {
@@ -984,10 +976,14 @@ const DrawCore = _ref => {
   }, /*#__PURE__*/React.createElement(KeyboardAvoidingView, {
     behavior: "position",
     keyboardVerticalOffset: 70
-  }, /*#__PURE__*/React.createElement(PanGestureHandler, {
-    onGestureEvent: onGestureEvent
+  }, /*#__PURE__*/React.createElement(GestureDetector, {
+    gesture: panGesture
   }, /*#__PURE__*/React.createElement(Animated.View, {
-    style: imageSize || drawRegion
+    style: {
+      ...(imageSize || drawRegion),
+      opacity: opacity
+    },
+    onLayout: onLayout
   }, /*#__PURE__*/React.createElement(View, {
     ref: drawContainer
   }, image ? imageSize && originalImageSize ? /*#__PURE__*/React.createElement(ViewShot, {
@@ -1004,21 +1000,23 @@ const DrawCore = _ref => {
     currentItem: currentItem,
     doneItems: drawState.doneItems,
     onPressItem: onPressItem,
-    onTextHeightChange: onTextHeightChange
+    onTextHeightChange: onTextHeightChange,
+    ratioImage: ratioImage
   }))) : null : drawRegion ? /*#__PURE__*/React.createElement(ViewShot, {
     ref: viewShot,
     options: {
       format: 'jpg',
       quality: 1,
-      ...drawRegion
+      ...(imageSize || drawRegion)
     },
-    style: drawRegion
+    style: imageSize || drawRegion
   }, /*#__PURE__*/React.createElement(DrawPad, {
     addBackground: true,
     currentItem: currentItem,
     doneItems: drawState.doneItems,
     onPressItem: onPressItem,
-    onTextHeightChange: onTextHeightChange
+    onTextHeightChange: onTextHeightChange,
+    ratioImage: ratioImage
   })) : null))), /*#__PURE__*/React.createElement(TextInput, {
     ref: textInputRef,
     style: styles.textInput,