Merge pull request #567 from UziTech/event-emitter

szimek · Nov 17, 2021 · a465b6c · a465b6c
2 parents 4ccacf8 + 71ba273
commit a465b6c
Show file tree

Hide file tree

Showing 2 changed files with 114 additions and 95 deletions.
diff --git a/docs/js/signature_pad.umd.js b/docs/js/signature_pad.umd.js
diff --git a/src/signature_pad.ts b/src/signature_pad.ts
@@ -28,16 +28,14 @@ export interface Options {
   penColor?: string;
   throttle?: number;
   velocityFilterWeight?: number;
-  onBegin?: (event: MouseEvent | Touch) => void;
-  onEnd?: (event: MouseEvent | Touch) => void;
 }
 
 export interface PointGroup {
   color: string;
   points: BasicPoint[];
 }
 
-export default class SignaturePad {
+export default class SignaturePad extends EventTarget {
   // Public stuff
   public dotSize: number | (() => number);
   public minWidth: number;
@@ -47,8 +45,6 @@ export default class SignaturePad {
   public penColor: string;
   public throttle: number;
   public velocityFilterWeight: number;
-  public onBegin?: (event: MouseEvent | Touch) => void;
-  public onEnd?: (event: MouseEvent | Touch) => void;
 
   // Private stuff
   /* tslint:disable: variable-name */
@@ -66,6 +62,7 @@ export default class SignaturePad {
     private canvas: HTMLCanvasElement,
     private options: Options = {},
   ) {
+    super();
     this.velocityFilterWeight = options.velocityFilterWeight || 0.7;
     this.minWidth = options.minWidth || 0.5;
     this.maxWidth = options.maxWidth || 2.5;
@@ -80,8 +77,6 @@ export default class SignaturePad {
       };
     this.penColor = options.penColor || 'black';
     this.backgroundColor = options.backgroundColor || 'rgba(0,0,0,0)';
-    this.onBegin = options.onBegin;
-    this.onEnd = options.onEnd;
 
     this._strokeMoveUpdate = this.throttle
       ? throttle(SignaturePad.prototype._strokeUpdate, this.throttle)
@@ -116,32 +111,29 @@ export default class SignaturePad {
       xOffset?: number;
       yOffset?: number;
     } = {},
-    callback?: (error?: string | Event) => void,
-  ): void {
-    const image = new Image();
-    const ratio = options.ratio || window.devicePixelRatio || 1;
-    const width = options.width || this.canvas.width / ratio;
-    const height = options.height || this.canvas.height / ratio;
-    const xOffset = options.xOffset || 0;
-    const yOffset = options.yOffset || 0;
-
-    this._reset();
-
-    image.onload = (): void => {
-      this._ctx.drawImage(image, xOffset, yOffset, width, height);
-      if (callback) {
-        callback();
-      }
-    };
-    image.onerror = (error): void => {
-      if (callback) {
-        callback(error);
-      }
-    };
-    image.crossOrigin = 'anonymous';
-    image.src = dataUrl;
+  ): Promise<void> {
+    return new Promise((resolve, reject) => {
+      const image = new Image();
+      const ratio = options.ratio || window.devicePixelRatio || 1;
+      const width = options.width || this.canvas.width / ratio;
+      const height = options.height || this.canvas.height / ratio;
+      const xOffset = options.xOffset || 0;
+      const yOffset = options.yOffset || 0;
+
+      this._reset();
+
+      image.onload = (): void => {
+        this._ctx.drawImage(image, xOffset, yOffset, width, height);
+        resolve();
+      };
+      image.onerror = (error): void => {
+        reject(error);
+      };
+      image.crossOrigin = 'anonymous';
+      image.src = dataUrl;
 
-    this._isEmpty = false;
+      this._isEmpty = false;
+    });
   }
 
   public toDataURL(type = 'image/png', encoderOptions?: number): string {
@@ -258,15 +250,13 @@ export default class SignaturePad {
 
   // Private methods
   private _strokeBegin(event: MouseEvent | Touch): void {
+    this.dispatchEvent(new CustomEvent('beginStroke', { detail: event }));
+
     const newPointGroup = {
       color: this.penColor,
       points: [],
     };
 
-    if (typeof this.onBegin === 'function') {
-      this.onBegin(event);
-    }
-
     this._data.push(newPointGroup);
     this._reset();
     this._strokeUpdate(event);
@@ -280,6 +270,10 @@ export default class SignaturePad {
       return;
     }
 
+    this.dispatchEvent(
+      new CustomEvent('beforeUpdateStroke', { detail: event }),
+    );
+
     const x = event.clientX;
     const y = event.clientY;
 
@@ -309,14 +303,14 @@ export default class SignaturePad {
         y: point.y,
       });
     }
+
+    this.dispatchEvent(new CustomEvent('afterUpdateStroke', { detail: event }));
   }
 
   private _strokeEnd(event: MouseEvent | Touch): void {
     this._strokeUpdate(event);
 
-    if (typeof this.onEnd === 'function') {
-      this.onEnd(event);
-    }
+    this.dispatchEvent(new CustomEvent('endStroke', { detail: event }));
   }
 
   private _handlePointerEvents(): void {