wavesurfer.js 7.0.0-alpha.9 → 7.0.0-beta.2

package/dist/plugins/regions.js

@@ -1,215 +1,385 @@
+/**
+ * Regions are visual overlays on the waveform that can be used to mark segments of audio.
+ * Regions can be clicked on, dragged and resized.
+ * You can set the color and content of each region, as well as their HTML content.
+ */
 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] || '';
-    }
-};
-const el = (tagName, css) => {
-    const element = document.createElement(tagName);
-    style(element, css);
-    return element;
-};
-class RegionsPlugin extends BasePlugin {
-    /** Create an instance of RegionsPlugin */
-    constructor(params, options) {
-        super(params, options);
-        this.dragStart = NaN;
-        this.regions = [];
-        this.createdRegion = null;
-        this.modifiedRegion = null;
-        this.isResizingLeft = false;
-        this.isMoving = false;
-        this.handleMouseDown = (e) => {
-            if (this.options.draggable || this.options.resizable || this.options.dragSelection) {
-                this.dragStart = e.clientX - this.container.getBoundingClientRect().left;
+import EventEmitter from '../event-emitter.js';
+function makeDraggable(element, onStart, onMove, onEnd, threshold = 5) {
+    if (!element)
+        return () => undefined;
+    let isDragging = false;
+    const onClick = (e) => {
+        isDragging && e.stopPropagation();
+    };
+    const onMouseDown = (e) => {
+        e.stopPropagation();
+        let x = e.clientX;
+        let sumDx = 0;
+        onStart(x);
+        const onMouseMove = (e) => {
+            const newX = e.clientX;
+            const dx = newX - x;
+            sumDx += dx;
+            x = newX;
+            if (isDragging || Math.abs(sumDx) >= threshold) {
+                onMove(isDragging ? dx : sumDx);
+                isDragging = true;
             }
         };
-        this.handleMouseMove = (e) => {
-            const dragEnd = e.clientX - this.container.getBoundingClientRect().left;
-            if (this.options.draggable && this.modifiedRegion && this.isMoving) {
-                this.moveRegion(this.modifiedRegion, dragEnd - this.dragStart);
-                this.dragStart = dragEnd;
-                return;
-            }
-            if (this.options.resizable && this.modifiedRegion) {
-                this.updateRegion(this.modifiedRegion, this.isResizingLeft ? dragEnd : undefined, this.isResizingLeft ? undefined : dragEnd);
-                return;
-            }
-            if (this.options.dragSelection && !isNaN(this.dragStart)) {
-                const dragEnd = e.clientX - this.wrapper.getBoundingClientRect().left;
-                if (dragEnd - this.dragStart >= MIN_WIDTH) {
-                    if (!this.createdRegion) {
-                        this.container.style.pointerEvents = 'none';
-                        this.createdRegion = this.createRegion(this.dragStart, dragEnd);
-                    }
-                    else {
-                        this.updateRegion(this.createdRegion, this.dragStart, dragEnd);
-                    }
-                }
+        const onMouseUp = () => {
+            if (isDragging) {
+                onEnd();
+                setTimeout(() => (isDragging = false), 10);
             }
+            document.removeEventListener('mousemove', onMouseMove);
+            document.removeEventListener('mouseup', onMouseUp);
         };
-        this.handleMouseUp = () => {
-            if (this.createdRegion) {
-                this.addRegion(this.createdRegion);
-                this.createdRegion = null;
+        document.addEventListener('mousemove', onMouseMove);
+        document.addEventListener('mouseup', onMouseUp);
+    };
+    element.addEventListener('click', onClick);
+    element.addEventListener('mousedown', onMouseDown);
+    return () => {
+        element.removeEventListener('click', onClick);
+        element.removeEventListener('mousedown', onMouseDown);
+    };
+}
+export class Region extends EventEmitter {
+    constructor(params, totalDuration) {
+        super();
+        this.totalDuration = totalDuration;
+        this.id = params.id || `region-${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.setAttribute('part', `${isMarker ? 'marker' : 'region'} ${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;
             }
-            this.modifiedRegion = null;
-            this.isMoving = false;
-            this.dragStart = NaN;
-            this.container.style.pointerEvents = '';
-        };
-        this.options = Object.assign({}, defaultOptions, options);
-        this.wrapper = this.initWrapper();
-        const unsubscribe = this.wavesurfer.once('decode', () => {
-            this.container.appendChild(this.wrapper);
-        });
-        this.subscriptions.push(unsubscribe);
-        this.container.addEventListener('mousedown', this.handleMouseDown);
-        document.addEventListener('mousemove', this.handleMouseMove);
-        document.addEventListener('mouseup', this.handleMouseUp);
+            else {
+                this.content = content;
+            }
+            this.content.setAttribute('part', 'region-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;
+      `);
+            leftHandle.setAttribute('part', 'region-handle region-handle-left');
+            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';
+            rightHandle.setAttribute('part', 'region-handle region-handle-right');
+            element.appendChild(leftHandle);
+            element.appendChild(rightHandle);
+        }
+        return element;
     }
-    /** Unmount */
-    destroy() {
-        this.container.removeEventListener('mousedown', this.handleMouseDown);
-        document.removeEventListener('mousemove', this.handleMouseMove);
-        document.removeEventListener('mouseup', this.handleMouseUp, true);
-        this.wrapper.remove();
-        super.destroy();
+    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}%`;
     }
-    initWrapper() {
-        return el('div', {
-            position: 'absolute',
-            top: '0',
-            left: '0',
-            width: '100%',
-            height: '100%',
-            zIndex: '3',
-            pointerEvents: 'none',
-        });
+    initMouseEvents() {
+        const { element } = this;
+        element.addEventListener('click', (e) => this.emit('click', e));
+        element.addEventListener('mouseenter', (e) => this.emit('over', e));
+        element.addEventListener('mouseleave', (e) => this.emit('leave', e));
+        element.addEventListener('dblclick', (e) => this.emit('dblclick', e));
+        // Drag
+        makeDraggable(element, () => this.onStartMoving(), (dx) => this.onMove(dx), () => this.onEndMoving());
+        // Resize
+        const resizeThreshold = 1;
+        makeDraggable(element.querySelector('[data-resize="left"]'), () => null, (dx) => this.onResize(dx, 'start'), () => this.onEndResizing(), resizeThreshold);
+        makeDraggable(element.querySelector('[data-resize="right"]'), () => null, (dx) => this.onResize(dx, 'end'), () => this.onEndResizing(), resizeThreshold);
     }
-    createRegionElement(start, end, title = '') {
-        const noWidth = start === end;
-        const div = el('div', {
-            position: 'absolute',
-            left: `${start}px`,
-            width: `${end - start}px`,
-            height: '100%',
-            backgroundColor: noWidth ? '' : 'rgba(0, 0, 0, 0.1)',
-            borderRadius: '2px',
-            boxSizing: 'border-box',
-            borderLeft: '2px solid rgba(0, 0, 0, 0.5)',
-            borderRight: noWidth ? '' : '2px solid rgba(0, 0, 0, 0.5)',
-            transition: 'background-color 0.2s ease',
-            cursor: this.options.draggable ? 'move' : '',
-            pointerEvents: 'all',
-            padding: '0.2em',
-        });
-        div.textContent = title;
-        const leftHandle = el('div', {
-            position: 'absolute',
-            left: '0',
-            width: '6px',
-            height: '100%',
-            cursor: this.options.resizable ? 'ew-resize' : '',
-            pointerEvents: 'all',
-        });
-        div.appendChild(leftHandle);
-        const rightHandle = leftHandle.cloneNode();
-        style(rightHandle, {
-            left: '',
-            right: '0',
-            borderLeft: '',
-        });
-        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 = true;
-        });
-        div.addEventListener('click', () => {
-            const region = this.regions.find((r) => r.element === div);
-            if (region) {
-                this.emit('region-clicked', { region });
+    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.wrapper.appendChild(div);
-        return div;
+        this.renderPosition();
+        this.emit('update');
     }
-    createRegion(start, end, title = '') {
-        const duration = this.wavesurfer.getDuration();
-        const width = this.wrapper.clientWidth;
-        start = Math.max(0, Math.min(start, width - 1));
-        end = Math.max(0, Math.min(end, width - 1));
-        return {
-            element: this.createRegionElement(start, end, title),
-            start,
-            end,
-            startTime: (start / width) * duration,
-            endTime: (end / width) * duration,
-            title,
-        };
+    onMove(dx) {
+        if (!this.drag)
+            return;
+        this.onUpdate(dx, ['start', 'end']);
     }
-    addRegion(region) {
-        this.regions.push(region);
-        this.emit('region-created', { region });
-    }
-    updateRegion(region, start, end) {
-        const width = this.wrapper.clientWidth;
-        if (start != null) {
-            start = Math.max(0, Math.min(start, width));
-            region.start = start;
-            region.element.style.left = `${region.start}px`;
-            region.startTime = (start / this.wrapper.clientWidth) * this.wavesurfer.getDuration();
+    onResize(dx, side) {
+        if (!this.resize)
+            return;
+        this.onUpdate(dx, [side]);
+    }
+    onEndResizing() {
+        if (!this.resize)
+            return;
+        this.emit('update-end');
+    }
+    _setTotalDuration(totalDuration) {
+        this.totalDuration = totalDuration;
+        this.renderPosition();
+    }
+    /** Play the region from start to end */
+    play() {
+        this.emit('play');
+    }
+    /** Update the region's options */
+    setOptions(options) {
+        if (options.color) {
+            this.color = options.color;
+            this.element.style.backgroundColor = this.color;
+        }
+        if (options.drag !== undefined) {
+            this.drag = options.drag;
+            this.element.style.cursor = this.drag ? 'grab' : 'default';
         }
-        if (end != null) {
-            end = Math.max(0, Math.min(end, width));
-            region.end = end;
-            region.element.style.width = `${region.end - region.start}px`;
-            region.endTime = (end / this.wrapper.clientWidth) * this.wavesurfer.getDuration();
+        if (options.resize !== undefined) {
+            this.resize = options.resize;
+            this.element.querySelectorAll('[data-resize]').forEach((handle) => {
+                ;
+                handle.style.cursor = this.resize ? 'ew-resize' : 'default';
+            });
         }
-        this.emit('region-updated', { region });
+        if (options.start !== undefined || options.end !== undefined) {
+            this.start = options.start ?? this.start;
+            this.end = options.end ?? this.end;
+            this.renderPosition();
+        }
+    }
+    /** Remove the region */
+    remove() {
+        this.emit('remove');
+        this.element.remove();
+        // This violates the type but we want to clean up the DOM reference
+        // w/o having to have a nullable type of the element
+        this.element = null;
+    }
+}
+class RegionsPlugin extends BasePlugin {
+    /** Create an instance of RegionsPlugin */
+    constructor(options) {
+        super(options);
+        this.regions = [];
+        this.regionsContainer = this.initRegionsContainer();
+    }
+    /** Create an instance of RegionsPlugin */
+    static create(options) {
+        return new RegionsPlugin(options);
+    }
+    /** Called by wavesurfer, don't call manually */
+    onInit() {
+        if (!this.wavesurfer) {
+            throw Error('WaveSurfer is not initialized');
+        }
+        this.wavesurfer.getWrapper().appendChild(this.regionsContainer);
+    }
+    initRegionsContainer() {
+        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;
+    }
+    /** Get all created regions */
+    getRegions() {
+        return this.regions;
     }
-    moveRegion(region, delta) {
-        this.updateRegion(region, region.start + delta, region.end + delta);
+    avoidOverlapping(region) {
+        if (!region.content)
+            return;
+        // Check that the label doesn't overlap with other labels
+        // If it does, push it down until it doesn't
+        const div = region.content;
+        const labelLeft = div.getBoundingClientRect().left;
+        const labelWidth = region.element.scrollWidth;
+        const overlap = this.regions
+            .filter((reg) => {
+            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) => reg.content?.getBoundingClientRect().height || 0)
+            .reduce((sum, val) => sum + val, 0);
+        div.style.marginTop = `${overlap}px`;
     }
-    /** Create a region at a given start and end time, with an optional title */
-    add(startTime, endTime, title = '', color = '') {
+    saveRegion(region) {
+        this.regionsContainer.appendChild(region.element);
+        this.avoidOverlapping(region);
+        this.regions.push(region);
+        this.emit('region-created', region);
+        const regionSubscriptions = [
+            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', (e) => {
+                this.emit('region-clicked', region, e);
+            }),
+            // Remove the region from the list when it's removed
+            region.once('remove', () => {
+                regionSubscriptions.forEach((unsubscribe) => unsubscribe());
+                this.regions = this.regions.filter((reg) => reg !== region);
+            }),
+        ];
+        this.subscriptions.push(...regionSubscriptions);
+    }
+    /** Create a region with given parameters */
+    addRegion(options) {
+        if (!this.wavesurfer) {
+            throw Error('WaveSurfer is not initialized');
+        }
         const duration = this.wavesurfer.getDuration();
-        const width = this.wrapper.clientWidth;
-        const start = (startTime / duration) * width;
-        const end = (endTime / duration) * width;
-        const region = this.createRegion(start, end, title);
-        this.addRegion(region);
-        if (color)
-            this.setRegionColor(region, color);
+        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);
+        }
         return region;
     }
-    /** Set the background color of a region */
-    setRegionColor(region, color) {
-        region.element.style[region.startTime === region.endTime ? 'borderColor' : 'backgroundColor'] = color;
+    /**
+     * Enable creation of regions by dragging on an empty space on the waveform.
+     * Returns a function to disable the drag selection.
+     */
+    enableDragSelection(options) {
+        const wrapper = this.wavesurfer?.getWrapper()?.querySelector('div');
+        if (!wrapper)
+            return () => undefined;
+        let region = null;
+        let startX = 0;
+        let sumDx = 0;
+        return makeDraggable(wrapper, 
+        // On mousedown
+        (x) => (startX = x), 
+        // On mousemove
+        (dx) => {
+            if (!this.wavesurfer)
+                return;
+            if (!region) {
+                const duration = this.wavesurfer.getDuration();
+                const box = wrapper.getBoundingClientRect();
+                let start = ((startX - box.left) / box.width) * duration;
+                let end = ((startX + dx - box.left) / box.width) * duration;
+                if (start > end)
+                    [start, end] = [end, start];
+                region = new Region({
+                    ...options,
+                    start,
+                    end,
+                }, duration);
+                this.regionsContainer.appendChild(region.element);
+            }
+            sumDx += dx;
+            if (region) {
+                const privateRegion = region;
+                privateRegion.onUpdate(dx, [sumDx > 0 ? 'end' : 'start']);
+            }
+        }, 
+        // On mouseup
+        () => {
+            if (region) {
+                this.saveRegion(region);
+                region = null;
+                sumDx = 0;
+                // Prevent a click event on the waveform
+                if (this.wavesurfer) {
+                    const { interact } = this.wavesurfer.options;
+                    if (interact) {
+                        this.wavesurfer.toggleInteraction(false);
+                        setTimeout(() => this.wavesurfer?.toggleInteraction(interact), 10);
+                    }
+                }
+            }
+        });
+    }
+    /** Remove all regions */
+    clearRegions() {
+        this.regions.forEach((region) => region.remove());
+    }
+    /** Destroy the plugin and clean up */
+    destroy() {
+        this.clearRegions();
+        super.destroy();
     }
 }
 export default RegionsPlugin;

package/dist/plugins/regions.min.cjs

@@ -0,0 +1 @@
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.Regions=e():t.Regions=e()}(WaveSurfer,(()=>(()=>{"use strict";var t={284:(t,e,i)=>{i.d(e,{Z:()=>r});var n=i(139);class s extends n.Z{constructor(t){super(),this.subscriptions=[],this.options=t}onInit(){}init(t){this.wavesurfer=t,this.onInit()}destroy(){this.subscriptions.forEach((t=>t()))}}const r=s},139:(t,e,i)=>{i.d(e,{Z:()=>n});const n=class{constructor(){this.listeners={}}on(t,e){return this.listeners[t]||(this.listeners[t]=new Set),this.listeners[t].add(e),()=>this.un(t,e)}once(t,e){const i=this.on(t,e),n=this.on(t,(()=>{i(),n()}));return i}un(t,e){this.listeners[t]&&(e?this.listeners[t].delete(e):delete this.listeners[t])}unAll(){this.listeners={}}emit(t,...e){this.listeners[t]&&this.listeners[t].forEach((t=>t(...e)))}}}},e={};function i(n){var s=e[n];if(void 0!==s)return s.exports;var r=e[n]={exports:{}};return t[n](r,r.exports,i),r.exports}i.d=(t,e)=>{for(var n in e)i.o(e,n)&&!i.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:e[n]})},i.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e);var n={};return(()=>{i.d(n,{default:()=>a});var t=i(284),e=i(139);function s(t,e,i,n,s=5){if(!t)return()=>{};let r=!1;const o=t=>{r&&t.stopPropagation()},a=t=>{t.stopPropagation();let o=t.clientX,a=0;e(o);const h=t=>{const e=t.clientX,n=e-o;a+=n,o=e,(r||Math.abs(a)>=s)&&(i(r?n:a),r=!0)},l=()=>{r&&(n(),setTimeout((()=>r=!1),10)),document.removeEventListener("mousemove",h),document.removeEventListener("mouseup",l)};document.addEventListener("mousemove",h),document.addEventListener("mouseup",l)};return t.addEventListener("click",o),t.addEventListener("mousedown",a),()=>{t.removeEventListener("click",o),t.removeEventListener("mousedown",a)}}class r extends e.Z{constructor(t,e){super(),this.totalDuration=e,this.id=t.id||`region-${Math.random().toString(32).slice(2)}`,this.start=t.start,this.end=t.end??t.start,this.drag=t.drag??!0,this.resize=t.resize??!0,this.color=t.color??"rgba(0, 0, 0, 0.1)",this.element=this.initElement(t.content),this.renderPosition(),this.initMouseEvents()}initElement(t){const e=document.createElement("div"),i=this.start===this.end;if(e.setAttribute("part",`${i?"marker":"region"} ${this.id}`),e.setAttribute("style",`\n      position: absolute;\n      height: 100%;\n      background-color: ${i?"none":this.color};\n      border-left: ${i?"2px solid "+this.color:"none"};\n      border-radius: 2px;\n      box-sizing: border-box;\n      transition: background-color 0.2s ease;\n      cursor: ${this.drag?"grab":"default"};\n      pointer-events: all;\n      padding: 0.2em ${i?.2:.4}em;\n      pointer-events: all;\n    `),t&&("string"==typeof t?(this.content=document.createElement("div"),this.content.textContent=t):this.content=t,this.content.setAttribute("part","region-content"),e.appendChild(this.content)),!i){const t=document.createElement("div");t.setAttribute("data-resize","left"),t.setAttribute("style",`\n        position: absolute;\n        z-index: 2;\n        width: 6px;\n        height: 100%;\n        top: 0;\n        left: 0;\n        border-left: 2px solid rgba(0, 0, 0, 0.5);\n        border-radius: 2px 0 0 2px;\n        cursor: ${this.resize?"ew-resize":"default"};\n        word-break: keep-all;\n      `),t.setAttribute("part","region-handle region-handle-left");const i=t.cloneNode();i.setAttribute("data-resize","right"),i.style.left="",i.style.right="0",i.style.borderRight=i.style.borderLeft,i.style.borderLeft="",i.style.borderRadius="0 2px 2px 0",i.setAttribute("part","region-handle region-handle-right"),e.appendChild(t),e.appendChild(i)}return e}renderPosition(){const t=this.start/this.totalDuration,e=this.end/this.totalDuration;this.element.style.left=100*t+"%",this.element.style.width=100*(e-t)+"%"}initMouseEvents(){const{element:t}=this;t.addEventListener("click",(t=>this.emit("click",t))),t.addEventListener("mouseenter",(t=>this.emit("over",t))),t.addEventListener("mouseleave",(t=>this.emit("leave",t))),t.addEventListener("dblclick",(t=>this.emit("dblclick",t))),s(t,(()=>this.onStartMoving()),(t=>this.onMove(t)),(()=>this.onEndMoving())),s(t.querySelector('[data-resize="left"]'),(()=>null),(t=>this.onResize(t,"start")),(()=>this.onEndResizing()),1),s(t.querySelector('[data-resize="right"]'),(()=>null),(t=>this.onResize(t,"end")),(()=>this.onEndResizing()),1)}onStartMoving(){this.drag&&(this.element.style.cursor="grabbing")}onEndMoving(){this.drag&&(this.element.style.cursor="grab",this.emit("update-end"))}onUpdate(t,e){if(!this.element.parentElement)return;const i=t/this.element.parentElement.clientWidth*this.totalDuration;e.forEach((t=>{this[t]+=i,"start"===t?this.start=Math.max(0,Math.min(this.start,this.end)):this.end=Math.max(this.start,Math.min(this.end,this.totalDuration))})),this.renderPosition(),this.emit("update")}onMove(t){this.drag&&this.onUpdate(t,["start","end"])}onResize(t,e){this.resize&&this.onUpdate(t,[e])}onEndResizing(){this.resize&&this.emit("update-end")}_setTotalDuration(t){this.totalDuration=t,this.renderPosition()}play(){this.emit("play")}setOptions(t){t.color&&(this.color=t.color,this.element.style.backgroundColor=this.color),void 0!==t.drag&&(this.drag=t.drag,this.element.style.cursor=this.drag?"grab":"default"),void 0!==t.resize&&(this.resize=t.resize,this.element.querySelectorAll("[data-resize]").forEach((t=>{t.style.cursor=this.resize?"ew-resize":"default"}))),void 0===t.start&&void 0===t.end||(this.start=t.start??this.start,this.end=t.end??this.end,this.renderPosition())}remove(){this.emit("remove"),this.element.remove(),this.element=null}}class o extends t.Z{constructor(t){super(t),this.regions=[],this.regionsContainer=this.initRegionsContainer()}static create(t){return new o(t)}onInit(){if(!this.wavesurfer)throw Error("WaveSurfer is not initialized");this.wavesurfer.getWrapper().appendChild(this.regionsContainer)}initRegionsContainer(){const t=document.createElement("div");return t.setAttribute("style","\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      z-index: 3;\n      pointer-events: none;\n    "),t}getRegions(){return this.regions}avoidOverlapping(t){if(!t.content)return;const e=t.content,i=e.getBoundingClientRect().left,n=t.element.scrollWidth,s=this.regions.filter((e=>{if(e===t||!e.content)return!1;const s=e.content.getBoundingClientRect().left,r=e.element.scrollWidth;return i<s+r&&s<i+n})).map((t=>t.content?.getBoundingClientRect().height||0)).reduce(((t,e)=>t+e),0);e.style.marginTop=`${s}px`}saveRegion(t){this.regionsContainer.appendChild(t.element),this.avoidOverlapping(t),this.regions.push(t),this.emit("region-created",t);const e=[t.on("update-end",(()=>{this.avoidOverlapping(t),this.emit("region-updated",t)})),t.on("play",(()=>{this.wavesurfer?.play(),this.wavesurfer?.setTime(t.start)})),t.on("click",(e=>{this.emit("region-clicked",t,e)})),t.once("remove",(()=>{e.forEach((t=>t())),this.regions=this.regions.filter((e=>e!==t))}))];this.subscriptions.push(...e)}addRegion(t){if(!this.wavesurfer)throw Error("WaveSurfer is not initialized");const e=this.wavesurfer.getDuration(),i=new r(t,e);return e?this.saveRegion(i):this.subscriptions.push(this.wavesurfer.once("canplay",(t=>{i._setTotalDuration(t),this.saveRegion(i)}))),i}enableDragSelection(t){const e=this.wavesurfer?.getWrapper()?.querySelector("div");if(!e)return()=>{};let i=null,n=0,o=0;return s(e,(t=>n=t),(s=>{if(this.wavesurfer){if(!i){const o=this.wavesurfer.getDuration(),a=e.getBoundingClientRect();let h=(n-a.left)/a.width*o,l=(n+s-a.left)/a.width*o;h>l&&([h,l]=[l,h]),i=new r({...t,start:h,end:l},o),this.regionsContainer.appendChild(i.element)}o+=s,i&&i.onUpdate(s,[o>0?"end":"start"])}}),(()=>{if(i&&(this.saveRegion(i),i=null,o=0,this.wavesurfer)){const{interact:t}=this.wavesurfer.options;t&&(this.wavesurfer.toggleInteraction(!1),setTimeout((()=>this.wavesurfer?.toggleInteraction(t)),10))}}))}clearRegions(){this.regions.forEach((t=>t.remove()))}destroy(){this.clearRegions(),super.destroy()}}const a=o})(),n.default})()));

package/dist/plugins/regions.min.js

@@ -0,0 +1 @@
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.Regions=e():t.Regions=e()}(WaveSurfer,(()=>(()=>{"use strict";var t={284:(t,e,i)=>{i.d(e,{Z:()=>r});var n=i(139);class s extends n.Z{constructor(t){super(),this.subscriptions=[],this.options=t}onInit(){}init(t){this.wavesurfer=t,this.onInit()}destroy(){this.subscriptions.forEach((t=>t()))}}const r=s},139:(t,e,i)=>{i.d(e,{Z:()=>n});const n=class{constructor(){this.listeners={}}on(t,e){return this.listeners[t]||(this.listeners[t]=new Set),this.listeners[t].add(e),()=>this.un(t,e)}once(t,e){const i=this.on(t,e),n=this.on(t,(()=>{i(),n()}));return i}un(t,e){this.listeners[t]&&(e?this.listeners[t].delete(e):delete this.listeners[t])}unAll(){this.listeners={}}emit(t,...e){this.listeners[t]&&this.listeners[t].forEach((t=>t(...e)))}}}},e={};function i(n){var s=e[n];if(void 0!==s)return s.exports;var r=e[n]={exports:{}};return t[n](r,r.exports,i),r.exports}i.d=(t,e)=>{for(var n in e)i.o(e,n)&&!i.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:e[n]})},i.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e);var n={};return(()=>{i.d(n,{default:()=>a});var t=i(284),e=i(139);function s(t,e,i,n,s=5){if(!t)return()=>{};let r=!1;const o=t=>{r&&t.stopPropagation()},a=t=>{t.stopPropagation();let o=t.clientX,a=0;e(o);const h=t=>{const e=t.clientX,n=e-o;a+=n,o=e,(r||Math.abs(a)>=s)&&(i(r?n:a),r=!0)},l=()=>{r&&(n(),setTimeout((()=>r=!1),10)),document.removeEventListener("mousemove",h),document.removeEventListener("mouseup",l)};document.addEventListener("mousemove",h),document.addEventListener("mouseup",l)};return t.addEventListener("click",o),t.addEventListener("mousedown",a),()=>{t.removeEventListener("click",o),t.removeEventListener("mousedown",a)}}class r extends e.Z{constructor(t,e){super(),this.totalDuration=e,this.id=t.id||`region-${Math.random().toString(32).slice(2)}`,this.start=t.start,this.end=t.end??t.start,this.drag=t.drag??!0,this.resize=t.resize??!0,this.color=t.color??"rgba(0, 0, 0, 0.1)",this.element=this.initElement(t.content),this.renderPosition(),this.initMouseEvents()}initElement(t){const e=document.createElement("div"),i=this.start===this.end;if(e.setAttribute("part",`${i?"marker":"region"} ${this.id}`),e.setAttribute("style",`\n      position: absolute;\n      height: 100%;\n      background-color: ${i?"none":this.color};\n      border-left: ${i?"2px solid "+this.color:"none"};\n      border-radius: 2px;\n      box-sizing: border-box;\n      transition: background-color 0.2s ease;\n      cursor: ${this.drag?"grab":"default"};\n      pointer-events: all;\n      padding: 0.2em ${i?.2:.4}em;\n      pointer-events: all;\n    `),t&&("string"==typeof t?(this.content=document.createElement("div"),this.content.textContent=t):this.content=t,this.content.setAttribute("part","region-content"),e.appendChild(this.content)),!i){const t=document.createElement("div");t.setAttribute("data-resize","left"),t.setAttribute("style",`\n        position: absolute;\n        z-index: 2;\n        width: 6px;\n        height: 100%;\n        top: 0;\n        left: 0;\n        border-left: 2px solid rgba(0, 0, 0, 0.5);\n        border-radius: 2px 0 0 2px;\n        cursor: ${this.resize?"ew-resize":"default"};\n        word-break: keep-all;\n      `),t.setAttribute("part","region-handle region-handle-left");const i=t.cloneNode();i.setAttribute("data-resize","right"),i.style.left="",i.style.right="0",i.style.borderRight=i.style.borderLeft,i.style.borderLeft="",i.style.borderRadius="0 2px 2px 0",i.setAttribute("part","region-handle region-handle-right"),e.appendChild(t),e.appendChild(i)}return e}renderPosition(){const t=this.start/this.totalDuration,e=this.end/this.totalDuration;this.element.style.left=100*t+"%",this.element.style.width=100*(e-t)+"%"}initMouseEvents(){const{element:t}=this;t.addEventListener("click",(t=>this.emit("click",t))),t.addEventListener("mouseenter",(t=>this.emit("over",t))),t.addEventListener("mouseleave",(t=>this.emit("leave",t))),t.addEventListener("dblclick",(t=>this.emit("dblclick",t))),s(t,(()=>this.onStartMoving()),(t=>this.onMove(t)),(()=>this.onEndMoving())),s(t.querySelector('[data-resize="left"]'),(()=>null),(t=>this.onResize(t,"start")),(()=>this.onEndResizing()),1),s(t.querySelector('[data-resize="right"]'),(()=>null),(t=>this.onResize(t,"end")),(()=>this.onEndResizing()),1)}onStartMoving(){this.drag&&(this.element.style.cursor="grabbing")}onEndMoving(){this.drag&&(this.element.style.cursor="grab",this.emit("update-end"))}onUpdate(t,e){if(!this.element.parentElement)return;const i=t/this.element.parentElement.clientWidth*this.totalDuration;e.forEach((t=>{this[t]+=i,"start"===t?this.start=Math.max(0,Math.min(this.start,this.end)):this.end=Math.max(this.start,Math.min(this.end,this.totalDuration))})),this.renderPosition(),this.emit("update")}onMove(t){this.drag&&this.onUpdate(t,["start","end"])}onResize(t,e){this.resize&&this.onUpdate(t,[e])}onEndResizing(){this.resize&&this.emit("update-end")}_setTotalDuration(t){this.totalDuration=t,this.renderPosition()}play(){this.emit("play")}setOptions(t){t.color&&(this.color=t.color,this.element.style.backgroundColor=this.color),void 0!==t.drag&&(this.drag=t.drag,this.element.style.cursor=this.drag?"grab":"default"),void 0!==t.resize&&(this.resize=t.resize,this.element.querySelectorAll("[data-resize]").forEach((t=>{t.style.cursor=this.resize?"ew-resize":"default"}))),void 0===t.start&&void 0===t.end||(this.start=t.start??this.start,this.end=t.end??this.end,this.renderPosition())}remove(){this.emit("remove"),this.element.remove(),this.element=null}}class o extends t.Z{constructor(t){super(t),this.regions=[],this.regionsContainer=this.initRegionsContainer()}static create(t){return new o(t)}onInit(){if(!this.wavesurfer)throw Error("WaveSurfer is not initialized");this.wavesurfer.getWrapper().appendChild(this.regionsContainer)}initRegionsContainer(){const t=document.createElement("div");return t.setAttribute("style","\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      z-index: 3;\n      pointer-events: none;\n    "),t}getRegions(){return this.regions}avoidOverlapping(t){if(!t.content)return;const e=t.content,i=e.getBoundingClientRect().left,n=t.element.scrollWidth,s=this.regions.filter((e=>{if(e===t||!e.content)return!1;const s=e.content.getBoundingClientRect().left,r=e.element.scrollWidth;return i<s+r&&s<i+n})).map((t=>t.content?.getBoundingClientRect().height||0)).reduce(((t,e)=>t+e),0);e.style.marginTop=`${s}px`}saveRegion(t){this.regionsContainer.appendChild(t.element),this.avoidOverlapping(t),this.regions.push(t),this.emit("region-created",t);const e=[t.on("update-end",(()=>{this.avoidOverlapping(t),this.emit("region-updated",t)})),t.on("play",(()=>{this.wavesurfer?.play(),this.wavesurfer?.setTime(t.start)})),t.on("click",(e=>{this.emit("region-clicked",t,e)})),t.once("remove",(()=>{e.forEach((t=>t())),this.regions=this.regions.filter((e=>e!==t))}))];this.subscriptions.push(...e)}addRegion(t){if(!this.wavesurfer)throw Error("WaveSurfer is not initialized");const e=this.wavesurfer.getDuration(),i=new r(t,e);return e?this.saveRegion(i):this.subscriptions.push(this.wavesurfer.once("canplay",(t=>{i._setTotalDuration(t),this.saveRegion(i)}))),i}enableDragSelection(t){const e=this.wavesurfer?.getWrapper()?.querySelector("div");if(!e)return()=>{};let i=null,n=0,o=0;return s(e,(t=>n=t),(s=>{if(this.wavesurfer){if(!i){const o=this.wavesurfer.getDuration(),a=e.getBoundingClientRect();let h=(n-a.left)/a.width*o,l=(n+s-a.left)/a.width*o;h>l&&([h,l]=[l,h]),i=new r({...t,start:h,end:l},o),this.regionsContainer.appendChild(i.element)}o+=s,i&&i.onUpdate(s,[o>0?"end":"start"])}}),(()=>{if(i&&(this.saveRegion(i),i=null,o=0,this.wavesurfer)){const{interact:t}=this.wavesurfer.options;t&&(this.wavesurfer.toggleInteraction(!1),setTimeout((()=>this.wavesurfer?.toggleInteraction(t)),10))}}))}clearRegions(){this.regions.forEach((t=>t.remove()))}destroy(){this.clearRegions(),super.destroy()}}const a=o})(),n.default})()));