Wavesurfer.js: Zoom erase or not rendered leftpart of the wave (without peaks) and rightpart (if peaks) when scrolling

[awenger63]

Hi,
In the last version 2.0.0-beta02 I find a regression between 2.0.0-beta01 whit the zoom.
When you zoom the wave, this action automaticly render the wave center at the read position (on pause to make the test).
Then left part of the wave is not visible, but you can see it whit scroll. In the last version , left part not visible will be lost, when you scrolling left there no wave :

No need code, I use the demo code to reproduce ([https://wavesurfer-js.org/examples/

](https://wavesurfer-js.org/examples/)) . Same issue in firefox quantum 57.0 and chrome 62.0.3202.94.

Hope this can help.

[awenger63]

Hello, there is also in this new version a zoom issue at the end of the wave when you decrease the zoom.
You can see it if you place the current play nearly of the end, zoom ++ ...++ than zoom - (see it, wave go small left), zoom + (wave seem's ok)
Perharps it come from the same bug ?

[thijstriemstra]

In the last version 2.0.0-beta02 I find a regression between 2.0.0-beta01 whit the zoom.

@awenger63 would be really helpful if you can figure out what exact commit changed this.

[awenger63]

@thijstriemstra OK, if I can , I would like to help you. I just need to know how I can get different commit version ? have you a link to explain that ?

[awenger63]

@thijstriemstra I'm sorry but I don't arrive to run npm without issues here...., so it's difficult to be sure, but I fell find change who generated the issue and do the regression : #1198 commit 1e7f598.
Detail : wavesurfer.js line 903 and 904 deleted
start = 0; end = width;
Can you verify ? Hope this is correct.

[thijstriemstra]

@mspae made that change, I hope he can comment on it.

[awenger63]

I don't know if someone have take a look at this issue ? I would like to help you more, but I cannot succeeds install it on my Netbeans/Github to trace exactly.
Tell me more

[jamiefaye]

I am seeing this issue with the wave editor I am building now. The drawBuffer code calls drawer.getScrollX() to get the coordinate for the left side of the area in which to draw peaks. This means that the earlier canvases are not refilled, so when you scroll-back, all you see is a flat line. Jamming the start variable to zero makes the problem go away. I will try and come up with a better fix than that.

[awenger63]

@jamiefaye OK, thanks to look at this problem. Do you have a line code, that I can put on the zoom process to jamming the start variable to zero ?
I saw also other draw issue with the wave when zoom increase a lot. Perhaps it's linked. I will look to define a reproductible case and tell you.

[jamiefaye]

I changed line 1024 of wavesurfer.js to look like this:
let start = 0; // this.drawer.getScrollX();
If I were to make this permanent, I would eliminate the 'start' variable, and just use zero.

[awenger63]

@jamiefaye Yes, this work (for load without peaks !! ), I make the change on the last v2.0.4 (line 2408) on my local code.

[awenger63]

@jamiefaye Same issues but at the end of the wave when load with peaks and zoom process. Error appear when add the first new canvas (multicanvas). It's the opposite error ... (with or without start =0; because in this case getPeaks() always return peaks since the begining !)
Error appear since V2.0.0.beta2 regression after V2.0.0.beta1.
It's seem only fisrt canvas contain the wave when redraw it.
Any other good idea ?

[awenger63]

After investigation, problem exist when no barWidht and only on the last canvas when zooming it's in drawLineToContext.
In line 3652, if it's the last canvas there is no draw
if (first > end || last < start) { return; }
@thijstriemstra perhaps this code was adding in commit 258cfbafec5a47965f34e2f59ef8cd4eb82dd4ff (#909 , #924 ). Can you explain this ?

I change return line by :
last -= 1;
It's seem to work in render and zoom process with peaks in my local code. Perhaps need more test?
@thijstriemstra what do you think about this change ?

@jamiefaye, with your change and my last change, this issues should be correct.
Thanks

[thijstriemstra]

No its not written by me but by @mspae but he/she is either dead or missing in action unfortunately and annoyingly.

[awenger63]

OK, who can see, @mspae ?
To be confirm, but I don't really understand this test because it compare two different thing. In my comprehension, fisrt and last are peaks information size, end and start are canvas width. And the comment seem to say, if it's not the last canvas, we add 1 peaks information to make the join between canvas.

[Fiorello]

Hi, any news abouts this issue?
It happens to me again, when zoom in.
Im' using wavesurfer-js version 2.1.2

[awenger63]

@Fiorello I always have the code change suggest by @jamiefaye + my commit on my local version ...

[Fiorello]

Great.. Is there any hope of integrating it in the module?

[Bran1304]

Is there any update on this please? @thijstriemstra @katspaugh

[thijstriemstra]

if you want to speed things up, hire either of us. Until then someone (else) will eventually fix it.

[Bran1304]

@thijstriemstra I thought the change awenger63 suggested fixes the issue, and wondered if it could be implemented. Anyways, I might PM you so we can take this further

[thijstriemstra]

I thought the change awenger63 suggested fixes the issue

Give it a try, and if it does, open a pull request so it can get fixed.