@archireport/react-native-svg-draw 0.3.4 → 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/lib/commonjs/components/DrawCore/CurrentAnimatedItem.js +5 -9
  2. package/lib/commonjs/components/DrawCore/CurrentAnimatedItem.js.map +1 -1
  3. package/lib/commonjs/components/DrawCore/DrawPad.js +2 -1
  4. package/lib/commonjs/components/DrawCore/DrawPad.js.map +1 -1
  5. package/lib/module/components/DrawCore/CurrentAnimatedItem.js +5 -9
  6. package/lib/module/components/DrawCore/CurrentAnimatedItem.js.map +1 -1
  7. package/lib/module/components/DrawCore/DrawPad.js +2 -1
  8. package/lib/module/components/DrawCore/DrawPad.js.map +1 -1
  9. package/package.json +19 -19
  10. package/src/components/DrawCore/CurrentAnimatedItem.tsx +5 -9
  11. package/src/components/DrawCore/DrawPad.tsx +1 -0
  12. package/src/types.d.ts +1 -0
package/lib/commonjs/components/DrawCore/CurrentAnimatedItem.js CHANGED
@@ -100,7 +100,6 @@ function CurrentAnimatedItem({
100
100
  ry: coordinates.ry,
101
101
  stroke: hslToRgb(((_currentItem$value2 = currentItem.value) === null || _currentItem$value2 === void 0 ? void 0 : _currentItem$value2.color) || 'hsl(0, 0%, 0%)'),
102
102
  opacity: ((_currentItem$value3 = currentItem.value) === null || _currentItem$value3 === void 0 ? void 0 : _currentItem$value3.type) === 'ellipse' ? 1 : 0,
103
- fill: 'none',
104
103
  strokeWidth: ((_currentItem$value4 = currentItem.value) === null || _currentItem$value4 === void 0 ? void 0 : _currentItem$value4.type) === 'ellipse' ? currentItem.value.strokeWidth : 0,
105
104
  marker: 'url(#selection)'
106
105
  };
@@ -121,9 +120,8 @@ function CurrentAnimatedItem({
121
120
  y2: coordinates.y2,
122
121
  stroke: hslToRgb(((_currentItem$value6 = currentItem.value) === null || _currentItem$value6 === void 0 ? void 0 : _currentItem$value6.color) || 'hsl(0, 0%, 0%)'),
123
122
  opacity: ((_currentItem$value7 = currentItem.value) === null || _currentItem$value7 === void 0 ? void 0 : _currentItem$value7.type) === 'singleHead' ? 1 : 0,
124
- fill: 'none',
125
123
  strokeWidth: ((_currentItem$value8 = currentItem.value) === null || _currentItem$value8 === void 0 ? void 0 : _currentItem$value8.type) === 'singleHead' ? currentItem.value.strokeWidth : 0,
126
- markerEnd: 'url(#arrowhead)'
124
+ markerEnd: 'arrowhead'
127
125
  };
128
126
  }, [currentItem.value]);
129
127
  const doubleHeadAnimatedProps = (0, _reactNativeReanimated.useAnimatedProps)(() => {
@@ -142,10 +140,9 @@ function CurrentAnimatedItem({
142
140
  y2: coordinates.y2,
143
141
  stroke: hslToRgb(((_currentItem$value10 = currentItem.value) === null || _currentItem$value10 === void 0 ? void 0 : _currentItem$value10.color) || 'hsl(0, 0%, 0%)'),
144
142
  opacity: ((_currentItem$value11 = currentItem.value) === null || _currentItem$value11 === void 0 ? void 0 : _currentItem$value11.type) === 'doubleHead' ? 1 : 0,
145
- fill: 'none',
146
143
  strokeWidth: ((_currentItem$value12 = currentItem.value) === null || _currentItem$value12 === void 0 ? void 0 : _currentItem$value12.type) === 'doubleHead' ? currentItem.value.strokeWidth : 0,
147
- markerStart: 'url(#side)',
148
- markerEnd: 'url(#side)'
144
+ markerStart: 'side',
145
+ markerEnd: 'side'
149
146
  };
150
147
  }, [currentItem.value]);
151
148
  const rectangleAnimatedProps = (0, _reactNativeReanimated.useAnimatedProps)(() => {
@@ -163,7 +160,6 @@ function CurrentAnimatedItem({
163
160
  width: coordinates.width,
164
161
  height: coordinates.height,
165
162
  stroke: hslToRgb(((_currentItem$value14 = currentItem.value) === null || _currentItem$value14 === void 0 ? void 0 : _currentItem$value14.color) || 'hsl(0, 0%, 0%)'),
166
- fill: 'none',
167
163
  opacity: ((_currentItem$value15 = currentItem.value) === null || _currentItem$value15 === void 0 ? void 0 : _currentItem$value15.type) === 'rectangle' ? 1 : 0,
168
164
  strokeWidth: ((_currentItem$value16 = currentItem.value) === null || _currentItem$value16 === void 0 ? void 0 : _currentItem$value16.type) === 'rectangle' ? currentItem.value.strokeWidth : 0,
169
165
  marker: 'url(#selection)'
@@ -180,8 +176,8 @@ function CurrentAnimatedItem({
180
176
  strokeWidth: ((_currentItem$value18 = currentItem.value) === null || _currentItem$value18 === void 0 ? void 0 : _currentItem$value18.type) === 'pen' ? currentItem.value.strokeWidth : 0,
181
177
  stroke: hslToRgb(((_currentItem$value19 = currentItem.value) === null || _currentItem$value19 === void 0 ? void 0 : _currentItem$value19.color) || 'hsl(0, 0%, 0%)'),
182
178
  opacity: ((_currentItem$value20 = currentItem.value) === null || _currentItem$value20 === void 0 ? void 0 : _currentItem$value20.type) === 'pen' ? 1 : 0,
183
- markerStart: 'url(#selection)',
184
- markerEnd: 'url(#selection)'
179
+ markerStart: 'selection',
180
+ markerEnd: 'selection'
185
181
  };
186
182
  }, [currentItem.value]);
187
183
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(AnimatedEllipse, {
package/lib/commonjs/components/DrawCore/CurrentAnimatedItem.js.map CHANGED
@@ -1 +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","fill","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 fill: 'none',\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 fill: 'none',\n strokeWidth:\n currentItem.value?.type === 'singleHead'\n ? currentItem.value.strokeWidth\n : 0,\n markerEnd: 'url(#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 fill: 'none',\n strokeWidth:\n currentItem.value?.type === 'doubleHead'\n ? currentItem.value.strokeWidth\n : 0,\n markerStart: 'url(#side)',\n markerEnd: 'url(#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 fill: 'none',\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: 'url(#selection)',\n markerEnd: 'url(#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"]}
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"]}
package/lib/commonjs/components/DrawCore/DrawPad.js CHANGED
@@ -57,7 +57,8 @@ const DrawPad = ({
57
57
  }, /*#__PURE__*/_react.default.createElement(_reactNativeSvg.Polyline, {
58
58
  stroke: "context-stroke",
59
59
  points: "0,-2 0,2 0,0",
60
- strokeLinecap: "round"
60
+ strokeLinecap: "round",
61
+ strokeLinejoin: "round"
61
62
  })), /*#__PURE__*/_react.default.createElement(_reactNativeSvg.Marker, {
62
63
  id: "selection",
63
64
  markerUnits: 'userSpaceOnUse',
package/lib/commonjs/components/DrawCore/DrawPad.js.map CHANGED
@@ -1 +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;AAHhB,IAPF,CAzBF,eAuCE,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,CAvCF,CADF,eAmDE,6BAAC,4BAAD;AAAqB,IAAA,WAAW,EAAEH;AAAlC,IAnDF,EAqDGC,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,CArDH,CADF,eA2DE,6BAAC,4BAAD;AACE,IAAA,WAAW,EAAEN,WADf;AAEE,IAAA,cAAc,EAAEG;AAFlB,IA3DF,CADF;AAkED,CA7ED;;eA+EeJ,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 />\n </Marker>\n\n <Marker\n id=\"selection\"\n markerUnits={'userSpaceOnUse' as MarkerUnits}\n refX=\"0\"\n refY=\"0\"\n orient=\"auto\"\n >\n <Use href=\"#selectionIndicator\" />\n </Marker>\n </Defs>\n\n <CurrentAnimatedItem currentItem={currentItem} />\n\n {doneItems.map((item, index) => (\n <Item key={index} item={item} onPress={onPressItem(item, index)} />\n ))}\n </Svg>\n\n <CurrentAnimatedText\n currentItem={currentItem}\n onHeightChange={onTextHeightChange}\n />\n </>\n );\n};\n\nexport default DrawPad;\n"]}
1
+ {"version":3,"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"]}
package/lib/module/components/DrawCore/CurrentAnimatedItem.js CHANGED
@@ -81,7 +81,6 @@ export default function CurrentAnimatedItem({
81
81
  ry: coordinates.ry,
82
82
  stroke: hslToRgb(((_currentItem$value2 = currentItem.value) === null || _currentItem$value2 === void 0 ? void 0 : _currentItem$value2.color) || 'hsl(0, 0%, 0%)'),
83
83
  opacity: ((_currentItem$value3 = currentItem.value) === null || _currentItem$value3 === void 0 ? void 0 : _currentItem$value3.type) === 'ellipse' ? 1 : 0,
84
- fill: 'none',
85
84
  strokeWidth: ((_currentItem$value4 = currentItem.value) === null || _currentItem$value4 === void 0 ? void 0 : _currentItem$value4.type) === 'ellipse' ? currentItem.value.strokeWidth : 0,
86
85
  marker: 'url(#selection)'
87
86
  };
@@ -102,9 +101,8 @@ export default function CurrentAnimatedItem({
102
101
  y2: coordinates.y2,
103
102
  stroke: hslToRgb(((_currentItem$value6 = currentItem.value) === null || _currentItem$value6 === void 0 ? void 0 : _currentItem$value6.color) || 'hsl(0, 0%, 0%)'),
104
103
  opacity: ((_currentItem$value7 = currentItem.value) === null || _currentItem$value7 === void 0 ? void 0 : _currentItem$value7.type) === 'singleHead' ? 1 : 0,
105
- fill: 'none',
106
104
  strokeWidth: ((_currentItem$value8 = currentItem.value) === null || _currentItem$value8 === void 0 ? void 0 : _currentItem$value8.type) === 'singleHead' ? currentItem.value.strokeWidth : 0,
107
- markerEnd: 'url(#arrowhead)'
105
+ markerEnd: 'arrowhead'
108
106
  };
109
107
  }, [currentItem.value]);
110
108
  const doubleHeadAnimatedProps = useAnimatedProps(() => {
@@ -123,10 +121,9 @@ export default function CurrentAnimatedItem({
123
121
  y2: coordinates.y2,
124
122
  stroke: hslToRgb(((_currentItem$value10 = currentItem.value) === null || _currentItem$value10 === void 0 ? void 0 : _currentItem$value10.color) || 'hsl(0, 0%, 0%)'),
125
123
  opacity: ((_currentItem$value11 = currentItem.value) === null || _currentItem$value11 === void 0 ? void 0 : _currentItem$value11.type) === 'doubleHead' ? 1 : 0,
126
- fill: 'none',
127
124
  strokeWidth: ((_currentItem$value12 = currentItem.value) === null || _currentItem$value12 === void 0 ? void 0 : _currentItem$value12.type) === 'doubleHead' ? currentItem.value.strokeWidth : 0,
128
- markerStart: 'url(#side)',
129
- markerEnd: 'url(#side)'
125
+ markerStart: 'side',
126
+ markerEnd: 'side'
130
127
  };
131
128
  }, [currentItem.value]);
132
129
  const rectangleAnimatedProps = useAnimatedProps(() => {
@@ -144,7 +141,6 @@ export default function CurrentAnimatedItem({
144
141
  width: coordinates.width,
145
142
  height: coordinates.height,
146
143
  stroke: hslToRgb(((_currentItem$value14 = currentItem.value) === null || _currentItem$value14 === void 0 ? void 0 : _currentItem$value14.color) || 'hsl(0, 0%, 0%)'),
147
- fill: 'none',
148
144
  opacity: ((_currentItem$value15 = currentItem.value) === null || _currentItem$value15 === void 0 ? void 0 : _currentItem$value15.type) === 'rectangle' ? 1 : 0,
149
145
  strokeWidth: ((_currentItem$value16 = currentItem.value) === null || _currentItem$value16 === void 0 ? void 0 : _currentItem$value16.type) === 'rectangle' ? currentItem.value.strokeWidth : 0,
150
146
  marker: 'url(#selection)'
@@ -161,8 +157,8 @@ export default function CurrentAnimatedItem({
161
157
  strokeWidth: ((_currentItem$value18 = currentItem.value) === null || _currentItem$value18 === void 0 ? void 0 : _currentItem$value18.type) === 'pen' ? currentItem.value.strokeWidth : 0,
162
158
  stroke: hslToRgb(((_currentItem$value19 = currentItem.value) === null || _currentItem$value19 === void 0 ? void 0 : _currentItem$value19.color) || 'hsl(0, 0%, 0%)'),
163
159
  opacity: ((_currentItem$value20 = currentItem.value) === null || _currentItem$value20 === void 0 ? void 0 : _currentItem$value20.type) === 'pen' ? 1 : 0,
164
- markerStart: 'url(#selection)',
165
- markerEnd: 'url(#selection)'
160
+ markerStart: 'selection',
161
+ markerEnd: 'selection'
166
162
  };
167
163
  }, [currentItem.value]);
168
164
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AnimatedEllipse, {
package/lib/module/components/DrawCore/CurrentAnimatedItem.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["CurrentAnimatedItem.tsx"],"names":["React","Animated","useAnimatedProps","Path","Ellipse","Rect","Line","G","AnimatedPath","createAnimatedComponent","AnimatedEllipse","AnimatedRectangle","AnimatedLine","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","fill","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 fill: 'none',\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 fill: 'none',\n strokeWidth:\n currentItem.value?.type === 'singleHead'\n ? currentItem.value.strokeWidth\n : 0,\n markerEnd: 'url(#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 fill: 'none',\n strokeWidth:\n currentItem.value?.type === 'doubleHead'\n ? currentItem.value.strokeWidth\n : 0,\n markerStart: 'url(#side)',\n markerEnd: 'url(#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 fill: 'none',\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: 'url(#selection)',\n markerEnd: 'url(#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"]}
1
+ {"version":3,"sources":["CurrentAnimatedItem.tsx"],"names":["React","Animated","useAnimatedProps","Path","Ellipse","Rect","Line","G","AnimatedPath","createAnimatedComponent","AnimatedEllipse","AnimatedRectangle","AnimatedLine","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"]}
package/lib/module/components/DrawCore/DrawPad.js CHANGED
@@ -40,7 +40,8 @@ const DrawPad = ({
40
40
  }, /*#__PURE__*/React.createElement(Polyline, {
41
41
  stroke: "context-stroke",
42
42
  points: "0,-2 0,2 0,0",
43
- strokeLinecap: "round"
43
+ strokeLinecap: "round",
44
+ strokeLinejoin: "round"
44
45
  })), /*#__PURE__*/React.createElement(Marker, {
45
46
  id: "selection",
46
47
  markerUnits: 'userSpaceOnUse',
package/lib/module/components/DrawCore/DrawPad.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["DrawPad.tsx"],"names":["React","Svg","Circle","Defs","Marker","Polyline","Use","CurrentAnimatedItem","CurrentAnimatedText","Item","DrawPad","currentItem","doneItems","onPressItem","onTextHeightChange","map","item","index"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAEA,OAAOC,GAAP,IACEC,MADF,EAEEC,IAFF,EAGEC,MAHF,EAKEC,QALF,EAMEC,GANF,QAOO,kBAPP;AAQA,OAAOC,mBAAP,MAAgC,uBAAhC;AACA,OAAOC,mBAAP,MAAgC,uBAAhC;AACA,OAAOC,IAAP,MAAiB,QAAjB;;AAGA,MAAMC,OAAO,GAAG,CAAC;AACfC,EAAAA,WADe;AAEfC,EAAAA,SAFe;AAGfC,EAAAA,WAHe;AAIfC,EAAAA;AAJe,CAAD,KAUV;AACJ,sBACE,uDACE,oBAAC,GAAD;AAAK,IAAA,QAAQ,EAAC;AAAd,kBACE,oBAAC,IAAD,qBACE,oBAAC,MAAD;AACE,IAAA,EAAE,EAAC,oBADL;AAEE,IAAA,IAAI,EAAC,SAFP;AAGE,IAAA,CAAC,EAAE,CAHL;AAIE,IAAA,EAAE,EAAE,CAJN;AAKE,IAAA,EAAE,EAAE,CALN;AAME,IAAA,WAAW,EAAE,CANf;AAOE,IAAA,MAAM,EAAC;AAPT,IADF,eAUE,oBAAC,MAAD;AACE,IAAA,EAAE,EAAC,WADL;AAEE,IAAA,WAAW,EAAE,aAFf;AAGE,IAAA,IAAI,EAAC,GAHP;AAIE,IAAA,IAAI,EAAC,GAJP;AAKE,IAAA,MAAM,EAAC;AALT,kBAOE,oBAAC,QAAD;AACE,IAAA,MAAM,EAAC,oBADT;AAEE,IAAA,MAAM,EAAC,gBAFT;AAGE,IAAA,aAAa,EAAC,OAHhB;AAIE,IAAA,cAAc,EAAC;AAJjB,IAPF,CAVF,eAyBE,oBAAC,MAAD;AACE,IAAA,EAAE,EAAC,MADL;AAEE,IAAA,WAAW,EAAE,aAFf;AAGE,IAAA,IAAI,EAAC,GAHP;AAIE,IAAA,IAAI,EAAC,GAJP;AAKE,IAAA,MAAM,EAAC;AALT,kBAOE,oBAAC,QAAD;AACE,IAAA,MAAM,EAAC,gBADT;AAEE,IAAA,MAAM,EAAC,cAFT;AAGE,IAAA,aAAa,EAAC;AAHhB,IAPF,CAzBF,eAuCE,oBAAC,MAAD;AACE,IAAA,EAAE,EAAC,WADL;AAEE,IAAA,WAAW,EAAE,gBAFf;AAGE,IAAA,IAAI,EAAC,GAHP;AAIE,IAAA,IAAI,EAAC,GAJP;AAKE,IAAA,MAAM,EAAC;AALT,kBAOE,oBAAC,GAAD;AAAK,IAAA,IAAI,EAAC;AAAV,IAPF,CAvCF,CADF,eAmDE,oBAAC,mBAAD;AAAqB,IAAA,WAAW,EAAEH;AAAlC,IAnDF,EAqDGC,SAAS,CAACG,GAAV,CAAc,CAACC,IAAD,EAAOC,KAAP,kBACb,oBAAC,IAAD;AAAM,IAAA,GAAG,EAAEA,KAAX;AAAkB,IAAA,IAAI,EAAED,IAAxB;AAA8B,IAAA,OAAO,EAAEH,WAAW,CAACG,IAAD,EAAOC,KAAP;AAAlD,IADD,CArDH,CADF,eA2DE,oBAAC,mBAAD;AACE,IAAA,WAAW,EAAEN,WADf;AAEE,IAAA,cAAc,EAAEG;AAFlB,IA3DF,CADF;AAkED,CA7ED;;AA+EA,eAAeJ,OAAf","sourcesContent":["import React from 'react';\nimport type Animated from 'react-native-reanimated';\nimport Svg, {\n Circle,\n Defs,\n Marker,\n MarkerUnits,\n Polyline,\n Use,\n} from 'react-native-svg';\nimport CurrentAnimatedItem from './CurrentAnimatedItem';\nimport CurrentAnimatedText from './CurrentAnimatedText';\nimport Item from './Item';\nimport type { DrawItem } from '../../types';\n\nconst DrawPad = ({\n currentItem,\n doneItems,\n onPressItem,\n onTextHeightChange,\n}: {\n currentItem: Animated.SharedValue<DrawItem | null>;\n doneItems: Array<DrawItem>;\n onPressItem: (item: DrawItem, index: number) => () => void;\n onTextHeightChange: (height: number) => void;\n}) => {\n return (\n <>\n <Svg fillRule=\"evenodd\">\n <Defs>\n <Circle\n id=\"selectionIndicator\"\n fill=\"#3a6cff\"\n r={5}\n cx={0}\n cy={0}\n strokeWidth={1}\n stroke=\"white\"\n />\n <Marker\n id=\"arrowhead\"\n markerUnits={'strokeWidth' as MarkerUnits}\n refX=\"0\"\n refY=\"0\"\n orient=\"auto\"\n >\n <Polyline\n points=\"-2,-2 0,0 -2,2 0,0\"\n stroke=\"context-stroke\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </Marker>\n\n <Marker\n id=\"side\"\n markerUnits={'strokeWidth' as MarkerUnits}\n refX=\"0\"\n refY=\"0\"\n orient=\"auto\"\n >\n <Polyline\n stroke=\"context-stroke\"\n points=\"0,-2 0,2 0,0\"\n strokeLinecap=\"round\"\n />\n </Marker>\n\n <Marker\n id=\"selection\"\n markerUnits={'userSpaceOnUse' as MarkerUnits}\n refX=\"0\"\n refY=\"0\"\n orient=\"auto\"\n >\n <Use href=\"#selectionIndicator\" />\n </Marker>\n </Defs>\n\n <CurrentAnimatedItem currentItem={currentItem} />\n\n {doneItems.map((item, index) => (\n <Item key={index} item={item} onPress={onPressItem(item, index)} />\n ))}\n </Svg>\n\n <CurrentAnimatedText\n currentItem={currentItem}\n onHeightChange={onTextHeightChange}\n />\n </>\n );\n};\n\nexport default DrawPad;\n"]}
1
+ {"version":3,"sources":["DrawPad.tsx"],"names":["React","Svg","Circle","Defs","Marker","Polyline","Use","CurrentAnimatedItem","CurrentAnimatedText","Item","DrawPad","currentItem","doneItems","onPressItem","onTextHeightChange","map","item","index"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAEA,OAAOC,GAAP,IACEC,MADF,EAEEC,IAFF,EAGEC,MAHF,EAKEC,QALF,EAMEC,GANF,QAOO,kBAPP;AAQA,OAAOC,mBAAP,MAAgC,uBAAhC;AACA,OAAOC,mBAAP,MAAgC,uBAAhC;AACA,OAAOC,IAAP,MAAiB,QAAjB;;AAGA,MAAMC,OAAO,GAAG,CAAC;AACfC,EAAAA,WADe;AAEfC,EAAAA,SAFe;AAGfC,EAAAA,WAHe;AAIfC,EAAAA;AAJe,CAAD,KAUV;AACJ,sBACE,uDACE,oBAAC,GAAD;AAAK,IAAA,QAAQ,EAAC;AAAd,kBACE,oBAAC,IAAD,qBACE,oBAAC,MAAD;AACE,IAAA,EAAE,EAAC,oBADL;AAEE,IAAA,IAAI,EAAC,SAFP;AAGE,IAAA,CAAC,EAAE,CAHL;AAIE,IAAA,EAAE,EAAE,CAJN;AAKE,IAAA,EAAE,EAAE,CALN;AAME,IAAA,WAAW,EAAE,CANf;AAOE,IAAA,MAAM,EAAC;AAPT,IADF,eAUE,oBAAC,MAAD;AACE,IAAA,EAAE,EAAC,WADL;AAEE,IAAA,WAAW,EAAE,aAFf;AAGE,IAAA,IAAI,EAAC,GAHP;AAIE,IAAA,IAAI,EAAC,GAJP;AAKE,IAAA,MAAM,EAAC;AALT,kBAOE,oBAAC,QAAD;AACE,IAAA,MAAM,EAAC,oBADT;AAEE,IAAA,MAAM,EAAC,gBAFT;AAGE,IAAA,aAAa,EAAC,OAHhB;AAIE,IAAA,cAAc,EAAC;AAJjB,IAPF,CAVF,eAyBE,oBAAC,MAAD;AACE,IAAA,EAAE,EAAC,MADL;AAEE,IAAA,WAAW,EAAE,aAFf;AAGE,IAAA,IAAI,EAAC,GAHP;AAIE,IAAA,IAAI,EAAC,GAJP;AAKE,IAAA,MAAM,EAAC;AALT,kBAOE,oBAAC,QAAD;AACE,IAAA,MAAM,EAAC,gBADT;AAEE,IAAA,MAAM,EAAC,cAFT;AAGE,IAAA,aAAa,EAAC,OAHhB;AAIE,IAAA,cAAc,EAAC;AAJjB,IAPF,CAzBF,eAwCE,oBAAC,MAAD;AACE,IAAA,EAAE,EAAC,WADL;AAEE,IAAA,WAAW,EAAE,gBAFf;AAGE,IAAA,IAAI,EAAC,GAHP;AAIE,IAAA,IAAI,EAAC,GAJP;AAKE,IAAA,MAAM,EAAC;AALT,kBAOE,oBAAC,GAAD;AAAK,IAAA,IAAI,EAAC;AAAV,IAPF,CAxCF,CADF,eAoDE,oBAAC,mBAAD;AAAqB,IAAA,WAAW,EAAEH;AAAlC,IApDF,EAsDGC,SAAS,CAACG,GAAV,CAAc,CAACC,IAAD,EAAOC,KAAP,kBACb,oBAAC,IAAD;AAAM,IAAA,GAAG,EAAEA,KAAX;AAAkB,IAAA,IAAI,EAAED,IAAxB;AAA8B,IAAA,OAAO,EAAEH,WAAW,CAACG,IAAD,EAAOC,KAAP;AAAlD,IADD,CAtDH,CADF,eA4DE,oBAAC,mBAAD;AACE,IAAA,WAAW,EAAEN,WADf;AAEE,IAAA,cAAc,EAAEG;AAFlB,IA5DF,CADF;AAmED,CA9ED;;AAgFA,eAAeJ,OAAf","sourcesContent":["import React from 'react';\nimport type Animated from 'react-native-reanimated';\nimport Svg, {\n Circle,\n Defs,\n Marker,\n MarkerUnits,\n Polyline,\n Use,\n} from 'react-native-svg';\nimport CurrentAnimatedItem from './CurrentAnimatedItem';\nimport CurrentAnimatedText from './CurrentAnimatedText';\nimport Item from './Item';\nimport type { DrawItem } from '../../types';\n\nconst DrawPad = ({\n currentItem,\n doneItems,\n onPressItem,\n onTextHeightChange,\n}: {\n currentItem: Animated.SharedValue<DrawItem | null>;\n doneItems: Array<DrawItem>;\n onPressItem: (item: DrawItem, index: number) => () => void;\n onTextHeightChange: (height: number) => void;\n}) => {\n return (\n <>\n <Svg fillRule=\"evenodd\">\n <Defs>\n <Circle\n id=\"selectionIndicator\"\n fill=\"#3a6cff\"\n r={5}\n cx={0}\n cy={0}\n strokeWidth={1}\n stroke=\"white\"\n />\n <Marker\n id=\"arrowhead\"\n markerUnits={'strokeWidth' as MarkerUnits}\n refX=\"0\"\n refY=\"0\"\n orient=\"auto\"\n >\n <Polyline\n points=\"-2,-2 0,0 -2,2 0,0\"\n stroke=\"context-stroke\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </Marker>\n\n <Marker\n id=\"side\"\n markerUnits={'strokeWidth' as MarkerUnits}\n refX=\"0\"\n refY=\"0\"\n orient=\"auto\"\n >\n <Polyline\n stroke=\"context-stroke\"\n points=\"0,-2 0,2 0,0\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </Marker>\n\n <Marker\n id=\"selection\"\n markerUnits={'userSpaceOnUse' as MarkerUnits}\n refX=\"0\"\n refY=\"0\"\n orient=\"auto\"\n >\n <Use href=\"#selectionIndicator\" />\n </Marker>\n </Defs>\n\n <CurrentAnimatedItem currentItem={currentItem} />\n\n {doneItems.map((item, index) => (\n <Item key={index} item={item} onPress={onPressItem(item, index)} />\n ))}\n </Svg>\n\n <CurrentAnimatedText\n currentItem={currentItem}\n onHeightChange={onTextHeightChange}\n />\n </>\n );\n};\n\nexport default DrawPad;\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@archireport/react-native-svg-draw",
3
- "version": "0.3.4",
3
+ "version": "1.0.0",
4
4
  "description": "React Native drawing component based on SVG with editable annotations",
5
5
  "main": "lib/commonjs/index",
6
6
  "module": "lib/module/index",
@@ -48,29 +48,29 @@
48
48
  "public": true
49
49
  },
50
50
  "devDependencies": {
51
- "@commitlint/config-conventional": "^11.0.0",
52
- "@react-native-community/eslint-config": "^2.0.0",
53
- "@release-it/conventional-changelog": "^2.0.0",
54
- "@types/jest": "^26.0.0",
55
- "@types/react": "^16.9.19",
56
- "@types/react-native": "0.63.52",
57
- "commitlint": "^11.0.0",
58
- "eslint": "^7.2.0",
51
+ "@commitlint/config-conventional": "^16.2.4",
52
+ "@react-native-community/eslint-config": "^3.0.1",
53
+ "@release-it/conventional-changelog": "^5.0.0",
54
+ "@types/jest": "^27.5.0",
55
+ "@types/react": "^17.0.0",
56
+ "@types/react-native": "^0.67.6",
57
+ "commitlint": "^16.2.4",
58
+ "eslint": "^7.32.0",
59
59
  "eslint-config-prettier": "^7.0.0",
60
60
  "eslint-plugin-prettier": "^3.1.3",
61
61
  "husky": "^4.2.5",
62
- "jest": "^26.0.1",
63
- "pod-install": "^0.1.0",
62
+ "jest": "^28.1.0",
63
+ "pod-install": "^0.1.35",
64
64
  "prettier": "^2.0.5",
65
- "react": "16.13.1",
66
- "react-native": "0.63.4",
67
- "react-native-builder-bob": "^0.18.0",
68
- "react-native-gesture-handler": "^1.10.3",
69
- "react-native-reanimated": "^2.2.0",
70
- "react-native-svg": "^12.1.1",
65
+ "react": "17.0.2",
66
+ "react-native": "^0.68.2",
67
+ "react-native-builder-bob": "^0.18.2",
68
+ "react-native-gesture-handler": "^2.4.2",
69
+ "react-native-reanimated": "^2.8.0",
70
+ "react-native-svg": "^12.3.0",
71
71
  "react-native-view-shot": "^3.1.2",
72
- "release-it": "^14.2.2",
73
- "typescript": "^4.1.3"
72
+ "release-it": "^15.0.0",
73
+ "typescript": "^4.4.0"
74
74
  },
75
75
  "peerDependencies": {
76
76
  "react": "*",
package/src/components/DrawCore/CurrentAnimatedItem.tsx CHANGED
@@ -86,7 +86,6 @@ export default function CurrentAnimatedItem({
86
86
  ry: coordinates.ry,
87
87
  stroke: hslToRgb(currentItem.value?.color || 'hsl(0, 0%, 0%)'),
88
88
  opacity: currentItem.value?.type === 'ellipse' ? 1 : 0,
89
- fill: 'none',
90
89
  strokeWidth:
91
90
  currentItem.value?.type === 'ellipse'
92
91
  ? currentItem.value.strokeWidth
@@ -107,12 +106,11 @@ export default function CurrentAnimatedItem({
107
106
  y2: coordinates.y2,
108
107
  stroke: hslToRgb(currentItem.value?.color || 'hsl(0, 0%, 0%)'),
109
108
  opacity: currentItem.value?.type === 'singleHead' ? 1 : 0,
110
- fill: 'none',
111
109
  strokeWidth:
112
110
  currentItem.value?.type === 'singleHead'
113
111
  ? currentItem.value.strokeWidth
114
112
  : 0,
115
- markerEnd: 'url(#arrowhead)',
113
+ markerEnd: 'arrowhead',
116
114
  };
117
115
  }, [currentItem.value]);
118
116
 
@@ -129,13 +127,12 @@ export default function CurrentAnimatedItem({
129
127
  y2: coordinates.y2,
130
128
  stroke: hslToRgb(currentItem.value?.color || 'hsl(0, 0%, 0%)'),
131
129
  opacity: currentItem.value?.type === 'doubleHead' ? 1 : 0,
132
- fill: 'none',
133
130
  strokeWidth:
134
131
  currentItem.value?.type === 'doubleHead'
135
132
  ? currentItem.value.strokeWidth
136
133
  : 0,
137
- markerStart: 'url(#side)',
138
- markerEnd: 'url(#side)',
134
+ markerStart: 'side',
135
+ markerEnd: 'side',
139
136
  };
140
137
  }, [currentItem.value]);
141
138
 
@@ -150,7 +147,6 @@ export default function CurrentAnimatedItem({
150
147
  width: coordinates.width,
151
148
  height: coordinates.height,
152
149
  stroke: hslToRgb(currentItem.value?.color || 'hsl(0, 0%, 0%)'),
153
- fill: 'none',
154
150
  opacity: currentItem.value?.type === 'rectangle' ? 1 : 0,
155
151
  strokeWidth:
156
152
  currentItem.value?.type === 'rectangle'
@@ -172,8 +168,8 @@ export default function CurrentAnimatedItem({
172
168
  currentItem.value?.type === 'pen' ? currentItem.value.strokeWidth : 0,
173
169
  stroke: hslToRgb(currentItem.value?.color || 'hsl(0, 0%, 0%)'),
174
170
  opacity: currentItem.value?.type === 'pen' ? 1 : 0,
175
- markerStart: 'url(#selection)',
176
- markerEnd: 'url(#selection)',
171
+ markerStart: 'selection',
172
+ markerEnd: 'selection',
177
173
  };
178
174
  }, [currentItem.value]);
179
175
 
package/src/components/DrawCore/DrawPad.tsx CHANGED
@@ -63,6 +63,7 @@ const DrawPad = ({
63
63
  stroke="context-stroke"
64
64
  points="0,-2 0,2 0,0"
65
65
  strokeLinecap="round"
66
+ strokeLinejoin="round"
66
67
  />
67
68
  </Marker>
68
69
 
package/src/types.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ import React from 'react';
1
2
  import { View } from 'react-native';
2
3
  import {
3
4
  ForeignObjectProps,