Update event listeners for begin and end stroke

README.md

@@ -1,24 +1,27 @@
 # angular2-signaturepad
+
 Angular 2 component for [szimek/signature_pad](https://www.npmjs.com/package/signature_pad).
 
 << THIS IS NO LONGER IN USE BY OWNER. PROBLEMS CAN AND DO EXIST. PRs ARE SUPER WELCOME, BUT I CAN NOT IDENTIFY WHAT YOUR ISSUES ARE, NOR WILL I CHANGE THINGS BECAUSE ANGULAR HAS CHANGED IN THE YEARS SINCE I WROTE THIS >>
 
 ## Install
+
 `npm install angular2-signaturepad --save`
 
 ## Reference Implementation
 
-* [Live Demo](http://lathonez.com/angular2-signaturepad-demo/)
-* [Source](https://github.com/lathonez/angular2-signaturepad-demo)
+- [Live Demo](http://lathonez.com/angular2-signaturepad-demo/)
+- [Source](https://github.com/lathonez/angular2-signaturepad-demo)
 
 ## Usage example
 
 API is identical to [szimek/signature_pad](https://www.npmjs.com/package/signature_pad).
 
 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.
+
+- 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.
 
 ```typescript
 
@@ -65,12 +68,12 @@ export class SignaturePadPage{
   }
 
   drawComplete() {
-    // will be notified of szimek/signature_pad's onEnd event
+    // will be notified of szimek/signature_pad's endStroke event
     console.log(this.signaturePad.toDataURL());
   }
 
   drawStart() {
-    // will be notified of szimek/signature_pad's onBegin event
+    // will be notified of szimek/signature_pad's beginStroke event
     console.log('begin drawing');
   }
 }

signature-pad.ts

@@ -1,6 +1,14 @@
 'use strict';
 
-import {AfterContentInit, Component, ElementRef, EventEmitter, Input, Output, OnDestroy} from '@angular/core';
+import {
+  AfterContentInit,
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input,
+  Output,
+  OnDestroy,
+} from '@angular/core';
 
 declare var require: any;
 
@@ -16,9 +24,7 @@ export type PointGroup = Array<Point>;
   template: '<canvas></canvas>',
   selector: 'signature-pad',
 })
-
 export class SignaturePad implements AfterContentInit, OnDestroy {
-
   @Input() public options: Object;
   @Output() public onBeginEvent: EventEmitter<boolean>;
   @Output() public onEndEvent: EventEmitter<boolean>;
@@ -47,8 +53,13 @@ export class SignaturePad implements AfterContentInit, OnDestroy {
     }
 
     this.signaturePad = new sp(canvas, this.options);
-    this.signaturePad.onBegin = this.onBegin.bind(this);
-    this.signaturePad.onEnd = this.onEnd.bind(this);
+    this.signaturePad.addEventListener('beginStroke', () => {
+      this.onBeginEvent.emit(true);
+    });
+
+    this.signaturePad.addEventListener('endStroke', () => {
+      this.onEndEvent.emit(true);
+    });
   }
 
   public ngOnDestroy(): void {
@@ -91,7 +102,10 @@ export class SignaturePad implements AfterContentInit, OnDestroy {
   // Draws signature image from data URL
   public fromDataURL(dataURL: string, options: any = {}): void {
     // set default height and width on read data from URL
-    if (!options.hasOwnProperty('height') && (this.options as any).canvasHeight) {
+    if (
+      !options.hasOwnProperty('height') &&
+      (this.options as any).canvasHeight
+    ) {
       options.height = (this.options as any).canvasHeight;
     }
     if (!options.hasOwnProperty('width') && (this.options as any).canvasWidth) {
@@ -122,7 +136,6 @@ export class SignaturePad implements AfterContentInit, OnDestroy {
 
   // set an option on the signaturePad - e.g. set('minWidth', 50);
   public set(option: string, value: any): void {
-
     switch (option) {
       case 'canvasHeight':
         this.signaturePad._canvas.height = value;
@@ -135,16 +148,6 @@ export class SignaturePad implements AfterContentInit, OnDestroy {
     }
   }
 
-  // notify subscribers on signature begin
-  public onBegin(): void {
-    this.onBeginEvent.emit(true);
-  }
-
-  // notify subscribers on signature end
-  public onEnd(): void {
-    this.onEndEvent.emit(true);
-  }
-
   public queryPad(): any {
     return this.signaturePad;
   }