Restore support for passing CanvasGradient to setWaveColor() (#2456)

* add test

* add fix

* update changelog

CHANGES.md

@@ -1,21 +1,27 @@
 wavesurfer.js changelog
 =======================
 
-6.1.0
+6.0.2 (unreleased)
 ------------------
-- Fixed the type annotation of `maxRegions` in the regions plugin.
+- Fix regression and restore support for passing a `CanvasGradient` to
+  `setWaveColor()` (#2448)
+- Regions plugin:
+  - Fixed the type annotation of `maxRegions` in the regions plugin (#2454)
 
 6.0.1 (13.02.2022)
 ------------------
-- Fixed a regression that broke bars rendering when using a certain format for the peaks array (#2439)
+- Fixed a regression that broke bars rendering when using a certain format for
+  the peaks array (#2439)
 
 6.0.0 (07.02.2022)
 ------------------
-- Add additional type to `waveColor` and `progressColor` parameters to support linear gradients (#2345)
+- Add additional type to `waveColor` and `progressColor` parameters to support linear
+  gradients (#2345)
 - Add `hideCursor` option to hide the mouse cursor when hovering over the waveform (#2367)
-- Add optional `channelIdx` parameter to `setWaveColor`, `getWaveColor`, `setProgressColor` and
-  `getProgressColor` methods (#2391)
-- Improved drawing waveform with bars, now bars height is the maximum peak value in range (#2428)
+- Add optional `channelIdx` parameter to `setWaveColor`, `getWaveColor`, `setProgressColor`
+  and `getProgressColor` methods (#2391)
+- Improved drawing waveform with bars, now bars height is the maximum peak value in
+  range (#2428)
 - Workaround for `seekTo` occasionally crashing on Firefox (#1228, #2431)
 - Markers plugin: Add the ability to set markers as draggable using param `draggable=true`,
   `marker-drag` and `marker-drop` events will be triggered (#2398)

spec/wavesurfer.spec.js

@@ -265,7 +265,7 @@ describe('WaveSurfer/playback:', function() {
     });
 
     /** @test {WaveSurfer#setWaveColorGradient} */
-    it('allow setting waveColor gradient', function() {
+    it('allow setting waveColor gradient using array of fill colors', function() {
         let colors = [
             "red",
             "green",
@@ -279,6 +279,22 @@ describe('WaveSurfer/playback:', function() {
         expect(waveColor).toEqual(colors);
     });
 
+    /** @test {WaveSurfer#setWaveColorCanvasGradient} */
+    it('allow setting waveColor using CanvasGradient', function() {
+        let testCanvas = TestHelpers.createElement("linGrad", "canvas");
+        let ctx = testCanvas.getContext('2d');
+        let linGrad = ctx.createLinearGradient(0, 64, 0, 200);
+        linGrad.addColorStop(0.5, 'rgba(255, 255, 255, 1.000)');
+        linGrad.addColorStop(0.5, 'rgba(183, 183, 183, 1.000)');
+
+        wavesurfer.setWaveColor(linGrad);
+        const waveColor = wavesurfer.getWaveColor();
+
+        expect(waveColor).toEqual(linGrad);
+
+        TestHelpers.removeElement(testCanvas);
+    });
+
     /** @test {WaveSurfer#getProgressColor} */
     it('allow getting progressColor', function() {
         const progressColor = wavesurfer.getProgressColor();

src/drawer.canvasentry.js

@@ -161,17 +161,20 @@ export default class CanvasEntry {
     /**
      * Utility function to handle wave color arguments
      *
-     * When the color argument type is a string, it will be returned as is.
-     * Otherwise, it will be treated as an array, and a canvas gradient will
-     * be returned
+     * When the color argument type is a string or CanvasGradient instance,
+     * it will be returned as is. Otherwise, it will be treated as an array,
+     * and a new CanvasGradient will be returned
      *
      * @since 6.0.0
      * @param {CanvasRenderingContext2D} ctx Rendering context of target canvas
-     * @param {string|string[]} color Fill color for the wave canvas, or an array of colors to apply as a gradient
-     * @returns {string|CanvasGradient} Returns a string fillstyle value, or a canvas gradient
+     * @param {string|string[]|CanvasGradient} color Either a single fill color
+     *     for the wave canvas, an existing CanvasGradient instance, or an array
+     *     of colors to apply as a gradient
+     * @returns {string|CanvasGradient} Returns a string fillstyle value, or a
+     *     canvas gradient
      */
     getFillStyle(ctx, color) {
-        if (typeof color == 'string') {
+        if (typeof color == 'string' || color instanceof CanvasGradient) {
             return color;
         }