fix: emit endStroke on pointerup outside of canvas (#604)

szimek · Mar 18, 2022 · 29b80dd · 29b80dd
1 parent 878786e
commit 29b80dd
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 16 deletions.
diff --git a/src/signature_pad.ts b/src/signature_pad.ts
@@ -276,10 +276,9 @@ export default class SignaturePad extends SignatureEventTarget {
   };
 
   private _handlePointerEnd = (event: PointerEvent): void => {
-    this._drawningStroke = false;
-    const wasCanvasTouched = event.target === this.canvas;
-    if (wasCanvasTouched) {
+    if (this._drawningStroke) {
       event.preventDefault();
+      this._drawningStroke = false;
       this._strokeEnd(event);
     }
   };

diff --git a/tests/signature_pad.test.ts b/tests/signature_pad.test.ts
@@ -137,11 +137,39 @@ describe('user interactions', () => {
     );
     expect(pad.toDataURL('image/svg+xml')).toMatchSnapshot();
   });
+
+  it('call endStroke on pointerup outside canvas', () => {
+    const pad = new SignaturePad(canvas);
+    const endStroke = jest.fn();
+    pad.addEventListener('endStroke', endStroke);
+    canvas.dispatchEvent(
+      new PointerEvent('pointerdown', {
+        clientX: 50,
+        clientY: 30,
+        pressure: 1,
+      }),
+    );
+    canvas.dispatchEvent(
+      new PointerEvent('pointermove', {
+        clientX: 240,
+        clientY: 30,
+        pressure: 1,
+      }),
+    );
+    document.dispatchEvent(
+      new PointerEvent('pointerup', {
+        clientX: 150,
+        clientY: 120,
+        pressure: 1,
+      }),
+    );
+    expect(endStroke).toHaveBeenCalled();
+  });
 });
 
 describe('Signature events.', () => {
   let signpad: SignaturePad;
-  let eventDispatched: Event;
+  let eventDispatched: Event | undefined;
 
   const eventHandler: EventListener = (evt: Event): void => {
     eventDispatched = evt;
@@ -152,20 +180,22 @@ describe('Signature events.', () => {
 
     // to make this test works, canvas must be added to the document body.
     document.body.insertAdjacentElement('afterbegin', canvas);
+
+    eventDispatched = undefined;
   });
 
   afterEach(() => {
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    eventDispatched = undefined!;
-
     document.body.removeChild(canvas);
   });
 
   [
-    { eventName: 'beginStroke', dispatchedEventName: 'pointerdown' },
-    { eventName: 'beforeUpdateStroke', dispatchedEventName: 'pointerdown' },
-    { eventName: 'afterUpdateStroke', dispatchedEventName: 'pointerdown' },
-    { eventName: 'endStroke', dispatchedEventName: 'pointerup' },
+    { eventName: 'beginStroke', dispatchedEventName: ['pointerdown'] },
+    { eventName: 'beforeUpdateStroke', dispatchedEventName: ['pointerdown'] },
+    { eventName: 'afterUpdateStroke', dispatchedEventName: ['pointerdown'] },
+    {
+      eventName: 'endStroke',
+      dispatchedEventName: ['pointerdown', 'pointerup'],
+    },
   ].forEach((param) => {
     describe(`${param.eventName}.`, () => {
       beforeEach(() => {
@@ -187,11 +217,11 @@ describe('Signature events.', () => {
           pressure: 1,
           bubbles: true,
         };
-        const pointerEvent = new PointerEvent(
-          param.dispatchedEventName,
-          eventInitObj,
-        );
-        canvas.dispatchEvent(pointerEvent);
+        let pointerEvent;
+        for (const dispatchedEventName of param.dispatchedEventName) {
+          pointerEvent = new PointerEvent(dispatchedEventName, eventInitObj);
+          canvas.dispatchEvent(pointerEvent);
+        }
 
         expect(eventDispatched).toBeTruthy();
         expect(eventDispatched).toBeInstanceOf(CustomEvent);