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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (107) hide show
  1. package/lib/commonjs/components/DrawCore/ColorSlider.js +23 -16
  2. package/lib/commonjs/components/DrawCore/ColorSlider.js.map +1 -1
  3. package/lib/commonjs/components/DrawCore/CurrentAnimatedItem.js +60 -9
  4. package/lib/commonjs/components/DrawCore/CurrentAnimatedItem.js.map +1 -1
  5. package/lib/commonjs/components/DrawCore/CurrentAnimatedText.js +5 -4
  6. package/lib/commonjs/components/DrawCore/CurrentAnimatedText.js.map +1 -1
  7. package/lib/commonjs/components/DrawCore/DrawPad.js +11 -10
  8. package/lib/commonjs/components/DrawCore/DrawPad.js.map +1 -1
  9. package/lib/commonjs/components/DrawCore/Item.js +10 -10
  10. package/lib/commonjs/components/DrawCore/Item.js.map +1 -1
  11. package/lib/commonjs/components/DrawCore/StrokeSlider.js +21 -14
  12. package/lib/commonjs/components/DrawCore/StrokeSlider.js.map +1 -1
  13. package/lib/commonjs/components/DrawCore/index.js +156 -63
  14. package/lib/commonjs/components/DrawCore/index.js.map +1 -1
  15. package/lib/commonjs/components/DrawWithOptions/ArrowSvg.js +1 -1
  16. package/lib/commonjs/components/DrawWithOptions/ArrowSvg.js.map +1 -1
  17. package/lib/commonjs/components/DrawWithOptions/CancelSvg.js +35 -0
  18. package/lib/commonjs/components/DrawWithOptions/CancelSvg.js.map +1 -0
  19. package/lib/commonjs/components/DrawWithOptions/CircleSvg.js +1 -1
  20. package/lib/commonjs/components/DrawWithOptions/CircleSvg.js.map +1 -1
  21. package/lib/commonjs/components/DrawWithOptions/CloseSvg.js +1 -1
  22. package/lib/commonjs/components/DrawWithOptions/CloseSvg.js.map +1 -1
  23. package/lib/commonjs/components/DrawWithOptions/DoubleHeadSvg.js +1 -1
  24. package/lib/commonjs/components/DrawWithOptions/DoubleHeadSvg.js.map +1 -1
  25. package/lib/commonjs/components/DrawWithOptions/PenSvg.js +27 -0
  26. package/lib/commonjs/components/DrawWithOptions/PenSvg.js.map +1 -0
  27. package/lib/commonjs/components/DrawWithOptions/SendSvg.js +1 -1
  28. package/lib/commonjs/components/DrawWithOptions/SendSvg.js.map +1 -1
  29. package/lib/commonjs/components/DrawWithOptions/SquareSvg.js +1 -1
  30. package/lib/commonjs/components/DrawWithOptions/SquareSvg.js.map +1 -1
  31. package/lib/commonjs/components/DrawWithOptions/TextSvg.js +1 -1
  32. package/lib/commonjs/components/DrawWithOptions/TextSvg.js.map +1 -1
  33. package/lib/commonjs/components/DrawWithOptions/ThrashSvg.js +1 -1
  34. package/lib/commonjs/components/DrawWithOptions/ThrashSvg.js.map +1 -1
  35. package/lib/commonjs/components/DrawWithOptions/index.js +39 -8
  36. package/lib/commonjs/components/DrawWithOptions/index.js.map +1 -1
  37. package/lib/commonjs/index.js.map +1 -1
  38. package/lib/commonjs/types.d.js +4 -0
  39. package/lib/commonjs/types.d.js.map +1 -1
  40. package/lib/module/components/DrawCore/ColorSlider.js +24 -17
  41. package/lib/module/components/DrawCore/ColorSlider.js.map +1 -1
  42. package/lib/module/components/DrawCore/CurrentAnimatedItem.js +57 -10
  43. package/lib/module/components/DrawCore/CurrentAnimatedItem.js.map +1 -1
  44. package/lib/module/components/DrawCore/CurrentAnimatedText.js +5 -4
  45. package/lib/module/components/DrawCore/CurrentAnimatedText.js.map +1 -1
  46. package/lib/module/components/DrawCore/DrawPad.js +11 -10
  47. package/lib/module/components/DrawCore/DrawPad.js.map +1 -1
  48. package/lib/module/components/DrawCore/Item.js +9 -11
  49. package/lib/module/components/DrawCore/Item.js.map +1 -1
  50. package/lib/module/components/DrawCore/StrokeSlider.js +21 -14
  51. package/lib/module/components/DrawCore/StrokeSlider.js.map +1 -1
  52. package/lib/module/components/DrawCore/index.js +157 -64
  53. package/lib/module/components/DrawCore/index.js.map +1 -1
  54. package/lib/module/components/DrawWithOptions/ArrowSvg.js +1 -1
  55. package/lib/module/components/DrawWithOptions/ArrowSvg.js.map +1 -1
  56. package/lib/module/components/DrawWithOptions/CancelSvg.js +22 -0
  57. package/lib/module/components/DrawWithOptions/CancelSvg.js.map +1 -0
  58. package/lib/module/components/DrawWithOptions/CircleSvg.js +1 -1
  59. package/lib/module/components/DrawWithOptions/CircleSvg.js.map +1 -1
  60. package/lib/module/components/DrawWithOptions/CloseSvg.js +1 -1
  61. package/lib/module/components/DrawWithOptions/CloseSvg.js.map +1 -1
  62. package/lib/module/components/DrawWithOptions/DoubleHeadSvg.js +1 -1
  63. package/lib/module/components/DrawWithOptions/DoubleHeadSvg.js.map +1 -1
  64. package/lib/module/components/DrawWithOptions/PenSvg.js +14 -0
  65. package/lib/module/components/DrawWithOptions/PenSvg.js.map +1 -0
  66. package/lib/module/components/DrawWithOptions/SendSvg.js +1 -1
  67. package/lib/module/components/DrawWithOptions/SendSvg.js.map +1 -1
  68. package/lib/module/components/DrawWithOptions/SquareSvg.js +1 -1
  69. package/lib/module/components/DrawWithOptions/SquareSvg.js.map +1 -1
  70. package/lib/module/components/DrawWithOptions/TextSvg.js +1 -1
  71. package/lib/module/components/DrawWithOptions/TextSvg.js.map +1 -1
  72. package/lib/module/components/DrawWithOptions/ThrashSvg.js +1 -1
  73. package/lib/module/components/DrawWithOptions/ThrashSvg.js.map +1 -1
  74. package/lib/module/components/DrawWithOptions/index.js +37 -8
  75. package/lib/module/components/DrawWithOptions/index.js.map +1 -1
  76. package/lib/module/index.js.map +1 -1
  77. package/lib/module/types.d.js +1 -1
  78. package/lib/module/types.d.js.map +1 -1
  79. package/lib/typescript/components/DrawCore/ColorSlider.d.ts +2 -1
  80. package/lib/typescript/components/DrawCore/CurrentAnimatedItem.d.ts +3 -1
  81. package/lib/typescript/components/DrawCore/CurrentAnimatedText.d.ts +1 -0
  82. package/lib/typescript/components/DrawCore/DrawPad.d.ts +1 -0
  83. package/lib/typescript/components/DrawCore/Item.d.ts +1 -0
  84. package/lib/typescript/components/DrawCore/StrokeSlider.d.ts +3 -1
  85. package/lib/typescript/components/DrawCore/index.d.ts +1 -0
  86. package/lib/typescript/components/DrawWithOptions/ArrowSvg.d.ts +1 -0
  87. package/lib/typescript/components/DrawWithOptions/CancelSvg.d.ts +3 -0
  88. package/lib/typescript/components/DrawWithOptions/CircleSvg.d.ts +1 -0
  89. package/lib/typescript/components/DrawWithOptions/CloseSvg.d.ts +1 -0
  90. package/lib/typescript/components/DrawWithOptions/DoubleHeadSvg.d.ts +1 -0
  91. package/lib/typescript/components/DrawWithOptions/PenSvg.d.ts +3 -0
  92. package/lib/typescript/components/DrawWithOptions/SendSvg.d.ts +1 -0
  93. package/lib/typescript/components/DrawWithOptions/SquareSvg.d.ts +1 -0
  94. package/lib/typescript/components/DrawWithOptions/TextSvg.d.ts +1 -0
  95. package/lib/typescript/components/DrawWithOptions/ThrashSvg.d.ts +1 -0
  96. package/lib/typescript/components/DrawWithOptions/index.d.ts +3 -1
  97. package/package.json +5 -5
  98. package/src/components/DrawCore/ColorSlider.tsx +11 -6
  99. package/src/components/DrawCore/CurrentAnimatedItem.tsx +59 -8
  100. package/src/components/DrawCore/DrawPad.tsx +2 -2
  101. package/src/components/DrawCore/Item.tsx +3 -11
  102. package/src/components/DrawCore/StrokeSlider.tsx +5 -1
  103. package/src/components/DrawCore/index.tsx +1105 -970
  104. package/src/components/DrawWithOptions/CancelSvg.tsx +23 -0
  105. package/src/components/DrawWithOptions/PenSvg.tsx +14 -0
  106. package/src/components/DrawWithOptions/index.tsx +38 -1
  107. package/src/types.d.ts +4 -1
@@ -1 +1 @@
1
- {"version":3,"sources":["CurrentAnimatedText.tsx"],"names":["React","useState","StyleSheet","View","Animated","runOnJS","useAnimatedStyle","useDerivedValue","styles","create","textBackground","marginHorizontal","backgroundColor","borderRadius","paddingVertical","paddingHorizontal","markerContainerLeft","position","left","height","justifyContent","markerContainerRight","right","marker","width","borderWidth","borderColor","CurrentAnimatedText","currentItem","onHeightChange","text","setText","value","type","textAnimatedStyle","fontSize","strokeWidth","color","containerStyle","opacity","data","parseFloat","top","transform","translateX","x","translateY","y","event","nativeEvent","layout"],"mappings":"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","sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet, View } from 'react-native';\nimport Animated, {\n runOnJS,\n useAnimatedStyle,\n useDerivedValue,\n} from 'react-native-reanimated';\nimport type { DrawItem } from '../../types';\n\nconst styles = StyleSheet.create({\n textBackground: {\n marginHorizontal: 10,\n backgroundColor: 'rgba(0, 0, 0, 0.6)',\n borderRadius: 10,\n paddingVertical: 13,\n paddingHorizontal: 18,\n },\n markerContainerLeft: {\n position: 'absolute',\n left: 5,\n height: '100%',\n justifyContent: 'center',\n },\n markerContainerRight: {\n position: 'absolute',\n right: 5,\n height: '100%',\n justifyContent: 'center',\n },\n marker: {\n width: 10,\n height: 10,\n borderRadius: 10,\n backgroundColor: '#3a6cff',\n borderWidth: 1,\n borderColor: 'white',\n },\n});\n\n/**\n * There is an issue on re-render for ForeignObject (see https://github.com/react-native-svg/react-native-svg/issues/1357)\n * So we cannot embed this component directly in the Svg\n */\nexport default function CurrentAnimatedText({\n currentItem,\n onHeightChange,\n}: {\n currentItem: Animated.SharedValue<DrawItem | null>;\n onHeightChange: (height: number) => void;\n}) {\n const [text, setText] = useState(\n currentItem.value?.type === 'text' ? currentItem.value.text || '' : ''\n );\n\n useDerivedValue(() => {\n runOnJS(setText)(\n currentItem.value?.type === 'text' ? currentItem.value.text || '' : ''\n );\n }, [currentItem.value]);\n\n const textAnimatedStyle = useAnimatedStyle(() => {\n return {\n fontSize: 16 + (currentItem.value?.strokeWidth ?? 0),\n color: 'white',\n };\n }, [currentItem.value?.strokeWidth]);\n\n const containerStyle = useAnimatedStyle(() => {\n return {\n opacity: currentItem.value?.type === 'text' ? 1 : 0,\n height: currentItem.value?.type === 'text' ? 'auto' : -10,\n width:\n (currentItem.value?.type === 'text' &&\n (typeof currentItem.value.data.width === 'string'\n ? parseFloat(currentItem.value.data.width)\n : currentItem.value.data.width)) ||\n 0,\n position: 'absolute',\n top: 0,\n left: 0,\n transform: [\n {\n translateX:\n (currentItem.value?.type === 'text' &&\n (typeof currentItem.value.data.x === 'string'\n ? parseFloat(currentItem.value.data.x)\n : currentItem.value.data.x)) ||\n 0,\n },\n {\n translateY:\n (currentItem.value?.type === 'text' &&\n (typeof currentItem.value.data.y === 'string'\n ? parseFloat(currentItem.value.data.y)\n : currentItem.value.data.y)) ||\n 0,\n },\n ],\n };\n }, [currentItem.value]);\n\n return (\n <Animated.View style={containerStyle}>\n <View\n style={styles.textBackground}\n onLayout={(event) => {\n onHeightChange(event.nativeEvent.layout.height);\n }}\n >\n <Animated.Text style={textAnimatedStyle}>{text}</Animated.Text>\n </View>\n <View style={styles.markerContainerLeft}>\n <View style={styles.marker} />\n </View>\n <View style={styles.markerContainerRight}>\n <View style={styles.marker} />\n </View>\n </Animated.View>\n );\n}\n"]}
1
+ {"version":3,"names":["React","useState","StyleSheet","View","Animated","runOnJS","useAnimatedStyle","useDerivedValue","styles","create","textBackground","marginHorizontal","backgroundColor","borderRadius","paddingVertical","paddingHorizontal","markerContainerLeft","position","left","height","justifyContent","markerContainerRight","right","marker","width","borderWidth","borderColor","CurrentAnimatedText","currentItem","onHeightChange","text","setText","value","type","textAnimatedStyle","fontSize","strokeWidth","color","containerStyle","opacity","data","parseFloat","top","transform","translateX","x","translateY","y","event","nativeEvent","layout"],"sources":["CurrentAnimatedText.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet, View } from 'react-native';\nimport Animated, {\n runOnJS,\n useAnimatedStyle,\n useDerivedValue,\n} from 'react-native-reanimated';\nimport type { DrawItem } from '../../types';\n\nconst styles = StyleSheet.create({\n textBackground: {\n marginHorizontal: 10,\n backgroundColor: 'rgba(0, 0, 0, 0.6)',\n borderRadius: 10,\n paddingVertical: 13,\n paddingHorizontal: 18,\n },\n markerContainerLeft: {\n position: 'absolute',\n left: 5,\n height: '100%',\n justifyContent: 'center',\n },\n markerContainerRight: {\n position: 'absolute',\n right: 5,\n height: '100%',\n justifyContent: 'center',\n },\n marker: {\n width: 10,\n height: 10,\n borderRadius: 10,\n backgroundColor: '#3a6cff',\n borderWidth: 1,\n borderColor: 'white',\n },\n});\n\n/**\n * There is an issue on re-render for ForeignObject (see https://github.com/react-native-svg/react-native-svg/issues/1357)\n * So we cannot embed this component directly in the Svg\n */\nexport default function CurrentAnimatedText({\n currentItem,\n onHeightChange,\n}: {\n currentItem: Animated.SharedValue<DrawItem | null>;\n onHeightChange: (height: number) => void;\n}) {\n const [text, setText] = useState(\n currentItem.value?.type === 'text' ? currentItem.value.text || '' : ''\n );\n\n useDerivedValue(() => {\n runOnJS(setText)(\n currentItem.value?.type === 'text' ? currentItem.value.text || '' : ''\n );\n }, [currentItem.value]);\n\n const textAnimatedStyle = useAnimatedStyle(() => {\n return {\n fontSize: 16 + (currentItem.value?.strokeWidth ?? 0),\n color: 'white',\n };\n }, [currentItem.value?.strokeWidth]);\n\n const containerStyle = useAnimatedStyle(() => {\n return {\n opacity: currentItem.value?.type === 'text' ? 1 : 0,\n height: currentItem.value?.type === 'text' ? 'auto' : -10,\n width:\n (currentItem.value?.type === 'text' &&\n (typeof currentItem.value.data.width === 'string'\n ? parseFloat(currentItem.value.data.width)\n : currentItem.value.data.width)) ||\n 0,\n position: 'absolute',\n top: 0,\n left: 0,\n transform: [\n {\n translateX:\n (currentItem.value?.type === 'text' &&\n (typeof currentItem.value.data.x === 'string'\n ? parseFloat(currentItem.value.data.x)\n : currentItem.value.data.x)) ||\n 0,\n },\n {\n translateY:\n (currentItem.value?.type === 'text' &&\n (typeof currentItem.value.data.y === 'string'\n ? parseFloat(currentItem.value.data.y)\n : currentItem.value.data.y)) ||\n 0,\n },\n ],\n };\n }, [currentItem.value]);\n\n return (\n <Animated.View style={containerStyle}>\n <View\n style={styles.textBackground}\n onLayout={(event) => {\n onHeightChange(event.nativeEvent.layout.height);\n }}\n >\n <Animated.Text style={textAnimatedStyle}>{text}</Animated.Text>\n </View>\n <View style={styles.markerContainerLeft}>\n <View style={styles.marker} />\n </View>\n <View style={styles.markerContainerRight}>\n <View style={styles.marker} />\n </View>\n </Animated.View>\n );\n}\n"],"mappings":"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"}
@@ -4,12 +4,13 @@ import CurrentAnimatedItem from './CurrentAnimatedItem';
4
4
  import CurrentAnimatedText from './CurrentAnimatedText';
5
5
  import Item from './Item';
6
6
 
7
- const DrawPad = ({
8
- currentItem,
9
- doneItems,
10
- onPressItem,
11
- onTextHeightChange
12
- }) => {
7
+ const DrawPad = _ref => {
8
+ let {
9
+ currentItem,
10
+ doneItems,
11
+ onPressItem,
12
+ onTextHeightChange
13
+ } = _ref;
13
14
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Svg, {
14
15
  fillRule: "evenodd"
15
16
  }, /*#__PURE__*/React.createElement(Defs, null, /*#__PURE__*/React.createElement(Circle, {
@@ -50,13 +51,13 @@ const DrawPad = ({
50
51
  orient: "auto"
51
52
  }, /*#__PURE__*/React.createElement(Use, {
52
53
  href: "#selectionIndicator"
53
- }))), /*#__PURE__*/React.createElement(CurrentAnimatedItem, {
54
- currentItem: currentItem
55
- }), doneItems.map((item, index) => /*#__PURE__*/React.createElement(Item, {
54
+ }))), doneItems.map((item, index) => /*#__PURE__*/React.createElement(Item, {
56
55
  key: index,
57
56
  item: item,
58
57
  onPress: onPressItem(item, index)
59
- }))), /*#__PURE__*/React.createElement(CurrentAnimatedText, {
58
+ })), /*#__PURE__*/React.createElement(CurrentAnimatedItem, {
59
+ currentItem: currentItem
60
+ })), /*#__PURE__*/React.createElement(CurrentAnimatedText, {
60
61
  currentItem: currentItem,
61
62
  onHeightChange: onTextHeightChange
62
63
  }));
@@ -1 +1 @@
1
- {"version":3,"sources":["DrawPad.tsx"],"names":["React","Svg","Circle","Defs","Marker","Polyline","Use","CurrentAnimatedItem","CurrentAnimatedText","Item","DrawPad","currentItem","doneItems","onPressItem","onTextHeightChange","map","item","index"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAEA,OAAOC,GAAP,IACEC,MADF,EAEEC,IAFF,EAGEC,MAHF,EAKEC,QALF,EAMEC,GANF,QAOO,kBAPP;AAQA,OAAOC,mBAAP,MAAgC,uBAAhC;AACA,OAAOC,mBAAP,MAAgC,uBAAhC;AACA,OAAOC,IAAP,MAAiB,QAAjB;;AAGA,MAAMC,OAAO,GAAG,CAAC;AACfC,EAAAA,WADe;AAEfC,EAAAA,SAFe;AAGfC,EAAAA,WAHe;AAIfC,EAAAA;AAJe,CAAD,KAUV;AACJ,sBACE,uDACE,oBAAC,GAAD;AAAK,IAAA,QAAQ,EAAC;AAAd,kBACE,oBAAC,IAAD,qBACE,oBAAC,MAAD;AACE,IAAA,EAAE,EAAC,oBADL;AAEE,IAAA,IAAI,EAAC,SAFP;AAGE,IAAA,CAAC,EAAE,CAHL;AAIE,IAAA,EAAE,EAAE,CAJN;AAKE,IAAA,EAAE,EAAE,CALN;AAME,IAAA,WAAW,EAAE,CANf;AAOE,IAAA,MAAM,EAAC;AAPT,IADF,eAUE,oBAAC,MAAD;AACE,IAAA,EAAE,EAAC,WADL;AAEE,IAAA,WAAW,EAAE,aAFf;AAGE,IAAA,IAAI,EAAC,GAHP;AAIE,IAAA,IAAI,EAAC,GAJP;AAKE,IAAA,MAAM,EAAC;AALT,kBAOE,oBAAC,QAAD;AACE,IAAA,MAAM,EAAC,oBADT;AAEE,IAAA,MAAM,EAAC,gBAFT;AAGE,IAAA,aAAa,EAAC,OAHhB;AAIE,IAAA,cAAc,EAAC;AAJjB,IAPF,CAVF,eAyBE,oBAAC,MAAD;AACE,IAAA,EAAE,EAAC,MADL;AAEE,IAAA,WAAW,EAAE,aAFf;AAGE,IAAA,IAAI,EAAC,GAHP;AAIE,IAAA,IAAI,EAAC,GAJP;AAKE,IAAA,MAAM,EAAC;AALT,kBAOE,oBAAC,QAAD;AACE,IAAA,MAAM,EAAC,gBADT;AAEE,IAAA,MAAM,EAAC,cAFT;AAGE,IAAA,aAAa,EAAC,OAHhB;AAIE,IAAA,cAAc,EAAC;AAJjB,IAPF,CAzBF,eAwCE,oBAAC,MAAD;AACE,IAAA,EAAE,EAAC,WADL;AAEE,IAAA,WAAW,EAAE,gBAFf;AAGE,IAAA,IAAI,EAAC,GAHP;AAIE,IAAA,IAAI,EAAC,GAJP;AAKE,IAAA,MAAM,EAAC;AALT,kBAOE,oBAAC,GAAD;AAAK,IAAA,IAAI,EAAC;AAAV,IAPF,CAxCF,CADF,eAoDE,oBAAC,mBAAD;AAAqB,IAAA,WAAW,EAAEH;AAAlC,IApDF,EAsDGC,SAAS,CAACG,GAAV,CAAc,CAACC,IAAD,EAAOC,KAAP,kBACb,oBAAC,IAAD;AAAM,IAAA,GAAG,EAAEA,KAAX;AAAkB,IAAA,IAAI,EAAED,IAAxB;AAA8B,IAAA,OAAO,EAAEH,WAAW,CAACG,IAAD,EAAOC,KAAP;AAAlD,IADD,CAtDH,CADF,eA4DE,oBAAC,mBAAD;AACE,IAAA,WAAW,EAAEN,WADf;AAEE,IAAA,cAAc,EAAEG;AAFlB,IA5DF,CADF;AAmED,CA9ED;;AAgFA,eAAeJ,OAAf","sourcesContent":["import React from 'react';\nimport type Animated from 'react-native-reanimated';\nimport Svg, {\n Circle,\n Defs,\n Marker,\n MarkerUnits,\n Polyline,\n Use,\n} from 'react-native-svg';\nimport CurrentAnimatedItem from './CurrentAnimatedItem';\nimport CurrentAnimatedText from './CurrentAnimatedText';\nimport Item from './Item';\nimport type { DrawItem } from '../../types';\n\nconst DrawPad = ({\n currentItem,\n doneItems,\n onPressItem,\n onTextHeightChange,\n}: {\n currentItem: Animated.SharedValue<DrawItem | null>;\n doneItems: Array<DrawItem>;\n onPressItem: (item: DrawItem, index: number) => () => void;\n onTextHeightChange: (height: number) => void;\n}) => {\n return (\n <>\n <Svg fillRule=\"evenodd\">\n <Defs>\n <Circle\n id=\"selectionIndicator\"\n fill=\"#3a6cff\"\n r={5}\n cx={0}\n cy={0}\n strokeWidth={1}\n stroke=\"white\"\n />\n <Marker\n id=\"arrowhead\"\n markerUnits={'strokeWidth' as MarkerUnits}\n refX=\"0\"\n refY=\"0\"\n orient=\"auto\"\n >\n <Polyline\n points=\"-2,-2 0,0 -2,2 0,0\"\n stroke=\"context-stroke\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </Marker>\n\n <Marker\n id=\"side\"\n markerUnits={'strokeWidth' as MarkerUnits}\n refX=\"0\"\n refY=\"0\"\n orient=\"auto\"\n >\n <Polyline\n stroke=\"context-stroke\"\n points=\"0,-2 0,2 0,0\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </Marker>\n\n <Marker\n id=\"selection\"\n markerUnits={'userSpaceOnUse' as MarkerUnits}\n refX=\"0\"\n refY=\"0\"\n orient=\"auto\"\n >\n <Use href=\"#selectionIndicator\" />\n </Marker>\n </Defs>\n\n <CurrentAnimatedItem currentItem={currentItem} />\n\n {doneItems.map((item, index) => (\n <Item key={index} item={item} onPress={onPressItem(item, index)} />\n ))}\n </Svg>\n\n <CurrentAnimatedText\n currentItem={currentItem}\n onHeightChange={onTextHeightChange}\n />\n </>\n );\n};\n\nexport default DrawPad;\n"]}
1
+ {"version":3,"names":["React","Svg","Circle","Defs","Marker","Polyline","Use","CurrentAnimatedItem","CurrentAnimatedText","Item","DrawPad","currentItem","doneItems","onPressItem","onTextHeightChange","map","item","index"],"sources":["DrawPad.tsx"],"sourcesContent":["import React from 'react';\nimport type Animated from 'react-native-reanimated';\nimport Svg, {\n Circle,\n Defs,\n Marker,\n MarkerUnits,\n Polyline,\n Use,\n} from 'react-native-svg';\nimport CurrentAnimatedItem from './CurrentAnimatedItem';\nimport CurrentAnimatedText from './CurrentAnimatedText';\nimport Item from './Item';\nimport type { DrawItem } from '../../types';\n\nconst DrawPad = ({\n currentItem,\n doneItems,\n onPressItem,\n onTextHeightChange,\n}: {\n currentItem: Animated.SharedValue<DrawItem | null>;\n doneItems: Array<DrawItem>;\n onPressItem: (item: DrawItem, index: number) => () => void;\n onTextHeightChange: (height: number) => void;\n}) => {\n return (\n <>\n <Svg fillRule=\"evenodd\">\n <Defs>\n <Circle\n id=\"selectionIndicator\"\n fill=\"#3a6cff\"\n r={5}\n cx={0}\n cy={0}\n strokeWidth={1}\n stroke=\"white\"\n />\n <Marker\n id=\"arrowhead\"\n markerUnits={'strokeWidth' as MarkerUnits}\n refX=\"0\"\n refY=\"0\"\n orient=\"auto\"\n >\n <Polyline\n points=\"-2,-2 0,0 -2,2 0,0\"\n stroke=\"context-stroke\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </Marker>\n\n <Marker\n id=\"side\"\n markerUnits={'strokeWidth' as MarkerUnits}\n refX=\"0\"\n refY=\"0\"\n orient=\"auto\"\n >\n <Polyline\n stroke=\"context-stroke\"\n points=\"0,-2 0,2 0,0\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </Marker>\n\n <Marker\n id=\"selection\"\n markerUnits={'userSpaceOnUse' as MarkerUnits}\n refX=\"0\"\n refY=\"0\"\n orient=\"auto\"\n >\n <Use href=\"#selectionIndicator\" />\n </Marker>\n </Defs>\n\n {doneItems.map((item, index) => (\n <Item key={index} item={item} onPress={onPressItem(item, index)} />\n ))}\n\n <CurrentAnimatedItem currentItem={currentItem} />\n </Svg>\n\n <CurrentAnimatedText\n currentItem={currentItem}\n onHeightChange={onTextHeightChange}\n />\n </>\n );\n};\n\nexport default DrawPad;\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAEA,OAAOC,GAAP,IACEC,MADF,EAEEC,IAFF,EAGEC,MAHF,EAKEC,QALF,EAMEC,GANF,QAOO,kBAPP;AAQA,OAAOC,mBAAP,MAAgC,uBAAhC;AACA,OAAOC,mBAAP,MAAgC,uBAAhC;AACA,OAAOC,IAAP,MAAiB,QAAjB;;AAGA,MAAMC,OAAO,GAAG,QAUV;EAAA,IAVW;IACfC,WADe;IAEfC,SAFe;IAGfC,WAHe;IAIfC;EAJe,CAUX;EACJ,oBACE,uDACE,oBAAC,GAAD;IAAK,QAAQ,EAAC;EAAd,gBACE,oBAAC,IAAD,qBACE,oBAAC,MAAD;IACE,EAAE,EAAC,oBADL;IAEE,IAAI,EAAC,SAFP;IAGE,CAAC,EAAE,CAHL;IAIE,EAAE,EAAE,CAJN;IAKE,EAAE,EAAE,CALN;IAME,WAAW,EAAE,CANf;IAOE,MAAM,EAAC;EAPT,EADF,eAUE,oBAAC,MAAD;IACE,EAAE,EAAC,WADL;IAEE,WAAW,EAAE,aAFf;IAGE,IAAI,EAAC,GAHP;IAIE,IAAI,EAAC,GAJP;IAKE,MAAM,EAAC;EALT,gBAOE,oBAAC,QAAD;IACE,MAAM,EAAC,oBADT;IAEE,MAAM,EAAC,gBAFT;IAGE,aAAa,EAAC,OAHhB;IAIE,cAAc,EAAC;EAJjB,EAPF,CAVF,eAyBE,oBAAC,MAAD;IACE,EAAE,EAAC,MADL;IAEE,WAAW,EAAE,aAFf;IAGE,IAAI,EAAC,GAHP;IAIE,IAAI,EAAC,GAJP;IAKE,MAAM,EAAC;EALT,gBAOE,oBAAC,QAAD;IACE,MAAM,EAAC,gBADT;IAEE,MAAM,EAAC,cAFT;IAGE,aAAa,EAAC,OAHhB;IAIE,cAAc,EAAC;EAJjB,EAPF,CAzBF,eAwCE,oBAAC,MAAD;IACE,EAAE,EAAC,WADL;IAEE,WAAW,EAAE,gBAFf;IAGE,IAAI,EAAC,GAHP;IAIE,IAAI,EAAC,GAJP;IAKE,MAAM,EAAC;EALT,gBAOE,oBAAC,GAAD;IAAK,IAAI,EAAC;EAAV,EAPF,CAxCF,CADF,EAoDGF,SAAS,CAACG,GAAV,CAAc,CAACC,IAAD,EAAOC,KAAP,kBACb,oBAAC,IAAD;IAAM,GAAG,EAAEA,KAAX;IAAkB,IAAI,EAAED,IAAxB;IAA8B,OAAO,EAAEH,WAAW,CAACG,IAAD,EAAOC,KAAP;EAAlD,EADD,CApDH,eAwDE,oBAAC,mBAAD;IAAqB,WAAW,EAAEN;EAAlC,EAxDF,CADF,eA4DE,oBAAC,mBAAD;IACE,WAAW,EAAEA,WADf;IAEE,cAAc,EAAEG;EAFlB,EA5DF,CADF;AAmED,CA9ED;;AAgFA,eAAeJ,OAAf"}
@@ -1,13 +1,9 @@
1
- function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
1
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
2
2
 
3
3
  import React from 'react';
4
4
  import { View, Text, StyleSheet } from 'react-native';
5
5
  import { G, Line, Ellipse, Rect, Path, ForeignObject } from 'react-native-svg';
6
-
7
- const transformPointsToPath = points => {
8
- return points.length > 0 ? points.reduce((acc, point) => `${acc} L ${point.x},${point.y}`, `M ${points[0].x},${points[0].y}`) : '';
9
- };
10
-
6
+ import { pointsToPath } from './CurrentAnimatedItem';
11
7
  const styles = StyleSheet.create({
12
8
  textZone: {
13
9
  paddingHorizontal: 10
@@ -22,10 +18,12 @@ const styles = StyleSheet.create({
22
18
  color: 'white'
23
19
  }
24
20
  });
25
- export default function Item({
26
- item,
27
- onPress
28
- }) {
21
+ export default function Item(_ref) {
22
+ let {
23
+ item,
24
+ onPress
25
+ } = _ref;
26
+
29
27
  switch (item.type) {
30
28
  case 'singleHead':
31
29
  return /*#__PURE__*/React.createElement(G, {
@@ -66,7 +64,7 @@ export default function Item({
66
64
 
67
65
  case 'pen':
68
66
  return /*#__PURE__*/React.createElement(Path, {
69
- d: transformPointsToPath(item.data),
67
+ d: pointsToPath(item.data),
70
68
  stroke: item.color,
71
69
  fill: "none",
72
70
  strokeWidth: item.strokeWidth,
@@ -1 +1 @@
1
- {"version":3,"sources":["Item.tsx"],"names":["React","View","Text","StyleSheet","G","Line","Ellipse","Rect","Path","ForeignObject","transformPointsToPath","points","length","reduce","acc","point","x","y","styles","create","textZone","paddingHorizontal","textContainer","backgroundColor","borderRadius","paddingVertical","text","color","Item","item","onPress","type","data","strokeWidth","width","fontSize"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { View, Text, StyleSheet } from 'react-native';\nimport { G, Line, Ellipse, Rect, Path, ForeignObject } from 'react-native-svg';\nimport type { DrawItem, Point } from '../../types';\n\nconst transformPointsToPath = (points: Point[]) => {\n return points.length > 0\n ? points.reduce(\n (acc, point) => `${acc} L ${point.x},${point.y}`,\n `M ${points[0].x},${points[0].y}`\n )\n : '';\n};\n\nconst styles = StyleSheet.create({\n textZone: {\n paddingHorizontal: 10,\n },\n textContainer: {\n backgroundColor: 'rgba(0, 0, 0, 0.6)',\n borderRadius: 10,\n paddingVertical: 13,\n paddingHorizontal: 18,\n },\n text: {\n color: 'white',\n },\n});\n\nexport default function Item({\n item,\n onPress,\n}: {\n item: DrawItem;\n onPress: () => void;\n}) {\n switch (item.type) {\n case 'singleHead':\n return (\n <G onPressIn={onPress}>\n <Line\n {...item.data}\n fill=\"none\"\n stroke={item.color}\n strokeWidth={item.strokeWidth}\n markerEnd=\"url(#arrowhead)\"\n />\n </G>\n );\n case 'doubleHead':\n return (\n <G onPressIn={onPress}>\n <Line\n {...item.data}\n fill=\"none\"\n stroke={item.color}\n strokeWidth={item.strokeWidth}\n markerStart=\"url(#side)\"\n markerEnd=\"url(#side)\"\n />\n </G>\n );\n case 'ellipse':\n return (\n <Ellipse\n {...item.data}\n fill=\"none\"\n stroke={item.color}\n strokeWidth={item.strokeWidth}\n onPress={onPress}\n />\n );\n case 'rectangle':\n return (\n <Rect\n {...item.data}\n fill=\"none\"\n stroke={item.color}\n strokeWidth={item.strokeWidth}\n onPress={onPress}\n />\n );\n case 'pen':\n return (\n <Path\n d={transformPointsToPath(item.data)}\n stroke={item.color}\n fill=\"none\"\n strokeWidth={item.strokeWidth}\n onPress={onPress}\n />\n );\n case 'text':\n return (\n <G onPress={onPress}>\n <Rect {...item.data} onPress={onPress} />\n <ForeignObject\n x={item.data.x}\n y={item.data.y}\n width={item.data.width}\n key={item.text}\n >\n <View\n style={[\n styles.textZone,\n {\n width: item.data.width,\n },\n ]}\n >\n <View style={styles.textContainer}>\n <Text\n style={[\n styles.text,\n {\n fontSize: 14 + item.strokeWidth,\n },\n ]}\n >\n {item.text}\n </Text>\n </View>\n </View>\n </ForeignObject>\n </G>\n );\n\n default:\n return null;\n }\n}\n"]}
1
+ {"version":3,"names":["React","View","Text","StyleSheet","G","Line","Ellipse","Rect","Path","ForeignObject","pointsToPath","styles","create","textZone","paddingHorizontal","textContainer","backgroundColor","borderRadius","paddingVertical","text","color","Item","item","onPress","type","data","strokeWidth","x","y","width","fontSize"],"sources":["Item.tsx"],"sourcesContent":["import React from 'react';\nimport { View, Text, StyleSheet } from 'react-native';\nimport { G, Line, Ellipse, Rect, Path, ForeignObject } from 'react-native-svg';\nimport type { DrawItem } from '../../types';\nimport { pointsToPath } from './CurrentAnimatedItem';\n\nconst styles = StyleSheet.create({\n textZone: {\n paddingHorizontal: 10,\n },\n textContainer: {\n backgroundColor: 'rgba(0, 0, 0, 0.6)',\n borderRadius: 10,\n paddingVertical: 13,\n paddingHorizontal: 18,\n },\n text: {\n color: 'white',\n },\n});\n\nexport default function Item({\n item,\n onPress,\n}: {\n item: DrawItem;\n onPress: () => void;\n}) {\n switch (item.type) {\n case 'singleHead':\n return (\n <G onPressIn={onPress}>\n <Line\n {...item.data}\n fill=\"none\"\n stroke={item.color}\n strokeWidth={item.strokeWidth}\n markerEnd=\"url(#arrowhead)\"\n />\n </G>\n );\n case 'doubleHead':\n return (\n <G onPressIn={onPress}>\n <Line\n {...item.data}\n fill=\"none\"\n stroke={item.color}\n strokeWidth={item.strokeWidth}\n markerStart=\"url(#side)\"\n markerEnd=\"url(#side)\"\n />\n </G>\n );\n case 'ellipse':\n return (\n <Ellipse\n {...item.data}\n fill=\"none\"\n stroke={item.color}\n strokeWidth={item.strokeWidth}\n onPress={onPress}\n />\n );\n case 'rectangle':\n return (\n <Rect\n {...item.data}\n fill=\"none\"\n stroke={item.color}\n strokeWidth={item.strokeWidth}\n onPress={onPress}\n />\n );\n case 'pen':\n return (\n <Path\n d={pointsToPath(item.data)}\n stroke={item.color}\n fill=\"none\"\n strokeWidth={item.strokeWidth}\n onPress={onPress}\n />\n );\n case 'text':\n return (\n <G onPress={onPress}>\n <Rect {...item.data} onPress={onPress} />\n <ForeignObject\n x={item.data.x}\n y={item.data.y}\n width={item.data.width}\n key={item.text}\n >\n <View\n style={[\n styles.textZone,\n {\n width: item.data.width,\n },\n ]}\n >\n <View style={styles.textContainer}>\n <Text\n style={[\n styles.text,\n {\n fontSize: 14 + item.strokeWidth,\n },\n ]}\n >\n {item.text}\n </Text>\n </View>\n </View>\n </ForeignObject>\n </G>\n );\n\n default:\n return null;\n }\n}\n"],"mappings":"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"}
@@ -31,11 +31,13 @@ const styles = StyleSheet.create({
31
31
  }
32
32
  });
33
33
 
34
- const StrokeSlider = ({
35
- minValue,
36
- maxValue,
37
- stroke
38
- }) => {
34
+ const StrokeSlider = _ref => {
35
+ let {
36
+ minValue,
37
+ maxValue,
38
+ stroke,
39
+ onStrokeChange
40
+ } = _ref;
39
41
  const sliderHeight = useSharedValue(0);
40
42
  const [text, setText] = useState(stroke.value);
41
43
  const position = useDerivedValue(() => {
@@ -43,19 +45,24 @@ const StrokeSlider = ({
43
45
  return sliderHeight.value / (maxValue - minValue) * (stroke.value - minValue);
44
46
  });
45
47
  const onGestureEvent = useAnimatedGestureHandler({
46
- onStart: ({
47
- y
48
- }, ctx) => {
48
+ onStart: (_ref2, ctx) => {
49
+ let {
50
+ y
51
+ } = _ref2;
49
52
  ctx.startY = y;
50
53
  },
51
- onActive: ({
52
- translationY
53
- }, {
54
- startY
55
- }) => {
54
+ onActive: (_ref3, _ref4) => {
55
+ let {
56
+ translationY
57
+ } = _ref3;
58
+ let {
59
+ startY
60
+ } = _ref4;
56
61
  stroke.value = Math.min(maxValue, Math.max(minValue, (startY + translationY) / sliderHeight.value * (maxValue - minValue) + minValue));
57
62
  },
58
- onEnd: () => {}
63
+ onEnd: () => {
64
+ runOnJS(onStrokeChange)();
65
+ }
59
66
  }, []);
60
67
  const style = useAnimatedStyle(() => {
61
68
  return {
@@ -1 +1 @@
1
- {"version":3,"sources":["StrokeSlider.tsx"],"names":["React","useState","PanGestureHandler","Animated","runOnJS","useAnimatedGestureHandler","useAnimatedStyle","useDerivedValue","useSharedValue","View","StyleSheet","Text","TRACK_R","styles","create","container","flex","alignItems","width","thumb","position","height","borderRadius","top","backgroundColor","track","textIndicator","color","fontSize","marginTop","fontWeight","StrokeSlider","minValue","maxValue","stroke","sliderHeight","text","setText","value","Math","round","onGestureEvent","onStart","y","ctx","startY","onActive","translationY","min","max","onEnd","style","transform","translateY","event","nativeEvent","layout"],"mappings":"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","sourcesContent":["import React, { useState } from 'react';\nimport {\n PanGestureHandler,\n PanGestureHandlerGestureEvent,\n} from 'react-native-gesture-handler';\nimport Animated, {\n runOnJS,\n useAnimatedGestureHandler,\n useAnimatedStyle,\n useDerivedValue,\n useSharedValue,\n} from 'react-native-reanimated';\nimport { View, StyleSheet, Text } from 'react-native';\n\nconst TRACK_R = 10;\n\nconst styles = StyleSheet.create({\n container: {\n flex: 1,\n alignItems: 'center',\n width: '100%',\n },\n thumb: {\n position: 'absolute',\n width: TRACK_R * 2,\n height: TRACK_R * 2,\n borderRadius: TRACK_R,\n top: 0,\n backgroundColor: 'white',\n },\n track: {\n width: 10,\n flex: 1,\n borderRadius: 5,\n backgroundColor: 'black',\n },\n textIndicator: {\n color: 'white',\n fontSize: 14,\n marginTop: 10,\n fontWeight: 'bold',\n },\n});\n\nconst StrokeSlider = ({\n minValue,\n maxValue,\n stroke,\n}: {\n minValue: number;\n maxValue: number;\n stroke: Animated.SharedValue<number>;\n}) => {\n const sliderHeight = useSharedValue(0);\n\n const [text, setText] = useState(stroke.value);\n\n const position = useDerivedValue(() => {\n runOnJS(setText)(Math.round(stroke.value));\n return (\n (sliderHeight.value / (maxValue - minValue)) * (stroke.value - minValue)\n );\n });\n\n const onGestureEvent = useAnimatedGestureHandler<\n PanGestureHandlerGestureEvent,\n { startY: number }\n >(\n {\n onStart: ({ y }, ctx) => {\n ctx.startY = y;\n },\n onActive: ({ translationY }, { startY }) => {\n stroke.value = Math.min(\n maxValue,\n Math.max(\n minValue,\n ((startY + translationY) / sliderHeight.value) *\n (maxValue - minValue) +\n minValue\n )\n );\n },\n onEnd: () => {},\n },\n []\n );\n\n const style = useAnimatedStyle(() => {\n return {\n transform: [{ translateY: position.value - TRACK_R }],\n };\n }, [position.value]);\n\n return (\n <View style={styles.container}>\n <PanGestureHandler onGestureEvent={onGestureEvent}>\n <Animated.View style={styles.container}>\n <View\n onLayout={(event) => {\n sliderHeight.value = event.nativeEvent.layout.height;\n }}\n style={styles.track}\n />\n <Animated.View style={[styles.thumb, style]} />\n </Animated.View>\n </PanGestureHandler>\n <Text style={styles.textIndicator}>{text}</Text>\n </View>\n );\n};\n\nexport default StrokeSlider;\n"]}
1
+ {"version":3,"names":["React","useState","PanGestureHandler","Animated","runOnJS","useAnimatedGestureHandler","useAnimatedStyle","useDerivedValue","useSharedValue","View","StyleSheet","Text","TRACK_R","styles","create","container","flex","alignItems","width","thumb","position","height","borderRadius","top","backgroundColor","track","textIndicator","color","fontSize","marginTop","fontWeight","StrokeSlider","minValue","maxValue","stroke","onStrokeChange","sliderHeight","text","setText","value","Math","round","onGestureEvent","onStart","ctx","y","startY","onActive","translationY","min","max","onEnd","style","transform","translateY","event","nativeEvent","layout"],"sources":["StrokeSlider.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport {\n PanGestureHandler,\n PanGestureHandlerGestureEvent,\n} from 'react-native-gesture-handler';\nimport Animated, {\n runOnJS,\n useAnimatedGestureHandler,\n useAnimatedStyle,\n useDerivedValue,\n useSharedValue,\n} from 'react-native-reanimated';\nimport { View, StyleSheet, Text } from 'react-native';\n\nconst TRACK_R = 10;\n\nconst styles = StyleSheet.create({\n container: {\n flex: 1,\n alignItems: 'center',\n width: '100%',\n },\n thumb: {\n position: 'absolute',\n width: TRACK_R * 2,\n height: TRACK_R * 2,\n borderRadius: TRACK_R,\n top: 0,\n backgroundColor: 'white',\n },\n track: {\n width: 10,\n flex: 1,\n borderRadius: 5,\n backgroundColor: 'black',\n },\n textIndicator: {\n color: 'white',\n fontSize: 14,\n marginTop: 10,\n fontWeight: 'bold',\n },\n});\n\nconst StrokeSlider = ({\n minValue,\n maxValue,\n stroke,\n onStrokeChange,\n}: {\n minValue: number;\n maxValue: number;\n stroke: Animated.SharedValue<number>;\n onStrokeChange: () => void;\n}) => {\n const sliderHeight = useSharedValue(0);\n\n const [text, setText] = useState(stroke.value);\n\n const position = useDerivedValue(() => {\n runOnJS(setText)(Math.round(stroke.value));\n return (\n (sliderHeight.value / (maxValue - minValue)) * (stroke.value - minValue)\n );\n });\n\n const onGestureEvent = useAnimatedGestureHandler<\n PanGestureHandlerGestureEvent,\n { startY: number }\n >(\n {\n onStart: ({ y }, ctx) => {\n ctx.startY = y;\n },\n onActive: ({ translationY }, { startY }) => {\n stroke.value = Math.min(\n maxValue,\n Math.max(\n minValue,\n ((startY + translationY) / sliderHeight.value) *\n (maxValue - minValue) +\n minValue\n )\n );\n },\n onEnd: () => {\n runOnJS(onStrokeChange)();\n },\n },\n []\n );\n\n const style = useAnimatedStyle(() => {\n return {\n transform: [{ translateY: position.value - TRACK_R }],\n };\n }, [position.value]);\n\n return (\n <View style={styles.container}>\n <PanGestureHandler onGestureEvent={onGestureEvent}>\n <Animated.View style={styles.container}>\n <View\n onLayout={(event) => {\n sliderHeight.value = event.nativeEvent.layout.height;\n }}\n style={styles.track}\n />\n <Animated.View style={[styles.thumb, style]} />\n </Animated.View>\n </PanGestureHandler>\n <Text style={styles.textIndicator}>{text}</Text>\n </View>\n );\n};\n\nexport default StrokeSlider;\n"],"mappings":"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"}