@archireport/react-native-svg-draw 1.4.0 → 2.1.0

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

@@ -1,39 +1,50 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { Pressable, View, StyleSheet, Keyboard } from 'react-native';
-import DrawCore from '../DrawCore';
-import PenSvg from './PenSvg';
 import DoubleHeadSvg from './DoubleHeadSvg';
 import CircleSvg from './CircleSvg';
 import SquareSvg from './SquareSvg';
 import ArrowSvg from './ArrowSvg';
 import TextSvg from './TextSvg';
 import CloseSvg from './CloseSvg';
+import PenSvg from './PenSvg';
+import useDrawHook from '../DrawCore/useDrawHook';
+import Sliders from '../Slider/Sliders';
+import DrawCore from '../DrawCore';
 import ThrashSvg from './ThrashSvg';
-import SendSvg from './SendSvg';
 import CancelSvg from './CancelSvg';
+import SendSvg from './SendSvg';
+import DrawProvider from '../DrawCore/DrawProvider';
 const styles = StyleSheet.create({
   container: {
-    flex: 1,
-    backgroundColor: '#000000'
+    flex: 1
+  },
+  actionButton: {
+    backgroundColor: 'grey',
+    padding: 10,
+    justifyContent: 'center',
+    alignContent: 'center',
+    alignItems: 'center',
+    height: 40,
+    borderRadius: 20,
+    width: 40
   },
   option: {
-    width: 30,
-    height: 30,
+    width: 22,
+    height: 20,
     justifyContent: 'center',
     alignItems: 'center',
-    marginHorizontal: 4
+    marginHorizontal: 8
   },
   toolbar: {
     flexDirection: 'row',
-    alignItems: 'center',
     justifyContent: 'space-between',
     paddingBottom: 30,
     paddingTop: 15,
     paddingHorizontal: 15
   },
   drawOptions: {
-    flexDirection: 'row',
-    alignItems: 'center'
+    flex: 1,
+    paddingHorizontal: 10
   },
   sendButton: {
     backgroundColor: '#3a6cff',
@@ -53,23 +64,22 @@ const styles = StyleSheet.create({
     paddingHorizontal: 20
   }
 });
-export default function DrawWithOptions(_ref) {
+function DrawWithOptionsCore(_ref) {
   let {
-    close,
-    takeSnapshot,
     linearGradient,
     image,
-    defaultDrawingMode = 'ellipse'
+    close,
+    takeSnapshot,
+    backgroundColor
   } = _ref;
-  const drawRef = useRef(null);
-  const [drawingMode, setDrawingMode] = useState(defaultDrawingMode);
-  const [selectedItem, setSelectedItem] = useState(false);
-  const [cancelEnabled, setCancelEnabled] = useState(false);
-  const onPressSend = useCallback(() => {
-    if (drawRef.current) {
-      takeSnapshot === null || takeSnapshot === void 0 ? void 0 : takeSnapshot(drawRef.current.takeSnapshot());
-    }
-  }, [takeSnapshot]);
+  const {
+    itemIsSelected,
+    cancelLastAction,
+    takeSnapshot: takeSnapshotAction,
+    deleteSelectedItem,
+    dispatchDrawStates,
+    drawState
+  } = useDrawHook();
   const [showToolbar, setShowToolbar] = useState(true);
   useEffect(() => {
     const sudDidHide = Keyboard.addListener('keyboardDidHide', () => {
@@ -88,117 +98,167 @@ export default function DrawWithOptions(_ref) {
       sudDidHide.remove();
     };
   }, []);
+  const takeSnapshotAndGetUri = useCallback(async () => {
+    if (takeSnapshot) {
+      takeSnapshot(takeSnapshotAction());
+    }
+  }, [takeSnapshot, takeSnapshotAction]);
   return /*#__PURE__*/React.createElement(View, {
     style: styles.container
   }, /*#__PURE__*/React.createElement(View, {
     style: styles.toolbar
+  }, /*#__PURE__*/React.createElement(View, {
+    style: styles.actionButton
   }, /*#__PURE__*/React.createElement(Pressable, {
-    style: styles.option,
     onPress: close
   }, /*#__PURE__*/React.createElement(CloseSvg, {
     height: 20,
     width: 20,
     fill: "#ffffff"
-  })), /*#__PURE__*/React.createElement(View, {
+  }))), /*#__PURE__*/React.createElement(View, {
     style: styles.drawOptions
+  }, /*#__PURE__*/React.createElement(View, {
+    style: {
+      flexDirection: 'row',
+      alignSelf: 'center',
+      borderWidth: 1,
+      borderColor: 'grey',
+      borderRadius: 25,
+      height: 40,
+      paddingHorizontal: 10,
+      paddingVertical: 10
+    }
   }, /*#__PURE__*/React.createElement(Pressable, {
     style: styles.option,
     onPress: () => {
-      setDrawingMode('pen');
+      dispatchDrawStates({
+        type: 'SET_DRAWING_MODE',
+        drawingMode: 'pen'
+      });
     }
   }, /*#__PURE__*/React.createElement(PenSvg, {
     height: 23,
     width: 22,
     stroke: "#ffffff",
     strokeWidth: "2",
-    opacity: drawingMode === 'pen' ? 1 : 0.5
+    opacity: drawState.drawingMode === 'pen' ? 1 : 0.5
   })), /*#__PURE__*/React.createElement(Pressable, {
     style: styles.option,
     onPress: () => {
-      setDrawingMode('doubleHead');
+      dispatchDrawStates({
+        type: 'SET_DRAWING_MODE',
+        drawingMode: 'doubleHead'
+      });
     }
   }, /*#__PURE__*/React.createElement(DoubleHeadSvg, {
     height: 20,
     width: 20,
     fill: "#ffffff",
-    opacity: drawingMode === 'doubleHead' ? 1 : 0.5
+    opacity: drawState.drawingMode === 'doubleHead' ? 1 : 0.5
   })), /*#__PURE__*/React.createElement(Pressable, {
     style: styles.option,
     onPress: () => {
-      setDrawingMode('singleHead');
+      dispatchDrawStates({
+        type: 'SET_DRAWING_MODE',
+        drawingMode: 'singleHead'
+      });
     }
   }, /*#__PURE__*/React.createElement(ArrowSvg, {
     height: 23,
     width: 23,
     fill: "#ffffff",
-    opacity: drawingMode === 'singleHead' ? 1 : 0.5
+    opacity: drawState.drawingMode === 'singleHead' ? 1 : 0.5
   })), /*#__PURE__*/React.createElement(Pressable, {
     style: styles.option,
     onPress: () => {
-      setDrawingMode('rectangle');
+      dispatchDrawStates({
+        type: 'SET_DRAWING_MODE',
+        drawingMode: 'rectangle'
+      });
     }
   }, /*#__PURE__*/React.createElement(SquareSvg, {
     height: 27,
     width: 27,
     fill: "#ffffff",
-    opacity: drawingMode === 'rectangle' ? 1 : 0.5
+    opacity: drawState.drawingMode === 'rectangle' ? 1 : 0.5
   })), /*#__PURE__*/React.createElement(Pressable, {
     style: styles.option,
     onPress: () => {
-      setDrawingMode('ellipse');
+      dispatchDrawStates({
+        type: 'SET_DRAWING_MODE',
+        drawingMode: 'ellipse'
+      });
     }
   }, /*#__PURE__*/React.createElement(CircleSvg, {
     fill: "#ffffff",
     height: 26,
     width: 26,
-    opacity: drawingMode === 'ellipse' ? 1 : 0.5
+    opacity: drawState.drawingMode === 'ellipse' ? 1 : 0.5
   })), /*#__PURE__*/React.createElement(Pressable, {
     style: styles.option,
     onPress: () => {
-      setDrawingMode('text');
+      dispatchDrawStates({
+        type: 'SET_DRAWING_MODE',
+        drawingMode: 'text'
+      });
     }
   }, /*#__PURE__*/React.createElement(TextSvg, {
     height: 28,
     width: 28,
-    fill: "#ffffff",
-    opacity: drawingMode === 'text' ? 1 : 0.5
-  })))), /*#__PURE__*/React.createElement(DrawCore, {
-    ref: drawRef,
-    drawingMode: drawingMode,
+    color: 'grey',
+    opacity: drawState.drawingMode === 'text' ? 1 : 0.5
+  })))), /*#__PURE__*/React.createElement(View, {
+    style: styles.actionButton
+  }, /*#__PURE__*/React.createElement(Pressable, {
+    onPress: takeSnapshotAndGetUri
+  }, /*#__PURE__*/React.createElement(SendSvg, {
+    height: 20,
+    width: 20,
+    fill: "#ffffff"
+  })))), /*#__PURE__*/React.createElement(View, {
+    style: {
+      marginHorizontal: 0,
+      flex: 1
+    }
+  }, /*#__PURE__*/React.createElement(DrawCore, {
     image: image,
-    linearGradient: linearGradient,
-    onSelectionChange: setSelectedItem,
-    onCancelChange: setCancelEnabled
-  }), showToolbar ? /*#__PURE__*/React.createElement(View, {
+    backgroundColor: backgroundColor
+  })), /*#__PURE__*/React.createElement(Sliders, {
+    linearGradient: linearGradient
+  }), /*#__PURE__*/React.createElement(View, {
+    style: {
+      height: 70
+    }
+  }, showToolbar ? /*#__PURE__*/React.createElement(View, {
     style: styles.bottomToolBar
-  }, selectedItem ? /*#__PURE__*/React.createElement(Pressable, {
-    style: styles.option,
-    onPress: () => {
-      var _drawRef$current;
-      (_drawRef$current = drawRef.current) === null || _drawRef$current === void 0 ? void 0 : _drawRef$current.deleteSelectedItem();
+  }, itemIsSelected.value ? /*#__PURE__*/React.createElement(View, {
+    style: {
+      ...styles.actionButton,
+      marginRight: 10
     }
+  }, /*#__PURE__*/React.createElement(Pressable, {
+    style: styles.option,
+    onPress: deleteSelectedItem
   }, /*#__PURE__*/React.createElement(ThrashSvg, {
     width: 28,
     height: 28,
-    fill: "white"
-  })) : null, cancelEnabled ? /*#__PURE__*/React.createElement(Pressable, {
-    style: styles.option,
-    onPress: () => {
-      var _drawRef$current2;
-      (_drawRef$current2 = drawRef.current) === null || _drawRef$current2 === void 0 ? void 0 : _drawRef$current2.cancelLastAction();
+    color: "white",
+    strokeWidth: 2
+  }))) : null, drawState.cancelEnabled ? /*#__PURE__*/React.createElement(View, {
+    style: {
+      ...styles.actionButton
     }
+  }, /*#__PURE__*/React.createElement(Pressable, {
+    style: styles.option,
+    onPress: cancelLastAction
   }, /*#__PURE__*/React.createElement(CancelSvg, {
-    width: 27,
-    height: 27,
-    stroke: "#ffffff",
+    width: 28,
+    height: 28,
+    color: 'grey',
     strokeWidth: 2
-  })) : null, /*#__PURE__*/React.createElement(Pressable, {
-    style: styles.sendButton,
-    onPress: onPressSend
-  }, /*#__PURE__*/React.createElement(SendSvg, {
-    fill: "#fff",
-    width: 20,
-    height: 20
-  }))) : null);
+  }))) : null) : null));
+}
+export default function DrawWithOptions(props) {
+  return /*#__PURE__*/React.createElement(DrawProvider, null, /*#__PURE__*/React.createElement(DrawWithOptionsCore, props));
 }
 //# sourceMappingURL=index.js.map

package/lib/module/components/DrawWithOptions/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useCallback","useEffect","useRef","useState","Pressable","View","StyleSheet","Keyboard","DrawCore","PenSvg","DoubleHeadSvg","CircleSvg","SquareSvg","ArrowSvg","TextSvg","CloseSvg","ThrashSvg","SendSvg","CancelSvg","styles","create","container","flex","backgroundColor","option","width","height","justifyContent","alignItems","marginHorizontal","toolbar","flexDirection","paddingBottom","paddingTop","paddingHorizontal","drawOptions","sendButton","borderRadius","marginLeft","bottomToolBar","DrawWithOptions","close","takeSnapshot","linearGradient","image","defaultDrawingMode","drawRef","drawingMode","setDrawingMode","selectedItem","setSelectedItem","cancelEnabled","setCancelEnabled","onPressSend","current","showToolbar","setShowToolbar","sudDidHide","addListener","sudDidShow","event","endCoordinates","remove","deleteSelectedItem","cancelLastAction"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":"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"}
+{"version":3,"names":["React","useCallback","useEffect","useState","Pressable","View","StyleSheet","Keyboard","DoubleHeadSvg","CircleSvg","SquareSvg","ArrowSvg","TextSvg","CloseSvg","PenSvg","useDrawHook","Sliders","DrawCore","ThrashSvg","CancelSvg","SendSvg","DrawProvider","styles","create","container","flex","actionButton","backgroundColor","padding","justifyContent","alignContent","alignItems","height","borderRadius","width","option","marginHorizontal","toolbar","flexDirection","paddingBottom","paddingTop","paddingHorizontal","drawOptions","sendButton","marginLeft","bottomToolBar","DrawWithOptionsCore","linearGradient","image","close","takeSnapshot","itemIsSelected","cancelLastAction","takeSnapshotAction","deleteSelectedItem","dispatchDrawStates","drawState","showToolbar","setShowToolbar","sudDidHide","addListener","sudDidShow","event","endCoordinates","remove","takeSnapshotAndGetUri","alignSelf","borderWidth","borderColor","paddingVertical","type","drawingMode","value","marginRight","cancelEnabled","DrawWithOptions","props"],"sourceRoot":"../../../../src","sources":["components/DrawWithOptions/index.tsx"],"mappings":"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"}

package/lib/module/components/Slider/ColorSlider.js

@@ -0,0 +1,95 @@
+import { sliderStyle, TRACK_R } from './sliderStyle';
+import React, { useCallback } from 'react';
+import { View } from 'react-native';
+import { PanGestureHandler } from 'react-native-gesture-handler';
+import Animated, { runOnJS, useAnimatedGestureHandler, useAnimatedStyle, useDerivedValue, useSharedValue } from 'react-native-reanimated';
+import useDrawHook from '../DrawCore/useDrawHook';
+const gradientColors = ['hsl(0, 100%, 100%) 00%', 'hsl(0, 100%, 50%) 10%', 'hsl(45, 100%, 50%) 20%', 'hsl(90, 100%, 50%) 30%', 'hsl(135, 100%, 50%) 40%', 'hsl(180, 100%, 50%) 50%', 'hsl(225, 100%, 50%) 60%', 'hsl(270, 100%, 50%) 70%', 'hsl(315, 100%, 50%) 80%', 'hsl(360, 100%, 50%) 90%', 'hsl(0, 100%, 0%) 100%  '];
+const gradientStart = {
+  x: 0,
+  y: 0
+};
+const gradientEnd = {
+  x: 1,
+  y: 0
+};
+const ColorSlider = _ref => {
+  let {
+    linearGradient: LinearGradient
+  } = _ref;
+  const {
+    onColorStrokeChange,
+    color
+  } = useDrawHook();
+  const sliderWidth = useSharedValue(0);
+  const position = useDerivedValue(() => {
+    const hslRegExp = new RegExp(/hsl\(([\d.]+),\s*(\d+)%,\s*([\d.]+)%\)/);
+    const res = hslRegExp.exec(color.value);
+    const lum = res ? parseFloat(res[3] ?? '0') : 0;
+    const tint = res ? parseFloat(res[1] ?? '0') : 0;
+    if (lum > 50) {
+      return sliderWidth.value * 0.1 / 50 * (100 - lum);
+    }
+    if (lum < 50) {
+      return sliderWidth.value - sliderWidth.value * 0.1 / 50 * lum;
+    }
+    return Math.min(sliderWidth.value, Math.max(0, sliderWidth.value * 0.1 + tint * ((sliderWidth.value - sliderWidth.value * 0.2) / 360)));
+  }, [sliderWidth.value]);
+  const wrapperOnColorChange = () => {
+    onColorStrokeChange();
+  };
+  const onGestureEvent = useAnimatedGestureHandler({
+    onStart: (_ref2, ctx) => {
+      let {
+        x
+      } = _ref2;
+      ctx.startX = x;
+    },
+    onActive: (_ref3, _ref4) => {
+      let {
+        translationX
+      } = _ref3;
+      let {
+        startX
+      } = _ref4;
+      const slidePos = Math.min(sliderWidth.value, startX + translationX);
+      if (slidePos < 0.1 * sliderWidth.value) {
+        color.value = `hsl(0, 100%, ${Math.min(100, 100 - slidePos / (0.1 * sliderWidth.value) * 50).toFixed(10)}%)`;
+      } else if (slidePos > 0.9 * sliderWidth.value) {
+        color.value = `hsl(0, 100%, ${Math.max(50 - (slidePos - 0.9 * sliderWidth.value) / (0.1 * sliderWidth.value) * 50, 0).toFixed(10)}%)`;
+      } else {
+        color.value = `hsl(${(slidePos - sliderWidth.value * 0.1) / (sliderWidth.value - sliderWidth.value * 0.2) * 360}, 100%, 50%)`;
+      }
+    },
+    onEnd: () => {
+      runOnJS(wrapperOnColorChange)();
+    }
+  }, []);
+  const style = useAnimatedStyle(() => {
+    return {
+      transform: [{
+        translateX: position.value - TRACK_R
+      }]
+    };
+  }, [position.value]);
+  const onLayout = useCallback(event => {
+    sliderWidth.value = event.nativeEvent.layout.width;
+  }, [sliderWidth]);
+  return /*#__PURE__*/React.createElement(View, {
+    style: sliderStyle.container
+  }, /*#__PURE__*/React.createElement(PanGestureHandler, {
+    onGestureEvent: onGestureEvent
+  }, /*#__PURE__*/React.createElement(Animated.View, {
+    style: sliderStyle.container
+  }, /*#__PURE__*/React.createElement(LinearGradient, {
+    start: gradientStart,
+    end: gradientEnd,
+    colors: gradientColors,
+    onLayout: onLayout,
+    style: sliderStyle.track
+  }), /*#__PURE__*/React.createElement(Animated.View, {
+    style: [sliderStyle.thumb, style]
+  }))));
+};
+export default ColorSlider;
+//# sourceMappingURL=ColorSlider.js.map

package/lib/module/components/Slider/ColorSlider.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["sliderStyle","TRACK_R","React","useCallback","View","PanGestureHandler","Animated","runOnJS","useAnimatedGestureHandler","useAnimatedStyle","useDerivedValue","useSharedValue","useDrawHook","gradientColors","gradientStart","x","y","gradientEnd","ColorSlider","linearGradient","LinearGradient","onColorStrokeChange","color","sliderWidth","position","hslRegExp","RegExp","res","exec","value","lum","parseFloat","tint","Math","min","max","wrapperOnColorChange","onGestureEvent","onStart","ctx","startX","onActive","translationX","slidePos","toFixed","onEnd","style","transform","translateX","onLayout","event","nativeEvent","layout","width","container","track","thumb"],"sourceRoot":"../../../../src","sources":["components/Slider/ColorSlider.tsx"],"mappings":"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"}

package/lib/module/components/Slider/Sliders.js

@@ -0,0 +1,79 @@
+import React from 'react';
+import { View } from 'react-native';
+import Animated, { useAnimatedStyle } from 'react-native-reanimated';
+import StrokeSlider from './StrokeSlider';
+import ColorSlider from './ColorSlider';
+import useDrawHook from '../DrawCore/useDrawHook';
+import { StyleSheet } from 'react-native';
+const styles = StyleSheet.create({
+  strokeContainer: {
+    flexDirection: 'row',
+    marginTop: 20,
+    borderColor: 'grey',
+    borderRadius: 20,
+    height: 40,
+    borderWidth: 1,
+    marginHorizontal: 20,
+    maxWidth: 500,
+    alignSelf: 'center'
+  },
+  strokeWrapper: {
+    flex: 1,
+    height: 40,
+    marginHorizontal: 20,
+    justifyContent: 'center'
+  },
+  currentColorContainer: {
+    borderRadius: 20,
+    borderWidth: 1,
+    borderColor: '#E5E5E5',
+    justifyContent: 'center',
+    alignContent: 'center',
+    alignSelf: 'center',
+    padding: 4
+  },
+  currentColor: {
+    width: 20,
+    height: 20,
+    borderRadius: 10
+  },
+  colorContainer: {
+    flex: 1,
+    height: 40,
+    marginHorizontal: 20,
+    justifyContent: 'center'
+  }
+});
+const Sliders = _ref => {
+  let {
+    linearGradient
+  } = _ref;
+  const {
+    strokeWidth,
+    color
+  } = useDrawHook();
+  const styleStrokeColor = useAnimatedStyle(() => {
+    return {
+      borderWidth: strokeWidth.value,
+      borderColor: color.value
+    };
+  }, [strokeWidth, color]);
+  return /*#__PURE__*/React.createElement(View, {
+    style: styles.strokeContainer
+  }, /*#__PURE__*/React.createElement(View, {
+    style: styles.strokeWrapper
+  }, /*#__PURE__*/React.createElement(StrokeSlider, {
+    minValue: 2,
+    maxValue: 10
+  })), /*#__PURE__*/React.createElement(View, {
+    style: styles.currentColorContainer
+  }, /*#__PURE__*/React.createElement(Animated.View, {
+    style: [styles.currentColor, styleStrokeColor]
+  })), /*#__PURE__*/React.createElement(View, {
+    style: styles.colorContainer
+  }, /*#__PURE__*/React.createElement(ColorSlider, {
+    linearGradient: linearGradient
+  })));
+};
+export default Sliders;
+//# sourceMappingURL=Sliders.js.map

package/lib/module/components/Slider/Sliders.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","View","Animated","useAnimatedStyle","StrokeSlider","ColorSlider","useDrawHook","StyleSheet","styles","create","strokeContainer","flexDirection","marginTop","borderColor","borderRadius","height","borderWidth","marginHorizontal","maxWidth","alignSelf","strokeWrapper","flex","justifyContent","currentColorContainer","alignContent","padding","currentColor","width","colorContainer","Sliders","linearGradient","strokeWidth","color","styleStrokeColor","value"],"sourceRoot":"../../../../src","sources":["components/Slider/Sliders.tsx"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAmB,cAAc;AAC9C,OAAOC,QAAQ,IAAIC,gBAAgB,QAAQ,yBAAyB;AACpE,OAAOC,YAAY,MAAM,gBAAgB;AACzC,OAAOC,WAAW,MAAM,eAAe;AAEvC,OAAOC,WAAW,MAAM,yBAAyB;AACjD,SAASC,UAAU,QAAQ,cAAc;AAEzC,MAAMC,MAAM,GAAGD,UAAU,CAACE,MAAM,CAAC;EAC/BC,eAAe,EAAE;IACfC,aAAa,EAAE,KAAK;IACpBC,SAAS,EAAE,EAAE;IACbC,WAAW,EAAE,MAAM;IACnBC,YAAY,EAAE,EAAE;IAChBC,MAAM,EAAE,EAAE;IACVC,WAAW,EAAE,CAAC;IACdC,gBAAgB,EAAE,EAAE;IACpBC,QAAQ,EAAE,GAAG;IACbC,SAAS,EAAE;EACb,CAAC;EACDC,aAAa,EAAE;IACbC,IAAI,EAAE,CAAC;IACPN,MAAM,EAAE,EAAE;IACVE,gBAAgB,EAAE,EAAE;IACpBK,cAAc,EAAE;EAClB,CAAC;EACDC,qBAAqB,EAAE;IACrBT,YAAY,EAAE,EAAE;IAChBE,WAAW,EAAE,CAAC;IACdH,WAAW,EAAE,SAAS;IACtBS,cAAc,EAAE,QAAQ;IACxBE,YAAY,EAAE,QAAQ;IACtBL,SAAS,EAAE,QAAQ;IACnBM,OAAO,EAAE;EACX,CAAC;EACDC,YAAY,EAAE;IAAEC,KAAK,EAAE,EAAE;IAAEZ,MAAM,EAAE,EAAE;IAAED,YAAY,EAAE;EAAG,CAAC;EACzDc,cAAc,EAAE;IACdP,IAAI,EAAE,CAAC;IACPN,MAAM,EAAE,EAAE;IACVE,gBAAgB,EAAE,EAAE;IACpBK,cAAc,EAAE;EAClB;AACF,CAAC,CAAC;AAEF,MAAMO,OAAO,GAAG,QAIV;EAAA,IAJW;IACfC;EAGF,CAAC;EACC,MAAM;IAAEC,WAAW;IAAEC;EAAM,CAAC,GAAG1B,WAAW,EAAE;EAE5C,MAAM2B,gBAAgB,GAAG9B,gBAAgB,CAAC,MAAM;IAC9C,OAAO;MACLa,WAAW,EAAEe,WAAW,CAAEG,KAAK;MAC/BrB,WAAW,EAAEmB,KAAK,CAAEE;IACtB,CAAC;EACH,CAAC,EAAE,CAACH,WAAW,EAAEC,KAAK,CAAC,CAAC;EAExB,oBACE,oBAAC,IAAI;IAAC,KAAK,EAAExB,MAAM,CAACE;EAAgB,gBAClC,oBAAC,IAAI;IAAC,KAAK,EAAEF,MAAM,CAACY;EAAc,gBAChC,oBAAC,YAAY;IAAC,QAAQ,EAAE,CAAE;IAAC,QAAQ,EAAE;EAAG,EAAG,CACtC,eACP,oBAAC,IAAI;IAAC,KAAK,EAAEZ,MAAM,CAACe;EAAsB,gBACxC,oBAAC,QAAQ,CAAC,IAAI;IAAC,KAAK,EAAE,CAACf,MAAM,CAACkB,YAAY,EAAEO,gBAAgB;EAAE,EAAG,CAC5D,eACP,oBAAC,IAAI;IAAC,KAAK,EAAEzB,MAAM,CAACoB;EAAe,gBACjC,oBAAC,WAAW;IAAC,cAAc,EAAEE;EAAe,EAAG,CAC1C,CACF;AAEX,CAAC;AAED,eAAeD,OAAO"}

package/lib/module/components/Slider/StrokeSlider.js

@@ -0,0 +1,82 @@
+import React from 'react';
+import { PanGestureHandler } from 'react-native-gesture-handler';
+import Animated, { runOnJS, useAnimatedGestureHandler, useAnimatedStyle, useDerivedValue, useSharedValue } from 'react-native-reanimated';
+import { View } from 'react-native';
+import { sliderStyle, TRACK_R } from './sliderStyle';
+import useDrawHook from '../DrawCore/useDrawHook';
+import SliderSvg from '../DrawWithOptions/SliderSvg';
+import { StyleSheet } from 'react-native';
+const styles = StyleSheet.create({
+  container: {
+    height: 38,
+    width: '100%',
+    justifyContent: 'center'
+  },
+  sliderBackground: {
+    maxHeight: 15
+  }
+});
+const StrokeSlider = _ref => {
+  let {
+    minValue,
+    maxValue
+  } = _ref;
+  const {
+    onColorStrokeChange,
+    strokeWidth
+  } = useDrawHook();
+  const sliderWidth = useSharedValue(0);
+  const position = useDerivedValue(() => {
+    return sliderWidth.value / (maxValue - minValue) * (strokeWidth.value - minValue);
+  });
+  const wrapperOnColorStrokeChange = () => {
+    onColorStrokeChange();
+  };
+  const onGestureEvent = useAnimatedGestureHandler({
+    onStart: (_ref2, ctx) => {
+      let {
+        x
+      } = _ref2;
+      ctx.startX = x;
+    },
+    onActive: (_ref3, _ref4) => {
+      let {
+        translationX
+      } = _ref3;
+      let {
+        startX
+      } = _ref4;
+      strokeWidth.value = Math.min(maxValue, Math.max(minValue, (startX + translationX) / sliderWidth.value * (maxValue - minValue) + minValue));
+    },
+    onEnd: () => {
+      runOnJS(wrapperOnColorStrokeChange)();
+    }
+  }, []);
+  const style = useAnimatedStyle(() => {
+    return {
+      transform: [{
+        translateX: position.value - TRACK_R
+      }]
+    };
+  }, [position.value]);
+  return /*#__PURE__*/React.createElement(View, {
+    style: sliderStyle.container
+  }, /*#__PURE__*/React.createElement(PanGestureHandler, {
+    onGestureEvent: onGestureEvent
+  }, /*#__PURE__*/React.createElement(Animated.View, {
+    style: sliderStyle.container
+  }, /*#__PURE__*/React.createElement(View, {
+    onLayout: event => {
+      sliderWidth.value = event.nativeEvent.layout.width;
+    },
+    style: styles.container
+  }, /*#__PURE__*/React.createElement(SliderSvg, {
+    color: "grey",
+    preserveAspectRatio: "none",
+    style: styles.sliderBackground
+  })), /*#__PURE__*/React.createElement(Animated.View, {
+    style: [sliderStyle.thumb, style]
+  }))));
+};
+export default StrokeSlider;
+//# sourceMappingURL=StrokeSlider.js.map

package/lib/module/components/Slider/StrokeSlider.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","PanGestureHandler","Animated","runOnJS","useAnimatedGestureHandler","useAnimatedStyle","useDerivedValue","useSharedValue","View","sliderStyle","TRACK_R","useDrawHook","SliderSvg","StyleSheet","styles","create","container","height","width","justifyContent","sliderBackground","maxHeight","StrokeSlider","minValue","maxValue","onColorStrokeChange","strokeWidth","sliderWidth","position","value","wrapperOnColorStrokeChange","onGestureEvent","onStart","ctx","x","startX","onActive","translationX","Math","min","max","onEnd","style","transform","translateX","event","nativeEvent","layout","thumb"],"sourceRoot":"../../../../src","sources":["components/Slider/StrokeSlider.tsx"],"mappings":"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"}