@archireport/react-native-svg-draw 2.2.1 → 2.3.1

package/src/components/DrawCore/index.tsx

@@ -8,17 +8,14 @@ import {
   Image,
   ImageRequireSource,
   ImageURISource,
-  InputAccessoryView,
-  Platform,
+  KeyboardAvoidingView,
 } from 'react-native';
 import Animated, {
   runOnJS,
   useAnimatedGestureHandler,
   useAnimatedKeyboard,
   useAnimatedReaction,
-  useAnimatedStyle,
   useSharedValue,
-  withTiming,
 } from 'react-native-reanimated';
 import {
   PanGestureHandler,
@@ -48,6 +45,9 @@ const styles = StyleSheet.create({
     fontSize: 16,
     color: 'white',
     width: '100%',
+    opacity: 0,
+    height: 20,
+    maxWidth: 20,
   },
 });
 
@@ -90,8 +90,6 @@ const pDistance = (
   return Math.sqrt(dx * dx + dy * dy);
 };
 
-const AnimatedTextInput = Animated.createAnimatedComponent(TextInput);
-
 const DEFAULT_TEXT = '';
 
 const THRESHOLD = 20;
@@ -165,6 +163,19 @@ const drawNewItem = (
         color: style.color.value,
       };
       break;
+    case 'doubleArrows':
+      currentItem.value = {
+        type: mode.value,
+        data: {
+          x1: position.x,
+          y1: position.y,
+          x2: position.x,
+          y2: position.y,
+        },
+        strokeWidth: style.strokeWidth.value,
+        color: style.color.value,
+      };
+      break;
     case 'text':
       currentItem.value = {
         type: mode.value,
@@ -227,6 +238,7 @@ const DrawCore = ({
     currentItem,
     itemIsSelected,
     viewShot,
+    doubleArrowTextInput,
   } = useDrawHook();
 
   const onCancelChangeWrapper = (arg: boolean) => {
@@ -282,14 +294,22 @@ const DrawCore = ({
     itemIsSelected.value = false;
   }, [drawState.drawingMode, mode, currentItem, addDoneItem, itemIsSelected]);
 
-  const showTextInput = useSharedValue(false);
+  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');
       showTextInput.value = true;
       textFocus();
       currentItem.value = {
@@ -310,9 +330,10 @@ const DrawCore = ({
       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);
       initialItem.value = currentItem.value;
       switch (currentItem.value?.type) {
         case 'ellipse':
@@ -427,6 +448,7 @@ const DrawCore = ({
 
           break;
         case 'doubleHead':
+        case 'doubleArrows':
         case 'singleHead':
           const x1 =
             typeof currentItem.value.data.x1 === 'string'
@@ -489,7 +511,8 @@ 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 &&
@@ -515,9 +538,26 @@ const DrawCore = ({
               (heightText < 0 && startY < yText && startY > yText + heightText))
           ) {
             ctx.zone = 'CENTER';
+            console.log('on active center');
           } else {
             ctx.zone = 'OUT';
+            console.log('on active out');
             initialItem.value = null;
+
+            ctx.newlyCreated = true;
+            runOnJS(setTextVal)('');
+            drawNewItem(
+              mode,
+              currentItem,
+              addDoneItem,
+              { x: startX, y: startY },
+              { textBaseHeight, strokeWidth, color }
+            );
+
+            itemIsSelected!.value = true;
+            onCancelChangeWrapper && runOnJS(onCancelChangeWrapper)(true);
+
+            runOnJS(textFocus)();
           }
 
           break;
@@ -540,6 +580,26 @@ const DrawCore = ({
         default:
           ctx.zone = 'OUT';
           initialItem.value = null;
+          if (drawState.drawingMode === 'text') {
+            /* NEW GEOFF */
+            console.log('on active out');
+            ctx.newlyCreated = true;
+
+            runOnJS(setTextVal)('');
+
+            drawNewItem(
+              mode,
+              currentItem,
+              addDoneItem,
+              { x: startX, y: startY },
+              { textBaseHeight, strokeWidth, color }
+            );
+
+            itemIsSelected!.value = true;
+            onCancelChangeWrapper && runOnJS(onCancelChangeWrapper)(true);
+
+            runOnJS(textFocus)();
+          }
           break;
       }
     },
@@ -548,11 +608,13 @@ const DrawCore = ({
       ctx
     ) => {
       const { startX, startY, zone, newlyCreated } = ctx;
-      if (zone === 'OUT' && newlyCreated === false) {
+      if (zone === 'OUT' && newlyCreated === false && mode.value !== 'text') {
+        console.log('on active out');
         ctx.newlyCreated = true;
+        /*
         if (mode.value === 'text') {
           runOnJS(setTextVal)('');
-        }
+        }*/
         drawNewItem(
           mode,
           currentItem,
@@ -800,6 +862,7 @@ const DrawCore = ({
           break;
         case 'singleHead':
         case 'doubleHead':
+        case 'doubleArrows':
           if (initialItem.value?.type === currentItem.value.type) {
             const x1 =
               typeof initialItem.value?.data.x1 === 'string'
@@ -827,6 +890,10 @@ const DrawCore = ({
                   type: currentItem.value.type,
                   strokeWidth: currentItem.value.strokeWidth,
                   color: currentItem.value.color,
+                  text:
+                    currentItem.value.type === 'doubleArrows'
+                      ? currentItem.value.text ?? ''
+                      : '',
                   data: {
                     x1: x1 + translationX,
                     y1: y1 + translationY,
@@ -840,6 +907,10 @@ const DrawCore = ({
                   type: currentItem.value.type,
                   strokeWidth: currentItem.value.strokeWidth,
                   color: currentItem.value.color,
+                  text:
+                    currentItem.value.type === 'doubleArrows'
+                      ? currentItem.value.text ?? ''
+                      : '',
                   data: {
                     x1: x1,
                     y1: y1,
@@ -853,6 +924,10 @@ const DrawCore = ({
                   type: currentItem.value.type,
                   strokeWidth: currentItem.value.strokeWidth,
                   color: currentItem.value.color,
+                  text:
+                    currentItem.value.type === 'doubleArrows'
+                      ? currentItem.value.text ?? ''
+                      : '',
                   data: {
                     x1: x1 + translationX,
                     y1: y1 + translationY,
@@ -867,6 +942,10 @@ const DrawCore = ({
               type: currentItem.value.type,
               strokeWidth: currentItem.value.strokeWidth,
               color: currentItem.value.color,
+              text:
+                currentItem.value.type === 'doubleArrows'
+                  ? currentItem.value.text ?? ''
+                  : '',
               data: {
                 x1: startX,
                 y1: startY,
@@ -877,6 +956,7 @@ 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'
@@ -956,6 +1036,9 @@ const DrawCore = ({
       }
     },
     onEnd: (_event) => {
+      if (currentItem.value?.type === 'doubleArrows') {
+        runOnJS(textFocusState)();
+      }
       if (currentItem.value?.type === 'text') {
         runOnJS(textFocus)();
 
@@ -981,6 +1064,7 @@ 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;
       }
@@ -1011,45 +1095,17 @@ const DrawCore = ({
     }) => {
       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 'doubleArrows':
         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;
-
         case 'pen':
           currentItem.value = {
             type: currentItem.value.type,
             data: currentItem.value.data,
             strokeWidth: sw,
             color: c,
-          };
+          } as DrawItem;
           break;
         case 'text':
           currentItem.value = {
@@ -1067,12 +1123,14 @@ const DrawCore = ({
 
   const onPressItem = useCallback(
     (item: DrawItem, index: number) => () => {
+      console.log('onPressItem');
       itemIsSelected.value = true;
 
       const previousItem = currentItem.value;
 
       strokeWidth.value = item.strokeWidth;
       color.value = item.color;
+      console.log('item', item);
       currentItem.value = item;
 
       deleteDoneItem(index);
@@ -1083,6 +1141,10 @@ const DrawCore = ({
 
       if (item.type === 'text') {
         setTextVal(item.text ?? '');
+        textInputRef.current?.focus();
+      } else if (item.type === 'doubleArrows') {
+        //setTextVal(item.text ?? '');
+        //textInputRef.current?.focus();
       } else {
         textInputRef.current?.blur();
       }
@@ -1096,6 +1158,39 @@ const DrawCore = ({
       addDoneItem,
     ]
   );
+  /*
+  const onPressItemText = useCallback(
+    (item: DrawItem, index: number) => () => {
+      itemIsSelected.value = true;
+
+      const previousItem = currentItem.value;
+
+      strokeWidth.value = item.strokeWidth;
+      color.value = item.color;
+      currentItem.value = item;
+
+      deleteDoneItem(index);
+
+      if (previousItem) {
+        addDoneItem(previousItem);
+      }
+
+      if (item.type === 'text') {
+        setTextVal(item.text ?? '');
+        
+      } else {
+        textInputRef.current?.blur();
+      }
+    },
+    [
+      itemIsSelected,
+      currentItem,
+      strokeWidth,
+      color,
+      deleteDoneItem,
+      addDoneItem,
+    ]
+  );*/
 
   const onTextHeightChange = useCallback(
     (height: number) => {
@@ -1149,26 +1244,36 @@ const DrawCore = ({
   // do not remove keyboard will appear over the drawing frame and not shift it
   useAnimatedKeyboard();
 
-  const textInputContainerStyle = useAnimatedStyle(() => {
-    return {
-      position: 'absolute',
-      top: 0,
-      height: 50,
-      width: '100%',
-      display: 'flex',
-      opacity: showTextInput.value ? withTiming(1) : withTiming(0),
-    };
-  }, [showTextInput.value]);
-
-  const textInputStyle = useAnimatedStyle(() => {
-    return {
-      color: 'white',
-      height: 20,
-      display: showTextInput.value ? 'flex' : 'none',
-      opacity: showTextInput.value ? withTiming(1) : withTiming(0),
-    };
-  }, [showTextInput.value]);
+  /*
+  const onEndEditingTextInput = useCallback(() => {
+    console.log('onEndEditingTextInput');
+    setShowTextInputState(false);
+    if (currentItem.value && currentItem.value.type === 'doubleArrows') {
+      console.log(currentItem.value.text);
+      addScreenStates(currentItem.value);
+    }
+  }, [currentItem, addScreenStates]);
+
+  const onChangeText = useCallback(
+    (value: string) => {
+      if (
+        value &&
+        currentItem.value &&
+        currentItem.value.type === 'doubleArrows'
+      ) {
+        console.log('******************');
+        console.log(value);
+        console.log(currentItem.value);
 
+        currentItem.value = {
+          ...currentItem.value,
+          text: value,
+        };
+      }
+    },
+    [currentItem]
+  );
+  */
   return (
     <View style={styles.container}>
       <View
@@ -1183,52 +1288,63 @@ const DrawCore = ({
           });
         }}
       >
-        <PanGestureHandler onGestureEvent={onGestureEvent}>
-          <Animated.View style={imageSize || drawRegion}>
-            <View ref={drawContainer}>
-              {image ? (
-                imageSize && originalImageSize ? (
+        <KeyboardAvoidingView behavior="position" keyboardVerticalOffset={70}>
+          <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={drawState.doneItems}
+                          onPressItem={onPressItem}
+                          onTextHeightChange={onTextHeightChange}
+                        />
+                      </ImageBackground>
+                    </ViewShot>
+                  ) : null
+                ) : drawRegion ? (
                   <ViewShot
                     ref={viewShot}
                     options={{
                       format: 'jpg',
                       quality: 1,
+                      ...drawRegion,
                     }}
-                    style={imageSize}
+                    style={drawRegion}
                   >
-                    <ImageBackground source={image} style={styles.bgImage}>
-                      <DrawPad
-                        currentItem={currentItem}
-                        doneItems={drawState.doneItems}
-                        onPressItem={onPressItem}
-                        onTextHeightChange={onTextHeightChange}
-                      />
-                    </ImageBackground>
+                    <DrawPad
+                      addBackground
+                      currentItem={currentItem}
+                      doneItems={drawState.doneItems}
+                      onPressItem={onPressItem}
+                      onTextHeightChange={onTextHeightChange}
+                    />
                   </ViewShot>
-                ) : null
-              ) : drawRegion ? (
-                <ViewShot
-                  ref={viewShot}
-                  options={{
-                    format: 'jpg',
-                    quality: 1,
-                    ...drawRegion,
-                  }}
-                  style={drawRegion}
-                >
-                  <DrawPad
-                    addBackground
-                    currentItem={currentItem}
-                    doneItems={drawState.doneItems}
-                    onPressItem={onPressItem}
-                    onTextHeightChange={onTextHeightChange}
-                  />
-                </ViewShot>
-              ) : null}
-            </View>
-          </Animated.View>
-        </PanGestureHandler>
-        {Platform.OS === 'ios' ? (
+                ) : null}
+              </View>
+            </Animated.View>
+          </PanGestureHandler>
+
+          <TextInput
+            ref={textInputRef}
+            style={styles.textInput}
+            onEndEditing={textInputRef.current?.clear}
+            onChangeText={setTextVal}
+            value={textVal}
+            autoCorrect={false}
+          />
+        </KeyboardAvoidingView>
+        {/*Platform.OS === 'ios' ? (
           <InputAccessoryView>
             <AnimatedTextInput
               ref={textInputRef}
@@ -1238,6 +1354,9 @@ const DrawCore = ({
               value={textVal}
               autoCorrect={false}
             />
+            <View
+              style={{ height: 10, width: '100%', backgroundColor: 'green' }}
+            ></View>
           </InputAccessoryView>
         ) : (
           <Animated.View style={textInputContainerStyle}>
@@ -1252,7 +1371,7 @@ const DrawCore = ({
               />
             )}
           </Animated.View>
-        )}
+        )*/}
       </View>
     </View>
   );

package/src/components/DrawCore/useDrawHook.tsx

@@ -10,6 +10,7 @@ const useDrawHook = () => {
     currentItem,
     itemIsSelected,
     viewShot,
+    doubleArrowTextInput,
   } = useContext(DrawContext);
 
   const takeSnapshot = useCallback(async () => {
@@ -64,6 +65,7 @@ const useDrawHook = () => {
     takeSnapshot: takeSnapshot!,
     viewShot: viewShot!,
     deleteSelectedItem,
+    doubleArrowTextInput,
   };
 };
 

package/src/components/DrawWithOptions/index.tsx

@@ -106,6 +106,7 @@ function DrawWithOptionsCore({
     const sudDidShow = Keyboard.addListener(
       'keyboardDidShow',
       (event: { endCoordinates: { height: number } }) => {
+        console.log('keyboardDidShow dwo');
         // avoid events triggered by InputAccessoryView
         if (event.endCoordinates.height > 100) {
           setShowToolbar(false);
@@ -244,6 +245,23 @@ function DrawWithOptionsCore({
                 opacity={drawState.drawingMode === 'text' ? 1 : 0.5}
               />
             </Pressable>
+
+            <Pressable
+              style={styles.option}
+              onPress={() => {
+                dispatchDrawStates({
+                  type: 'SET_DRAWING_MODE',
+                  drawingMode: 'doubleArrows',
+                });
+              }}
+            >
+              <DoubleHeadSvg
+                height={20}
+                width={20}
+                fill="#ffffff"
+                opacity={drawState.drawingMode === 'doubleArrows' ? 1 : 0.5}
+              />
+            </Pressable>
           </View>
         </View>
 

package/src/types.d.ts

@@ -18,6 +18,13 @@ export type Size = { width: number; height: number };
 export type DrawItem = (
   | { type: 'singleHead'; data: LineProps }
   | { type: 'doubleHead'; data: LineProps }
+  | {
+      type: 'doubleArrows';
+      data: LineProps;
+      text?: string;
+      strokeWidth: number;
+      color?: string;
+    }
   | { type: 'rectangle'; data: RectProps }
   | { type: 'ellipse'; data: EllipseProps }
   | { type: 'text'; data: ForeignObjectProps; text?: string }