fix: Use fallback values when options object contains explicit `undef…

…ined` values (#772) * test: add test case for constructor options with explicit `undefined` values * fix: handle `undefined` values in constructor options
szimek · May 18, 2024 · fe11e16 · fe11e16
1 parent 782bc3e
commit fe11e16
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 7 deletions.
diff --git 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
@@ -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', () => {