@archireport/react-native-svg-draw 1.0.1 → 1.1.0

package/src/components/DrawCore/index.tsx

@@ -2,6 +2,7 @@ import React, {
   useCallback,
   useEffect,
   useImperativeHandle,
+  useReducer,
   useRef,
   useState,
 } from 'react';
@@ -85,10 +86,10 @@ const styles = StyleSheet.create({
   },
 });
 
-function pDistance(
+const pDistance = (
   point: { x: number; y: number },
   line: { x1: number; x2: number; y1: number; y2: number }
-) {
+) => {
   'worklet';
   const { x1, x2, y1, y2 } = line;
   const { x, y } = point;
@@ -122,7 +123,7 @@ function pDistance(
   var dx = x - xx;
   var dy = y - yy;
   return Math.sqrt(dx * dx + dy * dy);
-}
+};
 
 const AnimatedTextInput = Animated.createAnimatedComponent(TextInput);
 
@@ -150,7 +151,7 @@ type Context = {
 const drawNewItem = (
   mode: Animated.SharedValue<DrawItemType>,
   currentItem: Animated.SharedValue<DrawItem | null>,
-  updateDoneItems: (item: DrawItem) => void,
+  addDoneItem: (item: DrawItem) => void,
   position: { x: number; y: number },
   style: {
     textBaseHeight: Animated.SharedValue<number | null>;
@@ -161,7 +162,7 @@ const drawNewItem = (
   'worklet';
 
   if (currentItem.value) {
-    runOnJS(updateDoneItems)(currentItem.value);
+    runOnJS(addDoneItem)(currentItem.value);
   }
 
   switch (mode.value) {
@@ -247,6 +248,71 @@ const onTextHeightUpdate = (
   }
 };
 
+type Action =
+  | { type: 'ADD_DONE_ITEM'; item: DrawItem }
+  | { type: 'DELETE_DONE_ITEM'; indice: number }
+  | {
+      type: 'ADD_SCREEN_STATE';
+      currentItem: DrawItem | null;
+    }
+  | {
+      type: 'CANCEL';
+      onCancelChange?: (cancel: boolean) => void;
+    };
+
+const reducerDrawStates = (
+  drawStates: { doneItems: DrawItem[]; screenStates: DrawItem[][] },
+  action: Action
+) => {
+  'worklet';
+  switch (action.type) {
+    case 'ADD_DONE_ITEM':
+      return {
+        ...drawStates,
+        doneItems: drawStates.doneItems.concat(action.item),
+      };
+    case 'DELETE_DONE_ITEM':
+      const newDoneItems = drawStates.doneItems;
+      newDoneItems.splice(action.indice, 1);
+      return {
+        ...drawStates,
+        doneItems: newDoneItems,
+      };
+    case 'ADD_SCREEN_STATE':
+      if (action.currentItem) {
+        return {
+          ...drawStates,
+          screenStates: drawStates.screenStates.concat([
+            [...drawStates.doneItems, action.currentItem],
+          ]),
+        };
+      } else {
+        return {
+          ...drawStates,
+          screenStates: drawStates.screenStates.concat([
+            [...drawStates.doneItems],
+          ]),
+        };
+      }
+
+    case 'CANCEL':
+      const len = drawStates.screenStates.length;
+      if (len > 1) {
+        const newScreenStates = drawStates.screenStates;
+        newScreenStates.pop();
+        if (newScreenStates.length === 1) {
+          action.onCancelChange?.(false);
+        }
+        return {
+          doneItems: drawStates.screenStates[len - 2],
+          screenStates: newScreenStates,
+        };
+      } else {
+        return drawStates;
+      }
+  }
+};
+
 const DrawCore = React.forwardRef<
   DrawCoreProps,
   {
@@ -254,1046 +320,1114 @@ const DrawCore = React.forwardRef<
     image?: ImageRequireSource | ImageURISource;
     linearGradient: React.ComponentType<{ colors: any[] } & ViewProps>;
     onSelectionChange?: (selected: boolean) => void;
+    onCancelChange?: (cancel: boolean) => void;
   }
->(({ drawingMode, image, linearGradient, onSelectionChange }, ref) => {
-  const mode = useSharedValue<DrawItemType>('pen');
+>(
+  (
+    { drawingMode, image, linearGradient, onSelectionChange, onCancelChange },
+    ref
+  ) => {
+    const mode = useSharedValue<DrawItemType>('pen');
 
-  const [drawRegion, setDrawRegion] = useState<Size | null>(null);
+    const [drawRegion, setDrawRegion] = useState<Size | null>(null);
 
-  const [originalImageSize, setOriginalImageSize] = useState<Size | null>(null);
+    const [originalImageSize, setOriginalImageSize] =
+      useState<Size | null>(null);
 
-  const [imageSize, setImageSize] = useState<Size | null>(null);
+    const [imageSize, setImageSize] = useState<Size | null>(null);
 
-  const drawContainer = useRef<View>(null);
+    const drawContainer = useRef<View>(null);
 
-  const viewShot = useRef<ViewShot>(null);
+    const viewShot = useRef<ViewShot>(null);
 
-  const [textVal, setTextVal] = useState<string>('');
+    const [textVal, setTextVal] = useState<string>('');
 
-  const currentItem = useSharedValue<DrawItem | null>(null);
+    const currentItem = useSharedValue<DrawItem | null>(null);
 
-  const initialItem = useSharedValue<DrawItem | null>(null);
+    const initialItem = useSharedValue<DrawItem | null>(null);
 
-  const [doneItems, setDoneItems] = useState<DrawItem[]>([]);
+    const [drawStates, dispatchDrawStates] = useReducer(reducerDrawStates, {
+      doneItems: [],
+      screenStates: [[]],
+    });
 
-  const textBaseHeight = useSharedValue<number | null>(null);
+    const textBaseHeight = useSharedValue<number | null>(null);
 
-  const updateDoneItems = useCallback((done: DrawItem) => {
-    setDoneItems((previous) => previous.concat(done));
-  }, []);
+    const addDoneItem = useCallback((item: DrawItem) => {
+      dispatchDrawStates({ type: 'ADD_DONE_ITEM', item: item });
+    }, []);
 
-  useImperativeHandle(
-    ref,
-    () => ({
-      drawingContainer: drawContainer,
-      deleteSelectedItem: () => {
-        if (currentItem.value) {
-          currentItem.value = null;
-        }
-        onSelectionChange?.(false);
-      },
-      takeSnapshot: async (): Promise<string | undefined> => {
-        if (currentItem.value) {
-          updateDoneItems(currentItem.value);
-          currentItem.value = null;
-        }
-        return viewShot.current?.capture?.();
-      },
-    }),
-    [currentItem, onSelectionChange, updateDoneItems]
-  );
-
-  useEffect(() => {
-    mode.value = drawingMode;
-    if (currentItem.value) {
-      updateDoneItems(currentItem.value);
-    }
-    currentItem.value = null;
-    onSelectionChange?.(false);
-  }, [drawingMode, mode, currentItem, updateDoneItems, onSelectionChange]);
+    const deleteDoneItem = useCallback((indice: number) => {
+      dispatchDrawStates({ type: 'DELETE_DONE_ITEM', indice: indice });
+    }, []);
 
-  const addNewItem = runOnJS(updateDoneItems);
+    const addScreenStates = useCallback((item: DrawItem | null) => {
+      dispatchDrawStates({
+        type: 'ADD_SCREEN_STATE',
+        currentItem: item,
+      });
+    }, []);
 
-  const strokeWidth = useSharedValue<number>(2);
+    const cancelAction = useCallback(() => {
+      dispatchDrawStates({
+        type: 'CANCEL',
+        onCancelChange: onCancelChange,
+      });
+    }, [onCancelChange]);
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        drawingContainer: drawContainer,
+        deleteSelectedItem: () => {
+          if (currentItem.value) {
+            currentItem.value = null;
+            addScreenStates(null);
+          }
+          onSelectionChange?.(false);
+          onCancelChange?.(true);
+        },
+        cancelLastAction: () => {
+          onSelectionChange?.(false);
+          if (currentItem.value) {
+            currentItem.value = null;
+          }
+          cancelAction();
+        },
+        takeSnapshot: async (): Promise<string | undefined> => {
+          if (currentItem.value) {
+            addDoneItem(currentItem.value);
+            currentItem.value = null;
+          }
+          return viewShot.current?.capture?.();
+        },
+      }),
+      [
+        currentItem,
+        onSelectionChange,
+        onCancelChange,
+        addScreenStates,
+        cancelAction,
+        addDoneItem,
+      ]
+    );
+
+    useEffect(() => {
+      mode.value = drawingMode;
+      if (currentItem.value) {
+        addDoneItem(currentItem.value);
+      }
+      currentItem.value = null;
+      onSelectionChange?.(false);
+    }, [drawingMode, mode, currentItem, onSelectionChange, addDoneItem]);
 
-  const color = useSharedValue<hslColor>('hsl(0, 100%, 0%)');
+    const strokeWidth = useSharedValue<number>(2);
 
-  const panPosition = useSharedValue(0);
+    const color = useSharedValue<hslColor>('hsl(0, 100%, 0%)');
 
-  const showTextInput = useSharedValue(false);
+    const panPosition = useSharedValue(0);
 
-  const textFocus = useCallback(() => {
-    textInputRef.current?.focus();
-  }, []);
+    const showTextInput = useSharedValue(false);
 
-  useEffect(() => {
-    if (currentItem.value?.type === 'text') {
-      currentItem.value = {
-        data: currentItem.value.data,
-        type: currentItem.value.type,
-        strokeWidth: currentItem.value.strokeWidth,
-        color: currentItem.value.color,
-        text: textVal,
-      };
-    }
-  }, [currentItem, textVal]);
+    const textFocus = useCallback(() => {
+      textInputRef.current?.focus();
+    }, []);
 
-  const onGestureEvent = useAnimatedGestureHandler<
-    PanGestureHandlerGestureEvent,
-    Context
-  >(
-    {
-      onStart: ({ x, y }, ctx) => {
-        const startX = x;
-        const startY = y;
-        ctx.startX = startX;
-        ctx.startY = startY;
-        ctx.newlyCreated = false;
+    const onColorStrokeChange = useCallback(() => {
+      if (currentItem.value) {
+        addScreenStates(currentItem.value);
+      }
+    }, [addScreenStates, currentItem.value]);
+
+    useEffect(() => {
+      if (currentItem.value?.type === 'text') {
+        currentItem.value = {
+          data: currentItem.value.data,
+          type: currentItem.value.type,
+          strokeWidth: currentItem.value.strokeWidth,
+          color: currentItem.value.color,
+          text: textVal,
+        };
+      }
+    }, [currentItem, textVal]);
 
-        panPosition.value = withTiming(RIGHT_PANE_WIDTH);
+    const onGestureEvent = useAnimatedGestureHandler<
+      PanGestureHandlerGestureEvent,
+      Context
+    >(
+      {
+        onStart: ({ x: startX, y: startY }, ctx) => {
+          ctx.startX = startX;
+          ctx.startY = startY;
+          ctx.newlyCreated = false;
 
-        initialItem.value = currentItem.value;
+          panPosition.value = withTiming(RIGHT_PANE_WIDTH);
 
-        switch (currentItem.value?.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;
-            }
+          initialItem.value = currentItem.value;
 
-            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';
+          switch (currentItem.value?.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 (
-                startY <= y + height + THRESHOLD &&
-                startY >= y + height - THRESHOLD
+                startX <= cx + THRESHOLD &&
+                startX >= cx - THRESHOLD &&
+                startY <= cy + ry + THRESHOLD &&
+                startY >= cy + ry - 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';
+                ctx.zone = 'BOTTOM';
               } else if (
-                startY <= y + height + THRESHOLD &&
-                startY >= y + height - THRESHOLD
+                startY <= cy + THRESHOLD &&
+                startY >= cy - THRESHOLD &&
+                startX <= cx - rx + THRESHOLD &&
+                startX >= cx - rx - 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;
-            }
-
-            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
-            ) {
-              ctx.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))
-            ) {
-              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;
-
-            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';
-            } else {
-              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';
-            } else {
-              ctx.zone = 'OUT';
-              initialItem.value = null;
-            }
-            break;
-          default:
-            ctx.zone = 'OUT';
-            initialItem.value = null;
-            break;
-        }
-      },
-      onActive: ({ x, y, translationX, translationY }, ctx) => {
-        const { startX, startY, zone, newlyCreated } = ctx;
-        if (zone === 'OUT' && newlyCreated === false) {
-          ctx.newlyCreated = true;
-          if (mode.value === 'text') {
-            runOnJS(setTextVal)('');
-          }
-
-          drawNewItem(
-            mode,
-            currentItem,
-            addNewItem,
-            { x: startX, y: startY },
-            { textBaseHeight, strokeWidth, color }
-          );
-          onSelectionChange && runOnJS(onSelectionChange)(true);
-        }
-        switch (currentItem.value?.type) {
-          case 'pen':
-            if (
-              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: x,
-                  y: y,
-                }),
-              };
-            }
-            break;
-          case 'ellipse':
-            if (initialItem.value?.type === currentItem.value.type) {
-              const rx =
-                typeof initialItem.value.data.rx === 'string'
-                  ? parseFloat(initialItem.value?.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;
+                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;
               }
-            } 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.value?.type === currentItem.value.type) {
-              const height =
-                typeof initialItem.value?.data.height === 'string'
-                  ? parseFloat(initialItem.value?.data.height)
-                  : initialItem.value?.data.height || 0;
-
-              const width =
-                typeof initialItem.value?.data.width === 'string'
-                  ? parseFloat(initialItem.value?.data.width)
-                  : initialItem.value?.data.width || 0;
 
+              break;
+            case 'rectangle':
               const x =
-                typeof initialItem.value?.data.x === 'string'
-                  ? parseFloat(initialItem.value?.data.x)
-                  : initialItem.value?.data.x || 0;
-
+                typeof currentItem.value.data.x === 'string'
+                  ? parseFloat(currentItem.value.data.x)
+                  : currentItem.value.data.x || 0;
               const y =
-                typeof initialItem.value?.data.y === 'string'
-                  ? parseFloat(initialItem.value?.data.y)
-                  : initialItem.value?.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;
+                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 {
-              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':
-            if (initialItem.value?.type === currentItem.value.type) {
-              const x1 =
-                typeof initialItem.value?.data.x1 === 'string'
-                  ? parseFloat(initialItem.value?.data.x1)
-                  : initialItem.value?.data.x1 || 0;
 
+              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 initialItem.value?.data.y1 === 'string'
-                  ? parseFloat(initialItem.value?.data.y1)
-                  : initialItem.value?.data.y1 || 0;
-
+                typeof currentItem.value.data.y1 === 'string'
+                  ? parseFloat(currentItem.value.data.y1)
+                  : currentItem.value.data.y1 || 0;
               const x2 =
-                typeof initialItem.value?.data.x2 === 'string'
-                  ? parseFloat(initialItem.value?.data.x2)
-                  : initialItem.value?.data.x2 || 0;
-
+                typeof currentItem.value.data.x2 === 'string'
+                  ? parseFloat(currentItem.value.data.x2)
+                  : currentItem.value.data.x2 || 0;
               const y2 =
-                typeof initialItem.value?.data.y2 === 'string'
-                  ? parseFloat(initialItem.value?.data.y2)
-                  : initialItem.value?.data.y2 || 0;
-
-              switch (zone) {
-                case 'TOP':
-                  currentItem.value = {
-                    type: currentItem.value.type,
-                    strokeWidth: currentItem.value.strokeWidth,
-                    color: currentItem.value.color,
-                    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,
-                    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,
-                    data: {
-                      x1: x1 + translationX,
-                      y1: y1 + translationY,
-                      x2: x2 + translationX,
-                      y2: y2 + translationY,
-                    },
-                  };
-                  break;
+                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({ 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;
               }
-            } else {
-              currentItem.value = {
-                type: currentItem.value.type,
-                strokeWidth: currentItem.value.strokeWidth,
-                color: currentItem.value.color,
-                data: {
-                  x1: startX,
-                  y1: startY,
-                  x2: startX + translationX,
-                  y2: startY + translationY,
-                },
-              };
-            }
-            break;
-          case 'text':
-            if (initialItem.value?.type === currentItem.value.type) {
+
+              break;
+            case 'text':
               const xText =
-                typeof initialItem.value?.data.x === 'string'
-                  ? parseFloat(initialItem.value?.data.x)
-                  : initialItem.value?.data.x || 0;
+                typeof currentItem.value.data.x === 'string'
+                  ? parseFloat(currentItem.value.data.x)
+                  : currentItem.value.data.x || 0;
               const yText =
-                typeof initialItem.value?.data.y === 'string'
-                  ? parseFloat(initialItem.value?.data.y)
-                  : initialItem.value?.data.y || 0;
+                typeof currentItem.value.data.y === 'string'
+                  ? parseFloat(currentItem.value.data.y)
+                  : currentItem.value.data.y || 0;
               const widthText =
-                typeof initialItem.value?.data.width === 'string'
-                  ? parseFloat(initialItem.value?.data.width)
-                  : initialItem.value?.data.width || 0;
+                typeof currentItem.value.data.width === 'string'
+                  ? parseFloat(currentItem.value.data.width)
+                  : currentItem.value.data.width || 0;
               const heightText =
-                typeof initialItem.value?.data.height === 'string'
-                  ? parseFloat(initialItem.value?.data.height)
-                  : initialItem.value?.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;
+                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
+              ) {
+                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';
+              } else {
+                ctx.zone = 'OUT';
+                initialItem.value = null;
               }
-            } 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,
-                },
-              };
+
+              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';
+              initialItem.value = null;
+              break;
+          }
+        },
+        onActive: (
+          { x: currentX, y: currentY, translationX, translationY },
+          ctx
+        ) => {
+          const { startX, startY, zone, newlyCreated } = ctx;
+          if (zone === 'OUT' && newlyCreated === false) {
+            ctx.newlyCreated = true;
+            if (mode.value === 'text') {
+              runOnJS(setTextVal)('');
             }
-        }
-      },
-      onEnd: (_event) => {
-        panPosition.value = withTiming(0);
-
-        if (currentItem.value?.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 ?? ''
-                : '',
-          };
-        }
-      },
-    },
-    []
-  );
+            drawNewItem(
+              mode,
+              currentItem,
+              addDoneItem,
+              { x: startX, y: startY },
+              { textBaseHeight, strokeWidth, color }
+            );
+            onSelectionChange && runOnJS(onSelectionChange)(true);
+            onCancelChange && runOnJS(onCancelChange)(true);
+          }
+          switch (currentItem.value?.type) {
+            case 'pen':
+              if (
+                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.value?.type === currentItem.value.type) {
+                const rx =
+                  typeof initialItem.value.data.rx === 'string'
+                    ? parseFloat(initialItem.value?.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,
+                  },
+                };
+              }
 
-  const rightPaneStyle = useAnimatedStyle(() => {
-    return {
-      transform: [{ translateX: panPosition.value }],
-    };
-  }, [panPosition.value]);
+              break;
+            case 'rectangle':
+              if (initialItem.value?.type === currentItem.value.type) {
+                const height =
+                  typeof initialItem.value?.data.height === 'string'
+                    ? parseFloat(initialItem.value?.data.height)
+                    : initialItem.value?.data.height || 0;
+
+                const width =
+                  typeof initialItem.value?.data.width === 'string'
+                    ? parseFloat(initialItem.value?.data.width)
+                    : initialItem.value?.data.width || 0;
+
+                const x =
+                  typeof initialItem.value?.data.x === 'string'
+                    ? parseFloat(initialItem.value?.data.x)
+                    : initialItem.value?.data.x || 0;
+
+                const y =
+                  typeof initialItem.value?.data.y === 'string'
+                    ? parseFloat(initialItem.value?.data.y)
+                    : initialItem.value?.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,
+                  },
+                };
+              }
+              break;
+            case 'singleHead':
+            case 'doubleHead':
+              if (initialItem.value?.type === currentItem.value.type) {
+                const x1 =
+                  typeof initialItem.value?.data.x1 === 'string'
+                    ? parseFloat(initialItem.value?.data.x1)
+                    : initialItem.value?.data.x1 || 0;
+
+                const y1 =
+                  typeof initialItem.value?.data.y1 === 'string'
+                    ? parseFloat(initialItem.value?.data.y1)
+                    : initialItem.value?.data.y1 || 0;
+
+                const x2 =
+                  typeof initialItem.value?.data.x2 === 'string'
+                    ? parseFloat(initialItem.value?.data.x2)
+                    : initialItem.value?.data.x2 || 0;
+
+                const y2 =
+                  typeof initialItem.value?.data.y2 === 'string'
+                    ? parseFloat(initialItem.value?.data.y2)
+                    : initialItem.value?.data.y2 || 0;
+
+                switch (zone) {
+                  case 'TOP':
+                    currentItem.value = {
+                      type: currentItem.value.type,
+                      strokeWidth: currentItem.value.strokeWidth,
+                      color: currentItem.value.color,
+                      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,
+                      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,
+                      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,
+                  data: {
+                    x1: startX,
+                    y1: startY,
+                    x2: startX + translationX,
+                    y2: startY + translationY,
+                  },
+                };
+              }
+              break;
+            case 'text':
+              if (initialItem.value?.type === currentItem.value.type) {
+                const xText =
+                  typeof initialItem.value?.data.x === 'string'
+                    ? parseFloat(initialItem.value?.data.x)
+                    : initialItem.value?.data.x || 0;
+                const yText =
+                  typeof initialItem.value?.data.y === 'string'
+                    ? parseFloat(initialItem.value?.data.y)
+                    : initialItem.value?.data.y || 0;
+                const widthText =
+                  typeof initialItem.value?.data.width === 'string'
+                    ? parseFloat(initialItem.value?.data.width)
+                    : initialItem.value?.data.width || 0;
+                const heightText =
+                  typeof initialItem.value?.data.height === 'string'
+                    ? parseFloat(initialItem.value?.data.height)
+                    : initialItem.value?.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,
+                  },
+                };
+              }
+          }
+        },
+        onEnd: (_event) => {
+          panPosition.value = withTiming(0);
+
+          if (currentItem.value?.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 ?? ''
+                  : '',
+            };
+          }
 
-  useEffect(() => {
-    const sudDidHide = Keyboard.addListener('keyboardDidHide', () => {
-      showTextInput.value = false;
-    });
+          runOnJS(addScreenStates)(currentItem.value);
+        },
+      },
+      []
+    );
 
-    const sudDidShow = Keyboard.addListener('keyboardDidShow', (event) => {
-      // avoid events triggered by InputAccessoryView
-      if (event.endCoordinates.height > 100) {
-        showTextInput.value = true;
-      }
+    const rightPaneStyle = useAnimatedStyle(() => {
+      return {
+        transform: [{ translateX: panPosition.value }],
+      };
     });
 
-    // cleanup function
-    return () => {
-      sudDidShow.remove();
-      sudDidHide.remove();
-    };
-  }, [showTextInput]);
+    useEffect(() => {
+      const sudDidHide = Keyboard.addListener('keyboardDidHide', () => {
+        showTextInput.value = false;
+      });
 
-  const textInputRef = useRef<TextInput>(null);
+      const sudDidShow = Keyboard.addListener('keyboardDidShow', (event) => {
+        // avoid events triggered by InputAccessoryView
+        if (event.endCoordinates.height > 100) {
+          showTextInput.value = true;
+        }
+      });
 
-  const textInputContainerStyle = useAnimatedStyle(() => {
-    return {
-      height: 'auto',
-      backgroundColor: 'white',
-      display: 'flex',
-      opacity: showTextInput.value ? withTiming(1) : withTiming(0),
-    };
-  }, [showTextInput.value]);
+      // cleanup function
+      return () => {
+        sudDidShow.remove();
+        sudDidHide.remove();
+      };
+    }, [showTextInput]);
 
-  const textInputStyle = useAnimatedStyle(() => {
-    return {
-      display: showTextInput.value ? 'flex' : 'none',
-      opacity: showTextInput.value ? withTiming(1) : withTiming(0),
-    };
-  }, [showTextInput.value]);
-
-  useAnimatedReaction(
-    () => {
-      return { strokeWidth: strokeWidth.value, color: color.value };
-    },
-    ({ strokeWidth, color }: { strokeWidth: number; color: hslColor }) => {
-      switch (currentItem.value?.type) {
-        case 'singleHead':
-          currentItem.value = {
-            type: currentItem.value.type,
-            data: currentItem.value.data,
-            strokeWidth,
-            color,
-          };
-          break;
-        case 'doubleHead':
-          currentItem.value = {
-            type: currentItem.value.type,
-            data: currentItem.value.data,
-            strokeWidth,
-            color,
-          };
-          break;
-        case 'ellipse':
-          currentItem.value = {
-            type: currentItem.value.type,
-            data: currentItem.value.data,
-            strokeWidth,
-            color,
-          };
-          break;
-        case 'rectangle':
-          currentItem.value = {
-            type: currentItem.value.type,
-            data: currentItem.value.data,
-            strokeWidth,
-            color,
-          };
-          break;
-
-        case 'pen':
-          currentItem.value = {
-            type: currentItem.value.type,
-            data: currentItem.value.data,
-            strokeWidth,
-            color,
-          };
-          break;
-        case 'text':
-          currentItem.value = {
-            type: currentItem.value.type,
-            data: currentItem.value.data,
-            strokeWidth,
-            color,
-            text: currentItem.value.text,
-          };
-          break;
-      }
-    },
-    [strokeWidth.value, color.value]
-  );
+    const textInputRef = useRef<TextInput>(null);
+
+    const textInputContainerStyle = useAnimatedStyle(() => {
+      return {
+        height: 'auto',
+        backgroundColor: 'white',
+        display: 'flex',
+        opacity: showTextInput.value ? withTiming(1) : withTiming(0),
+      };
+    }, [showTextInput.value]);
+
+    const textInputStyle = useAnimatedStyle(() => {
+      return {
+        display: showTextInput.value ? 'flex' : 'none',
+        opacity: showTextInput.value ? withTiming(1) : withTiming(0),
+      };
+    }, [showTextInput.value]);
+
+    useAnimatedReaction(
+      () => {
+        return {
+          strokeWidth: strokeWidth.value,
+          color: color.value,
+        };
+      },
+      ({
+        strokeWidth: sw,
+        color: c,
+      }: {
+        strokeWidth: number;
+        color: hslColor;
+      }) => {
+        switch (currentItem.value?.type) {
+          case 'singleHead':
+            currentItem.value = {
+              type: currentItem.value.type,
+              data: currentItem.value.data,
+              strokeWidth: sw,
+              color: c,
+            };
+            break;
+          case 'doubleHead':
+            currentItem.value = {
+              type: currentItem.value.type,
+              data: currentItem.value.data,
+              strokeWidth: sw,
+              color: c,
+            };
+            break;
+          case 'ellipse':
+            currentItem.value = {
+              type: currentItem.value.type,
+              data: currentItem.value.data,
+              strokeWidth: sw,
+              color: c,
+            };
+            break;
+          case 'rectangle':
+            currentItem.value = {
+              type: currentItem.value.type,
+              data: currentItem.value.data,
+              strokeWidth: sw,
+              color: c,
+            };
+            break;
 
-  const onPressItem = useCallback(
-    (item: DrawItem, index: number) => () => {
-      onSelectionChange?.(true);
+          case 'pen':
+            currentItem.value = {
+              type: currentItem.value.type,
+              data: currentItem.value.data,
+              strokeWidth: sw,
+              color: c,
+            };
+            break;
+          case 'text':
+            currentItem.value = {
+              type: currentItem.value.type,
+              data: currentItem.value.data,
+              strokeWidth: sw,
+              color: c,
+              text: currentItem.value.text,
+            };
+            break;
+        }
+      },
+      [strokeWidth.value, color.value]
+    );
 
-      const previousItem = currentItem.value;
+    const onPressItem = useCallback(
+      (item: DrawItem, index: number) => () => {
+        onSelectionChange?.(true);
 
-      strokeWidth.value = item.strokeWidth;
-      color.value = item.color;
-      currentItem.value = item;
+        const previousItem = currentItem.value;
 
-      setDoneItems((done) => {
-        const copy = [...done];
-        copy.splice(index, 1);
-        return copy;
-      });
+        strokeWidth.value = item.strokeWidth;
+        color.value = item.color;
+        currentItem.value = item;
 
-      if (previousItem) {
-        updateDoneItems(previousItem);
-      }
+        deleteDoneItem(index);
 
-      if (item.type === 'text') {
-        setTextVal(item.text ?? '');
-      } else {
-        textInputRef.current?.blur();
-      }
-    },
-    [color, currentItem, strokeWidth, updateDoneItems, onSelectionChange]
-  );
-
-  const onTextHeightChange = useCallback(
-    (height: number) => {
-      onTextHeightUpdate(currentItem, textBaseHeight, height);
-    },
-    [currentItem, textBaseHeight]
-  );
-
-  const calculateSizes = useCallback(
-    (imageWidth: number, imageHeight: number) => {
-      if (drawRegion) {
-        setOriginalImageSize({ width: imageWidth, height: imageHeight });
-
-        const ratioImageHeight =
-          Math.round(((imageHeight * drawRegion.width) / imageWidth) * 100) /
-          100;
-
-        if (ratioImageHeight < drawRegion.height) {
-          setImageSize({
-            width: drawRegion.width,
-            height: ratioImageHeight,
-          });
+        if (previousItem) {
+          addDoneItem(previousItem);
+        }
+
+        if (item.type === 'text') {
+          setTextVal(item.text ?? '');
         } else {
-          setImageSize({
-            height: drawRegion.height,
-            width:
-              Math.round(
-                ((imageWidth * drawRegion.height) / imageHeight) * 100
-              ) / 100,
+          textInputRef.current?.blur();
+        }
+      },
+      [
+        onSelectionChange,
+        currentItem,
+        strokeWidth,
+        color,
+        deleteDoneItem,
+        addDoneItem,
+      ]
+    );
+
+    const onTextHeightChange = useCallback(
+      (height: number) => {
+        onTextHeightUpdate(currentItem, textBaseHeight, height);
+      },
+      [currentItem, textBaseHeight]
+    );
+
+    const calculateSizes = useCallback(
+      (imageWidth: number, imageHeight: number) => {
+        if (drawRegion) {
+          setOriginalImageSize({ width: imageWidth, height: imageHeight });
+
+          const ratioImageHeight =
+            Math.round(((imageHeight * drawRegion.width) / imageWidth) * 100) /
+            100;
+
+          if (ratioImageHeight < drawRegion.height) {
+            setImageSize({
+              width: drawRegion.width,
+              height: ratioImageHeight,
+            });
+          } else {
+            setImageSize({
+              height: drawRegion.height,
+              width:
+                Math.round(
+                  ((imageWidth * drawRegion.height) / imageHeight) * 100
+                ) / 100,
+            });
+          }
+        }
+      },
+      [drawRegion]
+    );
+
+    useEffect(() => {
+      if (drawRegion && image) {
+        if (typeof image === 'number') {
+          const infos = Image.resolveAssetSource(image);
+
+          calculateSizes(infos.width, infos.height);
+        } else if (image.uri) {
+          Image.getSize(image.uri, (imageWidth, imageHeight) => {
+            calculateSizes(imageWidth, imageHeight);
           });
         }
       }
-    },
-    [drawRegion]
-  );
-
-  useEffect(() => {
-    if (drawRegion && image) {
-      if (typeof image === 'number') {
-        const infos = Image.resolveAssetSource(image);
-
-        calculateSizes(infos.width, infos.height);
-      } else if (image.uri) {
-        Image.getSize(image.uri, (imageWidth, imageHeight) => {
-          calculateSizes(imageWidth, imageHeight);
-        });
-      }
-    }
-  }, [image, drawRegion, calculateSizes]);
-
-  return (
-    <View style={styles.container}>
-      <View
-        style={styles.drawZone}
-        onLayout={(event) => {
-          setDrawRegion({
-            height: event.nativeEvent.layout.height,
-            width: event.nativeEvent.layout.width,
-          });
-        }}
-      >
-        <PanGestureHandler
-          activeOffsetX={2}
-          activeOffsetY={2}
-          onGestureEvent={onGestureEvent}
+    }, [image, drawRegion, calculateSizes]);
+
+    return (
+      <View style={styles.container}>
+        <View
+          style={styles.drawZone}
+          onLayout={(event) => {
+            setDrawRegion({
+              height: event.nativeEvent.layout.height,
+              width: event.nativeEvent.layout.width,
+            });
+          }}
         >
-          <Animated.View style={imageSize || drawRegion}>
-            <View ref={drawContainer}>
-              {image ? (
-                imageSize && originalImageSize ? (
+          <PanGestureHandler onGestureEvent={onGestureEvent}>
+            <Animated.View style={imageSize || drawRegion}>
+              <View ref={drawContainer}>
+                {image ? (
+                  imageSize && originalImageSize ? (
+                    <ViewShot
+                      ref={viewShot}
+                      options={{
+                        format: 'jpg',
+                        quality: 1,
+                      }}
+                      style={imageSize}
+                    >
+                      <ImageBackground source={image} style={styles.bgImage}>
+                        <DrawPad
+                          currentItem={currentItem}
+                          doneItems={drawStates.doneItems}
+                          onPressItem={onPressItem}
+                          onTextHeightChange={onTextHeightChange}
+                        />
+                      </ImageBackground>
+                    </ViewShot>
+                  ) : null
+                ) : drawRegion ? (
                   <ViewShot
                     ref={viewShot}
                     options={{
                       format: 'jpg',
                       quality: 1,
-                      ...originalImageSize,
+                      ...drawRegion,
                     }}
-                    style={imageSize}
+                    style={drawRegion}
                   >
-                    <ImageBackground source={image} style={styles.bgImage}>
-                      <DrawPad
-                        currentItem={currentItem}
-                        doneItems={doneItems}
-                        onPressItem={onPressItem}
-                        onTextHeightChange={onTextHeightChange}
-                      />
-                    </ImageBackground>
+                    <DrawPad
+                      currentItem={currentItem}
+                      doneItems={drawStates.doneItems}
+                      onPressItem={onPressItem}
+                      onTextHeightChange={onTextHeightChange}
+                    />
                   </ViewShot>
-                ) : null
-              ) : drawRegion ? (
-                <ViewShot
-                  ref={viewShot}
-                  options={{
-                    format: 'jpg',
-                    quality: 1,
-                    ...drawRegion,
-                  }}
-                  style={drawRegion}
-                >
-                  <DrawPad
-                    currentItem={currentItem}
-                    doneItems={doneItems}
-                    onPressItem={onPressItem}
-                    onTextHeightChange={onTextHeightChange}
-                  />
-                </ViewShot>
-              ) : null}
+                ) : null}
+              </View>
+            </Animated.View>
+          </PanGestureHandler>
+
+          <Animated.View style={[styles.rightPaneBaseStyle, rightPaneStyle]}>
+            <View style={styles.strokeSliderContainer}>
+              <StrokeSlider
+                minValue={2}
+                maxValue={10}
+                stroke={strokeWidth}
+                onStrokeChange={onColorStrokeChange}
+              />
+            </View>
+            <View style={styles.colorSliderContainer}>
+              <ColorSlider
+                color={color}
+                linearGradient={linearGradient}
+                onColorChange={onColorStrokeChange}
+              />
             </View>
           </Animated.View>
-        </PanGestureHandler>
-
-        <Animated.View style={[styles.rightPaneBaseStyle, rightPaneStyle]}>
-          <View style={styles.strokeSliderContainer}>
-            <StrokeSlider minValue={2} maxValue={10} stroke={strokeWidth} />
-          </View>
-          <View style={styles.colorSliderContainer}>
-            <ColorSlider color={color} linearGradient={linearGradient} />
-          </View>
-        </Animated.View>
+        </View>
+        {Platform.OS === 'ios' ? (
+          <InputAccessoryView>
+            <AnimatedTextInput
+              ref={textInputRef}
+              style={[styles.textInput, textInputStyle]}
+              onEndEditing={textInputRef.current?.clear}
+              onChangeText={setTextVal}
+              value={textVal}
+              autoCorrect={false}
+            />
+          </InputAccessoryView>
+        ) : (
+          <Animated.View style={textInputContainerStyle}>
+            <TextInput
+              ref={textInputRef}
+              style={styles.textInput}
+              onEndEditing={textInputRef.current?.clear}
+              onChangeText={setTextVal}
+              value={textVal}
+              autoCorrect={false}
+            />
+          </Animated.View>
+        )}
       </View>
-      {Platform.OS === 'ios' ? (
-        <InputAccessoryView>
-          <AnimatedTextInput
-            ref={textInputRef}
-            style={[styles.textInput, textInputStyle]}
-            onEndEditing={textInputRef.current?.clear}
-            onChangeText={setTextVal}
-            value={textVal}
-            autoCorrect={false}
-          />
-        </InputAccessoryView>
-      ) : (
-        <Animated.View style={textInputContainerStyle}>
-          <TextInput
-            ref={textInputRef}
-            style={styles.textInput}
-            onEndEditing={textInputRef.current?.clear}
-            onChangeText={setTextVal}
-            value={textVal}
-            autoCorrect={false}
-          />
-        </Animated.View>
-      )}
-    </View>
-  );
-});
+    );
+  }
+);
 
 export default DrawCore;