feat: add redraw and to SVG data URL methods

Author: michaeldzjap

__tests__/SignaturePad.test.tsx

@@ -119,6 +119,16 @@ describe('Component', () => {
             expect(signaturePad.toDataURL()).toContain('data:image/png;base64');
         });
 
+        it('returns a signature as an SVG data URL', () => {
+            const instance = React.createRef<SignaturePad>();
+
+            render(<SignaturePad ref={instance} redrawOnResize />);
+
+            const signaturePad = instance.current as SignaturePad;
+
+            expect(signaturePad.toSvgDataUrl({ includeDataUrl: true })).toContain('data:image/svg+xml;base64');
+        });
+
         it('returns a signature as an SVG string', () => {
             const instance = React.createRef<SignaturePad>();
 
@@ -200,14 +210,14 @@ describe('Component', () => {
             render(<SignaturePad ref={instance} />);
 
             const signaturePad = instance.current as SignaturePad;
-            const spy = jest.spyOn(signaturePad.instance, 'clear');
+            const spy = jest.spyOn(signaturePad.instance, 'redraw');
 
             scaleCanvas(768, 768);
             React.act(() => {
                 signaturePad.handleResize();
             });
 
-            expect(spy).toHaveBeenCalled();
+            expect(spy).not.toHaveBeenCalled();
         });
 
         it('redraws a signature when the viewport dimensions change', () => {
@@ -219,7 +229,7 @@ describe('Component', () => {
 
             signaturePad.fromDataURL(signature);
 
-            const spy = jest.spyOn(signaturePad.instance, 'toDataURL');
+            const spy = jest.spyOn(signaturePad.instance, 'redraw');
 
             scaleCanvas(768, 768);
             React.act(() => {
@@ -238,7 +248,7 @@ describe('Component', () => {
 
             signaturePad.fromDataURL(signature);
 
-            const spy = jest.spyOn(signaturePad.instance, 'toDataURL');
+            const spy = jest.spyOn(signaturePad.instance, 'redraw');
 
             signaturePad.handleResize();
 

src/SignaturePad.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
-import SigPad, { type Options, type PointGroup, type ToSVGOptions } from 'signature_pad';
+import SigPad, { type FromDataUrlOptions, type Options, type PointGroup, type ToSVGOptions } from 'signature_pad';
 import { debounce } from 'throttle-debounce';
 
 type Props = {
@@ -251,7 +251,7 @@ class SignaturePad extends React.PureComponent<Props, State> {
      *
      * @return {boolean}
      */
-    isEmpty(): boolean {
+    public isEmpty(): boolean {
         return this.signaturePad.isEmpty();
     }
 
@@ -260,21 +260,27 @@ class SignaturePad extends React.PureComponent<Props, State> {
      *
      * @return {void}
      */
-    clear(): void {
+    public clear(): void {
         this.signaturePad.clear();
     }
 
+    /**
+     * Redraw the signature.
+     * 
+     * @return {void}
+     */
+    public redraw(): void {
+        this.signaturePad.redraw();
+    }
+
     /**
      * Draw a signature from a data URL.
      *
      * @param {string} dataUrl
      * @param {object} options
      * @return {void}
      */
-    fromDataURL(
-        dataUrl: string,
-        options: Partial<{ ratio: number; width: number; height: number; xOffset: number; yOffset: number }> = {},
-    ): void {
+    public fromDataURL(dataUrl: string, options: FromDataUrlOptions = {}): void {
         this.signaturePad.fromDataURL(dataUrl, options);
     }
 
@@ -285,10 +291,21 @@ class SignaturePad extends React.PureComponent<Props, State> {
      * @param {?number} encoderOptions
      * @return {string}
      */
-    toDataURL(type?: string, encoderOptions?: number): string {
+    public toDataURL(type?: string, encoderOptions?: number): string {
         return this.signaturePad.toDataURL(type, encoderOptions);
     }
 
+    /**
+     * Get the signature data as an SVG data URL.
+     *
+     * @param {string} mime
+     * @param {?ToSVGOptions} encoderOptions
+     * @return {string}
+     */
+    public toSvgDataUrl(encoderOptions?: ToSVGOptions): string {
+        return this.signaturePad.toDataURL('image/svg+xml', encoderOptions);
+    }
+
     /**
      * Get the signature data as an SVG string without converting to base64.
      *
@@ -365,12 +382,6 @@ class SignaturePad extends React.PureComponent<Props, State> {
 
         if (width === canvasWidth && height === canvasHeight) return;
 
-        let data;
-
-        if (this.props.redrawOnResize && this.signaturePad && !this.signaturePad.isEmpty()) {
-            data = this.signaturePad.toDataURL();
-        }
-
         canvas.width = width;
         canvas.height = height;
 
@@ -382,10 +393,8 @@ class SignaturePad extends React.PureComponent<Props, State> {
             ctx.scale(ratio, ratio);
         }
 
-        if (data) {
-            this.signaturePad.fromDataURL(data);
-        } else if (this.signaturePad) {
-            this.signaturePad.clear();
+        if (this.props.redrawOnResize && this.signaturePad) {
+            this.redraw();
         }
     }