Resizing the draw space

[wulfsolter]

Resizing the draw space

[lathonez]

https://github.com/wulfsolter/angular2-signaturepad/blob/master/signature-pad.ts#L46-L56

So from your code, you need to call:

this.signaturePad.resizeCanvas();

[wuno]

Hey thanks a lot man I will give that a shot.

[wuno]

I would really appreciate if you could help me out. I added the

this.signaturePad.resizeCanvas();

But it does not seem to resize the canvas. It does appear to be firing the event.

event {isTrusted: true, type: "resize", target: Window, currentTarget: Window, eventPhase: 2…}bubbles: falsecancelBubble: falsecancelable: falsecomposed: falsecurrentTarget: WindowdefaultPrevented: falseeventPhase: 2isTrusted: truepath: Array(1)returnValue: truesrcElement: Windowtarget: WindowtimeStamp: 25201.9type: "resize"proto: Event

Here is my resizeCanvas function

onResize(event) {
        console.log("THIS RESIZE EVENT IS FIRING OFF");
        this.signaturePad.resizeCanvas();
        console.log(event);
    }

Inside my view I am adding checking for window resize to fire it off like this,

<div class="card-block">
                            <div (window:resize)="onResize($event)" class="signature">
                                <signature-pad [options]="signaturePadOptions" (onBeginEvent)="drawStart()" (onEndEvent)="drawComplete()"></signature-pad>
                            </div>
                        </div>

Issues,

Resize

initially it is set to 500. I would like it to be 100 percent of it's parent div. Then if the screen is resized obviously change to the new width.

Completing with the whole signature

When I lift finger up or release click from mouse it completes and finishes. Is it possible to set it to not complete till the user click submit on a form? The problem is if someone is writing their name and they let off then press back down to start again, it sends two different signatures.

Is there something built into handle this or do I need to come up with my own way?

Here is my full code,

export class ContractComponent implements OnInit, AfterViewInit {
    @ViewChild(SignaturePad) signaturePad: SignaturePad;
    contractForm: FormGroup;

    onResize(event) {
        console.log("THIS RESIZE EVENT IS FIRING OFF");
        this.signaturePad.resizeCanvas();
        console.log(event);

    }

    private signaturePadOptions: Object = { // passed through to szimek/signature_pad constructor
        'minWidth': 5,
        'canvasWidth': 500,
        'canvasHeight': 300
    };

    constructor(private router: Router, private auth: Auth, private http: Http, private toastyService: ToastyService, private toastyConfig: ToastyConfig) { }


    ngAfterViewInit() {
        // this.signaturePad is now available
        this.signaturePad.set('minWidth', 5); // set szimek/signature_pad options at runtime
        this.signaturePad.clear(); // invoke functions from szimek/signature_pad API
    }

    drawComplete() {
        // will be notified of szimek/signature_pad's onEnd event
        console.log(this.signaturePad.toDataURL());
    }

    drawStart() {
        // will be notified of szimek/signature_pad's onBegin event
        console.log('begin drawing');
    }

This is in the view,

<div class="card card-inverse card-success">
                        <div class="card-header">
                            <strong>Signature</strong>
                        </div>
                        <div class="card-block">
                            <div (window:resize)="onResize($event)" class="signature">
                                <signature-pad [options]="signaturePadOptions" (onBeginEvent)="drawStart()" (onEndEvent)="drawComplete()"></signature-pad>
                            </div>
                        </div>
                        <div class="card-footer tag-primary white">
                            Complete profile subscription -
                            <button type="submit" (click)="toastSuccess('Form Update', 'You have updated your personal information successfully.')" [disabled]="!contractForm.valid" class="btn btn-sm btn-danger btn-oj"><i class="fa fa-dot-circle-o"></i> Update</button>
                        </div>
                    </div>

[lathonez]

Added example in demo lathonez/angular2-signaturepad-demo@c6c1320