@archireport/react-native-svg-draw 0.3.3 → 1.0.1

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(() => {

package/src/components/DrawWithOptions/index.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import {
   Pressable,
   View,
@@ -6,6 +6,7 @@ import {
   ViewProps,
   ImageRequireSource,
   ImageURISource,
+  Keyboard,
 } from 'react-native';
 import DrawCore from '../DrawCore';
 import type { DrawItemType, DrawCoreProps } from '../../types';
@@ -81,6 +82,27 @@ export default function DrawWithOptions({
     }
   }, [takeSnapshot]);
 
+  const [showToolbar, setShowToolbar] = useState(true);
+
+  useEffect(() => {
+    const sudDidHide = Keyboard.addListener('keyboardDidHide', () => {
+      setShowToolbar(true);
+    });
+
+    const sudDidShow = Keyboard.addListener('keyboardDidShow', (event) => {
+      // avoid events triggered by InputAccessoryView
+      if (event.endCoordinates.height > 100) {
+        setShowToolbar(false);
+      }
+    });
+
+    // cleanup function
+    return () => {
+      sudDidShow.remove();
+      sudDidHide.remove();
+    };
+  }, []);
+
   return (
     <View style={styles.container}>
       <View style={styles.toolbar}>
@@ -164,21 +186,23 @@ export default function DrawWithOptions({
         onSelectionChange={setSelectedItem}
       />
 
-      <View style={styles.bottomToolBar}>
-        {selectedItem ? (
-          <Pressable
-            style={styles.option}
-            onPress={() => {
-              drawRef.current?.deleteSelectedItem();
-            }}
-          >
-            <ThrashSvg width={28} height={28} fill="white" />
+      {showToolbar ? (
+        <View style={styles.bottomToolBar}>
+          {selectedItem ? (
+            <Pressable
+              style={styles.option}
+              onPress={() => {
+                drawRef.current?.deleteSelectedItem();
+              }}
+            >
+              <ThrashSvg width={28} height={28} fill="white" />
+            </Pressable>
+          ) : null}
+          <Pressable style={styles.sendButton} onPress={onPressSend}>
+            <SendSvg fill="#fff" width={20} height={20} />
           </Pressable>
-        ) : null}
-        <Pressable style={styles.sendButton} onPress={onPressSend}>
-          <SendSvg fill="#fff" width={20} height={20} />
-        </Pressable>
-      </View>
+        </View>
+      ) : null}
     </View>
   );
 }

package/src/types.d.ts

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