Expose More Region Styles to User

[alexgdiaz98]

It would be nice to easily change styling elements of each region (not the content) during and after instantiation:

const regions = RegionsPlugin.create();
this.wavesurfer.registerPlugin(regions);
...
const region: SingleRegion = {
  start: 10,
  end: 15,
  styles: {
    borderRadius: '0px',
  }
};
regions.addRegion(region);
region.styles.border = '1px solid yellow';

I understand it is dangerous to expose positional styles to the user because the Regions Plugin uses certain styles (top, left, right, position, z-index, etc.) to ensure that regions and markers are positioned correctly. Perhaps we could expose a new styles member to the SingleRegion class of type Omit<CSSStyleDeclaration, 'position' | 'top' | 'left' | 'right' | 'z-index' | ... >. That would apply to SingleRegion.element.

Alternatively, another solution could be to manually expose a few more styles as optional parameters to SingleRegion:

const region: SingleRegion = {
  start: 10,
  end: 15,
  borderRadius: '0px',
  borderWidth: '1px'
}

[katspaugh]

That makes sense!
Alternatively we could add a part attribute to the region element. There could be an extra container that defines the position, and the rest of the styling like a background color, border etc could be on a separate element occupying the entire size of the container.

[alexgdiaz98]

Although I appreciate the api convenience and safety of using an extra container, it seems unnecessary to generate 3 elements (positional element, styled element, and content element) per region. I like adding a new part attribute to the main region element. It's simple and less-likely to break existing applications.

[katspaugh]

OK, agreed. 👍 Please feel free to make a PR for this.

[alexgdiaz98]

Upon closer look, the region plugin exposes the region element, so I don't believe we need a new interface for that. Also, each region/marker is given the region or marker part attribute under the shadow root. I believe we should still add a part attribute to the RegionsPlugin.regionsContainer element. Perhaps part="region-container"?

[katspaugh]

What would be the use case?