Wavesurfer.js: Resizing regions

[joearms]

I found resizing regions rather difficult - the resize cursor does not pop up easily
since I think the resize handle region is too small (this is on a mac retina screen)

I changed lines 207 + 208 of wavesurfer.regions.js in the css declaration which now reads
var css = {
cursor: 'col-resize',
position: 'absolute',
left: '0px',
top: '0px',
width: '30px',
maxWidth: '30px',
height: '100%'
};

This seems to make life easier - I'm not sure if this is the only change necessary but it seems
to help.

[joearms]

Afterthought - I think it would be far better to move the selection by clicking in the middle of a selection
and to move the left boundary by clicking in the left one third of the region and so on.
The mouse does not have to be placed exactly on the edge to resize anywhere near should do
as long as the side moves when you drag you don't need to be exactly on the edge. This is much easier to interact with

[chinshr]

+1 having the same problems with regions. How is this supposed to work? Can have a pull request for this change?

[katspaugh]

The width was supposed to be changed via external CSS. We can set a bigger default, of course. @chinshr I'll merge it, thanks!

[a4jp-com]

I have noticed on my site that a horizontal bar of one or two pixels shows up after pressing play sometimes. Everything scales very nicely though.

[tabascoeye]

Hey. I just stumbled over this as well. There should be either a min-width set to a few pixels, so the handles don't disappear into nothing OR width should not pe a % value to not have the bars "scale" with the size of the region.
This can't be overwritten by CSS because it is put into the style= attribute of the <handle> which takes presence over the CSS setting.
A workaround is to use min-width: 4px ; so the hardcoded setting of width: 1%; has no effect anymore.

[adamyui]

Having a little trouble overriding the styling with my external css, tried setting the min-width to 4px as tabasco suggested, but no luck when setting the width to 5%, and adding specificity like this:

wavesurfer-region .handle.wavesurfer-handle{
  min-width: 4px !important ;
  width:5% !important;

} 

I'm hoping to be able to add some arrows or some visual draggable object, but for now just need to make it useable. Any ideas?

[danijel3]

I found a somewhat more elegant solution.

After adding the region I change the CSS in Javascript like this:

var reg = wavesurfer.addRegion({
        start: start, // time in seconds
        end: end, // time in seconds
        color: 'rgba(255, 0, 0, 0.5)'
    });
    reg.element.children[0].style.width='4px';
    reg.element.children[1].style.width='4px';

The best solution for this issue would probably be to add a width option in addRegion, similarly to color.