wavesurfer.js 7.0.0-alpha.30 → 7.0.0-alpha.32

package/dist/plugins/regions.d.ts

@@ -1,18 +1,7 @@
 import BasePlugin from '../base-plugin.js';
+import EventEmitter from '../event-emitter.js';
 import type { WaveSurferPluginParams } from '../wavesurfer.js';
-export type RegionsPluginOptions = {
-    dragSelection?: boolean;
-    draggable?: boolean;
-    resizable?: boolean;
-};
-export type Region = {
-    startTime: number;
-    endTime: number;
-    title: string;
-    start: number;
-    end: number;
-    element: HTMLElement;
-};
+export type RegionsPluginOptions = undefined;
 export type RegionsPluginEvents = {
     'region-created': {
         region: Region;
@@ -24,39 +13,72 @@ export type RegionsPluginEvents = {
         region: Region;
     };
 };
+export type RegionEvents = {
+    remove: void;
+    update: void;
+    'update-end': void;
+    play: void;
+    click: {
+        event: MouseEvent;
+    };
+    dblclick: {
+        event: MouseEvent;
+    };
+    over: {
+        event: MouseEvent;
+    };
+    leave: {
+        event: MouseEvent;
+    };
+};
+export type RegionParams = {
+    id?: string;
+    start: number;
+    end?: number;
+    drag?: boolean;
+    resize?: boolean;
+    color?: string;
+    content?: string | HTMLElement;
+};
+declare class Region extends EventEmitter<RegionEvents> {
+    private totalDuration;
+    element: HTMLElement;
+    id: string;
+    start: number;
+    end: number;
+    drag: boolean;
+    resize: boolean;
+    color: string;
+    content?: HTMLElement;
+    constructor(params: RegionParams, totalDuration: number);
+    private initElement;
+    private renderPosition;
+    private initMouseEvents;
+    private onStartMoving;
+    private onEndMoving;
+    private onUpdate;
+    private onMove;
+    private onResize;
+    private onEndResizing;
+    play(): void;
+    setTotalDuration(totalDuration: number): void;
+    remove(): void;
+}
 declare class RegionsPlugin extends BasePlugin<RegionsPluginEvents, RegionsPluginOptions> {
-    private dragStart;
-    private regionsContainer;
     private regions;
-    private createdRegion;
-    private modifiedRegion;
-    private isResizingLeft;
-    private isMoving;
-    private wasInteractive;
+    private regionsContainer;
     /** Create an instance of RegionsPlugin */
     constructor(options?: RegionsPluginOptions);
     static create(options?: RegionsPluginOptions): RegionsPlugin;
     init(params: WaveSurferPluginParams): void;
-    /** Set options */
-    setOptions(options: RegionsPluginOptions): void;
-    /** Unmount */
-    destroy(): void;
     private initRegionsContainer;
-    private handleMouseDown;
-    private handleMouseMove;
-    private handleMouseUp;
-    private createRegionElement;
-    private createRegion;
-    private addRegion;
-    private updateRegion;
-    private moveRegion;
-    /** Create a region at a given start and end time, with an optional title */
-    add(startTime: number, endTime: number, title?: string, color?: string): Region;
-    /** Remove a region */
-    remove(region: Region): void;
-    /** Set the background color of a region */
-    setRegionColor(region: Region, color: string): void;
-    /** Disable or enable mouse events for this region */
-    setRegionInteractive(region: Region, isInteractive: boolean): void;
+    getRegions(): Region[];
+    private avoidOverlapping;
+    private saveRegion;
+    addRegion(options: RegionParams): Region;
+    add(start: number, end: number, content?: string, color?: string): Region;
+    enableDragSelection(options: RegionParams): void;
+    clearRegions(): void;
+    destroy(): void;
 }
 export default RegionsPlugin;

package/dist/plugins/regions.js

@@ -1,33 +1,192 @@
 import BasePlugin from '../base-plugin.js';
-const MIN_WIDTH = 10;
-const defaultOptions = {
-    dragSelection: true,
-    draggable: true,
-    resizable: true,
-};
-const style = (element, styles) => {
-    for (const key in styles) {
-        element.style[key] = styles[key] || '';
+import EventEmitter from '../event-emitter.js';
+function makeDraggable(element, onStart, onMove, onEnd) {
+    if (!element)
+        return;
+    let preventClickPropagation = false;
+    element.addEventListener('click', (event) => {
+        preventClickPropagation && event.stopPropagation();
+    });
+    element.addEventListener('mousedown', (e) => {
+        e.stopPropagation();
+        let x = e.clientX;
+        onStart(x);
+        const onMouseMove = (e) => {
+            const newX = e.clientX;
+            const dx = newX - x;
+            x = newX;
+            preventClickPropagation = true;
+            onMove(dx);
+        };
+        const onMouseUp = () => {
+            onEnd();
+            setTimeout(() => (preventClickPropagation = false), 10);
+            document.removeEventListener('mousemove', onMouseMove);
+            document.removeEventListener('mouseup', onMouseUp);
+        };
+        document.addEventListener('mousemove', onMouseMove);
+        document.addEventListener('mouseup', onMouseUp);
+    });
+}
+class Region extends EventEmitter {
+    totalDuration;
+    element;
+    id;
+    start;
+    end;
+    drag;
+    resize;
+    color;
+    content;
+    constructor(params, totalDuration) {
+        super();
+        this.totalDuration = totalDuration;
+        this.id = params.id || Math.random().toString(32).slice(2);
+        this.start = params.start;
+        this.end = params.end ?? params.start;
+        this.drag = params.drag ?? true;
+        this.resize = params.resize ?? true;
+        this.color = params.color ?? 'rgba(0, 0, 0, 0.1)';
+        this.element = this.initElement(params.content);
+        this.renderPosition();
+        this.initMouseEvents();
+    }
+    initElement(content) {
+        const element = document.createElement('div');
+        const isMarker = this.start === this.end;
+        element.id = this.id;
+        element.setAttribute('style', `
+      position: absolute;
+      height: 100%;
+      background-color: ${isMarker ? 'none' : this.color};
+      border-left: ${isMarker ? '2px solid ' + this.color : 'none'};
+      border-radius: 2px;
+      box-sizing: border-box;
+      transition: background-color 0.2s ease;
+      cursor: ${this.drag ? 'grab' : 'default'};
+      pointer-events: all;
+      padding: 0.2em ${isMarker ? 0.2 : 0.4}em;
+      pointer-events: all;
+    `);
+        // Init content
+        if (content) {
+            if (typeof content === 'string') {
+                this.content = document.createElement('div');
+                this.content.textContent = content;
+            }
+            else {
+                this.content = content;
+            }
+            element.appendChild(this.content);
+        }
+        // Add resize handles
+        if (!isMarker) {
+            const leftHandle = document.createElement('div');
+            leftHandle.setAttribute('data-resize', 'left');
+            leftHandle.setAttribute('style', `
+        position: absolute;
+        z-index: 2;
+        width: 6px;
+        height: 100%;
+        top: 0;
+        left: 0;
+        border-left: 2px solid rgba(0, 0, 0, 0.5);
+        border-radius: 2px 0 0 2px;
+        cursor: ${this.resize ? 'ew-resize' : 'default'};
+        word-break: keep-all;
+      `);
+            const rightHandle = leftHandle.cloneNode();
+            rightHandle.setAttribute('data-resize', 'right');
+            rightHandle.style.left = '';
+            rightHandle.style.right = '0';
+            rightHandle.style.borderRight = rightHandle.style.borderLeft;
+            rightHandle.style.borderLeft = '';
+            rightHandle.style.borderRadius = '0 2px 2px 0';
+            element.appendChild(leftHandle);
+            element.appendChild(rightHandle);
+        }
+        return element;
+    }
+    renderPosition() {
+        const start = this.start / this.totalDuration;
+        const end = this.end / this.totalDuration;
+        this.element.style.left = `${start * 100}%`;
+        this.element.style.width = `${(end - start) * 100}%`;
+    }
+    initMouseEvents() {
+        const { element } = this;
+        element.addEventListener('mouseenter', (event) => this.emit('over', { event }));
+        element.addEventListener('mouseleave', (event) => this.emit('leave', { event }));
+        element.addEventListener('click', (event) => this.emit('click', { event }));
+        element.addEventListener('dblclick', (event) => this.emit('dblclick', { event }));
+        // Drag
+        makeDraggable(element, () => this.onStartMoving(), (dx) => this.onMove(dx), () => this.onEndMoving());
+        // Resize
+        makeDraggable(element.querySelector('[data-resize="left"]'), () => null, (dx) => this.onResize(dx, 'start'), () => this.onEndResizing());
+        makeDraggable(element.querySelector('[data-resize="right"]'), () => null, (dx) => this.onResize(dx, 'end'), () => this.onEndResizing());
     }
-};
-const el = (tagName, css) => {
-    const element = document.createElement(tagName);
-    style(element, css);
-    return element;
-};
+    onStartMoving() {
+        if (!this.drag)
+            return;
+        this.element.style.cursor = 'grabbing';
+    }
+    onEndMoving() {
+        if (!this.drag)
+            return;
+        this.element.style.cursor = 'grab';
+        this.emit('update-end');
+    }
+    onUpdate(dx, sides) {
+        if (!this.element.parentElement)
+            return;
+        const deltaSeconds = (dx / this.element.parentElement.clientWidth) * this.totalDuration;
+        sides.forEach((side) => {
+            this[side] += deltaSeconds;
+            if (side === 'start') {
+                this.start = Math.max(0, Math.min(this.start, this.end));
+            }
+            else {
+                this.end = Math.max(this.start, Math.min(this.end, this.totalDuration));
+            }
+        });
+        this.renderPosition();
+        this.emit('update');
+    }
+    onMove(dx) {
+        if (!this.drag)
+            return;
+        this.onUpdate(dx, ['start', 'end']);
+    }
+    onResize(dx, side) {
+        if (!this.resize)
+            return;
+        this.onUpdate(dx, [side]);
+    }
+    onEndResizing() {
+        if (!this.resize)
+            return;
+        this.emit('update-end');
+    }
+    // Play the region from start to end
+    play() {
+        this.emit('play');
+    }
+    setTotalDuration(totalDuration) {
+        this.totalDuration = totalDuration;
+        this.renderPosition();
+    }
+    // Remove the region
+    remove() {
+        this.emit('remove');
+        this.element.remove();
+    }
+}
 class RegionsPlugin extends BasePlugin {
-    dragStart = NaN;
-    regionsContainer;
     regions = [];
-    createdRegion = null;
-    modifiedRegion = null;
-    isResizingLeft = false;
-    isMoving = false;
-    wasInteractive = true;
+    regionsContainer;
     /** Create an instance of RegionsPlugin */
     constructor(options) {
-        super(options || {});
-        this.options = Object.assign({}, defaultOptions, options);
+        super(options);
         this.regionsContainer = this.initRegionsContainer();
     }
     static create(options) {
@@ -38,222 +197,120 @@ class RegionsPlugin extends BasePlugin {
         if (!this.wavesurfer || !this.wrapper) {
             throw Error('WaveSurfer is not initialized');
         }
-        this.wrapper?.appendChild(this.regionsContainer);
-        this.wrapper.addEventListener('mousedown', this.handleMouseDown);
-        document.addEventListener('mousemove', this.handleMouseMove);
-        document.addEventListener('mouseup', this.handleMouseUp);
-    }
-    /** Set options */
-    setOptions(options) {
-        this.options = { ...this.options, ...options };
-    }
-    /** Unmount */
-    destroy() {
-        this.wrapper?.removeEventListener('mousedown', this.handleMouseDown);
-        document.removeEventListener('mousemove', this.handleMouseMove);
-        document.removeEventListener('mouseup', this.handleMouseUp, true);
-        this.regionsContainer.remove();
-        super.destroy();
+        this.wrapper.appendChild(this.regionsContainer);
     }
     initRegionsContainer() {
-        return el('div', {
-            position: 'absolute',
-            top: '0',
-            left: '0',
-            width: '100%',
-            height: '100%',
-            zIndex: '3',
-            pointerEvents: 'none',
-        });
+        const div = document.createElement('div');
+        div.setAttribute('style', `
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 3;
+      pointer-events: none;
+    `);
+        return div;
     }
-    handleMouseDown = (e) => {
-        if (this.options.draggable || this.options.resizable || this.options.dragSelection) {
-            if (!this.wrapper)
-                return;
-            this.dragStart = e.clientX - this.wrapper.getBoundingClientRect().left;
-        }
-    };
-    handleMouseMove = (e) => {
-        if (!this.wrapper)
-            return;
-        const box = this.wrapper.getBoundingClientRect();
-        const { width } = box;
-        const dragEnd = e.clientX - box.left;
-        if (this.options.draggable && this.modifiedRegion && this.isMoving) {
-            this.moveRegion(this.modifiedRegion, (dragEnd - this.dragStart) / width);
-            this.dragStart = dragEnd;
-            return;
-        }
-        if (this.options.resizable && this.modifiedRegion) {
-            this.updateRegion(this.modifiedRegion, this.isResizingLeft ? dragEnd / width : undefined, this.isResizingLeft ? undefined : dragEnd / width);
+    getRegions() {
+        return this.regions;
+    }
+    avoidOverlapping(region) {
+        if (!region.content)
             return;
-        }
-        if (this.options.dragSelection && !isNaN(this.dragStart)) {
-            const dragEnd = e.clientX - this.regionsContainer.getBoundingClientRect().left;
-            if (dragEnd - this.dragStart >= MIN_WIDTH) {
-                if (!this.createdRegion) {
-                    this.wasInteractive = this.wavesurfer?.options.interact || true;
-                    this.wavesurfer?.toggleInteraction(false);
-                    this.createdRegion = this.createRegion(this.dragStart / width, dragEnd / width);
-                }
-                else {
-                    this.updateRegion(this.createdRegion, this.dragStart / width, dragEnd / width);
-                }
-            }
-        }
-    };
-    handleMouseUp = () => {
-        if (this.createdRegion) {
-            this.addRegion(this.createdRegion);
-            this.createdRegion = null;
-        }
-        this.modifiedRegion = null;
-        this.isMoving = false;
-        this.dragStart = NaN;
-        this.wavesurfer?.toggleInteraction(this.wasInteractive);
-    };
-    createRegionElement(start, end, title = '') {
-        const noWidth = start === end;
-        const div = el('div', {
-            position: 'absolute',
-            left: `${start * 100}%`,
-            width: `${(end - start) * 100}%`,
-            height: '100%',
-            backgroundColor: noWidth ? '' : 'rgba(0, 0, 0, 0.1)',
-            borderRadius: '2px',
-            boxSizing: 'border-box',
-            borderLeft: noWidth ? '2px solid rgba(0, 0, 0, 0.5)' : '',
-            transition: 'background-color 0.2s ease',
-            cursor: this.options.draggable ? 'move' : '',
-            pointerEvents: 'all',
-            whiteSpace: noWidth ? 'nowrap' : '',
-            padding: '0.2em',
-        });
-        div.textContent = title;
-        const leftHandle = el('div', {
-            position: 'absolute',
-            left: '0',
-            top: '0',
-            width: '6px',
-            height: '100%',
-            cursor: this.options.resizable ? 'ew-resize' : '',
-            pointerEvents: 'all',
-            borderLeft: noWidth ? '' : '2px solid rgba(0, 0, 0, 0.5)',
-            borderRadius: '2px 0 0 2px',
-        });
-        div.appendChild(leftHandle);
-        const rightHandle = leftHandle.cloneNode();
-        style(rightHandle, {
-            left: '',
-            right: '0',
-            borderLeft: '',
-            borderRight: noWidth ? '' : '2px solid rgba(0, 0, 0, 0.5)',
-            borderRadius: '0 2px 2px 0',
-        });
-        div.appendChild(rightHandle);
-        leftHandle.addEventListener('mousedown', (e) => {
-            if (!this.options.resizable)
-                return;
-            e.stopPropagation();
-            this.modifiedRegion = this.regions.find((r) => r.element === div) || null;
-            this.isResizingLeft = true;
-            this.isMoving = false;
-        });
-        rightHandle.addEventListener('mousedown', (e) => {
-            if (!this.options.resizable)
-                return;
-            e.stopPropagation();
-            this.modifiedRegion = this.regions.find((r) => r.element === div) || null;
-            this.isResizingLeft = false;
-            this.isMoving = false;
-        });
-        div.addEventListener('mousedown', () => {
-            if (!this.options.draggable)
-                return;
-            this.modifiedRegion = this.regions.find((r) => r.element === div) || null;
-            this.isMoving = this.modifiedRegion !== null;
-        });
-        div.addEventListener('click', () => {
-            const region = this.regions.find((r) => r.element === div);
-            if (region) {
-                this.emit('region-clicked', { region });
-            }
-        });
-        this.regionsContainer.appendChild(div);
         // Check that the label doesn't overlap with other labels
-        // If it does, push it down
+        // If it does, push it down until it doesn't
+        const div = region.content;
         const labelLeft = div.getBoundingClientRect().left;
-        const labelWidth = div.scrollWidth;
+        const labelWidth = region.element.scrollWidth;
         const overlap = this.regions
             .filter((reg) => {
-            const { left } = reg.element.getBoundingClientRect();
+            if (reg === region || !reg.content)
+                return false;
+            const left = reg.content.getBoundingClientRect().left;
             const width = reg.element.scrollWidth;
             return labelLeft < left + width && left < labelLeft + labelWidth;
         })
-            .map((reg) => parseFloat(reg.element.style.paddingTop))
+            .map((reg) => reg.content?.getBoundingClientRect().height || 0)
             .reduce((sum, val) => sum + val, 0);
-        if (overlap > 0) {
-            div.style.paddingTop = `${overlap + 1}em`;
-        }
-        return div;
-    }
-    createRegion(start, end, title = '') {
-        const duration = this.wavesurfer?.getDuration() || 0;
-        return {
-            element: this.createRegionElement(start, end, title),
-            start,
-            end,
-            startTime: start * duration,
-            endTime: end * duration,
-            title,
-        };
+        div.style.marginTop = `${overlap}px`;
     }
-    addRegion(region) {
+    saveRegion(region) {
+        this.regionsContainer.appendChild(region.element);
+        this.avoidOverlapping(region);
         this.regions.push(region);
         this.emit('region-created', { region });
+        this.subscriptions.push(region.on('update-end', () => {
+            this.avoidOverlapping(region);
+            this.emit('region-updated', { region });
+        }), region.on('play', () => {
+            this.wavesurfer?.play();
+            this.wavesurfer?.setTime(region.start);
+        }), region.on('click', () => {
+            this.emit('region-clicked', { region });
+        }));
     }
-    updateRegion(region, start, end) {
-        const duration = this.wavesurfer?.getDuration() || 0;
-        if (start != null) {
-            region.start = start;
-            region.element.style.left = `${region.start * 100}%`;
-            region.element.style.width = `${(region.end - region.start) * 100}%`;
-            region.startTime = start * duration;
+    addRegion(options) {
+        if (!this.wavesurfer) {
+            throw Error('WaveSurfer is not initialized');
         }
-        if (end != null) {
-            region.end = end;
-            region.element.style.width = `${(region.end - region.start) * 100}%`;
-            region.endTime = end * duration;
+        const duration = this.wavesurfer.getDuration();
+        const region = new Region(options, duration);
+        if (!duration) {
+            this.subscriptions.push(this.wavesurfer.once('canplay', ({ duration }) => {
+                region.setTotalDuration(duration);
+                this.saveRegion(region);
+            }));
+        }
+        else {
+            this.saveRegion(region);
         }
-        this.emit('region-updated', { region });
-    }
-    moveRegion(region, delta) {
-        this.updateRegion(region, region.start + delta, region.end + delta);
-    }
-    /** Create a region at a given start and end time, with an optional title */
-    add(startTime, endTime, title = '', color = '') {
-        const duration = this.wavesurfer?.getDuration() || 0;
-        const start = startTime / duration;
-        const end = endTime / duration;
-        const region = this.createRegion(start, end, title);
-        this.addRegion(region);
-        if (color)
-            this.setRegionColor(region, color);
         return region;
     }
-    /** Remove a region */
-    remove(region) {
-        region.element.remove();
-        region.element = null;
-        this.regions = this.regions.filter((r) => r !== region);
+    // The same as addRegion but with spread params
+    add(start, end, content, color) {
+        return this.addRegion({ start, end, content, color });
     }
-    /** Set the background color of a region */
-    setRegionColor(region, color) {
-        region.element.style[region.startTime === region.endTime ? 'borderColor' : 'backgroundColor'] = color;
+    enableDragSelection(options) {
+        if (!this.wrapper)
+            return;
+        const minWidth = 5; // min 5 pixels
+        let region = null;
+        let startX = 0;
+        let sumDx = 0;
+        makeDraggable(this.wrapper, 
+        // On mousedown
+        (x) => (startX = x), 
+        // On mousemove
+        (dx) => {
+            sumDx += dx;
+            if (!this.wavesurfer || !this.wrapper)
+                return;
+            if (!region && sumDx > minWidth) {
+                const duration = this.wavesurfer.getDuration();
+                const box = this.wrapper.getBoundingClientRect();
+                const start = ((startX + sumDx - box.left) / box.width) * duration;
+                region = new Region({
+                    ...options,
+                    start,
+                    end: start,
+                }, duration);
+                this.regionsContainer.appendChild(region.element);
+            }
+            if (region) {
+                const privateRegion = region;
+                privateRegion.onUpdate(dx, ['end']);
+            }
+        }, 
+        // On mouseup
+        () => region && this.saveRegion(region));
+    }
+    clearRegions() {
+        this.regions.forEach((region) => region.remove());
     }
-    /** Disable or enable mouse events for this region */
-    setRegionInteractive(region, isInteractive) {
-        region.element.style.pointerEvents = isInteractive ? 'all' : 'none';
+    destroy() {
+        this.clearRegions();
+        super.destroy();
     }
 }
 export default RegionsPlugin;