search

bbc / peaks.js

JavaScript UI component for interacting with audio waveforms
https://waveform.prototyping.bbc.co.uk
GNU Lesser General Public License v3.0
3.22k stars 281 forks source link

Hierarchical coverage #533

Open Hareis opened 3 months ago

Hareis commented 3 months ago

I found a problem I have a block of 0-15s, and then a block of 5-10s, and the small block is on top of the big block, and when I click on the big block, I can't select the small block again

chrisn commented 3 months ago

Yes, currently the only way around this is to drag the top-level segment (block) away, so you can click on the other segment.

There could be many overlapped segments though, so I'm not sure what the best thing to do is. Suggestions are very welcome.

Hareis commented 3 months ago

Yes, currently the only way around this is to drag the top-level segment (block) away, so you can click on the other segment.

There could be many overlapped segments though, so I'm not sure what the best thing to do is. Suggestions are very welcome.

Maybe can refer to the z-index implementation in css

https://konvajs.org/docs/groups_and_layers/zIndex.html

chrisn commented 3 months ago

The left and right marker handles are always at the top of the z-order, so I could make it so that clicking one of these moves the whole segment to the top. This works, but it wouldn't be very obvious to the user. Or maybe repeatedly clicking over overlapped segments moves each one to the top in turn?

chrisn commented 3 months ago

Related: https://github.com/bbc/peaks.js/issues/479