What about height alignment?

[letavocado]

Height alignment is useful for implementing such examples.

Possible solution:

from:

wavesurfer.js/src/renderer.ts

Lines 288 to 294 in c8ff5a3

	ctx.roundRect(
	prevX * (barWidth + barGap),
	halfHeight - leftBarHeight,
	barWidth,
	leftBarHeight + (rightBarHeight || 1),
	barRadius,
	)

to:

ctx.roundRect( 
   prevX * (barWidth + barGap), 
   alignEnd ? height : halfHeight - leftBarHeight, 
   barWidth, 
   leftBarHeight + (rightBarHeight || 1), 
   barRadius, 
 ) 

Cheers!

[letavocado]

For height alignment

    //...

    if (barIndex > prevX) {
      const leftBarHeight = Math.round(prevLeft * halfHeight * barScale)
      const rightBarHeight = Math.round(prevRight * halfHeight * barScale)
      const barHeight = leftBarHeight + (rightBarHeight || 1)

      ctx.roundRect(
        prevX * (barWidth + barGap),
        options.alignEnd ? height - barHeight : halfHeight - leftBarHeight,
        barWidth,
        barHeight,
        barRadius
      )
    
    //...

p.s. upd

[katspaugh]

The proposed options makes sense. I suggest we call it barAlign though. E.g. barAlign?: 'top' | bottom', wdyt?
Please feel free to make a PR for this.

[letavocado]

Thanks, @katspaugh!
I'll made a PR with test. 👍

Cheers!

[letavocado]

I aligned by height, but I think that the highest bar should be equal to the canvas's height.

[katspaugh]

I guess normalize: true will take care of that once I restore it.

[letavocado]

PR: 2828

All local e2e tests failed, I will add tests later, as I figure it out. 🤔

Cheers!

[katspaugh]

Nice, thank you!

[letavocado]

I guess we should add a warning if the bar's height greater than the canvas's height. What do you think?

[katspaugh]

It cannot be taller than the canvas height because it's always a magnitude value multiplied by the height. And the values are -1..1.

[letavocado]

If bar height is 5 it will.

I agree with you. Besides, the extra check reduces the performance of the loop