fix: set user-select none on canvas

[marmooo]

On iOS 15, a fast double-tap will trigger an unintended pan event.
I think this is a problem caused by the loupe feature in iOS 15.
It does not occur in iOS 14.
The solution is to always turn off the pan event in the constructor,
instead of switching it in event handling.
I think there is no need to turn the pan event on/off.
Therefore, it is better to stop the pan event in the constructor
so that it is not affected by the browser implementation.

I have checked this patch on the following environments.

• iPhone 8 (iOS 15.1) + Safari # need fixing
• iPhone 8 (iOS 14.8.1) + Safari # not need fixing
• MediaPad M3 Lite 10 wp (Android 7.0) + Chrome # not need fixing

I don't have Windows tablet, so I can't check ms-touch-action,
but theoretically it should work.

bug.mp4

[UziTech]

Are you calling .off? If you never call .off it shouldn't matter if this gets changed in the .on function or before it.

[marmooo]

Yes, I have checked on http://szimek.github.io/signature_pad/.
By the way, this URL is 4.0.0, but the result is the same for local 4.0.1.
The following is what is happening in fast double-tap, I think.
This is a guess.

1. [hand] touch start canvas
2. [brower] check touch-action and call js (some delay)
3. [js] call .on async functions and touch-action:none;
4. [hand] touch end canvas
5. [js] call .off async functions and touch-action:auto;
6. [hand] touch start canvas
7. [brower] check touch-action and call js (some delay)
8. The loupe appears and skip draw line (occurs problem!)
9. [js] call .on async functions and touch-action:none;

[UziTech]

I don't believe .off is ever called in https://szimek.github.io/signature_pad. Which means this wouldn't fix it.

[marmooo]

Sorry, I apologize for my misunderstanding and lack of checking.
I don't know what the solution of loupe is at this point,
but the problem itself appears to remain, so I will reconsider.

The loupe will remain, but the following may be a partial solution to write a line.

this.canvas.style.userSelect = 'none';

[UziTech]

This should be in the on function with the other style adjustments. Also remove this style in the off function.

[github-actions]

🎉 This PR is included in version 4.0.2 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀