wavesurfer.js 6.5.1 → 7.0.0-alpha.0

package/src/drawer.multicanvas.js

@@ -1,617 +0,0 @@
-import Drawer from './drawer';
-import * as util from './util';
-import CanvasEntry from './drawer.canvasentry';
-
-/**
- * MultiCanvas renderer for wavesurfer. Is currently the default and sole
- * builtin renderer.
- *
- * A `MultiCanvas` consists of one or more `CanvasEntry` instances, depending
- * on the zoom level.
- */
-export default class MultiCanvas extends Drawer {
-    /**
-     * @param {HTMLElement} container The container node of the wavesurfer instance
-     * @param {WavesurferParams} params The wavesurfer initialisation options
-     */
-    constructor(container, params) {
-        super(container, params);
-
-        /**
-         * @type {number}
-         */
-        this.maxCanvasWidth = params.maxCanvasWidth;
-
-        /**
-         * @type {number}
-         */
-        this.maxCanvasElementWidth = Math.round(
-            params.maxCanvasWidth / params.pixelRatio
-        );
-
-        /**
-         * Whether or not the progress wave is rendered. If the `waveColor`
-         * and `progressColor` are the same color it is not.
-         *
-         * @type {boolean}
-         */
-        this.hasProgressCanvas = params.waveColor != params.progressColor;
-
-        /**
-         * @type {number}
-         */
-        this.halfPixel = 0.5 / params.pixelRatio;
-
-        /**
-         * List of `CanvasEntry` instances.
-         *
-         * @type {Array}
-         */
-        this.canvases = [];
-
-        /**
-         * @type {HTMLElement}
-         */
-        this.progressWave = null;
-
-        /**
-         * Class used to generate entries.
-         *
-         * @type {function}
-         */
-        this.EntryClass = CanvasEntry;
-
-        /**
-         * Canvas 2d context attributes.
-         *
-         * @type {object}
-         */
-        this.canvasContextAttributes = params.drawingContextAttributes;
-
-        /**
-         * Overlap added between entries to prevent vertical white stripes
-         * between `canvas` elements.
-         *
-         * @type {number}
-         */
-        this.overlap = 2 * Math.ceil(params.pixelRatio / 2);
-
-        /**
-         * The radius of the wave bars. Makes bars rounded
-         *
-         * @type {number}
-         */
-        this.barRadius = params.barRadius || 0;
-
-        /**
-         * Whether to render the waveform vertically. Defaults to false.
-         *
-         * @type {boolean}
-         */
-        this.vertical = params.vertical;
-    }
-
-    /**
-     * Initialize the drawer
-     */
-    init() {
-        this.createWrapper();
-        this.createElements();
-    }
-
-    /**
-     * Create the canvas elements and style them
-     *
-     */
-    createElements() {
-        this.progressWave = util.withOrientation(
-            this.wrapper.appendChild(document.createElement('wave')),
-            this.params.vertical
-        );
-        this.style(this.progressWave, {
-            position: 'absolute',
-            zIndex: 3,
-            left: 0,
-            top: 0,
-            bottom: 0,
-            overflow: 'hidden',
-            width: '0',
-            display: 'none',
-            boxSizing: 'border-box',
-            borderRightStyle: 'solid',
-            pointerEvents: 'none'
-        });
-
-        this.addCanvas();
-        this.updateCursor();
-    }
-
-    /**
-     * Update cursor style
-     */
-    updateCursor() {
-        this.style(this.progressWave, {
-            borderRightWidth: this.params.cursorWidth + 'px',
-            borderRightColor: this.params.cursorColor
-        });
-    }
-
-    /**
-     * Adjust to the updated size by adding or removing canvases
-     */
-    updateSize() {
-        const totalWidth = Math.round(this.width / this.params.pixelRatio);
-        const requiredCanvases = Math.ceil(
-            totalWidth / (this.maxCanvasElementWidth + this.overlap)
-        );
-
-        // add required canvases
-        while (this.canvases.length < requiredCanvases) {
-            this.addCanvas();
-        }
-
-        // remove older existing canvases, if any
-        while (this.canvases.length > requiredCanvases) {
-            this.removeCanvas();
-        }
-
-        let canvasWidth = this.maxCanvasWidth + this.overlap;
-        const lastCanvas = this.canvases.length - 1;
-        this.canvases.forEach((entry, i) => {
-            if (i == lastCanvas) {
-                canvasWidth = this.width - this.maxCanvasWidth * lastCanvas;
-            }
-            this.updateDimensions(entry, canvasWidth, this.height);
-
-            entry.clearWave();
-        });
-    }
-
-    /**
-     * Add a canvas to the canvas list
-     *
-     */
-    addCanvas() {
-        const entry = new this.EntryClass();
-        entry.canvasContextAttributes = this.canvasContextAttributes;
-        entry.hasProgressCanvas = this.hasProgressCanvas;
-        entry.halfPixel = this.halfPixel;
-        const leftOffset = this.maxCanvasElementWidth * this.canvases.length;
-
-        // wave
-        let wave = util.withOrientation(
-            this.wrapper.appendChild(document.createElement('canvas')),
-            this.params.vertical
-        );
-        this.style(wave, {
-            position: 'absolute',
-            zIndex: 2,
-            left: leftOffset + 'px',
-            top: 0,
-            bottom: 0,
-            height: '100%',
-            pointerEvents: 'none'
-        });
-        entry.initWave(wave);
-
-        // progress
-        if (this.hasProgressCanvas) {
-            let progress = util.withOrientation(
-                this.progressWave.appendChild(document.createElement('canvas')),
-                this.params.vertical
-            );
-            this.style(progress, {
-                position: 'absolute',
-                left: leftOffset + 'px',
-                top: 0,
-                bottom: 0,
-                height: '100%'
-            });
-            entry.initProgress(progress);
-        }
-
-        this.canvases.push(entry);
-    }
-
-    /**
-     * Pop single canvas from the list
-     *
-     */
-    removeCanvas() {
-        let lastEntry = this.canvases[this.canvases.length - 1];
-
-        // wave
-        lastEntry.wave.parentElement.removeChild(lastEntry.wave.domElement);
-
-        // progress
-        if (this.hasProgressCanvas) {
-            lastEntry.progress.parentElement.removeChild(lastEntry.progress.domElement);
-        }
-
-        // cleanup
-        if (lastEntry) {
-            lastEntry.destroy();
-            lastEntry = null;
-        }
-
-        this.canvases.pop();
-    }
-
-    /**
-     * Update the dimensions of a canvas element
-     *
-     * @param {CanvasEntry} entry Target entry
-     * @param {number} width The new width of the element
-     * @param {number} height The new height of the element
-     */
-    updateDimensions(entry, width, height) {
-        const elementWidth = Math.round(width / this.params.pixelRatio);
-        const totalWidth = Math.round(this.width / this.params.pixelRatio);
-
-        // update canvas dimensions
-        entry.updateDimensions(elementWidth, totalWidth, width, height);
-
-        // style element
-        this.style(this.progressWave, { display: 'block' });
-    }
-
-    /**
-     * Clear the whole multi-canvas
-     */
-    clearWave() {
-        util.frame(() => {
-            this.canvases.forEach(entry => entry.clearWave());
-        })();
-    }
-
-    /**
-     * Draw a waveform with bars
-     *
-     * @param {number[]|Number.<Array[]>} peaks Can also be an array of arrays
-     * for split channel rendering
-     * @param {number} channelIndex The index of the current channel. Normally
-     * should be 0. Must be an integer.
-     * @param {number} start The x-offset of the beginning of the area that
-     * should be rendered
-     * @param {number} end The x-offset of the end of the area that should be
-     * rendered
-     * @returns {void}
-     */
-    drawBars(peaks, channelIndex, start, end) {
-        return this.prepareDraw(
-            peaks,
-            channelIndex,
-            start,
-            end,
-            ({ absmax, hasMinVals, height, offsetY, halfH, peaks, channelIndex: ch }) => {
-                // if drawBars was called within ws.empty we don't pass a start and
-                // don't want anything to happen
-                if (start === undefined) {
-                    return;
-                }
-                // Skip every other value if there are negatives.
-                const peakIndexScale = hasMinVals ? 2 : 1;
-                const length = peaks.length / peakIndexScale;
-                const bar = this.params.barWidth * this.params.pixelRatio;
-                const gap =
-                    this.params.barGap === null
-                        ? Math.max(this.params.pixelRatio, ~~(bar / 2))
-                        : Math.max(
-                            this.params.pixelRatio,
-                            this.params.barGap * this.params.pixelRatio
-                        );
-                const step = bar + gap;
-
-                const scale = length / this.width;
-                const first = start;
-                const last = end;
-                let peakIndex = first;
-                for (peakIndex; peakIndex < last; peakIndex += step) {
-
-                    // search for the highest peak in the range this bar falls into
-                    let peak = 0;
-                    let peakIndexRange = Math.floor(peakIndex * scale) * peakIndexScale; // start index
-                    const peakIndexEnd = Math.floor((peakIndex + step) * scale) * peakIndexScale;
-                    do { // do..while makes sure at least one peak is always evaluated
-                        const newPeak = Math.abs(peaks[peakIndexRange]); // for arrays starting with negative values
-                        if (newPeak > peak) {
-                            peak = newPeak; // higher
-                        }
-                        peakIndexRange += peakIndexScale; // skip every other value for negatives
-                    } while (peakIndexRange < peakIndexEnd);
-
-                    // calculate the height of this bar according to the highest peak found
-                    let h = Math.round((peak / absmax) * halfH);
-
-                    // raise the bar height to the specified minimum height
-                    // Math.max is used to replace any value smaller than barMinHeight (not just 0) with barMinHeight
-                    if (this.params.barMinHeight) {
-                        h = Math.max(h, this.params.barMinHeight);
-                    }
-
-                    this.fillRect(
-                        peakIndex + this.halfPixel,
-                        halfH - h + offsetY,
-                        bar + this.halfPixel,
-                        h * 2,
-                        this.barRadius,
-                        ch
-                    );
-                }
-            }
-        );
-    }
-
-    /**
-     * Draw a waveform
-     *
-     * @param {number[]|Number.<Array[]>} peaks Can also be an array of arrays
-     * for split channel rendering
-     * @param {number} channelIndex The index of the current channel. Normally
-     * should be 0
-     * @param {number?} start The x-offset of the beginning of the area that
-     * should be rendered (If this isn't set only a flat line is rendered)
-     * @param {number?} end The x-offset of the end of the area that should be
-     * rendered
-     * @returns {void}
-     */
-    drawWave(peaks, channelIndex, start, end) {
-        return this.prepareDraw(
-            peaks,
-            channelIndex,
-            start,
-            end,
-            ({ absmax, hasMinVals, height, offsetY, halfH, peaks, channelIndex }) => {
-                if (!hasMinVals) {
-                    const reflectedPeaks = [];
-                    const len = peaks.length;
-                    let i = 0;
-                    for (i; i < len; i++) {
-                        reflectedPeaks[2 * i] = peaks[i];
-                        reflectedPeaks[2 * i + 1] = -peaks[i];
-                    }
-                    peaks = reflectedPeaks;
-                }
-
-                // if drawWave was called within ws.empty we don't pass a start and
-                // end and simply want a flat line
-                if (start !== undefined) {
-                    this.drawLine(peaks, absmax, halfH, offsetY, start, end, channelIndex);
-                }
-
-                // always draw a median line
-                this.fillRect(
-                    0,
-                    halfH + offsetY - this.halfPixel,
-                    this.width,
-                    this.halfPixel,
-                    this.barRadius,
-                    channelIndex
-                );
-            }
-        );
-    }
-
-    /**
-     * Tell the canvas entries to render their portion of the waveform
-     *
-     * @param {number[]} peaks Peaks data
-     * @param {number} absmax Maximum peak value (absolute)
-     * @param {number} halfH Half the height of the waveform
-     * @param {number} offsetY Offset to the top
-     * @param {number} start The x-offset of the beginning of the area that
-     * should be rendered
-     * @param {number} end The x-offset of the end of the area that
-     * should be rendered
-     * @param {channelIndex} channelIndex The channel index of the line drawn
-     */
-    drawLine(peaks, absmax, halfH, offsetY, start, end, channelIndex) {
-        const { waveColor, progressColor } = this.params.splitChannelsOptions.channelColors[channelIndex] || {};
-        this.canvases.forEach((entry, i) => {
-            this.setFillStyles(entry, waveColor, progressColor);
-            this.applyCanvasTransforms(entry, this.params.vertical);
-            entry.drawLines(peaks, absmax, halfH, offsetY, start, end);
-        });
-    }
-
-    /**
-     * Draw a rectangle on the multi-canvas
-     *
-     * @param {number} x X-position of the rectangle
-     * @param {number} y Y-position of the rectangle
-     * @param {number} width Width of the rectangle
-     * @param {number} height Height of the rectangle
-     * @param {number} radius Radius of the rectangle
-     * @param {channelIndex} channelIndex The channel index of the bar drawn
-     */
-    fillRect(x, y, width, height, radius, channelIndex) {
-        const startCanvas = Math.floor(x / this.maxCanvasWidth);
-        const endCanvas = Math.min(
-            Math.ceil((x + width) / this.maxCanvasWidth) + 1,
-            this.canvases.length
-        );
-        let i = startCanvas;
-        for (i; i < endCanvas; i++) {
-            const entry = this.canvases[i];
-            const leftOffset = i * this.maxCanvasWidth;
-
-            const intersection = {
-                x1: Math.max(x, i * this.maxCanvasWidth),
-                y1: y,
-                x2: Math.min(
-                    x + width,
-                    i * this.maxCanvasWidth + entry.wave.width
-                ),
-                y2: y + height
-            };
-
-            if (intersection.x1 < intersection.x2) {
-                const { waveColor, progressColor } = this.params.splitChannelsOptions.channelColors[channelIndex] || {};
-                this.setFillStyles(entry, waveColor, progressColor);
-                this.applyCanvasTransforms(entry, this.params.vertical);
-
-                entry.fillRects(
-                    intersection.x1 - leftOffset,
-                    intersection.y1,
-                    intersection.x2 - intersection.x1,
-                    intersection.y2 - intersection.y1,
-                    radius
-                );
-            }
-        }
-    }
-
-    /**
-     * Returns whether to hide the channel from being drawn based on params.
-     *
-     * @param {number} channelIndex The index of the current channel.
-     * @returns {bool} True to hide the channel, false to draw.
-     */
-    hideChannel(channelIndex) {
-        return this.params.splitChannels && this.params.splitChannelsOptions.filterChannels.includes(channelIndex);
-    }
-
-    /**
-     * Performs preparation tasks and calculations which are shared by `drawBars`
-     * and `drawWave`
-     *
-     * @param {number[]|Number.<Array[]>} peaks Can also be an array of arrays for
-     * split channel rendering
-     * @param {number} channelIndex The index of the current channel. Normally
-     * should be 0
-     * @param {number?} start The x-offset of the beginning of the area that
-     * should be rendered. If this isn't set only a flat line is rendered
-     * @param {number?} end The x-offset of the end of the area that should be
-     * rendered
-     * @param {function} fn The render function to call, e.g. `drawWave`
-     * @param {number} drawIndex The index of the current channel after filtering.
-     * @param {number?} normalizedMax Maximum modulation value across channels for use with relativeNormalization. Ignored when undefined
-     * @returns {void}
-     */
-    prepareDraw(peaks, channelIndex, start, end, fn, drawIndex, normalizedMax) {
-        return util.frame(() => {
-            // Split channels and call this function with the channelIndex set
-            if (peaks[0] instanceof Array) {
-                const channels = peaks;
-
-                if (this.params.splitChannels) {
-                    const filteredChannels = channels.filter((c, i) => !this.hideChannel(i));
-                    if (!this.params.splitChannelsOptions.overlay) {
-                        this.setHeight(
-                            Math.max(filteredChannels.length, 1) *
-                                this.params.height *
-                                this.params.pixelRatio
-                        );
-                    }
-
-                    let overallAbsMax;
-                    if (this.params.splitChannelsOptions && this.params.splitChannelsOptions.relativeNormalization) {
-                        // calculate maximum peak across channels to use for normalization
-                        overallAbsMax = util.max(channels.map((channelPeaks => util.absMax(channelPeaks))));
-                    }
-
-
-                    return channels.forEach((channelPeaks, i) =>
-                        this.prepareDraw(channelPeaks, i, start, end, fn, filteredChannels.indexOf(channelPeaks), overallAbsMax)
-                    );
-                }
-                peaks = channels[0];
-            }
-
-            // Return and do not draw channel peaks if hidden.
-            if (this.hideChannel(channelIndex)) {
-                return;
-            }
-
-            // calculate maximum modulation value, either from the barHeight
-            // parameter or if normalize=true from the largest value in the peak
-            // set
-            let absmax = 1 / this.params.barHeight;
-            if (this.params.normalize) {
-                absmax = normalizedMax === undefined ? util.absMax(peaks) : normalizedMax;
-            }
-
-            // Bar wave draws the bottom only as a reflection of the top,
-            // so we don't need negative values
-            const hasMinVals = [].some.call(peaks, val => val < 0);
-            const height = this.params.height * this.params.pixelRatio;
-            const halfH = height / 2;
-
-            let offsetY = height * drawIndex || 0;
-
-            // Override offsetY if overlay is true
-            if (this.params.splitChannelsOptions && this.params.splitChannelsOptions.overlay) {
-                offsetY = 0;
-            }
-
-            return fn({
-                absmax: absmax,
-                hasMinVals: hasMinVals,
-                height: height,
-                offsetY: offsetY,
-                halfH: halfH,
-                peaks: peaks,
-                channelIndex: channelIndex
-            });
-        })();
-    }
-
-    /**
-     * Set the fill styles for a certain entry (wave and progress)
-     *
-     * @param {CanvasEntry} entry Target entry
-     * @param {string} waveColor Wave color to draw this entry
-     * @param {string} progressColor Progress color to draw this entry
-     */
-    setFillStyles(entry, waveColor = this.params.waveColor, progressColor = this.params.progressColor) {
-        entry.setFillStyles(waveColor, progressColor);
-    }
-
-    /**
-     * Set the canvas transforms for a certain entry (wave and progress)
-     *
-     * @param {CanvasEntry} entry Target entry
-     * @param {boolean} vertical Whether to render the waveform vertically
-     */
-    applyCanvasTransforms(entry, vertical = false) {
-        entry.applyCanvasTransforms(vertical);
-    }
-
-    /**
-     * Return image data of the multi-canvas
-     *
-     * When using a `type` of `'blob'`, this will return a `Promise`.
-     *
-     * @param {string} format='image/png' An optional value of a format type.
-     * @param {number} quality=0.92 An optional value between 0 and 1.
-     * @param {string} type='dataURL' Either 'dataURL' or 'blob'.
-     * @return {string|string[]|Promise} When using the default `'dataURL'`
-     * `type` this returns a single data URL or an array of data URLs,
-     * one for each canvas. When using the `'blob'` `type` this returns a
-     * `Promise` that resolves with an array of `Blob` instances, one for each
-     * canvas.
-     */
-    getImage(format, quality, type) {
-        if (type === 'blob') {
-            return Promise.all(
-                this.canvases.map(entry => {
-                    return entry.getImage(format, quality, type);
-                })
-            );
-        } else if (type === 'dataURL') {
-            let images = this.canvases.map(entry =>
-                entry.getImage(format, quality, type)
-            );
-            return images.length > 1 ? images : images[0];
-        }
-    }
-
-    /**
-     * Render the new progress
-     *
-     * @param {number} position X-offset of progress position in pixels
-     */
-    updateProgress(position) {
-        this.style(this.progressWave, { width: position + 'px' });
-    }
-}