@archireport/react-native-svg-draw 2.2.0 → 2.3.0

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

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { StyleSheet, TextInput, View, Keyboard, ImageBackground, Image, InputAccessoryView, Platform } from 'react-native';
-import Animated, { runOnJS, useAnimatedGestureHandler, useAnimatedKeyboard, useAnimatedReaction, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
+import { StyleSheet, TextInput, View, Keyboard, ImageBackground, Image, KeyboardAvoidingView } from 'react-native';
+import Animated, { runOnJS, useAnimatedGestureHandler, useAnimatedKeyboard, useAnimatedReaction, useSharedValue } from 'react-native-reanimated';
 import { PanGestureHandler } from 'react-native-gesture-handler';
 import DrawPad from './DrawPad';
 import ViewShot from 'react-native-view-shot';
@@ -10,9 +10,10 @@ const styles = StyleSheet.create({
     flex: 1
   },
   drawZone: {
-    flex: 1,
     alignContent: 'center',
-    alignItems: 'center'
+    alignItems: 'center',
+    width: '100%',
+    height: '100%'
   },
   bgImage: {
     width: '100%',
@@ -24,7 +25,10 @@ const styles = StyleSheet.create({
     paddingHorizontal: 24,
     fontSize: 16,
     color: 'white',
-    width: '100%'
+    width: '100%',
+    opacity: 0,
+    height: 20,
+    maxWidth: 20
   }
 });
 const pDistance = (point, line) => {
@@ -66,7 +70,6 @@ const pDistance = (point, line) => {
   var dy = y - yy;
   return Math.sqrt(dx * dx + dy * dy);
 };
-const AnimatedTextInput = Animated.createAnimatedComponent(TextInput);
 const DEFAULT_TEXT = '';
 const THRESHOLD = 20;
 const drawNewItem = (mode, currentItem, addDoneItem, position, style) => {
@@ -116,6 +119,19 @@ const drawNewItem = (mode, currentItem, addDoneItem, position, style) => {
         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,
@@ -159,7 +175,7 @@ const onTextHeightUpdate = (currentItem, textBaseHeight, height) => {
   }
 };
 const DrawCore = _ref => {
-  var _textInputRef$current3, _currentItem$value7, _textInputRef$current4;
+  var _textInputRef$current4;
   let {
     image,
     backgroundColor
@@ -171,7 +187,8 @@ const DrawCore = _ref => {
     color,
     currentItem,
     itemIsSelected,
-    viewShot
+    viewShot,
+    doubleArrowTextInput
   } = useDrawHook();
   const onCancelChangeWrapper = arg => {
     dispatchDrawStates({
@@ -213,14 +230,23 @@ const DrawCore = _ref => {
     currentItem.value = null;
     itemIsSelected.value = false;
   }, [drawState.drawingMode, mode, currentItem, addDoneItem, itemIsSelected]);
-  const showTextInput = useSharedValue(false);
+  const showTextInput = useSharedValue(false); //TODO: remove
+
+  const textFocusState = useCallback(() => {
+    var _doubleArrowTextInput;
+    //setShowTextInputState(true);
+    console.log('textFocusState');
+    doubleArrowTextInput === null || doubleArrowTextInput === void 0 ? void 0 : (_doubleArrowTextInput = doubleArrowTextInput.current) === null || _doubleArrowTextInput === void 0 ? void 0 : _doubleArrowTextInput.focus();
+  }, [doubleArrowTextInput]);
   const textFocus = useCallback(() => {
     var _textInputRef$current;
+    console.log('textFocus');
     (_textInputRef$current = textInputRef.current) === null || _textInputRef$current === void 0 ? void 0 : _textInputRef$current.focus();
   }, []);
   useEffect(() => {
     var _currentItem$value2;
     if (((_currentItem$value2 = currentItem.value) === null || _currentItem$value2 === void 0 ? void 0 : _currentItem$value2.type) === 'text') {
+      console.log('use effect text');
       showTextInput.value = true;
       textFocus();
       currentItem.value = {
@@ -234,7 +260,7 @@ const DrawCore = _ref => {
   }, [currentItem, showTextInput, textFocus, textVal]);
   const onGestureEvent = useAnimatedGestureHandler({
     onStart: (_ref2, ctx) => {
-      var _currentItem$value3;
+      var _currentItem$value3, _currentItem$value4;
       let {
         x: startX,
         y: startY
@@ -242,11 +268,12 @@ const DrawCore = _ref => {
       ctx.startX = startX;
       ctx.startY = startY;
       ctx.newlyCreated = false;
-
+      console.log('**********************************');
+      console.log('onGestureEvent');
       //panPosition.value = withTiming(RIGHT_PANE_WIDTH);
-
+      console.log('onStart', (_currentItem$value3 = currentItem.value) === null || _currentItem$value3 === void 0 ? void 0 : _currentItem$value3.type);
       initialItem.value = currentItem.value;
-      switch ((_currentItem$value3 = currentItem.value) === null || _currentItem$value3 === void 0 ? void 0 : _currentItem$value3.type) {
+      switch ((_currentItem$value4 = currentItem.value) === null || _currentItem$value4 === void 0 ? void 0 : _currentItem$value4.type) {
         case 'ellipse':
           const cx = typeof currentItem.value.data.cx === 'string' ? parseFloat(currentItem.value.data.cx) : currentItem.value.data.cx || 0;
           const cy = typeof currentItem.value.data.cy === 'string' ? parseFloat(currentItem.value.data.cy) : currentItem.value.data.cy || 0;
@@ -292,6 +319,7 @@ const DrawCore = _ref => {
           }
           break;
         case 'doubleHead':
+        case 'doubleArrows':
         case 'singleHead':
           const x1 = typeof currentItem.value.data.x1 === 'string' ? parseFloat(currentItem.value.data.x1) : currentItem.value.data.x1 || 0;
           const y1 = typeof currentItem.value.data.y1 === 'string' ? parseFloat(currentItem.value.data.y1) : currentItem.value.data.y1 || 0;
@@ -321,15 +349,32 @@ const DrawCore = _ref => {
           const yText = typeof currentItem.value.data.y === 'string' ? parseFloat(currentItem.value.data.y) : currentItem.value.data.y || 0;
           const widthText = typeof currentItem.value.data.width === 'string' ? parseFloat(currentItem.value.data.width) : currentItem.value.data.width || 0;
           const heightText = typeof currentItem.value.data.height === 'string' ? parseFloat(currentItem.value.data.height) : currentItem.value.data.height || 0;
+          console.log(heightText);
+          console.log(widthText);
           if (startX <= xText + THRESHOLD && startX >= xText - THRESHOLD && startY <= yText + heightText / 2 + THRESHOLD && startY >= yText + heightText / 2 - THRESHOLD) {
             ctx.zone = 'LEFT';
           } else if (startX <= xText + widthText + THRESHOLD && startX >= xText + widthText - THRESHOLD && startY <= yText + heightText / 2 + THRESHOLD && startY >= yText + heightText / 2 - THRESHOLD) {
             ctx.zone = 'RIGHT';
           } else if ((widthText > 0 && startX > xText && startX < xText + widthText || widthText < 0 && startX < xText && startX > xText + widthText) && (heightText > 0 && startY > yText && startY < yText + heightText || heightText < 0 && startY < yText && startY > yText + heightText)) {
             ctx.zone = 'CENTER';
+            console.log('on active center');
           } else {
             ctx.zone = 'OUT';
+            console.log('on active out');
             initialItem.value = null;
+            ctx.newlyCreated = true;
+            runOnJS(setTextVal)('');
+            drawNewItem(mode, currentItem, addDoneItem, {
+              x: startX,
+              y: startY
+            }, {
+              textBaseHeight,
+              strokeWidth,
+              color
+            });
+            itemIsSelected.value = true;
+            onCancelChangeWrapper && runOnJS(onCancelChangeWrapper)(true);
+            runOnJS(textFocus)();
           }
           break;
         case 'pen':
@@ -343,11 +388,28 @@ const DrawCore = _ref => {
         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;
       }
     },
     onActive: (_ref3, ctx) => {
-      var _currentItem$value4, _initialItem$value, _initialItem$value2, _initialItem$value4, _initialItem$value17, _initialItem$value30;
+      var _currentItem$value5, _initialItem$value, _initialItem$value2, _initialItem$value4, _initialItem$value17, _initialItem$value30;
       let {
         x: currentX,
         y: currentY,
@@ -360,11 +422,13 @@ const DrawCore = _ref => {
         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, addDoneItem, {
           x: startX,
           y: startY
@@ -376,7 +440,7 @@ const DrawCore = _ref => {
         itemIsSelected.value = true;
         onCancelChangeWrapper && runOnJS(onCancelChangeWrapper)(true);
       }
-      switch ((_currentItem$value4 = currentItem.value) === null || _currentItem$value4 === void 0 ? void 0 : _currentItem$value4.type) {
+      switch ((_currentItem$value5 = currentItem.value) === null || _currentItem$value5 === void 0 ? void 0 : _currentItem$value5.type) {
         case 'pen':
           if (((_initialItem$value = initialItem.value) === null || _initialItem$value === void 0 ? void 0 : _initialItem$value.type) === currentItem.value.type && zone === 'CENTER') {
             currentItem.value = {
@@ -578,6 +642,7 @@ const DrawCore = _ref => {
           break;
         case 'singleHead':
         case 'doubleHead':
+        case 'doubleArrows':
           if (((_initialItem$value17 = initialItem.value) === null || _initialItem$value17 === void 0 ? void 0 : _initialItem$value17.type) === currentItem.value.type) {
             var _initialItem$value18, _initialItem$value19, _initialItem$value20, _initialItem$value21, _initialItem$value22, _initialItem$value23, _initialItem$value24, _initialItem$value25, _initialItem$value26, _initialItem$value27, _initialItem$value28, _initialItem$value29;
             const x1 = typeof ((_initialItem$value18 = initialItem.value) === null || _initialItem$value18 === void 0 ? void 0 : _initialItem$value18.data.x1) === 'string' ? parseFloat((_initialItem$value19 = initialItem.value) === null || _initialItem$value19 === void 0 ? void 0 : _initialItem$value19.data.x1) : ((_initialItem$value20 = initialItem.value) === null || _initialItem$value20 === void 0 ? void 0 : _initialItem$value20.data.x1) || 0;
@@ -590,6 +655,7 @@ const DrawCore = _ref => {
                   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,
@@ -603,6 +669,7 @@ const DrawCore = _ref => {
                   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,
@@ -616,6 +683,7 @@ const DrawCore = _ref => {
                   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,
@@ -630,6 +698,7 @@ const DrawCore = _ref => {
               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,
@@ -640,6 +709,7 @@ const DrawCore = _ref => {
           }
           break;
         case 'text':
+          console.log('on active text');
           if (((_initialItem$value30 = initialItem.value) === null || _initialItem$value30 === void 0 ? void 0 : _initialItem$value30.type) === currentItem.value.type) {
             var _initialItem$value31, _initialItem$value32, _initialItem$value33, _initialItem$value34, _initialItem$value35, _initialItem$value36, _initialItem$value37, _initialItem$value38, _initialItem$value39, _initialItem$value40, _initialItem$value41, _initialItem$value42;
             const xText = typeof ((_initialItem$value31 = initialItem.value) === null || _initialItem$value31 === void 0 ? void 0 : _initialItem$value31.data.x) === 'string' ? parseFloat((_initialItem$value32 = initialItem.value) === null || _initialItem$value32 === void 0 ? void 0 : _initialItem$value32.data.x) : ((_initialItem$value33 = initialItem.value) === null || _initialItem$value33 === void 0 ? void 0 : _initialItem$value33.data.x) || 0;
@@ -707,8 +777,11 @@ const DrawCore = _ref => {
       }
     },
     onEnd: _event => {
-      var _currentItem$value5;
-      if (((_currentItem$value5 = currentItem.value) === null || _currentItem$value5 === void 0 ? void 0 : _currentItem$value5.type) === 'text') {
+      var _currentItem$value6, _currentItem$value7;
+      if (((_currentItem$value6 = currentItem.value) === null || _currentItem$value6 === void 0 ? void 0 : _currentItem$value6.type) === 'doubleArrows') {
+        runOnJS(textFocusState)();
+      }
+      if (((_currentItem$value7 = currentItem.value) === null || _currentItem$value7 === void 0 ? void 0 : _currentItem$value7.type) === 'text') {
         runOnJS(textFocus)();
         currentItem.value = {
           type: currentItem.value.type,
@@ -727,6 +800,7 @@ const DrawCore = _ref => {
     });
     const sudDidShow = Keyboard.addListener('keyboardDidShow', event => {
       // avoid events triggered by InputAccessoryView
+      console.log('keyboardDidShow dc');
       if (event.endCoordinates.height > 100) {
         showTextInput.value = true;
       }
@@ -745,44 +819,17 @@ const DrawCore = _ref => {
       color: color === null || color === void 0 ? void 0 : color.value
     };
   }, _ref4 => {
-    var _currentItem$value6;
+    var _currentItem$value8;
     let {
       strokeWidth: sw,
       color: c
     } = _ref4;
-    switch ((_currentItem$value6 = currentItem.value) === null || _currentItem$value6 === void 0 ? void 0 : _currentItem$value6.type) {
+    switch ((_currentItem$value8 = currentItem.value) === null || _currentItem$value8 === void 0 ? void 0 : _currentItem$value8.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,
@@ -803,22 +850,58 @@ const DrawCore = _ref => {
     }
   }, [strokeWidth.value, color === null || color === void 0 ? void 0 : color.value]);
   const onPressItem = useCallback((item, index) => () => {
+    console.log('onPressItem');
     itemIsSelected.value = true;
     const previousItem = currentItem.value;
     strokeWidth.value = item.strokeWidth;
     color.value = item.color;
+    console.log('item', item);
     currentItem.value = item;
     deleteDoneItem(index);
     if (previousItem) {
       addDoneItem(previousItem);
     }
     if (item.type === 'text') {
+      var _textInputRef$current2;
       setTextVal(item.text ?? '');
+      (_textInputRef$current2 = textInputRef.current) === null || _textInputRef$current2 === void 0 ? void 0 : _textInputRef$current2.focus();
+    } else if (item.type === 'doubleArrows') {
+      //setTextVal(item.text ?? '');
+      //textInputRef.current?.focus();
     } else {
-      var _textInputRef$current2;
-      (_textInputRef$current2 = textInputRef.current) === null || _textInputRef$current2 === void 0 ? void 0 : _textInputRef$current2.blur();
+      var _textInputRef$current3;
+      (_textInputRef$current3 = textInputRef.current) === null || _textInputRef$current3 === void 0 ? void 0 : _textInputRef$current3.blur();
     }
   }, [itemIsSelected, currentItem, strokeWidth, color, deleteDoneItem, 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 => {
     onTextHeightUpdate(currentItem, textBaseHeight, height);
   }, [currentItem, textBaseHeight]);
@@ -857,40 +940,38 @@ const DrawCore = _ref => {
 
   // do not remove keyboard will appear over the drawing frame and not shift it
   useAnimatedKeyboard();
-  const textInputContainerStyle = useAnimatedStyle(() => {
-    return {
-      height: 'auto',
-      backgroundColor: 'red',
-      display: 'flex',
-      opacity: showTextInput.value ? withTiming(1) : withTiming(0)
-    };
-  }, [showTextInput.value]);
-  const textInputStyle = useAnimatedStyle(() => {
-    return {
-      backgroundColor: 'blue',
-      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 /*#__PURE__*/React.createElement(View, {
     style: styles.container
-  }, Platform.OS === 'ios' ? /*#__PURE__*/React.createElement(InputAccessoryView, null, /*#__PURE__*/React.createElement(AnimatedTextInput, {
-    ref: textInputRef,
-    style: [styles.textInput, textInputStyle],
-    onEndEditing: (_textInputRef$current3 = textInputRef.current) === null || _textInputRef$current3 === void 0 ? void 0 : _textInputRef$current3.clear,
-    onChangeText: setTextVal,
-    value: textVal,
-    autoCorrect: false
-  })) : /*#__PURE__*/React.createElement(Animated.View, {
-    style: textInputContainerStyle
-  }, ((_currentItem$value7 = currentItem.value) === null || _currentItem$value7 === void 0 ? void 0 : _currentItem$value7.type) === 'text' && /*#__PURE__*/React.createElement(TextInput, {
-    ref: textInputRef,
-    style: styles.textInput,
-    onEndEditing: (_textInputRef$current4 = textInputRef.current) === null || _textInputRef$current4 === void 0 ? void 0 : _textInputRef$current4.clear,
-    onChangeText: setTextVal,
-    value: textVal,
-    autoCorrect: false
-  })), /*#__PURE__*/React.createElement(View, {
+  }, /*#__PURE__*/React.createElement(View, {
     style: [styles.drawZone, {
       backgroundColor: backgroundColor ?? 'none'
     }],
@@ -900,6 +981,9 @@ const DrawCore = _ref => {
         width: event.nativeEvent.layout.width
       });
     }
+  }, /*#__PURE__*/React.createElement(KeyboardAvoidingView, {
+    behavior: "position",
+    keyboardVerticalOffset: 70
   }, /*#__PURE__*/React.createElement(PanGestureHandler, {
     onGestureEvent: onGestureEvent
   }, /*#__PURE__*/React.createElement(Animated.View, {
@@ -930,11 +1014,19 @@ const DrawCore = _ref => {
     },
     style: drawRegion
   }, /*#__PURE__*/React.createElement(DrawPad, {
+    addBackground: true,
     currentItem: currentItem,
     doneItems: drawState.doneItems,
     onPressItem: onPressItem,
     onTextHeightChange: onTextHeightChange
-  })) : null)))));
+  })) : null))), /*#__PURE__*/React.createElement(TextInput, {
+    ref: textInputRef,
+    style: styles.textInput,
+    onEndEditing: (_textInputRef$current4 = textInputRef.current) === null || _textInputRef$current4 === void 0 ? void 0 : _textInputRef$current4.clear,
+    onChangeText: setTextVal,
+    value: textVal,
+    autoCorrect: false
+  }))));
 };
 export default DrawCore;
 //# sourceMappingURL=index.js.map