diff --git a/README.md b/README.md index 5c6b592..0409ea6 100644 --- a/README.md +++ b/README.md @@ -16,7 +16,7 @@ API is identical to [szimek/signature_pad](https://www.npmjs.com/package/signatu Options are as per [szimek/signature_pad](https://www.npmjs.com/package/signature_pad) with the following additions: * canvasWidth: width of the canvas (px) * canvasHeight: height of the canvas (px) -The above options are provided to avoid accessing the DOM directly from your component to adjust the canvas size. + The above options are provided to avoid accessing the DOM directly from your component to adjust the canvas size. ```typescript @@ -36,20 +36,21 @@ import { SignaturePadModule } from '@almothafar/angular-signature-pad'; // then import for use in a component import { Component, ViewChild } from '@angular/core'; -import { SignaturePad } from '@almothafar/angular-signature-pad'; +import { SignaturePadComponent } from '@almothafar/angular-signature-pad'; @Component({ - template: '' + template: '' }) export class SignaturePadPage { - @ViewChild(SignaturePad) signaturePad: SignaturePad; + @ViewChild('signature') + public signaturePad: SignaturePadComponent; - private signaturePadOptions: Object = { // passed through to szimek/signature_pad constructor - 'minWidth': 5, - 'canvasWidth': 500, - 'canvasHeight': 300 + private signaturePadOptions: NgSignaturePadOptions = { // passed through to szimek/signature_pad constructor + minWidth: 5, + canvasWidth: 500, + canvasHeight: 300 }; constructor() { @@ -62,14 +63,15 @@ export class SignaturePadPage { this.signaturePad.clear(); // invoke functions from szimek/signature_pad API } - drawComplete() { + drawComplete(event: MouseEvent | Touch) { // will be notified of szimek/signature_pad's onEnd event + console.log('Completed drawing', event); console.log(this.signaturePad.toDataURL()); } - drawStart() { + drawStart(event: MouseEvent | Touch) { // will be notified of szimek/signature_pad's onBegin event - console.log('begin drawing'); + console.log('Start drawing', event); } } ``` diff --git a/projects/angular-signature-pad/README.md b/projects/angular-signature-pad/README.md index 6bf3eae..0409ea6 100644 --- a/projects/angular-signature-pad/README.md +++ b/projects/angular-signature-pad/README.md @@ -36,20 +36,21 @@ import { SignaturePadModule } from '@almothafar/angular-signature-pad'; // then import for use in a component import { Component, ViewChild } from '@angular/core'; -import { SignaturePad } from '@almothafar/angular-signature-pad'; +import { SignaturePadComponent } from '@almothafar/angular-signature-pad'; @Component({ - template: '' + template: '' }) export class SignaturePadPage { - @ViewChild(SignaturePad) signaturePad: SignaturePad; + @ViewChild('signature') + public signaturePad: SignaturePadComponent; - private signaturePadOptions: Object = { // passed through to szimek/signature_pad constructor - 'minWidth': 5, - 'canvasWidth': 500, - 'canvasHeight': 300 + private signaturePadOptions: NgSignaturePadOptions = { // passed through to szimek/signature_pad constructor + minWidth: 5, + canvasWidth: 500, + canvasHeight: 300 }; constructor() { @@ -62,14 +63,15 @@ export class SignaturePadPage { this.signaturePad.clear(); // invoke functions from szimek/signature_pad API } - drawComplete() { + drawComplete(event: MouseEvent | Touch) { // will be notified of szimek/signature_pad's onEnd event + console.log('Completed drawing', event); console.log(this.signaturePad.toDataURL()); } - drawStart() { + drawStart(event: MouseEvent | Touch) { // will be notified of szimek/signature_pad's onBegin event - console.log('begin drawing'); + console.log('Start drawing', event); } } ```