diff --git a/src/signature_pad.ts b/src/signature_pad.ts index 35b8a4c5..7e7dd139 100644 --- a/src/signature_pad.ts +++ b/src/signature_pad.ts @@ -94,17 +94,15 @@ export default class SignaturePad extends SignatureEventTarget { this.velocityFilterWeight = options.velocityFilterWeight || 0.7; this.minWidth = options.minWidth || 0.5; this.maxWidth = options.maxWidth || 2.5; - this.throttle = ('throttle' in options ? options.throttle : 16) as number; // in milliseconds - this.minDistance = ( - 'minDistance' in options ? options.minDistance : 5 - ) as number; // in pixels + + // We need to handle 0 value, so use `??` instead of `||` + this.throttle = options.throttle ?? 16; // in milliseconds + this.minDistance = options.minDistance ?? 5; // in pixels this.dotSize = options.dotSize || 0; this.penColor = options.penColor || 'black'; this.backgroundColor = options.backgroundColor || 'rgba(0,0,0,0)'; this.compositeOperation = options.compositeOperation || 'source-over'; - this.canvasContextOptions = ( - 'canvasContextOptions' in options ? options.canvasContextOptions : {} - ) as CanvasRenderingContext2DSettings; + this.canvasContextOptions = options.canvasContextOptions ?? {}; this._strokeMoveUpdate = this.throttle ? throttle(SignaturePad.prototype._strokeUpdate, this.throttle) diff --git a/tests/signature_pad.test.ts b/tests/signature_pad.test.ts index a54ad0f4..8327db66 100644 --- a/tests/signature_pad.test.ts +++ b/tests/signature_pad.test.ts @@ -1,4 +1,5 @@ import SignaturePad from '../src/signature_pad'; +import type { Options } from '../src/signature_pad'; import { face } from './fixtures/face'; import { square } from './fixtures/square'; import './utils/pointer-event-polyfill'; @@ -37,6 +38,51 @@ describe('#constructor', () => { expect(pad.minDistance).toBe(0); }); + + it("uses fallback values for options with explicit 'undefined'", () => { + const opts: Options = { + dotSize: undefined, + minWidth: undefined, + maxWidth: undefined, + penColor: undefined, + velocityFilterWeight: undefined, + compositeOperation: undefined, + minDistance: undefined, + backgroundColor: undefined, + throttle: undefined, + canvasContextOptions: undefined, + }; + + const exp: Options = { + dotSize: 0, + minWidth: 0.5, + maxWidth: 2.5, + penColor: 'black', + velocityFilterWeight: 0.7, + compositeOperation: 'source-over', + minDistance: 5, + backgroundColor: 'rgba(0,0,0,0)', + throttle: 16, + canvasContextOptions: {}, + }; + + const pad = new SignaturePad(canvas, opts); + + const actual = { + dotSize: pad.dotSize, + minWidth: pad.minWidth, + maxWidth: pad.maxWidth, + penColor: pad.penColor, + velocityFilterWeight: pad.velocityFilterWeight, + compositeOperation: pad.compositeOperation, + minDistance: pad.minDistance, + backgroundColor: pad.backgroundColor, + throttle: pad.throttle, + canvasContextOptions: pad.canvasContextOptions, + }; + + expect(actual).toStrictEqual(exp); + }); }); describe('#clear', () => {