Add getters and setters for height and color options (#1145)

Allow updating the `waveColor`, `progressColor`, `cursorColor` and
`height` options that were passed as part of the options for create.

For the wave color options, simply ensure that the wave is
redrawn. For the height option, delegate to `drawer.setHeight` to
handle the update. Note that - while drawer applies the `pixelRatio`
itself when initializing from `params` - `setHeight` expects a height
that already has been multiplied by `pixelRatio`.

The cursor is a border on one of the wave elements. Add an
`updateCursor` method to the drawer interface to allow updating the
cursor related styles.

spec/wavesurfer.spec.js

@@ -18,7 +18,8 @@ describe('WaveSurfer/playback:', function() {
         return WaveSurfer.create({
             container: '#waveform',
             waveColor: 'violet',
-            progressColor: 'purple'
+            progressColor: 'purple',
+            cursorColor: 'white',
         });
     }
 
@@ -113,4 +114,60 @@ describe('WaveSurfer/playback:', function() {
         );
         expect(wavesurfer.params.scrollParent).toBe(false);
     });
+
+    /** @test {WaveSurfer#getWaveColor} */
+    it('should allow getting waveColor', function () {
+        var waveColor = wavesurfer.getWaveColor();
+        expect(waveColor).toEqual('violet');
+    });
+
+    /** @test {WaveSurfer#setWaveColor} */
+    it('should allow setting waveColor', function () {
+        wavesurfer.setWaveColor('red');
+        var waveColor = wavesurfer.getWaveColor();
+
+        expect(waveColor).toEqual('red');
+    });
+
+    /** @test {WaveSurfer#getProgressColor} */
+    it('should allow getting progressColor', function () {
+        var progressColor = wavesurfer.getProgressColor();
+        expect(progressColor).toEqual('purple');
+    });
+
+    /** @test {WaveSurfer#setProgressColor} */
+    it('should allow setting progressColor', function () {
+        wavesurfer.setProgressColor('green');
+        var progressColor = wavesurfer.getProgressColor();
+
+        expect(progressColor).toEqual('green');
+    });
+
+    /** @test {WaveSurfer#getCursorColor} */
+    it('should allow getting cursorColor', function () {
+        var cursorColor = wavesurfer.getCursorColor();
+        expect(cursorColor).toEqual('white');
+    });
+
+    /** @test {WaveSurfer#setCursorColor} */
+    it('should allow setting cursorColor', function () {
+        wavesurfer.setCursorColor('black');
+        var cursorColor = wavesurfer.getCursorColor();
+
+        expect(cursorColor).toEqual('black');
+    });
+
+    /** @test {WaveSurfer#getHeight} */
+    it('should allow getting height', function () {
+        var height = wavesurfer.getHeight();
+        expect(height).toEqual(128);
+    });
+
+    /** @test {WaveSurfer#setHeight} */
+    it('should allow setting height', function () {
+        wavesurfer.setHeight(150);
+        var height = wavesurfer.getHeight();
+
+        expect(height).toEqual(150);
+    });
 });

src/drawer.js

@@ -312,6 +312,14 @@ export default class Drawer extends util.Observer {
     }
 
     /* Renderer-specific methods */
+
+    /**
+     * Called after cursor related params have changed.
+     *
+     * @abstract
+     */
+    updateCursor() {}
+
     /**
      * Called when the size of the container changes so the renderer can adjust
      *

src/drawer.multicanvas.js

@@ -83,13 +83,22 @@ export default class MultiCanvas extends Drawer {
                 display: 'none',
                 boxSizing: 'border-box',
                 borderRightStyle: 'solid',
-                borderRightWidth: this.params.cursorWidth + 'px',
-                borderRightColor: this.params.cursorColor,
                 pointerEvents: 'none'
             })
         );
 
         this.addCanvas();
+        this.updateCursor();
+    }
+
+    /**
+     * Update cursor style from params.
+     */
+    updateCursor() {
+        this.style(this.progressWave, {
+            borderRightWidth: this.params.cursorWidth + 'px',
+            borderRightColor: this.params.cursorColor
+        });
     }
 
     /**

src/wavesurfer.js

@@ -905,6 +905,89 @@ export default class WaveSurfer extends util.Observer {
         this.params.interact = !this.params.interact;
     }
 
+    /**
+     * Get the fill color of the waveform after the cursor.
+     *
+     * @return {string} A CSS color string.
+     */
+    getWaveColor() {
+        return this.params.waveColor;
+    }
+
+    /**
+     * Set the fill color of the waveform after the cursor.
+     *
+     * @param {string} A CSS color string.
+     * @example wavesurfer.setWaveColor('#ddd');
+     */
+    setWaveColor(color) {
+        this.params.waveColor = color;
+        this.drawBuffer();
+    }
+
+    /**
+     * Get the fill color of the waveform behind the cursor.
+     *
+     * @return {string} A CSS color string.
+     */
+    getProgressColor() {
+        return this.params.progressColor;
+    }
+
+    /**
+     * Set the fill color of the waveform behind the cursor.
+     *
+     * @param {string} A CSS color string.
+     * @example wavesurfer.setProgressColor('#400');
+     */
+    setProgressColor(color) {
+        this.params.progressColor = color;
+        this.drawBuffer();
+    }
+
+    /**
+     * Get the fill color of the cursor indicating the playhead
+     * position.
+     *
+     * @return {string} A CSS color string.
+     */
+    getCursorColor() {
+        return this.params.cursorColor;
+    }
+
+    /**
+     * Set the fill color of the cursor indicating the playhead
+     * position.
+     *
+     * @param {string} A CSS color string.
+     * @example wavesurfer.setCursorColor('#222');
+     */
+    setCursorColor(color) {
+        this.params.cursorColor = color;
+        this.drawer.updateCursor();
+    }
+
+    /**
+     * Get the height of the waveform.
+     *
+     * @return {number} Height measured in pixels.
+     */
+    getHeight() {
+        return this.params.height;
+    }
+
+    /**
+     * Set the height of the waveform.
+     *
+     * @param {number} Height measured in pixels.
+     * @example wavesurfer.setHeight(200);
+     */
+    setHeight(height) {
+        this.params.height = height;
+        this.drawer.setHeight(height * this.params.pixelRatio);
+        this.drawBuffer();
+    }
+
     /**
      * Get the correct peaks for current wave viewport and render wave
      *