@archireport/react-native-svg-draw 1.0.2 → 1.2.0

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

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useImperativeHandle, useReducer, useRef, useState } from 'react';
 import { StyleSheet, TextInput, View, Keyboard, ImageBackground, Image, Platform, InputAccessoryView } from 'react-native';
 import Animated, { runOnJS, useAnimatedGestureHandler, useAnimatedReaction, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
 import { PanGestureHandler } from 'react-native-gesture-handler';
@@ -54,7 +54,7 @@ const styles = StyleSheet.create({
   }
 });
 
-function pDistance(point, line) {
+const pDistance = (point, line) => {
   'worklet';
 
   const {
@@ -96,17 +96,17 @@ function pDistance(point, line) {
   var dx = x - xx;
   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, updateDoneItems, position, style) => {
+const drawNewItem = (mode, currentItem, addDoneItem, position, style) => {
   'worklet';
 
   if (currentItem.value) {
-    runOnJS(updateDoneItems)(currentItem.value);
+    runOnJS(addDoneItem)(currentItem.value);
   }
 
   switch (mode.value) {
@@ -198,14 +198,67 @@ const onTextHeightUpdate = (currentItem, textBaseHeight, height) => {
   }
 };
 
-const DrawCore = /*#__PURE__*/React.forwardRef(({
-  drawingMode,
-  image,
-  linearGradient,
-  onSelectionChange
-}, ref) => {
+const reducerDrawStates = (drawStates, 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) {
+          var _action$onCancelChang;
+
+          (_action$onCancelChang = action.onCancelChange) === null || _action$onCancelChang === void 0 ? void 0 : _action$onCancelChang.call(action, false);
+        }
+
+        return {
+          doneItems: drawStates.screenStates[len - 2],
+          screenStates: newScreenStates
+        };
+      } else {
+        return drawStates;
+      }
+
+  }
+};
+
+const DrawCore = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   var _textInputRef$current3, _textInputRef$current4;
 
+  let {
+    drawingMode,
+    image,
+    linearGradient,
+    onSelectionChange,
+    onCancelChange
+  } = _ref;
   const mode = useSharedValue('pen');
   const [drawRegion, setDrawRegion] = useState(null);
   const [originalImageSize, setOriginalImageSize] = useState(null);
@@ -215,42 +268,76 @@ const DrawCore = /*#__PURE__*/React.forwardRef(({
   const [textVal, setTextVal] = useState('');
   const currentItem = useSharedValue(null);
   const initialItem = useSharedValue(null);
-  const [doneItems, setDoneItems] = useState([]);
+  const [drawStates, dispatchDrawStates] = useReducer(reducerDrawStates, {
+    doneItems: [],
+    screenStates: [[]]
+  });
   const textBaseHeight = useSharedValue(null);
-  const updateDoneItems = useCallback(done => {
-    setDoneItems(previous => previous.concat(done));
+  const addDoneItem = useCallback(item => {
+    dispatchDrawStates({
+      type: 'ADD_DONE_ITEM',
+      item: item
+    });
+  }, []);
+  const deleteDoneItem = useCallback(indice => {
+    dispatchDrawStates({
+      type: 'DELETE_DONE_ITEM',
+      indice: indice
+    });
   }, []);
+  const addScreenStates = useCallback(item => {
+    dispatchDrawStates({
+      type: 'ADD_SCREEN_STATE',
+      currentItem: item
+    });
+  }, []);
+  const cancelAction = useCallback(() => {
+    dispatchDrawStates({
+      type: 'CANCEL',
+      onCancelChange: onCancelChange
+    });
+  }, [onCancelChange]);
   useImperativeHandle(ref, () => ({
     drawingContainer: drawContainer,
     deleteSelectedItem: () => {
       if (currentItem.value) {
         currentItem.value = null;
+        addScreenStates(null);
       }
 
       onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(false);
+      onCancelChange === null || onCancelChange === void 0 ? void 0 : onCancelChange(true);
+    },
+    cancelLastAction: () => {
+      onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(false);
+
+      if (currentItem.value) {
+        currentItem.value = null;
+      }
+
+      cancelAction();
     },
     takeSnapshot: async () => {
       var _viewShot$current, _viewShot$current$cap;
 
       if (currentItem.value) {
-        updateDoneItems(currentItem.value);
+        addDoneItem(currentItem.value);
         currentItem.value = null;
       }
 
       return (_viewShot$current = viewShot.current) === null || _viewShot$current === void 0 ? void 0 : (_viewShot$current$cap = _viewShot$current.capture) === null || _viewShot$current$cap === void 0 ? void 0 : _viewShot$current$cap.call(_viewShot$current);
     }
-  }), [currentItem, onSelectionChange, updateDoneItems]);
+  }), [currentItem, onSelectionChange, onCancelChange, addScreenStates, cancelAction, addDoneItem]);
   useEffect(() => {
     mode.value = drawingMode;
 
     if (currentItem.value) {
-      updateDoneItems(currentItem.value);
+      addDoneItem(currentItem.value);
     }
 
     currentItem.value = null;
     onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(false);
-  }, [drawingMode, mode, currentItem, updateDoneItems, onSelectionChange]);
-  const addNewItem = runOnJS(updateDoneItems);
+  }, [drawingMode, mode, currentItem, onSelectionChange, addDoneItem]);
   const strokeWidth = useSharedValue(2);
   const color = useSharedValue('hsl(0, 100%, 0%)');
   const panPosition = useSharedValue(0);
@@ -260,6 +347,11 @@ const DrawCore = /*#__PURE__*/React.forwardRef(({
 
     (_textInputRef$current = textInputRef.current) === null || _textInputRef$current === void 0 ? void 0 : _textInputRef$current.focus();
   }, []);
+  const onColorStrokeChange = useCallback(() => {
+    if (currentItem.value) {
+      addScreenStates(currentItem.value);
+    }
+  }, [addScreenStates, currentItem.value]);
   useEffect(() => {
     var _currentItem$value2;
 
@@ -274,14 +366,13 @@ const DrawCore = /*#__PURE__*/React.forwardRef(({
     }
   }, [currentItem, textVal]);
   const onGestureEvent = useAnimatedGestureHandler({
-    onStart: ({
-      x,
-      y
-    }, ctx) => {
+    onStart: (_ref2, ctx) => {
       var _currentItem$value3;
 
-      const startX = x;
-      const startY = y;
+      let {
+        x: startX,
+        y: startY
+      } = _ref2;
       ctx.startX = startX;
       ctx.startY = startY;
       ctx.newlyCreated = false;
@@ -402,14 +493,15 @@ const DrawCore = /*#__PURE__*/React.forwardRef(({
           break;
       }
     },
-    onActive: ({
-      x,
-      y,
-      translationX,
-      translationY
-    }, ctx) => {
+    onActive: (_ref3, ctx) => {
       var _currentItem$value4, _initialItem$value, _initialItem$value2, _initialItem$value4, _initialItem$value17, _initialItem$value30;
 
+      let {
+        x: currentX,
+        y: currentY,
+        translationX,
+        translationY
+      } = _ref3;
       const {
         startX,
         startY,
@@ -424,7 +516,7 @@ const DrawCore = /*#__PURE__*/React.forwardRef(({
           runOnJS(setTextVal)('');
         }
 
-        drawNewItem(mode, currentItem, addNewItem, {
+        drawNewItem(mode, currentItem, addDoneItem, {
           x: startX,
           y: startY
         }, {
@@ -433,6 +525,7 @@ const DrawCore = /*#__PURE__*/React.forwardRef(({
           color
         });
         onSelectionChange && runOnJS(onSelectionChange)(true);
+        onCancelChange && runOnJS(onCancelChange)(true);
       }
 
       switch ((_currentItem$value4 = currentItem.value) === null || _currentItem$value4 === void 0 ? void 0 : _currentItem$value4.type) {
@@ -453,8 +546,8 @@ const DrawCore = /*#__PURE__*/React.forwardRef(({
               strokeWidth: currentItem.value.strokeWidth,
               color: currentItem.value.color,
               data: currentItem.value.data.concat({
-                x: x,
-                y: y
+                x: currentX,
+                y: currentY
               })
             };
           }
@@ -811,6 +904,8 @@ const DrawCore = /*#__PURE__*/React.forwardRef(({
           text: currentItem.value.text !== DEFAULT_TEXT ? (_currentItem$value$te = currentItem.value.text) !== null && _currentItem$value$te !== void 0 ? _currentItem$value$te : '' : ''
         };
       }
+
+      runOnJS(addScreenStates)(currentItem.value);
     }
   }, []);
   const rightPaneStyle = useAnimatedStyle(() => {
@@ -819,7 +914,7 @@ const DrawCore = /*#__PURE__*/React.forwardRef(({
         translateX: panPosition.value
       }]
     };
-  }, [panPosition.value]);
+  });
   useEffect(() => {
     const sudDidHide = Keyboard.addListener('keyboardDidHide', () => {
       showTextInput.value = false;
@@ -856,19 +951,21 @@ const DrawCore = /*#__PURE__*/React.forwardRef(({
       strokeWidth: strokeWidth.value,
       color: color.value
     };
-  }, ({
-    strokeWidth,
-    color
-  }) => {
+  }, _ref4 => {
     var _currentItem$value6;
 
+    let {
+      strokeWidth: sw,
+      color: c
+    } = _ref4;
+
     switch ((_currentItem$value6 = currentItem.value) === null || _currentItem$value6 === void 0 ? void 0 : _currentItem$value6.type) {
       case 'singleHead':
         currentItem.value = {
           type: currentItem.value.type,
           data: currentItem.value.data,
-          strokeWidth,
-          color
+          strokeWidth: sw,
+          color: c
         };
         break;
 
@@ -876,8 +973,8 @@ const DrawCore = /*#__PURE__*/React.forwardRef(({
         currentItem.value = {
           type: currentItem.value.type,
           data: currentItem.value.data,
-          strokeWidth,
-          color
+          strokeWidth: sw,
+          color: c
         };
         break;
 
@@ -885,8 +982,8 @@ const DrawCore = /*#__PURE__*/React.forwardRef(({
         currentItem.value = {
           type: currentItem.value.type,
           data: currentItem.value.data,
-          strokeWidth,
-          color
+          strokeWidth: sw,
+          color: c
         };
         break;
 
@@ -894,8 +991,8 @@ const DrawCore = /*#__PURE__*/React.forwardRef(({
         currentItem.value = {
           type: currentItem.value.type,
           data: currentItem.value.data,
-          strokeWidth,
-          color
+          strokeWidth: sw,
+          color: c
         };
         break;
 
@@ -903,8 +1000,8 @@ const DrawCore = /*#__PURE__*/React.forwardRef(({
         currentItem.value = {
           type: currentItem.value.type,
           data: currentItem.value.data,
-          strokeWidth,
-          color
+          strokeWidth: sw,
+          color: c
         };
         break;
 
@@ -912,8 +1009,8 @@ const DrawCore = /*#__PURE__*/React.forwardRef(({
         currentItem.value = {
           type: currentItem.value.type,
           data: currentItem.value.data,
-          strokeWidth,
-          color,
+          strokeWidth: sw,
+          color: c,
           text: currentItem.value.text
         };
         break;
@@ -925,14 +1022,10 @@ const DrawCore = /*#__PURE__*/React.forwardRef(({
     strokeWidth.value = item.strokeWidth;
     color.value = item.color;
     currentItem.value = item;
-    setDoneItems(done => {
-      const copy = [...done];
-      copy.splice(index, 1);
-      return copy;
-    });
+    deleteDoneItem(index);
 
     if (previousItem) {
-      updateDoneItems(previousItem);
+      addDoneItem(previousItem);
     }
 
     if (item.type === 'text') {
@@ -944,7 +1037,7 @@ const DrawCore = /*#__PURE__*/React.forwardRef(({
 
       (_textInputRef$current2 = textInputRef.current) === null || _textInputRef$current2 === void 0 ? void 0 : _textInputRef$current2.blur();
     }
-  }, [color, currentItem, strokeWidth, updateDoneItems, onSelectionChange]);
+  }, [onSelectionChange, currentItem, strokeWidth, color, deleteDoneItem, addDoneItem]);
   const onTextHeightChange = useCallback(height => {
     onTextHeightUpdate(currentItem, textBaseHeight, height);
   }, [currentItem, textBaseHeight]);
@@ -992,8 +1085,6 @@ const DrawCore = /*#__PURE__*/React.forwardRef(({
       });
     }
   }, /*#__PURE__*/React.createElement(PanGestureHandler, {
-    activeOffsetX: 2,
-    activeOffsetY: 2,
     onGestureEvent: onGestureEvent
   }, /*#__PURE__*/React.createElement(Animated.View, {
     style: imageSize || drawRegion
@@ -1011,7 +1102,7 @@ const DrawCore = /*#__PURE__*/React.forwardRef(({
     style: styles.bgImage
   }, /*#__PURE__*/React.createElement(DrawPad, {
     currentItem: currentItem,
-    doneItems: doneItems,
+    doneItems: drawStates.doneItems,
     onPressItem: onPressItem,
     onTextHeightChange: onTextHeightChange
   }))) : null : drawRegion ? /*#__PURE__*/React.createElement(ViewShot, {
@@ -1024,7 +1115,7 @@ const DrawCore = /*#__PURE__*/React.forwardRef(({
     style: drawRegion
   }, /*#__PURE__*/React.createElement(DrawPad, {
     currentItem: currentItem,
-    doneItems: doneItems,
+    doneItems: drawStates.doneItems,
     onPressItem: onPressItem,
     onTextHeightChange: onTextHeightChange
   })) : null))), /*#__PURE__*/React.createElement(Animated.View, {
@@ -1034,12 +1125,14 @@ const DrawCore = /*#__PURE__*/React.forwardRef(({
   }, /*#__PURE__*/React.createElement(StrokeSlider, {
     minValue: 2,
     maxValue: 10,
-    stroke: strokeWidth
+    stroke: strokeWidth,
+    onStrokeChange: onColorStrokeChange
   })), /*#__PURE__*/React.createElement(View, {
     style: styles.colorSliderContainer
   }, /*#__PURE__*/React.createElement(ColorSlider, {
     color: color,
-    linearGradient: linearGradient
+    linearGradient: linearGradient,
+    onColorChange: onColorStrokeChange
   })))), Platform.OS === 'ios' ? /*#__PURE__*/React.createElement(InputAccessoryView, null, /*#__PURE__*/React.createElement(AnimatedTextInput, {
     ref: textInputRef,
     style: [styles.textInput, textInputStyle],