From e85b0c24e526df1de69d6b18752f18b9b1190ec7 Mon Sep 17 00:00:00 2001 From: Tony Brix Date: Sat, 23 Mar 2024 00:59:01 -0600 Subject: [PATCH] fix --- docs/js/signature_pad.umd.js | 28 +++++++++++----------------- rollup.config.js | 2 +- src/signature_pad.ts | 33 ++++++++++++++------------------- 3 files changed, 26 insertions(+), 37 deletions(-) diff --git a/docs/js/signature_pad.umd.js b/docs/js/signature_pad.umd.js index e45f7619..9cf576a6 100644 --- a/docs/js/signature_pad.umd.js +++ b/docs/js/signature_pad.umd.js @@ -166,10 +166,9 @@ this._lastVelocity = 0; this._lastWidth = 0; this._handleMouseDown = (event) => { - if (event.buttons !== 1) { + if (event.buttons !== 1 || this._drawingStroke) { return; } - this._drawingStroke = true; this.canvas.addEventListener('mousemove', this._handleMouseMove); this.canvas.addEventListener('mouseleave', this._handleMouseLeave); this.canvas.addEventListener('mouseenter', this._handleMouseEnter); @@ -179,7 +178,6 @@ if (event.buttons !== 1 || this._drawingStroke) { return; } - this._drawingStroke = true; this._strokeBegin(event); }; this._handleMouseMove = (event) => { @@ -190,19 +188,12 @@ this._strokeMoveUpdate(event); }; this._handleMouseLeave = (event) => { - if (!this._drawingStroke) { - return; - } - this._drawingStroke = false; this._strokeEnd(event); }; this._handleMouseUp = (event) => { this.canvas.removeEventListener('mousemove', this._handleMouseMove); this.canvas.removeEventListener('mouseenter', this._handleMouseEnter); this.canvas.removeEventListener('mouseleave', this._handleMouseLeave); - if (!this._drawingStroke) { - return; - } this._strokeEnd(event); }; this._handleTouchStart = (event) => { @@ -216,7 +207,6 @@ if (event.cancelable) { event.preventDefault(); } - this._drawingStroke = true; this.canvas.addEventListener('touchmove', this._handleTouchMove); this._strokeBegin(touch); }; @@ -236,9 +226,6 @@ }; this._handleTouchEnd = (event) => { this.canvas.removeEventListener('touchmove', this._handleTouchMove); - if (!this._drawingStroke) { - return; - } const touch = event.changedTouches[0]; if (!touch) { return; @@ -253,7 +240,6 @@ return; } event.preventDefault(); - this._drawingStroke = true; this.canvas.addEventListener('pointermove', this._handlePointerMove); this.canvas.addEventListener('pointerenter', this._handlePointerEnter); this.canvas.addEventListener('pointerleave', this._handlePointerLeave); @@ -264,7 +250,6 @@ return; } event.preventDefault(); - this._drawingStroke = true; this._strokeBegin(event); }; this._handlePointerMove = (event) => { @@ -298,7 +283,6 @@ return; } event.preventDefault(); - this._drawingStroke = false; this._strokeEnd(event); }; this._handlePointerUp = (event) => { @@ -421,6 +405,15 @@ toData() { return this._data; } + _removeMoveEvents() { + this.canvas.removeEventListener('mousemove', this._handleMouseMove); + this.canvas.removeEventListener('mouseenter', this._handleMouseEnter); + this.canvas.removeEventListener('mouseleave', this._handleMouseLeave); + this.canvas.removeEventListener('touchmove', this._handleTouchMove); + this.canvas.removeEventListener('pointermove', this._handlePointerMove); + this.canvas.removeEventListener('pointerenter', this._handlePointerEnter); + this.canvas.removeEventListener('pointerleave', this._handlePointerLeave); + } _getPointGroupOptions(group) { return { penColor: group && 'penColor' in group ? group.penColor : this.penColor, @@ -438,6 +431,7 @@ _strokeBegin(event) { const cancelled = !this.dispatchEvent(new CustomEvent('beginStroke', { detail: event, cancelable: true })); if (cancelled) { + this._removeMoveEvents(); return; } this._drawingStroke = true; diff --git a/rollup.config.js b/rollup.config.js index 9796a961..56b6b036 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -1,5 +1,5 @@ const typescript = require('@rollup/plugin-typescript'); -const { terser } = require('@rollup/plugin-terser'); +const terser = require('@rollup/plugin-terser'); const pkg = require('./package.json'); const version = process.env.SEMANTIC_RELEASE_NEXT_VERSION || pkg.version; diff --git a/src/signature_pad.ts b/src/signature_pad.ts index 34d53bd7..096fd839 100644 --- a/src/signature_pad.ts +++ b/src/signature_pad.ts @@ -265,13 +265,22 @@ export default class SignaturePad extends SignatureEventTarget { return this._data; } + private _removeMoveEvents(): void { + this.canvas.removeEventListener('mousemove', this._handleMouseMove); + this.canvas.removeEventListener('mouseenter', this._handleMouseEnter); + this.canvas.removeEventListener('mouseleave', this._handleMouseLeave); + this.canvas.removeEventListener('touchmove', this._handleTouchMove); + this.canvas.removeEventListener('pointermove', this._handlePointerMove); + this.canvas.removeEventListener('pointerenter', this._handlePointerEnter); + this.canvas.removeEventListener('pointerleave', this._handlePointerLeave); + } + // Event handlers private _handleMouseDown = (event: MouseEvent): void => { - if (event.buttons !== 1) { + if (event.buttons !== 1 || this._drawingStroke) { return; } - this._drawingStroke = true; this.canvas.addEventListener('mousemove', this._handleMouseMove); this.canvas.addEventListener('mouseleave', this._handleMouseLeave); this.canvas.addEventListener('mouseenter', this._handleMouseEnter); @@ -283,7 +292,6 @@ export default class SignaturePad extends SignatureEventTarget { return; } - this._drawingStroke = true; this._strokeBegin(event); }; @@ -298,11 +306,6 @@ export default class SignaturePad extends SignatureEventTarget { }; private _handleMouseLeave = (event: MouseEvent): void => { - if (!this._drawingStroke) { - return; - } - - this._drawingStroke = false; this._strokeEnd(event); }; @@ -311,10 +314,6 @@ export default class SignaturePad extends SignatureEventTarget { this.canvas.removeEventListener('mouseenter', this._handleMouseEnter); this.canvas.removeEventListener('mouseleave', this._handleMouseLeave); - if (!this._drawingStroke) { - return; - } - this._strokeEnd(event); }; @@ -333,7 +332,6 @@ export default class SignaturePad extends SignatureEventTarget { event.preventDefault(); } - this._drawingStroke = true; this.canvas.addEventListener('touchmove', this._handleTouchMove); this._strokeBegin(touch); }; @@ -360,9 +358,6 @@ export default class SignaturePad extends SignatureEventTarget { private _handleTouchEnd = (event: TouchEvent): void => { this.canvas.removeEventListener('touchmove', this._handleTouchMove); - if (!this._drawingStroke) { - return; - } const touch = event.changedTouches[0]; if (!touch) { return; @@ -381,10 +376,11 @@ export default class SignaturePad extends SignatureEventTarget { } event.preventDefault(); - this._drawingStroke = true; + this.canvas.addEventListener('pointermove', this._handlePointerMove); this.canvas.addEventListener('pointerenter', this._handlePointerEnter); this.canvas.addEventListener('pointerleave', this._handlePointerLeave); + this._strokeBegin(event); }; @@ -394,7 +390,6 @@ export default class SignaturePad extends SignatureEventTarget { } event.preventDefault(); - this._drawingStroke = true; this._strokeBegin(event); }; @@ -439,7 +434,6 @@ export default class SignaturePad extends SignatureEventTarget { } event.preventDefault(); - this._drawingStroke = false; this._strokeEnd(event); }; @@ -479,6 +473,7 @@ export default class SignaturePad extends SignatureEventTarget { new CustomEvent('beginStroke', { detail: event, cancelable: true }), ); if (cancelled) { + this._removeMoveEvents(); return; } this._drawingStroke = true;