Ways to prevent creation of multiple regions in WaveSurfer.js?

24 views Asked by At

I wanted to ask if it's possible to prevent creation of multiple regions. My application works like this:

When a user creates a region by dragging using enableDragSelection() method, he clicks on it and then performs some action. However, if he doesn't click on it, I want the previous region to be removed (which wasn't clicked on) and retaining only the new region which he created by dragging again.
One approach that I have thought of is, to set a couple of variable values to true/false, given that user creates a region using region-created event, but does not click on it (which can be found out using region-clicked event). I want to ensure that a user clicks on a region after creating it, and if he does not click on it and attempts to create another region, the previous region gets removed. Hope that makes sense. Is there any way to do this? Code:

let flag = false;
let currentRegion = null;
let previousRegion = null;

wsRegions.on('region-created', function(region) {
    // Set the current region
    currentRegion = region;

    // If there's a previous region, remove it
    if (previousRegion) {
        previousRegion.remove();
    }

    // Set the current region as the previous region for the next iteration
    previousRegion = currentRegion;
    if (flag == true) {
        // If region creation is not allowed, remove the last created region
        region.remove();
    }
});

wsRegions.on('region-clicked', (region) => {
    flag = true;
        // If the clicked region is not the current region, remove the current region
        if (region !== currentRegion) {
            currentRegion.remove();
        }
    
    currentRegion = region;
    showPopup(currentRegion);
    
});
0

There are 0 answers