Creating regions inside regions via dragging

[mxngls]

As the title of my question already indicates, what I am trying to achieve right now: is to enable creating of new regions in already existing regions through dragging. When the drag property of a region is set to false I expect the event to bubble up and thus enable creating regions inside other regions. Unfortunately that doesn't really seem to be the case. Help would be much appreciated.

[katspaugh]

As a workaround, you could set pointer-events: none on the existing region element.

[mxngls]

Sorry I can't really follow you. Could you explain this in a bit more detail please?

Esentially I would like to create a new region on top of another region via drag. The result should then look like this. I manage the drag property of individual regions based on application state (i.e. state="red" >> red regions can be moved):

[katspaugh]

I meant that you could make an existing region element ignore mouse events completely, so that they are just passed through.
E.g.

const region = regionsPlugin.addRegion(...);
region.element.style.pointerEvents = 'none'

We should add this as a fix to the plugin code as well, but as a quick workaround you can do it in your app.

[mxngls]

I'd like to do something of that sort on the weekend. I'm currently using wave-surfer quite a lot and have one or two possible feature requests that I'd like to implement myself. If that's ok if course. For the time being I'll try the workaround you suggested. Thanks for the quick reply.

[katspaugh]

Absolutely, contributions are very welcome, and it's good that you first created a discussion, so that we can align on the implementation.
I'm currently actively working on the next version of wavesurfer, which has a slightly different Regions plugin, so if you'd like to try that, a PR there would also be cool. https://github.com/katspaugh/wavesurfer.ts