react-native-signature-canvas 4.2.0 → 4.3.1

package/README.md

@@ -55,10 +55,10 @@ import SignatureScreen from 'react-native-signature-canvas';
 | backgroundColor                     |  `string`  | default is "rgba(255,255,255,0)" (_transparent_), background color of the canvas                                                                                           |
 | bgHeight                            |  `number`  | height of the background image                                                                                                                        |
 | bgWidth                             |  `number`  | width of the background image                                                                                                                         |
-| bgSrc                               |  `string`  | background image source uri (_html_)                                                                                                                  |
+| bgSrc                               |  `string`  | background image source uri (_url_)                                                                                                                  |
 | clearText                           |  `string`  | clear button text                                                                                                                                     |
 | confirmText                         |  `string`  | save button text                                                                                                                                      |
-| customHtml                          | `function` | html string that lets you modify things like the layout or elements                                                                                   |
+| customHtml                          | `(injectedJavaScript: string) => string` | html string that lets you modify things like the layout or elements                                                                                   |
 | dataURL                             |  `string`  | default is "", Base64 string, draws saved signature from dataURL.                                                                                     |
 | descriptionText                     |  `string`  | description text for signature                                                                                                                        |
 | dotSize                             |  `number`  | radius of a single dot _(not stroke width)_                                                                                                           |
@@ -68,6 +68,7 @@ import SignatureScreen from 'react-native-signature-canvas';
 | onOK                                | `function` | callback function after saving non-empty signature                                                                                                    |
 | onEmpty                             | `function` | callback function after trying to save an empty signature                                                                                             |
 | onClear                             | `function` | callback function after clearing the signature                                                                                                        |
+|onGetData|`function`|callback function when getData() is called
 | onBegin                             | `function` | callback function when a new stroke is started                                                                                                        |
 | onEnd                               | `function` | callback function when the stroke has ended                                                                                                           |
 | onUndo                              | `function` | callback function when undo() is called |
@@ -75,9 +76,10 @@ import SignatureScreen from 'react-native-signature-canvas';
 | onDraw                              | `function` | callback function when drawing is enabled                                                                                                             |
 | onErase                             | `function` | callback function when erasing is enabled                                                                                                             |
 | onChangePenColor                    | `function` | callback function after changing the pen color |
+| onChangePenSize | `function` | callback function after changing the pen size
 |overlayHeight|`number`|height of the overlay image|
 |overlayWidth|`number`|width of the overlay image|
-|overlaySrc|`string`|overlay image source uri (html) _must be .png with a transparent background_
+|overlaySrc|`string`|overlay image source uri (url) _must be .png with a transparent background_
 | penColor                            |  `string`  | default is "black", color of pen                                                                                                                      |
 | rotated                             | `boolean`  | rotate signature pad 90 degrees                                                                                                                       |
 | style                               |  `object`  | style of wrapper view                                                                                                                                 |
@@ -88,15 +90,17 @@ import SignatureScreen from 'react-native-signature-canvas';
 
 ---
 
-| Function              | Description                                                                                 |
-| :-------------------- | :------------------------------------------------------------------------------------------ |
-| clearSignature()      | Clear the current signature                                                                 |
-| changePenColor(color) | Change pen color                                                                            |
-| draw()                | Enable drawing signature                                                                    |
-| erase()               | Enable erasing signature                                                                    |
-| readSignature()       | Reads the current signature on the canvas and triggers either the onOK or onEmpty callbacks |
-| undo()                | Undo last stroke                                                                            |
-| redo()                | Redo last stroke                                                                            |
+| Function                  | Description                                                                                     |
+| :--------------------     | :-----------------------------------------------------------------------------------------------|
+| clearSignature()          | Clear the current signature                                                                     |
+| changePenColor(color)     | Change pen color                                                                                |
+| changePenSize(minW, maxW) | Change pen size                                                                                 |
+| draw()                    | Enable drawing signature                                                                        |
+| erase()                   | Enable erasing signature                                                                        |
+| getData()                 | Triggers the `onGetData` callback with a single `data` JSON string                              |
+| readSignature()           | Reads the current signature on the canvas and triggers either the `onOK` or `onEmpty` callbacks |
+| undo()                    | Undo last stroke                                                                                |
+| redo()                    | Redo last stroke                                                                                |
 
 To call the methods use the `useRef` hook:
 
@@ -127,6 +131,11 @@ const Sign = ({ text, onOK }) => {
     ref.current.readSignature();
   };
 
+  // Called after ref.current.getData()
+  const handleData = (data) => {
+    console.log(data);
+  };
+
   return (
     <SignatureScreen
       ref={ref}
@@ -134,6 +143,7 @@ const Sign = ({ text, onOK }) => {
       onOK={handleOK}
       onEmpty={handleEmpty}
       onClear={handleClear}
+      onGetData={handleData}
       autoClear={true}
       descriptionText={text}
     />
@@ -167,7 +177,7 @@ const style = `.m-signature-pad {box-shadow: none; border: none; }
 ```
 
 ## Using an overlay image
-An overlay is a non-erasable image that can be used to "guide" the drawing, similar to lines in a colouring book. Make sure the image format is .png and that it has a transparent background. Also, don't forget to provide the width and height of the image.
+An overlay is a non-erasable image that can be used as a guideline similar to a colouring book. Make sure the image format is .png and that it has a transparent background. Also, don't forget to provide the width and height of the image.
 Use the `overlaySrc` prop to provide the link.
 
 ```js
@@ -193,7 +203,7 @@ const style = `.m-signature-pad {box-shadow: none; border: none; }
 
 ## Save Base64 Image as File
 
-If you use expo, you can use **expo-file-system** to save the base64 image as a local file; if you're working with react-native-cli, use **react-native-fs**.
+If you're using expo, you can use **expo-file-system** to save the base64 image as a local file; if you're working with react-native-cli, use **react-native-fs**.
 
 ```js
 import * as FileSystem from "expo-file-system";

package/h5/js/app.js

@@ -50,10 +50,16 @@ export default `
         window.ReactNativeWebView.postMessage("REDO");
       }
 
-    function changePenColor(color){
+    function changePenColor(color) {
         signaturePad.penColor = color;
         window.ReactNativeWebView.postMessage("CHANGE_PEN");
     }
+
+    function changePenSize(minW, maxW) {
+      signaturePad.minWidth = minW;
+      signaturePad.maxWidth = maxW;
+      window.ReactNativeWebView.postMessage("CHANGE_PEN_SIZE");
+    }
     
     function getData () {
         var data = signaturePad.toData();
@@ -61,15 +67,11 @@ export default `
     }
 
     function draw() {
-      //signaturePad.minWidth= 0.5;
-      //signaturePad.maxWidth= 2.5;
       signaturePad.draw();
       window.ReactNativeWebView.postMessage("DRAW");
     }
 
     function erase() {
-      //signaturePad.minWidth= 5;
-      //signaturePad.maxWidth= 10;
       signaturePad.erase();
       window.ReactNativeWebView.postMessage("ERASE");
     }

package/h5/js/signature_pad.js

@@ -193,7 +193,7 @@ export default `
                 this.throttle
               ))
             : SignaturePad.prototype._strokeUpdate;
-          this.dotSize = options.dotSize || (this.minWidth + this.maxWidth) / 2;
+          this.dotSize = options.dotSize || function dotSize() {return (this.minWidth + this.maxWidth) / 2;};
           this.penColor = options.penColor || "black";
           this.backgroundColor = options.backgroundColor || "rgba(255,255,255,0)";
           this.onBegin = options.onBegin;
@@ -270,14 +270,8 @@ export default `
           this._isEmpty = false;
           if (!this._startingSignature) this._startingSignature = dataUrl;
       };
-      SignaturePad.prototype.toDataURL = function (type, encoderOptions) {
-          if (type === void 0) { type = 'image/png'; }
-          switch (type) {
-              case 'image/svg+xml':
-                  return this._toSVG();
-              default:
-                  return this.canvas.toDataURL(type, encoderOptions);
-          }
+      SignaturePad.prototype.toDataURL = function (type = "image/png", encoderOptions) {
+        return type === "image/svg+xml" ? this._toSVG() : this.canvas.toDataURL(type, encoderOptions);
       };
       SignaturePad.prototype.on = function () {
           this.canvas.style.touchAction = 'none';
@@ -315,7 +309,7 @@ export default `
           this._fromData(
             pointGroups,
             ({ color, curve }) => _this._drawCurve({ color, curve }),
-            ({ color, point }) => _this._drawDot({ color, point })
+            ({ color, point, dotSize }) => _this._drawDot({ color, point, dotSize })
           );
           this._data = pointGroups;
         }
@@ -326,10 +320,10 @@ export default `
       SignaturePad.prototype._strokeBegin = function (event) {
         var newPointGroup = {
           color: this.penColor,
-          dotSize: this.dotSize, // Enhance undo
-          minWidth: this.minWidth, // Enhance undo
-          maxWidth: this.maxWidth, // Enhance undo
-          compositeOperation: this._ctx.globalCompositeOperation, // Fix undo problem
+          dotSize: typeof this.dotSize === 'function' ? this.dotSize() : this.dotSize,
+          minWidth: this.minWidth,
+          maxWidth: this.maxWidth,
+          compositeOperation: this._ctx.globalCompositeOperation,
           points: [],
         };
         if (typeof this.onBegin === "function") {
@@ -392,7 +386,7 @@ export default `
       SignaturePad.prototype._reset = function () {
           this._lastPoints = [];
           this._lastVelocity = 0;
-          this._lastWidth = (this.minWidth + this.maxWidth) / 2;
+          this._lastWidth = typeof this.dotSize === 'function' ? this.dotSize() : this.dotSize;
           this._ctx.fillStyle = this.penColor;
       };
       SignaturePad.prototype._createPoint = function (x, y) {
@@ -403,24 +397,24 @@ export default `
             return new Point(x - rect.left, y - rect.top, new Date().getTime());
           }
       };
-      SignaturePad.prototype._addPoint = function (point) {
+      SignaturePad.prototype._addPoint = function (point, minWidth = this.minWidth, maxWidth = this.maxWidth) {
           var _lastPoints = this._lastPoints;
           _lastPoints.push(point);
           if (_lastPoints.length > 2) {
               if (_lastPoints.length === 3) {
                   _lastPoints.unshift(_lastPoints[0]);
               }
-              var widths = this._calculateCurveWidths(_lastPoints[1], _lastPoints[2]);
+              var widths = this._calculateCurveWidths(_lastPoints[1], _lastPoints[2], minWidth, maxWidth);
               var curve = Bezier.fromPoints(_lastPoints, widths);
               _lastPoints.shift();
               return curve;
           }
           return null;
       };
-      SignaturePad.prototype._calculateCurveWidths = function (startPoint, endPoint) {
+      SignaturePad.prototype._calculateCurveWidths = function (startPoint, endPoint, minWidth = this.minWidth, maxWidth = this.maxWidth) {
           var velocity = this.velocityFilterWeight * endPoint.velocityFrom(startPoint) +
               (1 - this.velocityFilterWeight) * this._lastVelocity;
-          var newWidth = this._strokeWidth(velocity);
+          var newWidth = this._strokeWidth(velocity, minWidth, maxWidth);
           var widths = {
               end: newWidth,
               start: this._lastWidth
@@ -429,8 +423,8 @@ export default `
           this._lastWidth = newWidth;
           return widths;
       };
-      SignaturePad.prototype._strokeWidth = function (velocity) {
-          return Math.max(this.maxWidth / (velocity + 1), this.minWidth);
+      SignaturePad.prototype._strokeWidth = function (velocity, minWidth = this.minWidth, maxWidth = this.maxWidth) {
+          return Math.max(maxWidth / (velocity + 1), minWidth);
       };
       SignaturePad.prototype._drawCurveSegment = function (x, y, width) {
           var ctx = this._ctx;
@@ -467,15 +461,9 @@ export default `
           ctx.fill();
       };
       SignaturePad.prototype._drawDot = function (_a) {
-        var color = _a.color,
-          point = _a.point;
+        var color = _a.color, point = _a.point;
         var ctx = this._ctx;
-        //var width = typeof this.dotSize === "function" ? this.dotSize() : this.dotSize;
-        var width = typeof _a.dotSize
-          ? _a.dotSize
-          : typeof this.dotSize === "function"
-          ? this.dotSize()
-          : this.dotSize; // Enhance undo
+        var width = _a.dotSize ? _a.dotSize : typeof this.dotSize === "function" ? this.dotSize() : this.dotSize;
         ctx.beginPath();
         this._drawCurveSegment(point.x, point.y, width);
         ctx.closePath();
@@ -485,29 +473,20 @@ export default `
       SignaturePad.prototype._fromData = function (pointGroups, drawCurve, drawDot) {
         for (var i = 0; i < pointGroups.length; i++) {
           var group = pointGroups[i];
-          var color = group.color,
-            points = group.points;
-          var minWidth = group.minWidth,
-            maxWidth = group.maxWidth; // Enhance undo
-          var compositeOperation = group.compositeOperation; // Fix undo problem
+          var color = group.color, points = group.points;
+          var minWidth = group.minWidth, maxWidth = group.maxWidth, dotSize = group.dotSize;
+          var compositeOperation = group.compositeOperation;
           this._reset();
+          this._lastWidth = dotSize;
           if (points.length > 1) {
             for (var j = 0; j < points.length; j++) {
-              var basicPoint = points[j];
-              var point = new Point(
-                basicPoint.x,
-                basicPoint.y,
-                basicPoint.time
-              );
-              // this.penColor = color;
-              this.minWidth = minWidth; // Enhance undo
-              this.maxWidth = maxWidth; // Enhance undo
-              this._ctx.globalCompositeOperation = compositeOperation; // Fix undo problem
-              var curve = this._addPoint(point);
+              var point = new Point(points[j].x, points[j].y, points[j].time);
+              this._ctx.globalCompositeOperation = compositeOperation;
+              var curve = this._addPoint(point, minWidth, maxWidth);
               if (curve) drawCurve({ color, curve });
-            }
-          } else drawDot({ color, point: points[0] });
-        }
+            };
+          } else drawDot({ color, point: points[0], dotSize });
+        };
         this._ctx.globalCompositeOperation = this._isDrawing ? "source-over" : "destination-out";
       };
       SignaturePad.prototype._toSVG = function () {
@@ -523,38 +502,28 @@ export default `
           svg.setAttribute('height', this.canvas.height.toString());
           this._fromData(pointGroups, function (_a) {
               var color = _a.color, curve = _a.curve;
-              var path = document.createElement('path');
-              if (!isNaN(curve.control1.x) &&
-                  !isNaN(curve.control1.y) &&
-                  !isNaN(curve.control2.x) &&
-                  !isNaN(curve.control2.y)) {
-                  var attr = "M " + curve.startPoint.x.toFixed(3) + "," + curve.startPoint.y.toFixed(3) + " " +
-                      ("C " + curve.control1.x.toFixed(3) + "," + curve.control1.y.toFixed(3) + " ") +
-                      (curve.control2.x.toFixed(3) + "," + curve.control2.y.toFixed(3) + " ") +
-                      (curve.endPoint.x.toFixed(3) + "," + curve.endPoint.y.toFixed(3));
-                  path.setAttribute('d', attr);
-                  path.setAttribute('stroke-width', (curve.endWidth * 2.25).toFixed(3));
-                  path.setAttribute('stroke', color);
-                  path.setAttribute('fill', 'none');
-                  path.setAttribute('stroke-linecap', 'round');
-                  svg.appendChild(path);
+              var path = document.createElement("path");
+              if (!isNaN(curve.control1.x) && !isNaN(curve.control1.y) && !isNaN(curve.control2.x) && !isNaN(curve.control2.y)) {
+                var attr = "M " + curve.startPoint.x.toFixed(3) + "," + curve.startPoint.y.toFixed(3) + " " + ("C " + curve.control1.x.toFixed(3) + "," + curve.control1.y.toFixed(3) + " ") + (curve.control2.x.toFixed(3) + "," + curve.control2.y.toFixed(3) + " ") + (curve.endPoint.x.toFixed(3) + "," + curve.endPoint.y.toFixed(3));
+                path.setAttribute("d", attr);
+                path.setAttribute("stroke-width", (curve.endWidth * 2.25).toFixed(3));
+                path.setAttribute("stroke", color);
+                path.setAttribute("fill", "none");
+                path.setAttribute("stroke-linecap", "round");
+                svg.appendChild(path);
               }
-          }, function (_a) {
-            var color = _a.color,
-              point = _a.point;
-            var circle = document.createElement("circle");
-            // var dotSize = typeof _this.dotSize === "function" ? _this.dotSize() : _this.dotSize;
-            var dotSize = typeof _a.dotSize
-              ? _a.dotSize
-              : typeof _this.dotSize === "function"
-              ? _this.dotSize()
-              : _this.dotSize; // Enhance undo
-            circle.setAttribute("r", dotSize.toString());
-            circle.setAttribute("cx", point.x.toString());
-            circle.setAttribute("cy", point.y.toString());
-            circle.setAttribute("fill", color);
-            svg.appendChild(circle);
-          });
+            },
+            function (_a) {
+              var color = _a.color,point = _a.point;
+              var circle = document.createElement("circle");
+              var dotSize = _a.dotSize ? _a.dotSize : typeof _this.dotSize === "function" ? _this.dotSize() : _this.dotSize;
+              circle.setAttribute("r", dotSize.toString());
+              circle.setAttribute("cx", point.x.toString());
+              circle.setAttribute("cy", point.y.toString());
+              circle.setAttribute("fill", color);
+              svg.appendChild(circle);
+            }
+          );
           var prefix = 'data:image/svg+xml;base64,';
           var header = '<svg' +
               ' xmlns="http://www.w3.org/2000/svg"' +

package/index.d.ts

@@ -2,9 +2,9 @@ declare module "react-native-signature-canvas" {
   import React from "react";
   import {StyleProp, ViewStyle} from "react-native";
 
-  type ImageType = "image/jpeg" | "image/svg+xml";
+  type ImageType = "image/png" | "image/jpeg" | "image/svg+xml";
 
-  type DataURL = "Base64";
+  type DataURL = "Base64" | string;
 
   type ForwardRef<T, P> = React.ForwardRefExoticComponent<React.PropsWithoutRef<P> & React.RefAttributes<T>>;
 
@@ -17,7 +17,7 @@ declare module "react-native-signature-canvas" {
     bgSrc?: string;
     clearText?: string;
     confirmText?: string;
-    customHtml?: string | null | undefined;
+    customHtml?: (injectedJavaScript: string) => string;
     dataURL?: DataURL;
     descriptionText?: string;
     dotSize?: number;
@@ -32,7 +32,8 @@ declare module "react-native-signature-canvas" {
     onDraw?: () => void;
     onErase?: () => void;
     onGetData?: () => void;
-    onChangePenColo?: () => void;
+    onChangePenColor?: () => void;
+    onChangePenSize?: () => void;
     onBegin?: () => void;
     onEnd?: () => void;
     overlayHeight?: number;
@@ -49,6 +50,7 @@ declare module "react-native-signature-canvas" {
 
   export type SignatureViewRef = {
     changePenColor: (color: string) => void;
+    changePenSize: (minW: number, maxW: number) => void;
     clearSignature: () => void;
     cropWhitespace: (url: string) => void;
     draw: () => void;
@@ -61,4 +63,4 @@ declare module "react-native-signature-canvas" {
 
   const SignatureView: ForwardRef<SignatureViewRef, SignatureViewProps>
   export default SignatureView;
-}
+}

package/index.js

@@ -28,7 +28,7 @@ const SignatureView = forwardRef(({
   customHtml = null,
   dataURL = "",
   descriptionText = "Sign above",
-  dotSize = 0,
+  dotSize = null,
   imageType = "",
   minWidth = 0.5,
   maxWidth = 2.5,
@@ -41,6 +41,7 @@ const SignatureView = forwardRef(({
   onErase=()=>{},
   onGetData=()=>{},
   onChangePenColor=()=>{},
+  onChangePenSize=()=>{},
   onBegin = () => {},
   onEnd = () => {},
   overlayHeight = 0,
@@ -68,7 +69,7 @@ const SignatureView = forwardRef(({
     injectedJavaScript = injectedJavaScript.replace(/<%dotSize%>/g, dotSize);
     injectedJavaScript = injectedJavaScript.replace(/<%minWidth%>/g, minWidth);
     injectedJavaScript = injectedJavaScript.replace(/<%maxWidth%>/g, maxWidth);
-    
+
     let html = htmlContentValue(injectedJavaScript);
     html = html.replace(/<%bgWidth%>/g, bgWidth);
     html = html.replace(/<%bgHeight%>/g, bgHeight);
@@ -83,8 +84,8 @@ const SignatureView = forwardRef(({
     html = html.replace(/<%orientation%>/g, rotated);
 
     return { html };
-  }, [customHtml, autoClear, trimWhitespace, rotated, imageType, webStyle, descriptionText, confirmText, clearText, dataURL])
-  
+  }, [customHtml, autoClear, trimWhitespace, rotated, imageType, webStyle, descriptionText, confirmText, clearText, dataURL, bgSrc, bgWidth, bgHeight])
+
   const isJson = (str)=> {
     try {
         JSON.parse(str);
@@ -123,6 +124,9 @@ const SignatureView = forwardRef(({
       case "CHANGE_PEN":
         onChangePenColor();
         break;
+      case "CHANGE_PEN_SIZE":
+        onChangePenSize();
+        break;
       default:
         isJson(e.nativeEvent.data)? onGetData(e.nativeEvent.data): onOK(e.nativeEvent.data);
     }
@@ -164,6 +168,11 @@ const SignatureView = forwardRef(({
         webViewRef.current.injectJavaScript("changePenColor('"+color+"');true;");
       }
     },
+    changePenSize: (minW, maxW) => {
+      if (webViewRef.current) {
+        webViewRef.current.injectJavaScript("changePenSize("+minW+','+maxW+");true;");
+      }
+    },
     getData: () => {
       if (webViewRef.current) {
         webViewRef.current.injectJavaScript("getData();true;");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-signature-canvas",
-  "version": "4.2.0",
+  "version": "4.3.1",
   "description": "React Native Signature Component based Canvas for Android && IOS && expo",
   "main": "index.js",
   "scripts": {
@@ -29,9 +29,9 @@
   },
   "homepage": "https://github.com/YanYuanFE/react-native-signature-canvas#readme",
   "devDependencies": {
-    "react-native-webview": "^11.0.3"
+    "react-native-webview": "^11.17.0"
   },
   "peerDependencies": {
-    "react-native-webview": "^11.0.3"
+    "react-native-webview": "11"
   }
 }