wavesurfer.js 7.11.0 → 7.12.0

package/dist/renderer.js

@@ -18,8 +18,11 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { makeDraggable } from './draggable.js';
 import EventEmitter from './event-emitter.js';
+import * as utils from './renderer-utils.js';
+import { createDragStream } from './reactive/drag-stream.js';
+import { createScrollStream } from './reactive/scroll-stream.js';
+import { effect } from './reactive/store.js';
 class Renderer extends EventEmitter {
     constructor(options, audioElement) {
         super();
@@ -31,7 +34,8 @@ class Renderer extends EventEmitter {
         this.isDragging = false;
         this.subscriptions = [];
         this.unsubscribeOnScroll = [];
-        this.dragUnsubscribe = null;
+        this.dragStream = null;
+        this.scrollStream = null;
         this.subscriptions = [];
         this.options = options;
         const parent = this.parentFromOptionsContainer(options.container);
@@ -63,35 +67,30 @@ class Renderer extends EventEmitter {
         return parent;
     }
     initEvents() {
-        const getClickPosition = (e) => {
-            const rect = this.wrapper.getBoundingClientRect();
-            const x = e.clientX - rect.left;
-            const y = e.clientY - rect.top;
-            const relativeX = x / rect.width;
-            const relativeY = y / rect.height;
-            return [relativeX, relativeY];
-        };
         // Add a click listener
         this.wrapper.addEventListener('click', (e) => {
-            const [x, y] = getClickPosition(e);
+            const rect = this.wrapper.getBoundingClientRect();
+            const [x, y] = utils.getRelativePointerPosition(rect, e.clientX, e.clientY);
             this.emit('click', x, y);
         });
         // Add a double click listener
         this.wrapper.addEventListener('dblclick', (e) => {
-            const [x, y] = getClickPosition(e);
+            const rect = this.wrapper.getBoundingClientRect();
+            const [x, y] = utils.getRelativePointerPosition(rect, e.clientX, e.clientY);
             this.emit('dblclick', x, y);
         });
         // Drag
         if (this.options.dragToSeek === true || typeof this.options.dragToSeek === 'object') {
             this.initDrag();
         }
-        // Add a scroll listener
-        this.scrollContainer.addEventListener('scroll', () => {
-            const { scrollLeft, scrollWidth, clientWidth } = this.scrollContainer;
-            const startX = scrollLeft / scrollWidth;
-            const endX = (scrollLeft + clientWidth) / scrollWidth;
-            this.emit('scroll', startX, endX, scrollLeft, scrollLeft + clientWidth);
-        });
+        // Add a scroll listener using reactive stream
+        this.scrollStream = createScrollStream(this.scrollContainer);
+        const unsubscribeScroll = effect(() => {
+            const { startX, endX } = this.scrollStream.percentages.value;
+            const { left, right } = this.scrollStream.bounds.value;
+            this.emit('scroll', startX, endX, left, right);
+        }, [this.scrollStream.percentages, this.scrollStream.bounds]);
+        this.subscriptions.push(unsubscribeScroll);
         // Re-render the waveform on container resize
         if (typeof ResizeObserver === 'function') {
             const delay = this.createDelay(100);
@@ -109,43 +108,32 @@ class Renderer extends EventEmitter {
             return;
         this.lastContainerWidth = width;
         this.reRender();
+        this.emit('resize');
     }
     initDrag() {
         // Don't initialize drag if it's already set up
-        if (this.dragUnsubscribe)
+        if (this.dragStream)
             return;
-        this.dragUnsubscribe = makeDraggable(this.wrapper, 
-        // On drag
-        (_, __, x) => {
-            this.emit('drag', Math.max(0, Math.min(1, x / this.wrapper.getBoundingClientRect().width)));
-        }, 
-        // On start drag
-        (x) => {
-            this.isDragging = true;
-            this.emit('dragstart', Math.max(0, Math.min(1, x / this.wrapper.getBoundingClientRect().width)));
-        }, 
-        // On end drag
-        (x) => {
-            this.isDragging = false;
-            this.emit('dragend', Math.max(0, Math.min(1, x / this.wrapper.getBoundingClientRect().width)));
-        });
-        this.subscriptions.push(this.dragUnsubscribe);
-    }
-    getHeight(optionsHeight, optionsSplitChannel) {
-        var _a;
-        const defaultHeight = 128;
-        const numberOfChannels = ((_a = this.audioData) === null || _a === void 0 ? void 0 : _a.numberOfChannels) || 1;
-        if (optionsHeight == null)
-            return defaultHeight;
-        if (!isNaN(Number(optionsHeight)))
-            return Number(optionsHeight);
-        if (optionsHeight === 'auto') {
-            const height = this.parent.clientHeight || defaultHeight;
-            if (optionsSplitChannel === null || optionsSplitChannel === void 0 ? void 0 : optionsSplitChannel.every((channel) => !channel.overlay))
-                return height / numberOfChannels;
-            return height;
-        }
-        return defaultHeight;
+        this.dragStream = createDragStream(this.wrapper);
+        const unsubscribeDrag = effect(() => {
+            const drag = this.dragStream.signal.value;
+            if (!drag)
+                return;
+            const width = this.wrapper.getBoundingClientRect().width;
+            const relX = utils.clampToUnit(drag.x / width);
+            if (drag.type === 'start') {
+                this.isDragging = true;
+                this.emit('dragstart', relX);
+            }
+            else if (drag.type === 'move') {
+                this.emit('drag', relX);
+            }
+            else if (drag.type === 'end') {
+                this.isDragging = false;
+                this.emit('dragend', relX);
+            }
+        }, [this.dragStream.signal]);
+        this.subscriptions.push(unsubscribeDrag);
     }
     initHtml() {
         const div = document.createElement('div');
@@ -182,6 +170,7 @@ class Renderer extends EventEmitter {
         }
         :host .canvases {
           min-height: ${this.getHeight(this.options.height, this.options.splitChannels)}px;
+          pointer-events: none;
         }
         :host .canvases > div {
           position: relative;
@@ -267,6 +256,14 @@ class Renderer extends EventEmitter {
         }
         (_a = this.unsubscribeOnScroll) === null || _a === void 0 ? void 0 : _a.forEach((unsubscribe) => unsubscribe());
         this.unsubscribeOnScroll = [];
+        if (this.dragStream) {
+            this.dragStream.cleanup();
+            this.dragStream = null;
+        }
+        if (this.scrollStream) {
+            this.scrollStream.cleanup();
+            this.scrollStream = null;
+        }
     }
     createDelay(delayMs = 10) {
         let timeout;
@@ -297,123 +294,88 @@ class Renderer extends EventEmitter {
             });
         };
     }
-    // Convert array of color values to linear gradient
-    convertColorValues(color) {
-        if (!Array.isArray(color))
-            return color || '';
-        if (color.length === 0)
-            return '#999'; // Return default color for empty array
-        if (color.length < 2)
-            return color[0] || '';
-        const canvasElement = document.createElement('canvas');
-        const ctx = canvasElement.getContext('2d');
-        const gradientHeight = canvasElement.height * (window.devicePixelRatio || 1);
-        const gradient = ctx.createLinearGradient(0, 0, 0, gradientHeight);
-        const colorStopPercentage = 1 / (color.length - 1);
-        color.forEach((color, index) => {
-            const offset = index * colorStopPercentage;
-            gradient.addColorStop(offset, color);
+    getHeight(optionsHeight, optionsSplitChannel) {
+        var _a;
+        const numberOfChannels = ((_a = this.audioData) === null || _a === void 0 ? void 0 : _a.numberOfChannels) || 1;
+        return utils.resolveChannelHeight({
+            optionsHeight,
+            optionsSplitChannels: optionsSplitChannel,
+            parentHeight: this.parent.clientHeight,
+            numberOfChannels,
+            defaultHeight: utils.DEFAULT_HEIGHT,
         });
-        return gradient;
+    }
+    convertColorValues(color) {
+        return utils.resolveColorValue(color, this.getPixelRatio());
     }
     getPixelRatio() {
-        return Math.max(1, window.devicePixelRatio || 1);
+        return utils.getPixelRatio(window.devicePixelRatio);
     }
     renderBarWaveform(channelData, options, ctx, vScale) {
-        const topChannel = channelData[0];
-        const bottomChannel = channelData[1] || channelData[0];
-        const length = topChannel.length;
         const { width, height } = ctx.canvas;
-        const halfHeight = height / 2;
-        const pixelRatio = this.getPixelRatio();
-        const barWidth = options.barWidth ? options.barWidth * pixelRatio : 1;
-        const barGap = options.barGap ? options.barGap * pixelRatio : options.barWidth ? barWidth / 2 : 0;
-        const barRadius = options.barRadius || 0;
-        const barIndexScale = width / (barWidth + barGap) / length;
-        const rectFn = barRadius && 'roundRect' in ctx ? 'roundRect' : 'rect';
+        const { halfHeight, barWidth, barRadius, barIndexScale, barSpacing, barMinHeight } = utils.calculateBarRenderConfig({
+            width,
+            height,
+            length: (channelData[0] || []).length,
+            options,
+            pixelRatio: this.getPixelRatio(),
+        });
+        const segments = utils.calculateBarSegments({
+            channelData,
+            barIndexScale,
+            barSpacing,
+            barWidth,
+            halfHeight,
+            vScale,
+            canvasHeight: height,
+            barAlign: options.barAlign,
+            barMinHeight,
+        });
         ctx.beginPath();
-        let prevX = 0;
-        let maxTop = 0;
-        let maxBottom = 0;
-        for (let i = 0; i <= length; i++) {
-            const x = Math.round(i * barIndexScale);
-            if (x > prevX) {
-                const topBarHeight = Math.round(maxTop * halfHeight * vScale);
-                const bottomBarHeight = Math.round(maxBottom * halfHeight * vScale);
-                const barHeight = topBarHeight + bottomBarHeight || 1;
-                // Vertical alignment
-                let y = halfHeight - topBarHeight;
-                if (options.barAlign === 'top') {
-                    y = 0;
-                }
-                else if (options.barAlign === 'bottom') {
-                    y = height - barHeight;
-                }
-                ctx[rectFn](prevX * (barWidth + barGap), y, barWidth, barHeight, barRadius);
-                prevX = x;
-                maxTop = 0;
-                maxBottom = 0;
+        for (const segment of segments) {
+            if (barRadius && 'roundRect' in ctx) {
+                ;
+                ctx.roundRect(segment.x, segment.y, segment.width, segment.height, barRadius);
+            }
+            else {
+                ctx.rect(segment.x, segment.y, segment.width, segment.height);
             }
-            const magnitudeTop = Math.abs(topChannel[i] || 0);
-            const magnitudeBottom = Math.abs(bottomChannel[i] || 0);
-            if (magnitudeTop > maxTop)
-                maxTop = magnitudeTop;
-            if (magnitudeBottom > maxBottom)
-                maxBottom = magnitudeBottom;
         }
         ctx.fill();
         ctx.closePath();
     }
     renderLineWaveform(channelData, _options, ctx, vScale) {
-        const drawChannel = (index) => {
-            const channel = channelData[index] || channelData[0];
-            const length = channel.length;
-            const { height } = ctx.canvas;
-            const halfHeight = height / 2;
-            const hScale = ctx.canvas.width / length;
-            ctx.moveTo(0, halfHeight);
-            let prevX = 0;
-            let max = 0;
-            for (let i = 0; i <= length; i++) {
-                const x = Math.round(i * hScale);
-                if (x > prevX) {
-                    const h = Math.round(max * halfHeight * vScale) || 1;
-                    const y = halfHeight + h * (index === 0 ? -1 : 1);
-                    ctx.lineTo(prevX, y);
-                    prevX = x;
-                    max = 0;
-                }
-                const value = Math.abs(channel[i] || 0);
-                if (value > max)
-                    max = value;
-            }
-            ctx.lineTo(prevX, halfHeight);
-        };
+        const { width, height } = ctx.canvas;
+        const paths = utils.calculateLinePaths({ channelData, width, height, vScale });
         ctx.beginPath();
-        drawChannel(0);
-        drawChannel(1);
+        for (const path of paths) {
+            if (!path.length)
+                continue;
+            ctx.moveTo(path[0].x, path[0].y);
+            for (let i = 1; i < path.length; i++) {
+                const point = path[i];
+                ctx.lineTo(point.x, point.y);
+            }
+        }
         ctx.fill();
         ctx.closePath();
     }
     renderWaveform(channelData, options, ctx) {
         ctx.fillStyle = this.convertColorValues(options.waveColor);
-        // Custom rendering function
         if (options.renderFunction) {
             options.renderFunction(channelData, ctx);
             return;
         }
-        // Vertical scaling
-        let vScale = options.barHeight || 1;
-        if (options.normalize) {
-            const max = Array.from(channelData[0]).reduce((max, value) => Math.max(max, Math.abs(value)), 0);
-            vScale = max ? vScale / max : vScale;
-        }
-        // Render waveform as bars
-        if (options.barWidth || options.barGap || options.barAlign) {
+        const vScale = utils.calculateVerticalScale({
+            channelData,
+            barHeight: options.barHeight,
+            normalize: options.normalize,
+            maxPeak: options.maxPeak,
+        });
+        if (utils.shouldRenderBars(options)) {
             this.renderBarWaveform(channelData, options, ctx, vScale);
             return;
         }
-        // Render waveform as a polyline
         this.renderLineWaveform(channelData, options, ctx, vScale);
     }
     renderSingleCanvas(data, options, width, height, offset, canvasContainer, progressContainer) {
@@ -426,7 +388,13 @@ class Renderer extends EventEmitter {
         canvas.style.left = `${Math.round(offset)}px`;
         canvasContainer.appendChild(canvas);
         const ctx = canvas.getContext('2d');
-        this.renderWaveform(data, options, ctx);
+        if (options.renderFunction) {
+            ctx.fillStyle = this.convertColorValues(options.waveColor);
+            options.renderFunction(data, ctx);
+        }
+        else {
+            this.renderWaveform(data, options, ctx);
+        }
         // Draw a progress canvas
         if (canvas.width > 0 && canvas.height > 0) {
             const progressCanvas = canvas.cloneNode();
@@ -444,17 +412,8 @@ class Renderer extends EventEmitter {
         const pixelRatio = this.getPixelRatio();
         const { clientWidth } = this.scrollContainer;
         const totalWidth = width / pixelRatio;
-        let singleCanvasWidth = Math.min(Renderer.MAX_CANVAS_WIDTH, clientWidth, totalWidth);
+        const singleCanvasWidth = utils.calculateSingleCanvasWidth({ clientWidth, totalWidth, options });
         let drawnIndexes = {};
-        // Adjust width to avoid gaps between canvases when using bars
-        if (options.barWidth || options.barGap) {
-            const barWidth = options.barWidth || 0.5;
-            const barGap = options.barGap || barWidth / 2;
-            const totalBarWidth = barWidth + barGap;
-            if (singleCanvasWidth % totalBarWidth !== 0) {
-                singleCanvasWidth = Math.floor(singleCanvasWidth / totalBarWidth) * totalBarWidth;
-            }
-        }
         // Nothing to render
         if (singleCanvasWidth === 0)
             return;
@@ -468,24 +427,15 @@ class Renderer extends EventEmitter {
             const offset = index * singleCanvasWidth;
             let clampedWidth = Math.min(totalWidth - offset, singleCanvasWidth);
             // Clamp the width to the bar grid to avoid empty canvases at the end
-            if (options.barWidth || options.barGap) {
-                const barWidth = options.barWidth || 0.5;
-                const barGap = options.barGap || barWidth / 2;
-                const totalBarWidth = barWidth + barGap;
-                clampedWidth = Math.floor(clampedWidth / totalBarWidth) * totalBarWidth;
-            }
+            clampedWidth = utils.clampWidthToBarGrid(clampedWidth, options);
             if (clampedWidth <= 0)
                 return;
-            const data = channelData.map((channel) => {
-                const start = Math.floor((offset / totalWidth) * channel.length);
-                const end = Math.floor(((offset + clampedWidth) / totalWidth) * channel.length);
-                return channel.slice(start, end);
-            });
+            const data = utils.sliceChannelData({ channelData, offset, clampedWidth, totalWidth });
             this.renderSingleCanvas(data, options, clampedWidth, height, offset, canvasContainer, progressContainer);
         };
         // Clear canvases to avoid too many DOM nodes
         const clearCanvases = () => {
-            if (Object.keys(drawnIndexes).length > Renderer.MAX_NODES) {
+            if (utils.shouldClearCanvases(Object.keys(drawnIndexes).length)) {
                 canvasContainer.innerHTML = '';
                 progressContainer.innerHTML = '';
                 drawnIndexes = {};
@@ -501,21 +451,18 @@ class Renderer extends EventEmitter {
             return;
         }
         // Lazy rendering
-        const viewPosition = this.scrollContainer.scrollLeft / totalWidth;
-        const startCanvas = Math.floor(viewPosition * numCanvases);
-        // Draw the canvases in the viewport first
-        draw(startCanvas - 1);
-        draw(startCanvas);
-        draw(startCanvas + 1);
+        const initialRange = utils.getLazyRenderRange({
+            scrollLeft: this.scrollContainer.scrollLeft,
+            totalWidth,
+            numCanvases,
+        });
+        initialRange.forEach((index) => draw(index));
         // Subscribe to the scroll event to draw additional canvases
         if (numCanvases > 1) {
             const unsubscribe = this.on('scroll', () => {
                 const { scrollLeft } = this.scrollContainer;
-                const canvasIndex = Math.floor((scrollLeft / totalWidth) * numCanvases);
                 clearCanvases();
-                draw(canvasIndex - 1);
-                draw(canvasIndex);
-                draw(canvasIndex + 1);
+                utils.getLazyRenderRange({ scrollLeft, totalWidth, numCanvases }).forEach((index) => draw(index));
             });
             this.unsubscribeOnScroll.push(unsubscribe);
         }
@@ -554,12 +501,15 @@ class Renderer extends EventEmitter {
             // Determine the width of the waveform
             const pixelRatio = this.getPixelRatio();
             const parentWidth = this.scrollContainer.clientWidth;
-            const scrollWidth = Math.ceil(audioData.duration * (this.options.minPxPerSec || 0));
+            const { scrollWidth, isScrollable, useParentWidth, width } = utils.calculateWaveformLayout({
+                duration: audioData.duration,
+                minPxPerSec: this.options.minPxPerSec || 0,
+                parentWidth,
+                fillParent: this.options.fillParent,
+                pixelRatio,
+            });
             // Whether the container should scroll
-            this.isScrollable = scrollWidth > parentWidth;
-            const useParentWidth = this.options.fillParent && !this.isScrollable;
-            // Width of the waveform in pixels
-            const width = (useParentWidth ? parentWidth : scrollWidth) * pixelRatio;
+            this.isScrollable = isScrollable;
             // Set the width of the wrapper
             this.wrapper.style.width = useParentWidth ? '100%' : `${scrollWidth}px`;
             // Set additional styles
@@ -602,12 +552,7 @@ class Renderer extends EventEmitter {
         // Adjust the scroll position so that the cursor stays in the same place
         if (this.isScrollable && scrollWidth !== this.scrollContainer.scrollWidth) {
             const { right: after } = this.progressWrapper.getBoundingClientRect();
-            let delta = after - before;
-            // to limit compounding floating-point drift
-            // we need to round to the half px furthest from 0
-            delta *= 2;
-            delta = delta < 0 ? Math.floor(delta) : Math.ceil(delta);
-            delta /= 2;
+            const delta = utils.roundToHalfAwayFromZero(after - before);
             this.scrollContainer.scrollLeft += delta;
         }
     }
@@ -638,16 +583,9 @@ class Renderer extends EventEmitter {
             // Keep the cursor centered when playing
             const center = progressWidth - scrollLeft - middle;
             if (isPlaying && this.options.autoCenter && center > 0) {
-                this.scrollContainer.scrollLeft += Math.min(center, 10);
+                this.scrollContainer.scrollLeft += center;
             }
         }
-        // Emit the scroll event
-        {
-            const newScroll = this.scrollContainer.scrollLeft;
-            const startX = newScroll / scrollWidth;
-            const endX = (newScroll + clientWidth) / scrollWidth;
-            this.emit('scroll', startX, endX, newScroll, newScroll + clientWidth);
-        }
     }
     renderProgress(progress, isPlaying) {
         if (isNaN(progress))
@@ -690,6 +628,4 @@ class Renderer extends EventEmitter {
         });
     }
 }
-Renderer.MAX_CANVAS_WIDTH = 8000;
-Renderer.MAX_NODES = 10;
 export default Renderer;

package/dist/state/__tests__/wavesurfer-state.test.d.ts

@@ -0,0 +1 @@
+export {};