@archireport/react-native-svg-draw 1.0.3 → 1.1.0

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

@@ -50,7 +50,8 @@ const styles = _reactNative.StyleSheet.create({
 
 const ColorSlider = ({
   color,
-  linearGradient: LinearGradient
+  linearGradient: LinearGradient,
+  onColorChange
 }) => {
   const sliderHeight = (0, _reactNativeReanimated.useSharedValue)(0);
   const position = (0, _reactNativeReanimated.useDerivedValue)(() => {
@@ -90,7 +91,9 @@ const ColorSlider = ({
         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","toFixed","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, 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    },\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,"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","onColorChange","sliderHeight","hslRegExp","RegExp","res","exec","value","lum","parseFloat","tint","Math","min","max","onGestureEvent","onStart","y","ctx","startY","onActive","translationY","slidePos","toFixed","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  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"]}

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';
 
@@ -168,11 +217,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,"sources":["CurrentAnimatedItem.tsx"],"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","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\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"]}

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

@@ -67,13 +67,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,"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,EAoDGF,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,CApDH,eAwDE,6BAAC,4BAAD;AAAqB,IAAA,WAAW,EAAEN;AAAlC,IAxDF,CADF,eA4DE,6BAAC,4BAAD;AACE,IAAA,WAAW,EAAEA,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        {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"]}

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

@@ -11,14 +11,12 @@ var _reactNative = require("react-native");
 
 var _reactNativeSvg = require("react-native-svg");
 
+var _CurrentAnimatedItem = require("./CurrentAnimatedItem");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 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); }
 
-const transformPointsToPath = points => {
-  return points.length > 0 ? points.reduce((acc, point) => `${acc} L ${point.x},${point.y}`, `M ${points[0].x},${points[0].y}`) : '';
-};
-
 const styles = _reactNative.StyleSheet.create({
   textZone: {
     paddingHorizontal: 10
@@ -78,7 +76,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,"sources":["Item.tsx"],"names":["styles","StyleSheet","create","textZone","paddingHorizontal","textContainer","backgroundColor","borderRadius","paddingVertical","text","color","Item","item","onPress","type","data","strokeWidth","x","y","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 } 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"]}

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

@@ -50,7 +50,8 @@ const styles = _reactNative.StyleSheet.create({
 const StrokeSlider = ({
   minValue,
   maxValue,
-  stroke
+  stroke,
+  onStrokeChange
 }) => {
   const sliderHeight = (0, _reactNativeReanimated.useSharedValue)(0);
   const [text, setText] = (0, _react.useState)(stroke.value);
@@ -71,7 +72,9 @@ const StrokeSlider = ({
     }) => {
       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,"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","onStrokeChange","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  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"]}