@archireport/react-native-svg-draw 2.3.2 → 3.1.0

package/src/components/DrawCore/DrawPad.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import type Animated from 'react-native-reanimated';
-import Svg, { Circle, Defs, Marker, Polyline, Use } from 'react-native-svg';
+import Svg, { Circle, Defs, G, Marker, Polyline, Use } from 'react-native-svg';
 import CurrentAnimatedItem from './CurrentAnimatedItem';
 import CurrentAnimatedText from './CurrentAnimatedText';
 import Item from './Item';
@@ -13,86 +13,95 @@ const DrawPad = ({
   onPressItem,
   onTextHeightChange,
   addBackground = false,
+  ratioImage = 1,
 }: {
   currentItem: Animated.SharedValue<DrawItem | null>;
   doneItems: Array<DrawItem>;
   onPressItem: (item: DrawItem, index: number) => () => void;
   onTextHeightChange: (height: number) => void;
   addBackground?: boolean;
+  ratioImage?: number;
 }) => {
   return (
     <>
-      <Svg style={addBackground ? { backgroundColor: 'white' } : null}>
-        <Defs>
-          <Circle
-            id="selectionIndicator"
-            fill="#3a6cff"
-            r={10}
-            cx={0}
-            cy={0}
-            strokeWidth={1}
-            stroke="black"
-          />
-          <Marker
-            id="arrowhead"
-            markerUnits={'strokeWidth' as MarkerUnits}
-            refX="0"
-            refY="0"
-            orient="auto"
-          >
-            <Polyline
-              points="-2,-2 0,0 -2,2 0,0"
-              stroke="context-stroke"
-              strokeLinecap="round"
-              strokeLinejoin="round"
+      <Svg
+        style={addBackground ? { backgroundColor: 'white' } : null}
+        preserveAspectRatio="xMinYMin slice"
+        height="100%"
+        width="100%"
+      >
+        <G scale={ratioImage}>
+          <Defs>
+            <Circle
+              id="selectionIndicator"
+              fill="#3a6cff"
+              r={10}
+              cx={0}
+              cy={0}
+              strokeWidth={1}
+              stroke="black"
             />
-          </Marker>
-          <Marker
-            id="arrowheadStart"
-            markerUnits={'strokeWidth' as MarkerUnits}
-            refX="0"
-            refY="0"
-            orient="auto"
-          >
-            <Polyline
-              points="2,-2 0,0 2,2 0,0"
-              stroke="context-stroke"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-            />
-          </Marker>
+            <Marker
+              id="arrowhead"
+              markerUnits={'strokeWidth' as MarkerUnits}
+              refX="0"
+              refY="0"
+              orient="auto"
+            >
+              <Polyline
+                points="-2,-2 0,0 -2,2 0,0"
+                stroke="context-stroke"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+            </Marker>
+            <Marker
+              id="arrowheadStart"
+              markerUnits={'strokeWidth' as MarkerUnits}
+              refX="0"
+              refY="0"
+              orient="auto"
+            >
+              <Polyline
+                points="2,-2 0,0 2,2 0,0"
+                stroke="context-stroke"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+            </Marker>
 
-          <Marker
-            id="side"
-            markerUnits={'strokeWidth' as MarkerUnits}
-            refX="0"
-            refY="0"
-            orient="auto"
-          >
-            <Polyline
-              stroke="context-stroke"
-              points="0,-2 0,2 0,0"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-            />
-          </Marker>
+            <Marker
+              id="side"
+              markerUnits={'strokeWidth' as MarkerUnits}
+              refX="0"
+              refY="0"
+              orient="auto"
+            >
+              <Polyline
+                stroke="context-stroke"
+                points="0,-2 0,2 0,0"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+            </Marker>
 
-          <Marker
-            id="selection"
-            markerUnits={'userSpaceOnUse' as MarkerUnits}
-            refX="0"
-            refY="0"
-            orient="auto"
-          >
-            <Use href="#selectionIndicator" />
-          </Marker>
-        </Defs>
+            <Marker
+              id="selection"
+              markerUnits={'userSpaceOnUse' as MarkerUnits}
+              refX="0"
+              refY="0"
+              orient="auto"
+            >
+              <Use href="#selectionIndicator" />
+            </Marker>
+          </Defs>
 
-        {doneItems.map((item, index) => (
-          <Item key={index} item={item} onPress={onPressItem(item, index)} />
-        ))}
+          {doneItems.map((item, index) => (
+            <Item key={index} item={item} onPress={onPressItem(item, index)} />
+          ))}
 
-        <CurrentAnimatedItem />
+          <CurrentAnimatedItem />
+        </G>
       </Svg>
       <CurrentAnimatedText
         currentItem={currentItem}

package/src/components/DrawCore/DrawProvider.tsx

@@ -1,5 +1,12 @@
 import { DrawContext } from './DrawContext';
-import React, { ReactElement, useMemo, useReducer, useRef } from 'react';
+import React, {
+  ReactElement,
+  useCallback,
+  useMemo,
+  useReducer,
+  useRef,
+  useState,
+} from 'react';
 import type { Action, DrawItem, DrawState, hslColor } from '../../types';
 import { useSharedValue } from 'react-native-reanimated';
 import type ViewShot from 'react-native-view-shot';
@@ -92,10 +99,19 @@ const DrawProvider = ({ children }: { children: ReactElement }) => {
   const viewShot = useRef<ViewShot>(null);
   const doubleArrowTextInput = useRef<TextInput>(null);
 
+  const [snapShotRequested, setSnapShotRequested] = useState(false);
+
   const [drawState, dispatchDrawStates] = useReducer(
     reducerDrawStates,
     initialState
   );
+  const doSnapshot = useCallback(() => {
+    if (currentItem?.value) {
+      dispatchDrawStates({ type: 'ADD_DONE_ITEM', item: currentItem.value });
+      currentItem.value = null;
+    }
+    setSnapShotRequested(true);
+  }, [currentItem, dispatchDrawStates]);
 
   const contextValue = useMemo(
     () => ({
@@ -107,6 +123,9 @@ const DrawProvider = ({ children }: { children: ReactElement }) => {
       itemIsSelected,
       viewShot,
       doubleArrowTextInput,
+      doSnapshot,
+      snapShotRequested,
+      setSnapShotRequested,
     }),
     [
       drawState,
@@ -117,6 +136,9 @@ const DrawProvider = ({ children }: { children: ReactElement }) => {
       itemIsSelected,
       viewShot,
       doubleArrowTextInput,
+      doSnapshot,
+      snapShotRequested,
+      setSnapShotRequested,
     ]
   );
 

package/src/components/DrawCore/Item.tsx

@@ -1,31 +1,14 @@
 import React from 'react';
-import { View, Text, StyleSheet } from 'react-native';
 import {
   G,
   Line,
   Ellipse,
   Rect,
   Path,
-  ForeignObject,
   Text as SvgText,
 } from 'react-native-svg';
 import type { DrawItem } from '../../types';
-import { hslToRgb, pointsToPath } from './CurrentAnimatedItem';
-
-const styles = StyleSheet.create({
-  textZone: {
-    paddingHorizontal: 10,
-  },
-  textContainer: {
-    //backgroundColor: 'rgba(0, 0, 0, 0.6)',
-    //borderRadius: 10,
-    paddingVertical: 13,
-    paddingHorizontal: 18,
-  },
-  text: {
-    color: 'white',
-  },
-});
+import { pointsToPath } from './CurrentAnimatedItem';
 
 export const distance = (x1: number, y1: number, x2: number, y2: number) => {
   return Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1));
@@ -263,38 +246,23 @@ export default function Item({
         />
       );
     case 'text':
+      //console.log('Rendering text item:', JSON.stringify(item, null, 2));
       return (
-        <G onPress={onPress}>
-          <Rect {...item.data} onPress={onPress} fill={'transparent'} />
-          <ForeignObject
-            x={item.data.x}
-            y={item.data.y}
-            width={item.data.width}
-            key={item.text}
+        <G onPress={onPress} fill={'red'}>
+          <G
+            x={String(item.data.x)}
+            y={String(Number(item.data.y ?? 0) + 2 * item.strokeWidth + 13)}
           >
-            <View
-              style={[
-                styles.textZone,
-                {
-                  width: item.data.width as number,
-                },
-              ]}
+            <SvgText
+              stroke={item.color}
+              fill={item.color}
+              textAnchor="start"
+              fontSize={2 * item.strokeWidth + 10}
+              onPress={onPress}
             >
-              <View style={styles.textContainer}>
-                <Text
-                  style={[
-                    styles.text,
-                    {
-                      fontSize: 10 + item.strokeWidth * 2,
-                      color: item.color ? hslToRgb(item.color) : 'white',
-                    },
-                  ]}
-                >
-                  {item.text}
-                </Text>
-              </View>
-            </View>
-          </ForeignObject>
+              {item.text}
+            </SvgText>
+          </G>
         </G>
       );