From e92bd64e952f5ed17e4a851f8d280eb9752c5674 Mon Sep 17 00:00:00 2001 From: Tim Fischbach Date: Mon, 19 Jun 2017 14:13:39 +0200 Subject: [PATCH] Add getters and setters for height and color options 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 | 59 +++++++++++++++++++++++++++- src/drawer.js | 8 ++++ src/drawer.multicanvas.js | 13 ++++++- src/wavesurfer.js | 82 +++++++++++++++++++++++++++++++++++++++ 4 files changed, 159 insertions(+), 3 deletions(-) diff --git a/spec/wavesurfer.spec.js b/spec/wavesurfer.spec.js index 76955c6e29..0bfc4cad8c 100755 --- a/spec/wavesurfer.spec.js +++ b/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); + }); }); diff --git a/src/drawer.js b/src/drawer.js index 19d200c858..6fa8d6388e 100644 --- a/src/drawer.js +++ b/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 * diff --git a/src/drawer.multicanvas.js b/src/drawer.multicanvas.js index 07349ea1ff..06d6504ba3 100644 --- a/src/drawer.multicanvas.js +++ b/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 + }); } /** diff --git a/src/wavesurfer.js b/src/wavesurfer.js index 1825a4c5b1..4c38b1fc4e 100755 --- a/src/wavesurfer.js +++ b/src/wavesurfer.js @@ -901,6 +901,88 @@ 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); + } + /** * Get the correct peaks for current wave viewport and render wave *