Feature request: DOM Event afterRender(ed)

[tillias]

Hello folks, it would be very nice having some event, which got fired right after rendering is completed.

As an alternative solution render some child element inside canvas, after all vertices and edges are rendered.

This is absolutely must have if you need some reliable automated visual tests (e.g. cypress / percy). At the moment the only solution is using timeouts

percy/percy-cypress#266 (comment)

[Thomaash]

Hi @tillias,

there already is afterDrawing event. If you need it in DOM, you should be able to dispatch it with a simple one liner.

[tillias]

Hi @Thomaash, that was also my first idea after reading https://visjs.github.io/vis-network/docs/network/#Events. I have already tried rendering some div in DOM when event is fired and then taken screenshot of canvas. Result was that div was present inside DOM, but rendering was still in progress: https://percy.io/bb9225f6/microservice-catalog/builds/7648382 . Left image is what I see if timeout is used, right image is what is available after afterDrawing has fired

Is there any debug / logging available, so I can further check this afterDrawing ?

[Thomaash]

This looks like rendering is done but the network is not fitted into the canvas.

[tillias]

The thing is, that the exactly the same configuration (random seed, resolution etc) is used. Difference is, that on the left side there is timeout set, before screenshot is taken and to the right there is no timeout but instead wait for afterDrawing event. I can live with timeout, but just curious what may be the reason and if there is any possibility to debug it

[Thomaash]

I think, that the code you're using triggers more than just one rendering (animation will render multiple times, adding nodes will cause rerender, as will calling fit etc.). You react to the first of them and call it a day. With timeout though, you enter a race condition where it's very likely that all rendering is done, hence the different screenshots.

Try to log each afterDrawing event, I'm pretty sure there will be more than one.

PS: Keep in mind that this is just an educated guess based on two screenshots and very little insight into your test procedure.

[tillias]

I think I have found an issue and even reproduced it locally. So if I click "resize to window" and then restore back the tab then afterDraw is fired 3-5 times.

After that content always too big to fit:

Is it a known issue?