import React, {PureComponent} from 'react';
import PropTypes from 'prop-types';
import SigPad from 'signature_pad';
import debounce from 'throttle-debounce/debounce';

class SignaturePad extends PureComponent {

    static displayName = 'react-signature-pad-wrapper';

    static propTypes = {
        width: PropTypes.number,
        height: PropTypes.number,
        className: PropTypes.string,
        options: PropTypes.object,
        redrawOnResize: PropTypes.bool.isRequired,
        debounceInterval: PropTypes.number.isRequired
    }

    static defaultProps = {
        redrawOnResize: false,
        debounceInterval: 150
    }

    constructor(props) {
        super(props);

        this._callResizeHandler = debounce(
            this.props.debounceInterval,
            this.handleResize.bind(this)
        );
    }

    componentDidMount() {
        if (this._canvas) {
            if (!this.props.width || !this.props.height) {
                this._canvas.style.width = '100%';
            }
            this.scaleCanvas();

            if (!this.props.width || !this.props.height) {
                window.addEventListener('resize', this._callResizeHandler);
            }

            this._signaturePad = new SigPad(this._canvas, this.props.options);
        }
    }

    componentWillUnmount() {
        if (!this.props.width || !this.props.height) {
            window.removeEventListener('resize', this._callResizeHandler);
        }

        this._signaturePad.off();
    }

    /**
     * Get the original signature_pad instance.
     */
    get instance() {
        return this._signaturePad;
    }

    get canvas() {
        return this._canvas;
    }

    set dotSize(dotSize) {
        this._signaturePad.dotSize = dotSize;
    }

    get dotSize() {
        return this._signaturePad.dotSize;
    }

    set minWidth(minWidth) {
        this._signaturePad.minWidth = minWidth;
    }

    get minWidth() {
        return this._signaturePad.minWidth;
    }

    set maxWidth(maxWidth) {
        this._signaturePad.maxWidth = maxWidth;
    }

    get maxWidth() {
        return this._signaturePad.maxWidth;
    }

    set throttle(throttle) {
        this._signaturePad.throttle = throttle;
    }

    get throttle() {
        return this._signaturePad.throttle;
    }

    set backgroundColor(color) {
        this._signaturePad.backgroundColor = color;
    }

    get backgroundColor() {
        return this._signaturePad.backgroundColor;
    }

    set penColor(color) {
        this._signaturePad.penColor = color;
    }

    get penColor() {
        return this._signaturePad.penColor;
    }

    set velocityFilterWeight(weight) {
        this._signaturePad.velocityFilterWeight = weight;
    }

    get velocityFilterWeight() {
        return this._signaturePad.velocityFilterWeight;
    }

    set onBegin(fn) {
        if (!(fn && typeof fn === 'function')) {
            throw new Error('Invalid argument passed to onBegin()');
        }

        this._signaturePad.onBegin = fn;
    }

    set onEnd(fn) {
        if (!(fn && typeof fn === 'function')) {
            throw new Error('Invalid argument passed to onEnd()');
        }

        this._signaturePad.onEnd = fn;
    }

    isEmpty() {
        return this._signaturePad.isEmpty();
    }

    clear() {
        this._signaturePad.clear();
    }

    fromDataURL(base64String) {
        this._signaturePad.fromDataURL(base64String);
    }

    toDataURL(mime) {
        return this._signaturePad.toDataURL(mime);
    }

    fromData(data) {
        this._signaturePad.fromData(data);
    }

    toData() {
        return this._signaturePad.toData();
    }

    off() {
        this._signaturePad.off();
    }

    on() {
        this._signaturePad.on();
    }

    handleResize() {
        this.scaleCanvas();
    }

    scaleCanvas() {
        // Avoid needlessly setting height/width if dimensions haven't changed
        if (this._canvas && this._canvas.offsetWidth === this.canvasWidth && this._canvas.offsetHeight === this.canvasHeight) return;
        
        const ratio = Math.max(window.devicePixelRatio || 1, 1);
        const width = (this.props.width || this._canvas.offsetWidth) * ratio;
        const height = (this.props.height || this._canvas.offsetHeight) * ratio;

        let data;
        if (this.props.redrawOnResize && this._signaturePad) {
            data = this._signaturePad.toDataURL();
        }

        this._canvas.width = width;
        this._canvas.height = height;
        this.canvasWidth = width;
        this.canvasHeight = height;

        const ctx = this._canvas.getContext('2d');
        ctx.scale(ratio, ratio);

        if (this.props.redrawOnResize && this._signaturePad) {
            this._signaturePad.fromDataURL(data);
        } else if (this._signaturePad) {
            this._signaturePad.clear();
        }
    }

    render() {
        return (
            <canvas
                className={this.props.className}
                ref={ref => this._canvas = ref} />
        );
    }

}

export default SignaturePad;

@@ -678,24 +678,123 @@
 er(props);%0A%0A
+        this.state = %7B%0A            canvasWidth: 0,%0A            canvasHeight: 0%0A        %7D;%0A        %0A
         this
@@ -3940,205 +3940,215 @@
     
-// Avoid needlessly setting height/width if dimensions haven't changed%0A        if (this._canvas && this._canvas.offsetWidth === this.canvasWidth && this._canvas.offsetH
+const ratio = Math.max(window.devicePixelRatio %7C%7C 1, 1);%0A        const width = (this.props.width %7C%7C this._canvas.offsetWidth) * ratio;%0A        const height = (this.props.h
 eight 
-===
+%7C%7C
  this.
+_
 canvas
+.offset
 Height) 
 retu
@@ -4143,22 +4143,23 @@
 Height) 
-return
+* ratio
 ;%0A      
@@ -4173,215 +4173,199 @@
     
-const ratio = Math.max(window.devicePixelRatio %7C%7C 1, 1);%0A        const width = (this.props.width %7C%7C this._canvas.offsetWidth) * ratio;%0A        const height = (this.props.height %7C%7C this._canvas.offset
+// Avoid needlessly setting height/width if dimensions haven't changed%0A        const %7B canvasWidth, canvasHeight %7D = this.state;%0A        if (width === canvasWidth && height === canvas
 Height) 
 * ra
@@ -4360,23 +4360,22 @@
 Height) 
-* ratio
+return
 ;%0A%0A     
@@ -4582,24 +4582,25 @@
 t = height;%0A
+%0A
         this
@@ -4596,24 +4596,47 @@
        this.
+setState(%7B%0A            
 canvasWidth 
@@ -4634,34 +4634,37 @@
 vasWidth
- =
+:
  width
-;%0A
+,%0A    
         
 this.can
@@ -4655,21 +4655,16 @@
         
-this.
 canvasHe
@@ -4663,33 +4663,43 @@
 canvasHeight
- =
+:
  height
+%0A        %7D)
 ;%0A%0A        c

Add requested changes