From 7720c35d89c73cb0fd95e5a3158e806b65ff4ded Mon Sep 17 00:00:00 2001 From: marmooo Date: Mon, 17 Jan 2022 23:08:02 +0900 Subject: [PATCH 1/3] fix fast double-tap on iOS 15 --- src/signature_pad.ts | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) diff --git a/src/signature_pad.ts b/src/signature_pad.ts index 2836917c..071bcfca 100644 --- a/src/signature_pad.ts +++ b/src/signature_pad.ts @@ -87,6 +87,10 @@ export default class SignaturePad extends SignatureEventTarget { this.clear(); + // Disable panning/zooming when touching canvas element + this.canvas.style.touchAction = 'none'; + this.canvas.style.msTouchAction = 'none'; + // Enable mouse and touch event handlers this.on(); } @@ -148,10 +152,6 @@ export default class SignaturePad extends SignatureEventTarget { } public on(): void { - // Disable panning/zooming when touching canvas element - this.canvas.style.touchAction = 'none'; - this.canvas.style.msTouchAction = 'none'; - const isIOS = /Macintosh/.test(navigator.userAgent) && 'ontouchstart' in document; @@ -169,10 +169,6 @@ export default class SignaturePad extends SignatureEventTarget { } public off(): void { - // Enable panning/zooming when touching canvas element - this.canvas.style.touchAction = 'auto'; - this.canvas.style.msTouchAction = 'auto'; - this.canvas.removeEventListener('pointerdown', this._handlePointerStart); this.canvas.removeEventListener('pointermove', this._handlePointerMove); document.removeEventListener('pointerup', this._handlePointerEnd); From 988a817117df0a518897c5f794b614713ed35d8e Mon Sep 17 00:00:00 2001 From: marmooo Date: Tue, 18 Jan 2022 13:07:40 +0900 Subject: [PATCH 2/3] add user-select: none; --- src/signature_pad.ts | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/src/signature_pad.ts b/src/signature_pad.ts index 071bcfca..7c011b04 100644 --- a/src/signature_pad.ts +++ b/src/signature_pad.ts @@ -87,9 +87,7 @@ export default class SignaturePad extends SignatureEventTarget { this.clear(); - // Disable panning/zooming when touching canvas element - this.canvas.style.touchAction = 'none'; - this.canvas.style.msTouchAction = 'none'; + this.canvas.style.userSelect = 'none'; // Enable mouse and touch event handlers this.on(); @@ -152,6 +150,10 @@ export default class SignaturePad extends SignatureEventTarget { } public on(): void { + // Disable panning/zooming when touching canvas element + this.canvas.style.touchAction = 'none'; + this.canvas.style.msTouchAction = 'none'; + const isIOS = /Macintosh/.test(navigator.userAgent) && 'ontouchstart' in document; @@ -169,6 +171,10 @@ export default class SignaturePad extends SignatureEventTarget { } public off(): void { + // Enable panning/zooming when touching canvas element + this.canvas.style.touchAction = 'auto'; + this.canvas.style.msTouchAction = 'auto'; + this.canvas.removeEventListener('pointerdown', this._handlePointerStart); this.canvas.removeEventListener('pointermove', this._handlePointerMove); document.removeEventListener('pointerup', this._handlePointerEnd); From 026af181ccd34f3458fa6e76424da5ef33da11d9 Mon Sep 17 00:00:00 2001 From: marmooo Date: Fri, 21 Jan 2022 22:14:47 +0900 Subject: [PATCH 3/3] move user-select operation from constructor to on/off functions --- src/signature_pad.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/signature_pad.ts b/src/signature_pad.ts index 7c011b04..07b2f735 100644 --- a/src/signature_pad.ts +++ b/src/signature_pad.ts @@ -87,8 +87,6 @@ export default class SignaturePad extends SignatureEventTarget { this.clear(); - this.canvas.style.userSelect = 'none'; - // Enable mouse and touch event handlers this.on(); } @@ -153,6 +151,7 @@ export default class SignaturePad extends SignatureEventTarget { // Disable panning/zooming when touching canvas element this.canvas.style.touchAction = 'none'; this.canvas.style.msTouchAction = 'none'; + this.canvas.style.userSelect = 'none'; const isIOS = /Macintosh/.test(navigator.userAgent) && 'ontouchstart' in document; @@ -174,6 +173,7 @@ export default class SignaturePad extends SignatureEventTarget { // Enable panning/zooming when touching canvas element this.canvas.style.touchAction = 'auto'; this.canvas.style.msTouchAction = 'auto'; + this.canvas.style.userSelect = 'auto'; this.canvas.removeEventListener('pointerdown', this._handlePointerStart); this.canvas.removeEventListener('pointermove', this._handlePointerMove);