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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@archireport/react-native-svg-draw",
-  "version": "0.3.4",
+  "version": "1.0.2",
   "description": "React Native drawing component based on SVG with editable annotations",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -48,29 +48,29 @@
     "public": true
   },
   "devDependencies": {
-    "@commitlint/config-conventional": "^11.0.0",
-    "@react-native-community/eslint-config": "^2.0.0",
-    "@release-it/conventional-changelog": "^2.0.0",
-    "@types/jest": "^26.0.0",
-    "@types/react": "^16.9.19",
-    "@types/react-native": "0.63.52",
-    "commitlint": "^11.0.0",
-    "eslint": "^7.2.0",
+    "@commitlint/config-conventional": "^16.2.4",
+    "@react-native-community/eslint-config": "^3.0.1",
+    "@release-it/conventional-changelog": "^5.0.0",
+    "@types/jest": "^27.5.0",
+    "@types/react": "^17.0.0",
+    "@types/react-native": "^0.67.6",
+    "commitlint": "^16.2.4",
+    "eslint": "^7.32.0",
     "eslint-config-prettier": "^7.0.0",
     "eslint-plugin-prettier": "^3.1.3",
     "husky": "^4.2.5",
-    "jest": "^26.0.1",
-    "pod-install": "^0.1.0",
+    "jest": "^28.1.0",
+    "pod-install": "^0.1.35",
     "prettier": "^2.0.5",
-    "react": "16.13.1",
-    "react-native": "0.63.4",
-    "react-native-builder-bob": "^0.18.0",
-    "react-native-gesture-handler": "^1.10.3",
-    "react-native-reanimated": "^2.2.0",
-    "react-native-svg": "^12.1.1",
+    "react": "17.0.2",
+    "react-native": "^0.68.2",
+    "react-native-builder-bob": "^0.18.2",
+    "react-native-gesture-handler": "^2.4.2",
+    "react-native-reanimated": "^2.8.0",
+    "react-native-svg": "^12.3.0",
     "react-native-view-shot": "^3.1.2",
-    "release-it": "^14.2.2",
-    "typescript": "^4.1.3"
+    "release-it": "^15.0.0",
+    "typescript": "^4.4.0"
   },
   "peerDependencies": {
     "react": "*",

package/src/components/DrawCore/CurrentAnimatedItem.tsx

@@ -86,7 +86,6 @@ export default function CurrentAnimatedItem({
       ry: coordinates.ry,
       stroke: hslToRgb(currentItem.value?.color || 'hsl(0, 0%, 0%)'),
       opacity: currentItem.value?.type === 'ellipse' ? 1 : 0,
-      fill: 'none',
       strokeWidth:
         currentItem.value?.type === 'ellipse'
           ? currentItem.value.strokeWidth
@@ -107,12 +106,11 @@ export default function CurrentAnimatedItem({
       y2: coordinates.y2,
       stroke: hslToRgb(currentItem.value?.color || 'hsl(0, 0%, 0%)'),
       opacity: currentItem.value?.type === 'singleHead' ? 1 : 0,
-      fill: 'none',
       strokeWidth:
         currentItem.value?.type === 'singleHead'
           ? currentItem.value.strokeWidth
           : 0,
-      markerEnd: 'url(#arrowhead)',
+      markerEnd: 'arrowhead',
     };
   }, [currentItem.value]);
 
@@ -129,13 +127,12 @@ export default function CurrentAnimatedItem({
       y2: coordinates.y2,
       stroke: hslToRgb(currentItem.value?.color || 'hsl(0, 0%, 0%)'),
       opacity: currentItem.value?.type === 'doubleHead' ? 1 : 0,
-      fill: 'none',
       strokeWidth:
         currentItem.value?.type === 'doubleHead'
           ? currentItem.value.strokeWidth
           : 0,
-      markerStart: 'url(#side)',
-      markerEnd: 'url(#side)',
+      markerStart: 'side',
+      markerEnd: 'side',
     };
   }, [currentItem.value]);
 
@@ -150,7 +147,6 @@ export default function CurrentAnimatedItem({
       width: coordinates.width,
       height: coordinates.height,
       stroke: hslToRgb(currentItem.value?.color || 'hsl(0, 0%, 0%)'),
-      fill: 'none',
       opacity: currentItem.value?.type === 'rectangle' ? 1 : 0,
       strokeWidth:
         currentItem.value?.type === 'rectangle'
@@ -172,8 +168,8 @@ export default function CurrentAnimatedItem({
         currentItem.value?.type === 'pen' ? currentItem.value.strokeWidth : 0,
       stroke: hslToRgb(currentItem.value?.color || 'hsl(0, 0%, 0%)'),
       opacity: currentItem.value?.type === 'pen' ? 1 : 0,
-      markerStart: 'url(#selection)',
-      markerEnd: 'url(#selection)',
+      markerStart: 'selection',
+      markerEnd: 'selection',
     };
   }, [currentItem.value]);
 

package/src/components/DrawCore/DrawPad.tsx

@@ -63,6 +63,7 @@ const DrawPad = ({
               stroke="context-stroke"
               points="0,-2 0,2 0,0"
               strokeLinecap="round"
+              strokeLinejoin="round"
             />
           </Marker>
 

package/src/components/DrawCore/index.tsx

@@ -293,10 +293,14 @@ const DrawCore = React.forwardRef<
         onSelectionChange?.(false);
       },
       takeSnapshot: async (): Promise<string | undefined> => {
+        if (currentItem.value) {
+          updateDoneItems(currentItem.value);
+          currentItem.value = null;
+        }
         return viewShot.current?.capture?.();
       },
     }),
-    [currentItem, onSelectionChange]
+    [currentItem, onSelectionChange, updateDoneItems]
   );
 
   useEffect(() => {
@@ -1220,7 +1224,6 @@ const DrawCore = React.forwardRef<
                     options={{
                       format: 'jpg',
                       quality: 1,
-                      ...originalImageSize,
                     }}
                     style={imageSize}
                   >

package/src/types.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { View } from 'react-native';
 import {
   ForeignObjectProps,