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

package/src/components/DrawCore/index.tsx

@@ -12,15 +12,11 @@ import {
 } from 'react-native';
 import Animated, {
   runOnJS,
-  useAnimatedGestureHandler,
   useAnimatedKeyboard,
   useAnimatedReaction,
   useSharedValue,
 } from 'react-native-reanimated';
-import {
-  PanGestureHandler,
-  PanGestureHandlerGestureEvent,
-} from 'react-native-gesture-handler';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 
 import type { DrawItem, DrawItemType, hslColor, Size } from '../../types';
 import DrawPad from './DrawPad';
@@ -226,9 +222,11 @@ const onTextHeightUpdate = (
 const DrawCore = ({
   image,
   backgroundColor,
+  actionWithSnapShotUri,
 }: {
   image?: ImageRequireSource | ImageURISource;
   backgroundColor?: string;
+  actionWithSnapShotUri?: (uri: string) => Promise<void>;
 }) => {
   const {
     drawState,
@@ -239,27 +237,59 @@ const DrawCore = ({
     itemIsSelected,
     viewShot,
     doubleArrowTextInput,
+    captureSnapshot,
+    snapShotRequested,
+    setSnapShotRequested,
   } = useDrawHook();
 
+  const [drawRegion, setDrawRegion] = useState<Size | null>(null);
+  const [imageSize, setImageSize] = useState<Size | null>(null);
+  const [originalImageSize, setOriginalImageSize] = useState<Size | null>(null);
+
+  useEffect(() => {
+    if (snapShotRequested) {
+      setSnapShotRequested(false);
+      setNewLayoutRequested(true);
+      if (
+        imageSize?.height &&
+        originalImageSize?.height &&
+        originalImageSize?.width &&
+        image
+      ) {
+        setOpacity(0);
+        setRatioImage(originalImageSize.height / imageSize?.height);
+        setImageSize(originalImageSize);
+      } else if (!image && drawRegion?.height) {
+        const width = 1500;
+        const height = width / 1.3333333;
+        setOpacity(0);
+        setRatioImage(height / drawRegion.height);
+        setImageSize({ width, height });
+      }
+    }
+  }, [
+    snapShotRequested,
+    drawRegion?.height,
+    image,
+    imageSize?.height,
+    originalImageSize,
+    setSnapShotRequested,
+  ]);
+
   const onCancelChangeWrapper = (arg: boolean) => {
     dispatchDrawStates({ type: 'SET_CANCEL_ENABLED', cancelEnabled: arg });
   };
 
   const mode = useSharedValue<DrawItemType>('pen');
-
-  const [drawRegion, setDrawRegion] = useState<Size | null>(null);
-
-  const [originalImageSize, setOriginalImageSize] = useState<Size | null>(null);
-
-  const [imageSize, setImageSize] = useState<Size | null>(null);
-
   const drawContainer = useRef<View>(null);
-
   const [textVal, setTextVal] = useState<string>('');
-
   const initialItem = useSharedValue<DrawItem | null>(null);
-
   const textBaseHeight = useSharedValue<number | null>(null);
+  const gestureContext = useSharedValue<Context>({
+    startX: 0,
+    startY: 0,
+    newlyCreated: false,
+  });
 
   const addDoneItem = useCallback(
     (item: DrawItem) => {
@@ -297,19 +327,16 @@ const DrawCore = ({
   const showTextInput = useSharedValue(false); //TODO: remove
 
   const textFocusState = useCallback(() => {
-    //setShowTextInputState(true);
-    console.log('textFocusState');
     doubleArrowTextInput?.current?.focus();
   }, [doubleArrowTextInput]);
 
   const textFocus = useCallback(() => {
-    console.log('textFocus');
     textInputRef.current?.focus();
   }, []);
 
   useEffect(() => {
     if (currentItem.value?.type === 'text') {
-      console.log('use effect text');
+      console.log('Updating text value:');
       showTextInput.value = true;
       textFocus();
       currentItem.value = {
@@ -322,18 +349,11 @@ const DrawCore = ({
     }
   }, [currentItem, showTextInput, textFocus, textVal]);
 
-  const onGestureEvent = useAnimatedGestureHandler<
-    PanGestureHandlerGestureEvent,
-    Context
-  >({
-    onStart: ({ x: startX, y: startY }, ctx) => {
-      ctx.startX = startX;
-      ctx.startY = startY;
-      ctx.newlyCreated = false;
-      console.log('**********************************');
-      console.log('onGestureEvent');
-      //panPosition.value = withTiming(RIGHT_PANE_WIDTH);
-      console.log('onStart', currentItem.value?.type);
+  const panGesture = Gesture.Pan()
+    .onStart((event) => {
+      const { x: startX, y: startY } = event;
+      gestureContext.value = { startX, startY, newlyCreated: false };
+
       initialItem.value = currentItem.value;
       switch (currentItem.value?.type) {
         case 'ellipse':
@@ -360,37 +380,37 @@ const DrawCore = ({
             startY <= cy - ry + THRESHOLD &&
             startY >= cy - ry - THRESHOLD
           ) {
-            ctx.zone = 'TOP';
+            gestureContext.value.zone = 'TOP';
           } else if (
             startX <= cx + THRESHOLD &&
             startX >= cx - THRESHOLD &&
             startY <= cy + ry + THRESHOLD &&
             startY >= cy + ry - THRESHOLD
           ) {
-            ctx.zone = 'BOTTOM';
+            gestureContext.value.zone = 'BOTTOM';
           } else if (
             startY <= cy + THRESHOLD &&
             startY >= cy - THRESHOLD &&
             startX <= cx - rx + THRESHOLD &&
             startX >= cx - rx - THRESHOLD
           ) {
-            ctx.zone = 'LEFT';
+            gestureContext.value.zone = 'LEFT';
           } else if (
             startY <= cy + THRESHOLD &&
             startY >= cy - THRESHOLD &&
             startX <= cx + rx + THRESHOLD &&
             startX >= cx + rx - THRESHOLD
           ) {
-            ctx.zone = 'RIGHT';
+            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))
           ) {
-            ctx.zone = 'CENTER';
+            gestureContext.value.zone = 'CENTER';
           } else {
-            ctx.zone = 'OUT';
+            gestureContext.value.zone = 'OUT';
             initialItem.value = null;
           }
 
@@ -415,24 +435,24 @@ const DrawCore = ({
 
           if (startX <= x + THRESHOLD && startX >= x - THRESHOLD) {
             if (startY <= y + THRESHOLD && startY >= y - THRESHOLD) {
-              ctx.zone = 'TOP_LEFT';
+              gestureContext.value.zone = 'TOP_LEFT';
             } else if (
               startY <= y + height + THRESHOLD &&
               startY >= y + height - THRESHOLD
             ) {
-              ctx.zone = 'BOTTOM_LEFT';
+              gestureContext.value.zone = 'BOTTOM_LEFT';
             }
           } else if (
             startX <= x + width + THRESHOLD &&
             startX >= x + width - THRESHOLD
           ) {
             if (startY <= y + THRESHOLD && startY >= y - THRESHOLD) {
-              ctx.zone = 'TOP_RIGHT';
+              gestureContext.value.zone = 'TOP_RIGHT';
             } else if (
               startY <= y + height + THRESHOLD &&
               startY >= y + height - THRESHOLD
             ) {
-              ctx.zone = 'BOTTOM_RIGHT';
+              gestureContext.value.zone = 'BOTTOM_RIGHT';
             }
           } else if (
             ((width > 0 && startX > x && startX < x + width) ||
@@ -440,9 +460,9 @@ const DrawCore = ({
             ((height > 0 && startY > y && startY < y + height) ||
               (height < 0 && startY < y && startY > y + height))
           ) {
-            ctx.zone = 'CENTER';
+            gestureContext.value.zone = 'CENTER';
           } else {
-            ctx.zone = 'OUT';
+            gestureContext.value.zone = 'OUT';
             initialItem.value = null;
           }
 
@@ -473,23 +493,23 @@ const DrawCore = ({
             startY <= y1 + THRESHOLD &&
             startY >= y1 - THRESHOLD
           ) {
-            ctx.zone = 'TOP';
+            gestureContext.value.zone = 'TOP';
           } else if (
             startX <= x2 + THRESHOLD &&
             startX >= x2 - THRESHOLD &&
             startY - THRESHOLD <= y2 + THRESHOLD &&
             startY + THRESHOLD >= y2 - THRESHOLD
           ) {
-            ctx.zone = 'BOTTOM';
+            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))
           ) {
-            ctx.zone = 'CENTER';
+            gestureContext.value.zone = 'CENTER';
           } else {
-            ctx.zone = 'OUT';
+            gestureContext.value.zone = 'OUT';
             initialItem.value = null;
           }
 
@@ -511,22 +531,21 @@ const DrawCore = ({
             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';
+            gestureContext.value.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';
+            gestureContext.value.zone = 'RIGHT';
           } else if (
             ((widthText > 0 && startX > xText && startX < xText + widthText) ||
               (widthText < 0 &&
@@ -537,14 +556,12 @@ const DrawCore = ({
               startY < yText + heightText) ||
               (heightText < 0 && startY < yText && startY > yText + heightText))
           ) {
-            ctx.zone = 'CENTER';
-            console.log('on active center');
+            gestureContext.value.zone = 'CENTER';
           } else {
-            ctx.zone = 'OUT';
-            console.log('on active out');
+            gestureContext.value.zone = 'OUT';
             initialItem.value = null;
 
-            ctx.newlyCreated = true;
+            gestureContext.value.newlyCreated = true;
             runOnJS(setTextVal)('');
             drawNewItem(
               mode,
@@ -571,19 +588,17 @@ const DrawCore = ({
                 startY >= p.y - THRESHOLD
             )
           ) {
-            ctx.zone = 'CENTER';
+            gestureContext.value.zone = 'CENTER';
           } else {
-            ctx.zone = 'OUT';
+            gestureContext.value.zone = 'OUT';
             initialItem.value = null;
           }
           break;
         default:
-          ctx.zone = 'OUT';
+          gestureContext.value.zone = 'OUT';
           initialItem.value = null;
           if (drawState.drawingMode === 'text') {
-            /* NEW GEOFF */
-            console.log('on active out');
-            ctx.newlyCreated = true;
+            gestureContext.value.newlyCreated = true;
 
             runOnJS(setTextVal)('');
 
@@ -602,15 +617,12 @@ const DrawCore = ({
           }
           break;
       }
-    },
-    onActive: (
-      { x: currentX, y: currentY, translationX, translationY },
-      ctx
-    ) => {
-      const { startX, startY, zone, newlyCreated } = ctx;
+    })
+    .onUpdate((event) => {
+      const { x: currentX, y: currentY, translationX, translationY } = event;
+      const { startX, startY, zone, newlyCreated } = gestureContext.value;
       if (zone === 'OUT' && newlyCreated === false && mode.value !== 'text') {
-        console.log('on active out');
-        ctx.newlyCreated = true;
+        gestureContext.value.newlyCreated = true;
         /*
         if (mode.value === 'text') {
           runOnJS(setTextVal)('');
@@ -956,7 +968,6 @@ const DrawCore = ({
           }
           break;
         case 'text':
-          console.log('on active text');
           if (initialItem.value?.type === currentItem.value.type) {
             const xText =
               typeof initialItem.value?.data.x === 'string'
@@ -1034,8 +1045,8 @@ const DrawCore = ({
             };
           }
       }
-    },
-    onEnd: (_event) => {
+    })
+    .onEnd(() => {
       if (currentItem.value?.type === 'doubleArrows') {
         runOnJS(textFocusState)();
       }
@@ -1054,8 +1065,7 @@ const DrawCore = ({
         };
       }
       runOnJS(addScreenStates)(currentItem.value);
-    },
-  });
+    });
 
   useEffect(() => {
     const sudDidHide = Keyboard.addListener('keyboardDidHide', () => {
@@ -1064,7 +1074,6 @@ const DrawCore = ({
 
     const sudDidShow = Keyboard.addListener('keyboardDidShow', (event) => {
       // avoid events triggered by InputAccessoryView
-      console.log('keyboardDidShow dc');
       if (event.endCoordinates.height > 100) {
         showTextInput.value = true;
       }
@@ -1123,14 +1132,11 @@ const DrawCore = ({
 
   const onPressItem = useCallback(
     (item: DrawItem, index: number) => () => {
-      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);
@@ -1201,9 +1207,8 @@ const DrawCore = ({
 
   const calculateSizes = useCallback(
     (imageWidth: number, imageHeight: number) => {
+      setOriginalImageSize({ width: imageWidth, height: imageHeight });
       if (drawRegion) {
-        setOriginalImageSize({ width: imageWidth, height: imageHeight });
-
         const ratioImageHeight =
           Math.round(((imageHeight * drawRegion.width) / imageWidth) * 100) /
           100;
@@ -1244,36 +1249,21 @@ const DrawCore = ({
   // 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);
+  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, addScreenStates]);
+  }, [actionWithSnapShotUri, newLayoutRequested, captureSnapshot]);
 
-  const onChangeText = useCallback(
-    (value: string) => {
-      if (
-        value &&
-        currentItem.value &&
-        currentItem.value.type === 'doubleArrows'
-      ) {
-        console.log('******************');
-        console.log(value);
-        console.log(currentItem.value);
+  const [ratioImage, setRatioImage] = useState<number>(1);
+  const [opacity, setOpacity] = useState<number>(1);
 
-        currentItem.value = {
-          ...currentItem.value,
-          text: value,
-        };
-      }
-    },
-    [currentItem]
-  );
-  */
   return (
     <View style={styles.container}>
       <View
@@ -1289,8 +1279,11 @@ const DrawCore = ({
         }}
       >
         <KeyboardAvoidingView behavior="position" keyboardVerticalOffset={70}>
-          <PanGestureHandler onGestureEvent={onGestureEvent}>
-            <Animated.View style={imageSize || drawRegion}>
+          <GestureDetector gesture={panGesture}>
+            <Animated.View
+              style={{ ...(imageSize || drawRegion), opacity: opacity }}
+              onLayout={onLayout}
+            >
               <View ref={drawContainer}>
                 {image ? (
                   imageSize && originalImageSize ? (
@@ -1308,6 +1301,7 @@ const DrawCore = ({
                           doneItems={drawState.doneItems}
                           onPressItem={onPressItem}
                           onTextHeightChange={onTextHeightChange}
+                          ratioImage={ratioImage}
                         />
                       </ImageBackground>
                     </ViewShot>
@@ -1318,9 +1312,9 @@ const DrawCore = ({
                     options={{
                       format: 'jpg',
                       quality: 1,
-                      ...drawRegion,
+                      ...(imageSize || drawRegion),
                     }}
-                    style={drawRegion}
+                    style={imageSize || drawRegion}
                   >
                     <DrawPad
                       addBackground
@@ -1328,12 +1322,13 @@ const DrawCore = ({
                       doneItems={drawState.doneItems}
                       onPressItem={onPressItem}
                       onTextHeightChange={onTextHeightChange}
+                      ratioImage={ratioImage}
                     />
                   </ViewShot>
                 ) : null}
               </View>
             </Animated.View>
-          </PanGestureHandler>
+          </GestureDetector>
 
           <TextInput
             ref={textInputRef}

package/src/components/DrawCore/useDrawHook.tsx

@@ -11,15 +11,17 @@ const useDrawHook = () => {
     itemIsSelected,
     viewShot,
     doubleArrowTextInput,
+    doSnapshot,
+    snapShotRequested,
+    setSnapShotRequested,
   } = useContext(DrawContext);
 
-  const takeSnapshot = useCallback(async () => {
-    if (currentItem?.value) {
-      dispatchDrawStates({ type: 'ADD_DONE_ITEM', item: currentItem.value });
-      currentItem.value = null;
+  const captureSnapshot = useCallback(async () => {
+    if (viewShot) {
+      return await viewShot.current?.capture?.();
     }
-    return viewShot!.current?.capture?.();
-  }, [currentItem, dispatchDrawStates, viewShot]);
+    return null;
+  }, [viewShot]);
 
   const cancelLastAction = useCallback(() => {
     itemIsSelected!.value = false;
@@ -62,10 +64,13 @@ const useDrawHook = () => {
     onColorStrokeChange,
     itemIsSelected: itemIsSelected!,
     cancelLastAction,
-    takeSnapshot: takeSnapshot!,
+    captureSnapshot: captureSnapshot!,
     viewShot: viewShot!,
     deleteSelectedItem,
     doubleArrowTextInput,
+    snapShotRequested,
+    doSnapshot,
+    setSnapShotRequested,
   };
 };
 

package/src/components/DrawWithOptions/index.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import {
   Pressable,
   View,
@@ -76,7 +76,7 @@ type DrawWithOptionsProps = {
   linearGradient: React.ComponentType<{ colors: any[] } & ViewProps>;
   image?: ImageRequireSource | ImageURISource;
   close?: () => void;
-  takeSnapshot?: (snap: Promise<string | undefined>) => void;
+  actionWithSnapShotUri?: (uri: string) => Promise<void>;
   backgroundColor?: string;
 };
 
@@ -84,16 +84,16 @@ function DrawWithOptionsCore({
   linearGradient,
   image,
   close,
-  takeSnapshot,
   backgroundColor,
+  actionWithSnapShotUri,
 }: DrawWithOptionsProps) {
   const {
     itemIsSelected,
     cancelLastAction,
-    takeSnapshot: takeSnapshotAction,
     deleteSelectedItem,
     dispatchDrawStates,
     drawState,
+    doSnapshot,
   } = useDrawHook();
 
   const [showToolbar, setShowToolbar] = useState(true);
@@ -121,11 +121,6 @@ function DrawWithOptionsCore({
     };
   }, []);
 
-  const takeSnapshotAndGetUri = useCallback(async () => {
-    if (takeSnapshot) {
-      takeSnapshot(takeSnapshotAction());
-    }
-  }, [takeSnapshot, takeSnapshotAction]);
   return (
     <View style={styles.container}>
       <View style={styles.toolbar}>
@@ -266,7 +261,7 @@ function DrawWithOptionsCore({
         </View>
 
         <View style={styles.actionButton}>
-          <Pressable onPress={takeSnapshotAndGetUri}>
+          <Pressable onPress={doSnapshot}>
             <SendSvg height={20} width={20} fill="#ffffff" />
           </Pressable>
         </View>
@@ -277,7 +272,11 @@ function DrawWithOptionsCore({
           flex: 1,
         }}
       >
-        <DrawCore image={image} backgroundColor={backgroundColor} />
+        <DrawCore
+          image={image}
+          backgroundColor={backgroundColor}
+          actionWithSnapShotUri={actionWithSnapShotUri}
+        />
       </View>
 
       <Sliders linearGradient={linearGradient} />

package/src/types.d.ts

@@ -1,5 +1,3 @@
-import React from 'react';
-import { View } from 'react-native';
 import {
   ForeignObjectProps,
   EllipseProps,
@@ -33,12 +31,16 @@ export type DrawItem = (
 
 export type DrawItemType = DrawItem['type'];
 
+export type DrawCoreProps = {
+  takeSnapshotAction: () => void;
+};
+/*
 export type DrawCoreProps = {
   drawingContainer: React.Ref<View>;
   deleteSelectedItem: () => void;
   cancelLastAction: () => void;
   takeSnapshot: () => Promise<string | undefined>;
-};
+};*/
 
 export type DrawState = {
   doneItems: DrawItem[];