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

package/lib/commonjs/components/DrawCore/ColorSlider.js

@@ -48,10 +48,12 @@ const styles = _reactNative.StyleSheet.create({
   }
 });
 
-const ColorSlider = ({
-  color,
-  linearGradient: LinearGradient
-}) => {
+const ColorSlider = _ref => {
+  let {
+    color,
+    linearGradient: LinearGradient,
+    onColorChange
+  } = _ref;
   const sliderHeight = (0, _reactNativeReanimated.useSharedValue)(0);
   const position = (0, _reactNativeReanimated.useDerivedValue)(() => {
     const hslRegExp = new RegExp(/hsl\(([\d.]+),\s*(\d+)%,\s*([\d.]+)%\)/);
@@ -70,27 +72,32 @@ const ColorSlider = ({
     return Math.min(sliderHeight.value, Math.max(0, sliderHeight.value * 0.1 + tint * ((sliderHeight.value - sliderHeight.value * 0.2) / 360)));
   }, [sliderHeight.value]);
   const onGestureEvent = (0, _reactNativeReanimated.useAnimatedGestureHandler)({
-    onStart: ({
-      y
-    }, ctx) => {
+    onStart: (_ref2, ctx) => {
+      let {
+        y
+      } = _ref2;
       ctx.startY = y;
     },
-    onActive: ({
-      translationY
-    }, {
-      startY
-    }) => {
+    onActive: (_ref3, _ref4) => {
+      let {
+        translationY
+      } = _ref3;
+      let {
+        startY
+      } = _ref4;
       const slidePos = Math.min(sliderHeight.value, startY + translationY);
 
       if (slidePos < 0.1 * sliderHeight.value) {
-        color.value = `hsl(${0}, ${100}%, ${Math.min(100, 100 - slidePos / (0.1 * sliderHeight.value) * 50)}%)`;
+        color.value = `hsl(0, 100%, ${Math.min(100, 100 - slidePos / (0.1 * sliderHeight.value) * 50).toFixed(10)}%)`;
       } else if (slidePos > 0.9 * sliderHeight.value) {
-        color.value = `hsl(${0}, ${100}%, ${Math.max(50 - (slidePos - 0.9 * sliderHeight.value) / (0.1 * sliderHeight.value) * 50, 0)}%)`;
+        color.value = `hsl(0, 100%, ${Math.max(50 - (slidePos - 0.9 * sliderHeight.value) / (0.1 * sliderHeight.value) * 50, 0).toFixed(10)}%)`;
       } else {
-        color.value = `hsl(${(slidePos - sliderHeight.value * 0.1) / (sliderHeight.value - sliderHeight.value * 0.2) * 360}, ${100}%, ${50}%)`;
+        color.value = `hsl(${(slidePos - sliderHeight.value * 0.1) / (sliderHeight.value - sliderHeight.value * 0.2) * 360}, 100%, 50%)`;
       }
     },
-    onEnd: () => {}
+    onEnd: () => {
+      (0, _reactNativeReanimated.runOnJS)(onColorChange)();
+    }
   }, []);
   const style = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
     return {

package/lib/commonjs/components/DrawCore/ColorSlider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ColorSlider.tsx"],"names":["TRACK_R","gradientColors","styles","StyleSheet","create","container","flex","alignItems","width","thumb","position","height","borderRadius","top","backgroundColor","track","borderWidth","indicator","marginTop","ColorSlider","color","linearGradient","LinearGradient","sliderHeight","hslRegExp","RegExp","res","exec","value","lum","parseFloat","tint","Math","min","max","onGestureEvent","onStart","y","ctx","startY","onActive","translationY","slidePos","onEnd","style","transform","translateY","selectedColorStyle","onLayout","event","nativeEvent","layout"],"mappings":"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","sourcesContent":["import React, { useCallback } from 'react';\nimport { LayoutChangeEvent, StyleSheet, View, ViewProps } from 'react-native';\n\nimport {\n  PanGestureHandler,\n  PanGestureHandlerGestureEvent,\n} from 'react-native-gesture-handler';\nimport Animated, {\n  useAnimatedGestureHandler,\n  useAnimatedStyle,\n  useDerivedValue,\n  useSharedValue,\n} from 'react-native-reanimated';\nimport type { hslColor } from '../../types';\n\nconst TRACK_R = 10;\n\nconst gradientColors = [\n  'hsl(0, 100%, 100%) 00%',\n  'hsl(0, 100%, 50%) 10%',\n  'hsl(45, 100%, 50%) 20%',\n  'hsl(90, 100%, 50%) 30%',\n  'hsl(135, 100%, 50%) 40%',\n  'hsl(180, 100%, 50%) 50%',\n  'hsl(225, 100%, 50%) 60%',\n  'hsl(270, 100%, 50%) 70%',\n  'hsl(315, 100%, 50%) 80%',\n  'hsl(360, 100%, 50%) 90%',\n  'hsl(0, 100%, 0%) 100%  ',\n];\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: { width: 10, flex: 1, borderRadius: 5, borderWidth: 1 },\n  indicator: {\n    width: 22,\n    height: 22,\n    borderRadius: 22,\n    marginTop: 20,\n  },\n});\n\nconst ColorSlider = ({\n  color,\n  linearGradient: LinearGradient,\n}: {\n  color: Animated.SharedValue<hslColor>;\n  linearGradient: React.ComponentType<{ colors: any[] } & ViewProps>;\n}) => {\n  const sliderHeight = useSharedValue(0);\n\n  const position = useDerivedValue(() => {\n    const hslRegExp = new RegExp(/hsl\\(([\\d.]+),\\s*(\\d+)%,\\s*([\\d.]+)%\\)/);\n    const res = hslRegExp.exec(color.value);\n\n    const lum = res ? parseFloat(res[3]) : 0;\n\n    const tint = res ? parseFloat(res[1]) : 0;\n\n    if (lum > 50) {\n      return ((sliderHeight.value * 0.1) / 50) * (100 - lum);\n    }\n\n    if (lum < 50) {\n      return sliderHeight.value - ((sliderHeight.value * 0.1) / 50) * lum;\n    }\n\n    return Math.min(\n      sliderHeight.value,\n      Math.max(\n        0,\n        sliderHeight.value * 0.1 +\n          tint * ((sliderHeight.value - sliderHeight.value * 0.2) / 360)\n      )\n    );\n  }, [sliderHeight.value]);\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        const slidePos = Math.min(sliderHeight.value, startY + translationY);\n\n        if (slidePos < 0.1 * sliderHeight.value) {\n          color.value = `hsl(${0 as number}, ${100 as number}%, ${Math.min(\n            100,\n            100 - (slidePos / (0.1 * sliderHeight.value)) * 50\n          )}%)` as const;\n        } else if (slidePos > 0.9 * sliderHeight.value) {\n          color.value = `hsl(${0 as number}, ${100 as number}%, ${Math.max(\n            50 -\n              ((slidePos - 0.9 * sliderHeight.value) /\n                (0.1 * sliderHeight.value)) *\n                50,\n            0\n          )}%)` as const;\n        } else {\n          color.value = `hsl(${\n            ((slidePos - sliderHeight.value * 0.1) /\n              (sliderHeight.value - sliderHeight.value * 0.2)) *\n            360\n          }, ${100 as number}%, ${50 as number}%)` as const;\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  const selectedColorStyle = useAnimatedStyle(() => {\n    return {\n      backgroundColor: color.value,\n    };\n  }, [color.value]);\n\n  const onLayout = useCallback(\n    (event: LayoutChangeEvent) => {\n      sliderHeight.value = event.nativeEvent.layout.height;\n    },\n    [sliderHeight]\n  );\n\n  return (\n    <View style={styles.container}>\n      <PanGestureHandler onGestureEvent={onGestureEvent}>\n        <Animated.View style={styles.container}>\n          <LinearGradient\n            colors={gradientColors}\n            onLayout={onLayout}\n            style={styles.track}\n          />\n          <Animated.View style={[styles.thumb, style]} />\n        </Animated.View>\n      </PanGestureHandler>\n\n      <Animated.View style={[styles.indicator, selectedColorStyle]} />\n    </View>\n  );\n};\n\nexport default ColorSlider;\n"]}
+{"version":3,"names":["TRACK_R","gradientColors","styles","StyleSheet","create","container","flex","alignItems","width","thumb","position","height","borderRadius","top","backgroundColor","track","borderWidth","indicator","marginTop","ColorSlider","color","linearGradient","LinearGradient","onColorChange","sliderHeight","useSharedValue","useDerivedValue","hslRegExp","RegExp","res","exec","value","lum","parseFloat","tint","Math","min","max","onGestureEvent","useAnimatedGestureHandler","onStart","ctx","y","startY","onActive","translationY","slidePos","toFixed","onEnd","runOnJS","style","useAnimatedStyle","transform","translateY","selectedColorStyle","onLayout","useCallback","event","nativeEvent","layout"],"sources":["ColorSlider.tsx"],"sourcesContent":["import React, { useCallback } from 'react';\nimport { LayoutChangeEvent, StyleSheet, View, ViewProps } from 'react-native';\n\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 type { hslColor } from '../../types';\n\nconst TRACK_R = 10;\n\nconst gradientColors = [\n  'hsl(0, 100%, 100%) 00%',\n  'hsl(0, 100%, 50%) 10%',\n  'hsl(45, 100%, 50%) 20%',\n  'hsl(90, 100%, 50%) 30%',\n  'hsl(135, 100%, 50%) 40%',\n  'hsl(180, 100%, 50%) 50%',\n  'hsl(225, 100%, 50%) 60%',\n  'hsl(270, 100%, 50%) 70%',\n  'hsl(315, 100%, 50%) 80%',\n  'hsl(360, 100%, 50%) 90%',\n  'hsl(0, 100%, 0%) 100%  ',\n];\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: { width: 10, flex: 1, borderRadius: 5, borderWidth: 1 },\n  indicator: {\n    width: 22,\n    height: 22,\n    borderRadius: 22,\n    marginTop: 20,\n  },\n});\n\nconst ColorSlider = ({\n  color,\n  linearGradient: LinearGradient,\n  onColorChange,\n}: {\n  color: Animated.SharedValue<hslColor>;\n  linearGradient: React.ComponentType<{ colors: any[] } & ViewProps>;\n  onColorChange: () => void;\n}) => {\n  const sliderHeight = useSharedValue(0);\n\n  const position = useDerivedValue(() => {\n    const hslRegExp = new RegExp(/hsl\\(([\\d.]+),\\s*(\\d+)%,\\s*([\\d.]+)%\\)/);\n    const res = hslRegExp.exec(color.value);\n\n    const lum = res ? parseFloat(res[3]) : 0;\n\n    const tint = res ? parseFloat(res[1]) : 0;\n\n    if (lum > 50) {\n      return ((sliderHeight.value * 0.1) / 50) * (100 - lum);\n    }\n\n    if (lum < 50) {\n      return sliderHeight.value - ((sliderHeight.value * 0.1) / 50) * lum;\n    }\n\n    return Math.min(\n      sliderHeight.value,\n      Math.max(\n        0,\n        sliderHeight.value * 0.1 +\n          tint * ((sliderHeight.value - sliderHeight.value * 0.2) / 360)\n      )\n    );\n  }, [sliderHeight.value]);\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        const slidePos = Math.min(sliderHeight.value, startY + translationY);\n\n        if (slidePos < 0.1 * sliderHeight.value) {\n          color.value = `hsl(0, 100%, ${Math.min(\n            100,\n            100 - (slidePos / (0.1 * sliderHeight.value)) * 50\n          ).toFixed(10)}%)`;\n        } else if (slidePos > 0.9 * sliderHeight.value) {\n          color.value = `hsl(0, 100%, ${Math.max(\n            50 -\n              ((slidePos - 0.9 * sliderHeight.value) /\n                (0.1 * sliderHeight.value)) *\n                50,\n            0\n          ).toFixed(10)}%)`;\n        } else {\n          color.value = `hsl(${\n            ((slidePos - sliderHeight.value * 0.1) /\n              (sliderHeight.value - sliderHeight.value * 0.2)) *\n            360\n          }, 100%, 50%)`;\n        }\n      },\n      onEnd: () => {\n        runOnJS(onColorChange)();\n      },\n    },\n    []\n  );\n\n  const style = useAnimatedStyle(() => {\n    return {\n      transform: [{ translateY: position.value - TRACK_R }],\n    };\n  }, [position.value]);\n\n  const selectedColorStyle = useAnimatedStyle(() => {\n    return {\n      backgroundColor: color.value,\n    };\n  }, [color.value]);\n\n  const onLayout = useCallback(\n    (event: LayoutChangeEvent) => {\n      sliderHeight.value = event.nativeEvent.layout.height;\n    },\n    [sliderHeight]\n  );\n\n  return (\n    <View style={styles.container}>\n      <PanGestureHandler onGestureEvent={onGestureEvent}>\n        <Animated.View style={styles.container}>\n          <LinearGradient\n            colors={gradientColors}\n            onLayout={onLayout}\n            style={styles.track}\n          />\n          <Animated.View style={[styles.thumb, style]} />\n        </Animated.View>\n      </PanGestureHandler>\n\n      <Animated.View style={[styles.indicator, selectedColorStyle]} />\n    </View>\n  );\n};\n\nexport default ColorSlider;\n"],"mappings":"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"}

package/lib/commonjs/components/DrawCore/CurrentAnimatedItem.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = CurrentAnimatedItem;
+exports.pointsToPath = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -23,14 +24,62 @@ const AnimatedEllipse = _reactNativeReanimated.default.createAnimatedComponent(_
 
 const AnimatedRectangle = _reactNativeReanimated.default.createAnimatedComponent(_reactNativeSvg.Rect);
 
-const AnimatedLine = _reactNativeReanimated.default.createAnimatedComponent(_reactNativeSvg.Line);
+const AnimatedLine = _reactNativeReanimated.default.createAnimatedComponent(_reactNativeSvg.Line); // properties of a line
+
+
+const line = (pointA, pointB) => {
+  'worklet';
+
+  const lengthX = pointB.x - pointA.x;
+  const lengthY = pointB.y - pointA.y;
+  return {
+    length: Math.sqrt(Math.pow(lengthX, 2) + Math.pow(lengthY, 2)),
+    angle: Math.atan2(lengthY, lengthX)
+  };
+}; // position of a control point
+
+
+const controlPoint = (current, previous, next, reverse) => {
+  'worklet'; // When 'current' is the first or last point of the array, 'previous' or 'next' don't exist --> replace with 'current'
+
+  const p = previous || current;
+  const n = next || current;
+  const smoothing = 0.2; // Properties of the opposed-line
+
+  const o = line(p, n); // If is end-control-point, add PI to the angle to go backward
+
+  const angle = o.angle + (reverse ? Math.PI : 0);
+  const length = o.length * smoothing;
+  const x = current.x + Math.cos(angle) * length;
+  const y = current.y + Math.sin(angle) * length;
+  return {
+    x: x,
+    y: y
+  };
+}; // create the bezier curve command
+
+
+const bezierCommand = (point, i, a) => {
+  'worklet';
+
+  const endPoint = controlPoint(point, a[i - 1], a[i + 1], true);
+
+  if (i === 1) {
+    const startPoint = controlPoint(a[i - 1], a[i - 2], point, true);
+    return `C ${startPoint.x},${startPoint.y} ${endPoint.x},${endPoint.y} ${point.x},${point.y}`;
+  } else {
+    return `S ${endPoint.x},${endPoint.y} ${point.x},${point.y}`;
+  }
+};
 
 const pointsToPath = points => {
   'worklet';
 
-  return points.length > 0 ? points.reduce((acc, point) => `${acc} L ${point.x},${point.y}`, `M ${points[0].x},${points[0].y}`) : '';
+  return points.length > 0 ? points.reduce((acc, point, i, a) => i === 0 ? `M ${point.x},${point.y}` : `${acc} ${bezierCommand(point, i, a)}`, '') : '';
 };
 
+exports.pointsToPath = pointsToPath;
+
 function hue2rgb(p, q, t) {
   'worklet';
 
@@ -81,9 +130,10 @@ function hslToRgb(col) {
   return `rgb(${Math.round(r * 255)}, ${Math.round(g * 255)}, ${Math.round(b * 255)})`;
 }
 
-function CurrentAnimatedItem({
-  currentItem
-}) {
+function CurrentAnimatedItem(_ref) {
+  let {
+    currentItem
+  } = _ref;
   const ellipseAnimatedProps = (0, _reactNativeReanimated.useAnimatedProps)(() => {
     var _currentItem$value, _currentItem$value2, _currentItem$value3, _currentItem$value4;
 
@@ -168,11 +218,12 @@ function CurrentAnimatedItem({
   const penAnimatedProps = (0, _reactNativeReanimated.useAnimatedProps)(() => {
     var _currentItem$value17, _currentItem$value18, _currentItem$value19, _currentItem$value20;
 
+    const d = pointsToPath(((_currentItem$value17 = currentItem.value) === null || _currentItem$value17 === void 0 ? void 0 : _currentItem$value17.type) === 'pen' ? currentItem.value.data : [{
+      x: -10,
+      y: -10
+    }]);
     return {
-      d: pointsToPath(((_currentItem$value17 = currentItem.value) === null || _currentItem$value17 === void 0 ? void 0 : _currentItem$value17.type) === 'pen' ? currentItem.value.data : [{
-        x: -10,
-        y: -10
-      }]),
+      d: d,
       strokeWidth: ((_currentItem$value18 = currentItem.value) === null || _currentItem$value18 === void 0 ? void 0 : _currentItem$value18.type) === 'pen' ? currentItem.value.strokeWidth : 0,
       stroke: hslToRgb(((_currentItem$value19 = currentItem.value) === null || _currentItem$value19 === void 0 ? void 0 : _currentItem$value19.color) || 'hsl(0, 0%, 0%)'),
       opacity: ((_currentItem$value20 = currentItem.value) === null || _currentItem$value20 === void 0 ? void 0 : _currentItem$value20.type) === 'pen' ? 1 : 0,

package/lib/commonjs/components/DrawCore/CurrentAnimatedItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["CurrentAnimatedItem.tsx"],"names":["AnimatedPath","Animated","createAnimatedComponent","Path","AnimatedEllipse","Ellipse","AnimatedRectangle","Rect","AnimatedLine","Line","pointsToPath","points","length","reduce","acc","point","x","y","hue2rgb","p","q","t","hslToRgb","col","hslRegExp","RegExp","res","exec","h","parseFloat","s","l","r","g","b","Math","round","CurrentAnimatedItem","currentItem","ellipseAnimatedProps","coordinates","value","type","data","cx","cy","rx","ry","stroke","color","opacity","strokeWidth","marker","singleHeadAnimatedProps","x1","y1","x2","y2","markerEnd","doubleHeadAnimatedProps","markerStart","rectangleAnimatedProps","width","height","penAnimatedProps","d"],"mappings":"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","sourcesContent":["import React from 'react';\nimport Animated, { useAnimatedProps } from 'react-native-reanimated';\nimport { Path, Ellipse, Rect, Line, G } from 'react-native-svg';\nimport type { DrawItem, hslColor, Point } from '../../types';\n\nconst AnimatedPath = Animated.createAnimatedComponent(Path);\n\nconst AnimatedEllipse = Animated.createAnimatedComponent(Ellipse);\n\nconst AnimatedRectangle = Animated.createAnimatedComponent(Rect);\n\nconst AnimatedLine = Animated.createAnimatedComponent(Line);\n\nconst pointsToPath = (points: Point[]) => {\n  'worklet';\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\nfunction hue2rgb(p: number, q: number, t: number) {\n  'worklet';\n  if (t < 0) {\n    t += 1;\n  }\n  if (t > 1) {\n    t -= 1;\n  }\n  if (t < 1 / 6) {\n    return p + (q - p) * 6 * t;\n  }\n  if (t < 1 / 2) {\n    return q;\n  }\n  if (t < 2 / 3) {\n    return p + (q - p) * (2 / 3 - t) * 6;\n  }\n  return p;\n}\n\n// see https://github.com/software-mansion/react-native-reanimated/issues/1909\nfunction hslToRgb(col: hslColor) {\n  'worklet';\n  const hslRegExp = new RegExp(/hsl\\(([\\d.]+),\\s*(\\d+)%,\\s*([\\d.]+)%\\)/);\n  const res = hslRegExp.exec(col);\n\n  const h = res ? parseFloat(res[1]) / 360 : 0;\n  const s = res ? parseFloat(res[2]) / 100 : 0;\n  const l = res ? parseFloat(res[3]) / 100 : 0;\n\n  var r, g, b;\n\n  if (s === 0) {\n    r = g = b = l; // achromatic\n  } else {\n    var q = l < 0.5 ? l * (1 + s) : l + s - l * s;\n    var p = 2 * l - q;\n    r = hue2rgb(p, q, h + 1 / 3);\n    g = hue2rgb(p, q, h);\n    b = hue2rgb(p, q, h - 1 / 3);\n  }\n\n  return `rgb(${Math.round(r * 255)}, ${Math.round(g * 255)}, ${Math.round(\n    b * 255\n  )})`;\n}\n\nexport default function CurrentAnimatedItem({\n  currentItem,\n}: {\n  currentItem: Animated.SharedValue<DrawItem | null>;\n}) {\n  const ellipseAnimatedProps = useAnimatedProps(() => {\n    const coordinates =\n      currentItem.value?.type === 'ellipse'\n        ? currentItem.value.data\n        : { cx: -10, cy: -10, rx: 0, ry: 0 };\n\n    return {\n      cx: coordinates.cx,\n      cy: coordinates.cy,\n      rx: coordinates.rx,\n      ry: coordinates.ry,\n      stroke: hslToRgb(currentItem.value?.color || 'hsl(0, 0%, 0%)'),\n      opacity: currentItem.value?.type === 'ellipse' ? 1 : 0,\n      strokeWidth:\n        currentItem.value?.type === 'ellipse'\n          ? currentItem.value.strokeWidth\n          : 0,\n      marker: 'url(#selection)',\n    };\n  }, [currentItem.value]);\n\n  const singleHeadAnimatedProps = useAnimatedProps(() => {\n    const coordinates =\n      currentItem.value?.type === 'singleHead'\n        ? currentItem.value.data\n        : { x1: -10, y1: -10, x2: -10, y2: -10 };\n    return {\n      x1: coordinates.x1,\n      y1: coordinates.y1,\n      x2: coordinates.x2,\n      y2: coordinates.y2,\n      stroke: hslToRgb(currentItem.value?.color || 'hsl(0, 0%, 0%)'),\n      opacity: currentItem.value?.type === 'singleHead' ? 1 : 0,\n      strokeWidth:\n        currentItem.value?.type === 'singleHead'\n          ? currentItem.value.strokeWidth\n          : 0,\n      markerEnd: 'arrowhead',\n    };\n  }, [currentItem.value]);\n\n  const doubleHeadAnimatedProps = useAnimatedProps(() => {\n    const coordinates =\n      currentItem.value?.type === 'doubleHead'\n        ? currentItem.value.data\n        : { x1: -10, y1: -10, x2: -10, y2: -10 };\n\n    return {\n      x1: coordinates.x1,\n      y1: coordinates.y1,\n      x2: coordinates.x2,\n      y2: coordinates.y2,\n      stroke: hslToRgb(currentItem.value?.color || 'hsl(0, 0%, 0%)'),\n      opacity: currentItem.value?.type === 'doubleHead' ? 1 : 0,\n      strokeWidth:\n        currentItem.value?.type === 'doubleHead'\n          ? currentItem.value.strokeWidth\n          : 0,\n      markerStart: 'side',\n      markerEnd: 'side',\n    };\n  }, [currentItem.value]);\n\n  const rectangleAnimatedProps = useAnimatedProps(() => {\n    const coordinates =\n      currentItem.value?.type === 'rectangle'\n        ? currentItem.value.data\n        : { x: -10, y: -10, width: 0, height: 0 };\n    return {\n      x: coordinates.x,\n      y: coordinates.y,\n      width: coordinates.width,\n      height: coordinates.height,\n      stroke: hslToRgb(currentItem.value?.color || 'hsl(0, 0%, 0%)'),\n      opacity: currentItem.value?.type === 'rectangle' ? 1 : 0,\n      strokeWidth:\n        currentItem.value?.type === 'rectangle'\n          ? currentItem.value.strokeWidth\n          : 0,\n\n      marker: 'url(#selection)',\n    };\n  }, [currentItem.value]);\n\n  const penAnimatedProps = useAnimatedProps(() => {\n    return {\n      d: pointsToPath(\n        currentItem.value?.type === 'pen'\n          ? currentItem.value.data\n          : [{ x: -10, y: -10 }]\n      ),\n      strokeWidth:\n        currentItem.value?.type === 'pen' ? currentItem.value.strokeWidth : 0,\n      stroke: hslToRgb(currentItem.value?.color || 'hsl(0, 0%, 0%)'),\n      opacity: currentItem.value?.type === 'pen' ? 1 : 0,\n      markerStart: 'selection',\n      markerEnd: 'selection',\n    };\n  }, [currentItem.value]);\n\n  return (\n    <>\n      <AnimatedEllipse animatedProps={ellipseAnimatedProps} />\n      <G markerStart=\"url(#selection)\" markerEnd=\"url(#selection)\">\n        <AnimatedLine animatedProps={singleHeadAnimatedProps} />\n      </G>\n      <G markerStart=\"url(#selection)\" markerEnd=\"url(#selection)\">\n        <AnimatedLine animatedProps={doubleHeadAnimatedProps} />\n      </G>\n      <AnimatedRectangle animatedProps={rectangleAnimatedProps} />\n      <AnimatedPath animatedProps={penAnimatedProps} />\n    </>\n  );\n}\n"]}
+{"version":3,"names":["AnimatedPath","Animated","createAnimatedComponent","Path","AnimatedEllipse","Ellipse","AnimatedRectangle","Rect","AnimatedLine","Line","line","pointA","pointB","lengthX","x","lengthY","y","length","Math","sqrt","pow","angle","atan2","controlPoint","current","previous","next","reverse","p","n","smoothing","o","PI","cos","sin","bezierCommand","point","i","a","endPoint","startPoint","pointsToPath","points","reduce","acc","hue2rgb","q","t","hslToRgb","col","hslRegExp","RegExp","res","exec","h","parseFloat","s","l","r","g","b","round","CurrentAnimatedItem","currentItem","ellipseAnimatedProps","useAnimatedProps","coordinates","value","type","data","cx","cy","rx","ry","stroke","color","opacity","strokeWidth","marker","singleHeadAnimatedProps","x1","y1","x2","y2","markerEnd","doubleHeadAnimatedProps","markerStart","rectangleAnimatedProps","width","height","penAnimatedProps","d"],"sources":["CurrentAnimatedItem.tsx"],"sourcesContent":["import React from 'react';\nimport Animated, { useAnimatedProps } from 'react-native-reanimated';\nimport { Path, Ellipse, Rect, Line, G } from 'react-native-svg';\nimport type { DrawItem, hslColor, Point } from '../../types';\n\nconst AnimatedPath = Animated.createAnimatedComponent(Path);\n\nconst AnimatedEllipse = Animated.createAnimatedComponent(Ellipse);\n\nconst AnimatedRectangle = Animated.createAnimatedComponent(Rect);\n\nconst AnimatedLine = Animated.createAnimatedComponent(Line);\n\n// properties of a line\nconst line = (pointA: Point, pointB: Point) => {\n  'worklet';\n  const lengthX = pointB.x - pointA.x;\n  const lengthY = pointB.y - pointA.y;\n  return {\n    length: Math.sqrt(Math.pow(lengthX, 2) + Math.pow(lengthY, 2)),\n    angle: Math.atan2(lengthY, lengthX),\n  };\n};\n\n// position of a control point\nconst controlPoint = (\n  current: Point,\n  previous: Point,\n  next: Point,\n  reverse: boolean\n): Point => {\n  'worklet';\n  // When 'current' is the first or last point of the array, 'previous' or 'next' don't exist --> replace with 'current'\n  const p = previous || current;\n  const n = next || current;\n  const smoothing = 0.2;\n  // Properties of the opposed-line\n  const o = line(p, n);\n  // If is end-control-point, add PI to the angle to go backward\n  const angle = o.angle + (reverse ? Math.PI : 0);\n  const length = o.length * smoothing;\n\n  const x = current.x + Math.cos(angle) * length;\n  const y = current.y + Math.sin(angle) * length;\n\n  return { x: x, y: y };\n};\n\n// create the bezier curve command\nconst bezierCommand = (point: Point, i: number, a: Point[]) => {\n  'worklet';\n  const endPoint: Point = controlPoint(point, a[i - 1], a[i + 1], true);\n  if (i === 1) {\n    const startPoint: Point = controlPoint(a[i - 1], a[i - 2], point, true);\n    return `C ${startPoint.x},${startPoint.y} ${endPoint.x},${endPoint.y} ${point.x},${point.y}`;\n  } else {\n    return `S ${endPoint.x},${endPoint.y} ${point.x},${point.y}`;\n  }\n};\n\nexport const pointsToPath = (points: Point[]) => {\n  'worklet';\n  return points.length > 0\n    ? points.reduce(\n        (acc, point, i, a) =>\n          i === 0\n            ? `M ${point.x},${point.y}`\n            : `${acc} ${bezierCommand(point, i, a)}`,\n        ''\n      )\n    : '';\n};\n\nfunction hue2rgb(p: number, q: number, t: number) {\n  'worklet';\n  if (t < 0) {\n    t += 1;\n  }\n  if (t > 1) {\n    t -= 1;\n  }\n  if (t < 1 / 6) {\n    return p + (q - p) * 6 * t;\n  }\n  if (t < 1 / 2) {\n    return q;\n  }\n  if (t < 2 / 3) {\n    return p + (q - p) * (2 / 3 - t) * 6;\n  }\n  return p;\n}\n\n// see https://github.com/software-mansion/react-native-reanimated/issues/1909\nfunction hslToRgb(col: hslColor) {\n  'worklet';\n  const hslRegExp = new RegExp(/hsl\\(([\\d.]+),\\s*(\\d+)%,\\s*([\\d.]+)%\\)/);\n  const res = hslRegExp.exec(col);\n\n  const h = res ? parseFloat(res[1]) / 360 : 0;\n  const s = res ? parseFloat(res[2]) / 100 : 0;\n  const l = res ? parseFloat(res[3]) / 100 : 0;\n\n  var r, g, b;\n\n  if (s === 0) {\n    r = g = b = l; // achromatic\n  } else {\n    var q = l < 0.5 ? l * (1 + s) : l + s - l * s;\n    var p = 2 * l - q;\n    r = hue2rgb(p, q, h + 1 / 3);\n    g = hue2rgb(p, q, h);\n    b = hue2rgb(p, q, h - 1 / 3);\n  }\n\n  return `rgb(${Math.round(r * 255)}, ${Math.round(g * 255)}, ${Math.round(\n    b * 255\n  )})`;\n}\n\nexport default function CurrentAnimatedItem({\n  currentItem,\n}: {\n  currentItem: Animated.SharedValue<DrawItem | null>;\n}) {\n  const ellipseAnimatedProps = useAnimatedProps(() => {\n    const coordinates =\n      currentItem.value?.type === 'ellipse'\n        ? currentItem.value.data\n        : { cx: -10, cy: -10, rx: 0, ry: 0 };\n\n    return {\n      cx: coordinates.cx,\n      cy: coordinates.cy,\n      rx: coordinates.rx,\n      ry: coordinates.ry,\n      stroke: hslToRgb(currentItem.value?.color || 'hsl(0, 0%, 0%)'),\n      opacity: currentItem.value?.type === 'ellipse' ? 1 : 0,\n      strokeWidth:\n        currentItem.value?.type === 'ellipse'\n          ? currentItem.value.strokeWidth\n          : 0,\n      marker: 'url(#selection)',\n    };\n  }, [currentItem.value]);\n\n  const singleHeadAnimatedProps = useAnimatedProps(() => {\n    const coordinates =\n      currentItem.value?.type === 'singleHead'\n        ? currentItem.value.data\n        : { x1: -10, y1: -10, x2: -10, y2: -10 };\n    return {\n      x1: coordinates.x1,\n      y1: coordinates.y1,\n      x2: coordinates.x2,\n      y2: coordinates.y2,\n      stroke: hslToRgb(currentItem.value?.color || 'hsl(0, 0%, 0%)'),\n      opacity: currentItem.value?.type === 'singleHead' ? 1 : 0,\n      strokeWidth:\n        currentItem.value?.type === 'singleHead'\n          ? currentItem.value.strokeWidth\n          : 0,\n      markerEnd: 'arrowhead',\n    };\n  }, [currentItem.value]);\n\n  const doubleHeadAnimatedProps = useAnimatedProps(() => {\n    const coordinates =\n      currentItem.value?.type === 'doubleHead'\n        ? currentItem.value.data\n        : { x1: -10, y1: -10, x2: -10, y2: -10 };\n\n    return {\n      x1: coordinates.x1,\n      y1: coordinates.y1,\n      x2: coordinates.x2,\n      y2: coordinates.y2,\n      stroke: hslToRgb(currentItem.value?.color || 'hsl(0, 0%, 0%)'),\n      opacity: currentItem.value?.type === 'doubleHead' ? 1 : 0,\n      strokeWidth:\n        currentItem.value?.type === 'doubleHead'\n          ? currentItem.value.strokeWidth\n          : 0,\n      markerStart: 'side',\n      markerEnd: 'side',\n    };\n  }, [currentItem.value]);\n\n  const rectangleAnimatedProps = useAnimatedProps(() => {\n    const coordinates =\n      currentItem.value?.type === 'rectangle'\n        ? currentItem.value.data\n        : { x: -10, y: -10, width: 0, height: 0 };\n    return {\n      x: coordinates.x,\n      y: coordinates.y,\n      width: coordinates.width,\n      height: coordinates.height,\n      stroke: hslToRgb(currentItem.value?.color || 'hsl(0, 0%, 0%)'),\n      opacity: currentItem.value?.type === 'rectangle' ? 1 : 0,\n      strokeWidth:\n        currentItem.value?.type === 'rectangle'\n          ? currentItem.value.strokeWidth\n          : 0,\n\n      marker: 'url(#selection)',\n    };\n  }, [currentItem.value]);\n\n  const penAnimatedProps = useAnimatedProps(() => {\n    const d = pointsToPath(\n      currentItem.value?.type === 'pen'\n        ? currentItem.value.data\n        : [{ x: -10, y: -10 }]\n    );\n    return {\n      d: d,\n      strokeWidth:\n        currentItem.value?.type === 'pen' ? currentItem.value.strokeWidth : 0,\n      stroke: hslToRgb(currentItem.value?.color || 'hsl(0, 0%, 0%)'),\n      opacity: currentItem.value?.type === 'pen' ? 1 : 0,\n      markerStart: 'selection',\n      markerEnd: 'selection',\n    };\n  }, [currentItem.value]);\n\n  return (\n    <>\n      <AnimatedEllipse animatedProps={ellipseAnimatedProps} />\n      <G markerStart=\"url(#selection)\" markerEnd=\"url(#selection)\">\n        <AnimatedLine animatedProps={singleHeadAnimatedProps} />\n      </G>\n      <G markerStart=\"url(#selection)\" markerEnd=\"url(#selection)\">\n        <AnimatedLine animatedProps={doubleHeadAnimatedProps} />\n      </G>\n      <AnimatedRectangle animatedProps={rectangleAnimatedProps} />\n      <AnimatedPath animatedProps={penAnimatedProps} />\n    </>\n  );\n}\n"],"mappings":"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"}

package/lib/commonjs/components/DrawCore/CurrentAnimatedText.js

@@ -50,12 +50,13 @@ const styles = _reactNative.StyleSheet.create({
  */
 
 
-function CurrentAnimatedText({
-  currentItem,
-  onHeightChange
-}) {
+function CurrentAnimatedText(_ref) {
   var _currentItem$value, _currentItem$value4;
 
+  let {
+    currentItem,
+    onHeightChange
+  } = _ref;
   const [text, setText] = (0, _react.useState)(((_currentItem$value = currentItem.value) === null || _currentItem$value === void 0 ? void 0 : _currentItem$value.type) === 'text' ? currentItem.value.text || '' : '');
   (0, _reactNativeReanimated.useDerivedValue)(() => {
     var _currentItem$value2;

package/lib/commonjs/components/DrawCore/CurrentAnimatedText.js.map

@@ -1 +1 @@
-{"version":3,"sources":["CurrentAnimatedText.tsx"],"names":["styles","StyleSheet","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"]}
+{"version":3,"names":["styles","StyleSheet","create","textBackground","marginHorizontal","backgroundColor","borderRadius","paddingVertical","paddingHorizontal","markerContainerLeft","position","left","height","justifyContent","markerContainerRight","right","marker","width","borderWidth","borderColor","CurrentAnimatedText","currentItem","onHeightChange","text","setText","useState","value","type","useDerivedValue","runOnJS","textAnimatedStyle","useAnimatedStyle","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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"}

package/lib/commonjs/components/DrawCore/DrawPad.js

@@ -21,12 +21,13 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const DrawPad = ({
-  currentItem,
-  doneItems,
-  onPressItem,
-  onTextHeightChange
-}) => {
+const DrawPad = _ref => {
+  let {
+    currentItem,
+    doneItems,
+    onPressItem,
+    onTextHeightChange
+  } = _ref;
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactNativeSvg.default, {
     fillRule: "evenodd"
   }, /*#__PURE__*/_react.default.createElement(_reactNativeSvg.Defs, null, /*#__PURE__*/_react.default.createElement(_reactNativeSvg.Circle, {
@@ -67,13 +68,13 @@ const DrawPad = ({
     orient: "auto"
   }, /*#__PURE__*/_react.default.createElement(_reactNativeSvg.Use, {
     href: "#selectionIndicator"
-  }))), /*#__PURE__*/_react.default.createElement(_CurrentAnimatedItem.default, {
-    currentItem: currentItem
-  }), doneItems.map((item, index) => /*#__PURE__*/_react.default.createElement(_Item.default, {
+  }))), doneItems.map((item, index) => /*#__PURE__*/_react.default.createElement(_Item.default, {
     key: index,
     item: item,
     onPress: onPressItem(item, index)
-  }))), /*#__PURE__*/_react.default.createElement(_CurrentAnimatedText.default, {
+  })), /*#__PURE__*/_react.default.createElement(_CurrentAnimatedItem.default, {
+    currentItem: currentItem
+  })), /*#__PURE__*/_react.default.createElement(_CurrentAnimatedText.default, {
     currentItem: currentItem,
     onHeightChange: onTextHeightChange
   }));

package/lib/commonjs/components/DrawCore/DrawPad.js.map

@@ -1 +1 @@
-{"version":3,"sources":["DrawPad.tsx"],"names":["DrawPad","currentItem","doneItems","onPressItem","onTextHeightChange","map","item","index"],"mappings":";;;;;;;AAAA;;AAEA;;AAQA;;AACA;;AACA;;;;;;;;AAGA,MAAMA,OAAO,GAAG,CAAC;AACfC,EAAAA,WADe;AAEfC,EAAAA,SAFe;AAGfC,EAAAA,WAHe;AAIfC,EAAAA;AAJe,CAAD,KAUV;AACJ,sBACE,yEACE,6BAAC,uBAAD;AAAK,IAAA,QAAQ,EAAC;AAAd,kBACE,6BAAC,oBAAD,qBACE,6BAAC,sBAAD;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,6BAAC,sBAAD;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,6BAAC,wBAAD;AACE,IAAA,MAAM,EAAC,oBADT;AAEE,IAAA,MAAM,EAAC,gBAFT;AAGE,IAAA,aAAa,EAAC,OAHhB;AAIE,IAAA,cAAc,EAAC;AAJjB,IAPF,CAVF,eAyBE,6BAAC,sBAAD;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,6BAAC,wBAAD;AACE,IAAA,MAAM,EAAC,gBADT;AAEE,IAAA,MAAM,EAAC,cAFT;AAGE,IAAA,aAAa,EAAC,OAHhB;AAIE,IAAA,cAAc,EAAC;AAJjB,IAPF,CAzBF,eAwCE,6BAAC,sBAAD;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,6BAAC,mBAAD;AAAK,IAAA,IAAI,EAAC;AAAV,IAPF,CAxCF,CADF,eAoDE,6BAAC,4BAAD;AAAqB,IAAA,WAAW,EAAEH;AAAlC,IApDF,EAsDGC,SAAS,CAACG,GAAV,CAAc,CAACC,IAAD,EAAOC,KAAP,kBACb,6BAAC,aAAD;AAAM,IAAA,GAAG,EAAEA,KAAX;AAAkB,IAAA,IAAI,EAAED,IAAxB;AAA8B,IAAA,OAAO,EAAEH,WAAW,CAACG,IAAD,EAAOC,KAAP;AAAlD,IADD,CAtDH,CADF,eA4DE,6BAAC,4BAAD;AACE,IAAA,WAAW,EAAEN,WADf;AAEE,IAAA,cAAc,EAAEG;AAFlB,IA5DF,CADF;AAmED,CA9ED;;eAgFeJ,O","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"]}
+{"version":3,"names":["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;;AAEA;;AAQA;;AACA;;AACA;;;;;;;;AAGA,MAAMA,OAAO,GAAG,QAUV;EAAA,IAVW;IACfC,WADe;IAEfC,SAFe;IAGfC,WAHe;IAIfC;EAJe,CAUX;EACJ,oBACE,yEACE,6BAAC,uBAAD;IAAK,QAAQ,EAAC;EAAd,gBACE,6BAAC,oBAAD,qBACE,6BAAC,sBAAD;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,6BAAC,sBAAD;IACE,EAAE,EAAC,WADL;IAEE,WAAW,EAAE,aAFf;IAGE,IAAI,EAAC,GAHP;IAIE,IAAI,EAAC,GAJP;IAKE,MAAM,EAAC;EALT,gBAOE,6BAAC,wBAAD;IACE,MAAM,EAAC,oBADT;IAEE,MAAM,EAAC,gBAFT;IAGE,aAAa,EAAC,OAHhB;IAIE,cAAc,EAAC;EAJjB,EAPF,CAVF,eAyBE,6BAAC,sBAAD;IACE,EAAE,EAAC,MADL;IAEE,WAAW,EAAE,aAFf;IAGE,IAAI,EAAC,GAHP;IAIE,IAAI,EAAC,GAJP;IAKE,MAAM,EAAC;EALT,gBAOE,6BAAC,wBAAD;IACE,MAAM,EAAC,gBADT;IAEE,MAAM,EAAC,cAFT;IAGE,aAAa,EAAC,OAHhB;IAIE,cAAc,EAAC;EAJjB,EAPF,CAzBF,eAwCE,6BAAC,sBAAD;IACE,EAAE,EAAC,WADL;IAEE,WAAW,EAAE,gBAFf;IAGE,IAAI,EAAC,GAHP;IAIE,IAAI,EAAC,GAJP;IAKE,MAAM,EAAC;EALT,gBAOE,6BAAC,mBAAD;IAAK,IAAI,EAAC;EAAV,EAPF,CAxCF,CADF,EAoDGF,SAAS,CAACG,GAAV,CAAc,CAACC,IAAD,EAAOC,KAAP,kBACb,6BAAC,aAAD;IAAM,GAAG,EAAEA,KAAX;IAAkB,IAAI,EAAED,IAAxB;IAA8B,OAAO,EAAEH,WAAW,CAACG,IAAD,EAAOC,KAAP;EAAlD,EADD,CApDH,eAwDE,6BAAC,4BAAD;IAAqB,WAAW,EAAEN;EAAlC,EAxDF,CADF,eA4DE,6BAAC,4BAAD;IACE,WAAW,EAAEA,WADf;IAEE,cAAc,EAAEG;EAFlB,EA5DF,CADF;AAmED,CA9ED;;eAgFeJ,O"}

package/lib/commonjs/components/DrawCore/Item.js

@@ -11,13 +11,11 @@ var _reactNative = require("react-native");
 
 var _reactNativeSvg = require("react-native-svg");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _CurrentAnimatedItem = require("./CurrentAnimatedItem");
 
-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); }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const transformPointsToPath = points => {
-  return points.length > 0 ? points.reduce((acc, point) => `${acc} L ${point.x},${point.y}`, `M ${points[0].x},${points[0].y}`) : '';
-};
+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); }
 
 const styles = _reactNative.StyleSheet.create({
   textZone: {
@@ -34,10 +32,12 @@ const styles = _reactNative.StyleSheet.create({
   }
 });
 
-function Item({
-  item,
-  onPress
-}) {
+function Item(_ref) {
+  let {
+    item,
+    onPress
+  } = _ref;
+
   switch (item.type) {
     case 'singleHead':
       return /*#__PURE__*/_react.default.createElement(_reactNativeSvg.G, {
@@ -78,7 +78,7 @@ function Item({
 
     case 'pen':
       return /*#__PURE__*/_react.default.createElement(_reactNativeSvg.Path, {
-        d: transformPointsToPath(item.data),
+        d: (0, _CurrentAnimatedItem.pointsToPath)(item.data),
         stroke: item.color,
         fill: "none",
         strokeWidth: item.strokeWidth,

package/lib/commonjs/components/DrawCore/Item.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Item.tsx"],"names":["transformPointsToPath","points","length","reduce","acc","point","x","y","styles","StyleSheet","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"]}
+{"version":3,"names":["styles","StyleSheet","create","textZone","paddingHorizontal","textContainer","backgroundColor","borderRadius","paddingVertical","text","color","Item","item","onPress","type","data","strokeWidth","pointsToPath","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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"}

package/lib/commonjs/components/DrawCore/StrokeSlider.js

@@ -47,11 +47,13 @@ const styles = _reactNative.StyleSheet.create({
   }
 });
 
-const StrokeSlider = ({
-  minValue,
-  maxValue,
-  stroke
-}) => {
+const StrokeSlider = _ref => {
+  let {
+    minValue,
+    maxValue,
+    stroke,
+    onStrokeChange
+  } = _ref;
   const sliderHeight = (0, _reactNativeReanimated.useSharedValue)(0);
   const [text, setText] = (0, _react.useState)(stroke.value);
   const position = (0, _reactNativeReanimated.useDerivedValue)(() => {
@@ -59,19 +61,24 @@ const StrokeSlider = ({
     return sliderHeight.value / (maxValue - minValue) * (stroke.value - minValue);
   });
   const onGestureEvent = (0, _reactNativeReanimated.useAnimatedGestureHandler)({
-    onStart: ({
-      y
-    }, ctx) => {
+    onStart: (_ref2, ctx) => {
+      let {
+        y
+      } = _ref2;
       ctx.startY = y;
     },
-    onActive: ({
-      translationY
-    }, {
-      startY
-    }) => {
+    onActive: (_ref3, _ref4) => {
+      let {
+        translationY
+      } = _ref3;
+      let {
+        startY
+      } = _ref4;
       stroke.value = Math.min(maxValue, Math.max(minValue, (startY + translationY) / sliderHeight.value * (maxValue - minValue) + minValue));
     },
-    onEnd: () => {}
+    onEnd: () => {
+      (0, _reactNativeReanimated.runOnJS)(onStrokeChange)();
+    }
   }, []);
   const style = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
     return {

package/lib/commonjs/components/DrawCore/StrokeSlider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["StrokeSlider.tsx"],"names":["TRACK_R","styles","StyleSheet","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"]}
+{"version":3,"names":["TRACK_R","styles","StyleSheet","create","container","flex","alignItems","width","thumb","position","height","borderRadius","top","backgroundColor","track","textIndicator","color","fontSize","marginTop","fontWeight","StrokeSlider","minValue","maxValue","stroke","onStrokeChange","sliderHeight","useSharedValue","text","setText","useState","value","useDerivedValue","runOnJS","Math","round","onGestureEvent","useAnimatedGestureHandler","onStart","ctx","y","startY","onActive","translationY","min","max","onEnd","style","useAnimatedStyle","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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"}