Question: Limit the number of regions to one?

[klodoma]

Is there a way to limit the number of regions?

My idea would be to have only one region and if a new one is "created" then this will replace the previous one. So, practically to have one region only.

I assume I can implement this by listening to the events, but maybe it's already possible.

[klodoma]

To answer my own question:

            wavesurfer.on('region-created', region => {
                wavesurfer.regions.clear();
            });

[caleb-fringer]

klodoma,

I am using this same functionality in my own website, and I had a question about the regions.clear() function that perhaps you can answer. I assume region-created is fired after a new region has been created. The documentation says that the clear() function removes all regions. However, when using regions.clear with the region-created event, it doesn't clear the last created region, giving the functionality of only allowing one region on the screen at a time.

I'm wondering if you could clarify how this event works? I don't like using code without understanding the ins and outs of how it works, and I can't seem to find any documentation describing it in detail.

Thanks for your time.

[klodoma]

I'm wondering if you could clarify how this event works? I don't like using code without understanding the ins and outs of how it works, and I can't seem to find any documentation describing it in detail.

Thanks for your time.

From a quick look in the code, I see that 'region-created' is also used to add a region to the regions list

        this.wavesurfer.on('region-created', region => {
            this.regions[region.id] = region;
            this.renderRegions();
        });

Now, it seems that the "region-created" I add later is fired earlier and the regions get cleared before the new one is added.

            wavesurfer.on('region-created', region => {
                wavesurfer.regions.clear();
            });

I don't think it's a very "solid" solution, but it works for the moment.

[dphov]

@klodoma @Sepulchre49
What do you think about this my solution? I have the same need as you

wsRegions.on('region-created', (region) => {
	wsRegions.getRegions().forEach((r) => {
		if (r.id !== region.id) {
			r.remove();
		}
	});
});