clearRegions method has bug

[panhe-xue]

Bug description

The regions array is not cleared after the clearRegions method is called

Environment

• Browser: Chrome

Minimal code snippet

Expected result

Obtained result

Screenshots

[panhe-xue]

[panhe-xue]

this.regions.forEach((region) => (region && region.remove()))

[katspaugh]

Hmm, weird. Regions are supposed to be removed from the list on the remove event:

https://github.com/katspaugh/wavesurfer.js/blob/main/src/plugins/regions.ts#L581

[panhe-xue]

So we can only remove regions using events, not clearRegions? Because clearRegions is going to be a problem next time.

[panhe-xue]

Hmm, weird. Regions are supposed to be removed from the list on the remove event:

https://github.com/katspaugh/wavesurfer.js/blob/main/src/plugins/regions.ts#L581

So we can only remove regions using events, not clearRegions? Because clearRegions is going to be a problem next time

[katspaugh]

No, the event is emitted when a region is removed. So when clear regions removes each region, it's supposed to emit a remove event and get removed from the list.

[panhe-xue]

No, the event is emitted when a region is removed. So when clear regions removes each region, it's supposed to emit a remove event and get removed from the list.

I see what you're said， How do I know when clearRegions has cleared all of them

[panhe-xue]

No, the event is emitted when a region is removed. So when clear regions removes each region, it's supposed to emit a remove event and get removed from the list.

I see what you're said， How do I know when clearRegions has cleared all of them

I can only use other variables to control, I can't get this moment from an event？？？

[katspaugh]

You don't need to use the event. All I'm saying is that clearRegions is supposed to remove each region from the this.regions array thanks to an internal remove event subscription. If it doesn't, there might be a bug.

[panhe-xue]

clearRegions

When clearRegions called, you should make sure that addRegions cannot be executed, otherwise it will get messy

[katspaugh]

I see. You can probably call addRegion with a delay (setTimeout) as a workaround.

[panhe-xue]

That doesn't work, I think of a way, could you have a look?

` public clearRegions() { // this.regions.forEach((region) => region.remove()) const regions = cloneDeep(this.regions) regions.forEach((region) => region.remove()) }

`
That doesn't work, I think of a way, could you have a look?

`
public clearRegions() {
// this.regions.forEach((region) => region.remove())
const regions = cloneDeep(this.regions)
this.regions = []
regions.forEach((region) => region.remove())
}

`

[lucastheis]

I ran into the same issue and my workaround was this:

regionsPlugin.clearRegions();
regionsPlugin.regionsContainer.innerHTML = "";

[panhe-xue]

I ran into the same issue and my workaround was this:

regionsPlugin.clearRegions();
regionsPlugin.regionsContainer.innerHTML = "";

I used id to delete it