Merge pull request #6 from KeyValueSoftwareSystems/fix-canvas-backgro…

…und-style fix: allow background canvas styles to be passed as a prop
KeyValueSoftwareSystems · Oct 16, 2023 · 7b8f0c2 · 7b8f0c2
2 parents 4a9c911 + 79b314b
commit 7b8f0c2
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 4 deletions.
diff --git a/src/components/SvgCapture.tsx b/src/components/SvgCapture.tsx
@@ -4,26 +4,30 @@ import {
   type LayoutChangeEvent,
   View,
   StyleSheet,
+  type ViewStyle,
+  type StyleProp,
 } from 'react-native';
 import Svg, { G, Polyline } from 'react-native-svg';
 
 type CaptureSignatureProps = {
   paths: number[][];
+  canvasStyle?: StyleProp<ViewStyle>;
   handleOnTouchStart: (e: GestureResponderEvent) => void;
   handleOnTouchMove: (e: GestureResponderEvent) => void;
   handleLayout: (e: LayoutChangeEvent) => void;
 };
 
 const SvgCapture = ({
   paths,
+  canvasStyle,
   handleOnTouchStart,
   handleOnTouchMove,
   handleLayout,
 }: CaptureSignatureProps) => {
   return (
     <View style={styles.canvasAndControlWrapper}>
       <View
-        style={styles.canvas}
+        style={[styles.canvas, canvasStyle]}
         onTouchStart={handleOnTouchStart}
         onTouchMove={handleOnTouchMove}
         onLayout={handleLayout}
@@ -55,7 +59,6 @@ const styles = StyleSheet.create({
   },
   canvas: {
     flex: 1,
-    backgroundColor: '#e0e0e0',
   },
 });
 

diff --git a/src/hooks/useSvgCapture.ts b/src/hooks/useSvgCapture.ts
@@ -8,7 +8,7 @@ const useSvgCapture = () => {
 
   const handleSetLowestPoints = (x: number, y: number) => {
     if (x < lowestPoints.current.x) {
-      lowestPoints.current.x = y;
+      lowestPoints.current.x = x;
     }
     if (y < lowestPoints.current.y) {
       lowestPoints.current.y = y;
@@ -90,9 +90,14 @@ const useSvgCapture = () => {
     </svg>`;
   };
 
-  const getFilePath = () => {
+  const getSvgAsString = () => {
     const cleanedSvgPath = getCleanedSvgImage();
     const svgString = pathsToSVG(cleanedSvgPath);
+    return svgString;
+  };
+
+  const getFilePath = async (): Promise<string> => {
+    const svgString = getSvgAsString();
     const svgBlob = svgStringToBlob(svgString);
     return svgBlob;
   };
@@ -104,6 +109,7 @@ const useSvgCapture = () => {
     handleLayout,
     clearPad,
     getFilePath,
+    getSvgAsString,
   };
 };