Callback after graph is rendered? about blazor.diagrams HOT 8 OPEN

Hi @destrugter,

I see how that would be useful, but am not sure whether it's going to be easy to implement. It might be as easy as providing a callback/event in OnAfterRenderAsync of the Diagram component, but I don't know for sure. Could you experiment with this and let me know?

Out of curiosity: how are you taking screenshots?

BR
Stefan

from blazor.diagrams.

Currently the way I'm doing it is calling ZoomToFit, awaiting a 1s Task, then using html2canvas to convert the element to a canvas, and then converting it to a blob, and finally converting that blob to a png and copying it to the clipboard.

from blazor.diagrams.

@destrugter id love to see how you have implemented this, so you are able to render a diagram to a PNG?

from blazor.diagrams.

@CliveBennett I used this JS called html2canvas. It works pretty well. The command I have after you have downloaded html2canvas is await html2canvas(document.querySelector("#" + id)).then(canvas => canvas.toBlob(blob => navigator.clipboard.write([new ClipboardItem({ 'image/png': blob })])));

from blazor.diagrams.

Awesome, appreciate that ill give it a go.

from blazor.diagrams.

I managed to get the copying of the diagram to a PNG working, thanks for the pointer.

But, because some of the diagrams that get generated can be quite large, I really need to have a dynamic sized image, so I can have a large image for the large ones, and a small image for the small ones.

Is there a property for the diagram class that would give me the max rendered width and height in pixels?, even if cropped on screen?

from blazor.diagrams.

@CliveBennett The code I was using was this:

private async Task GetDiagramScreenshot()
{
	diagram.ZoomToFit();
	await Task.Delay(1000);
	image_url = await TakeScreenshot();
}

I am using the await Task.Delay(1000) because I am unsure of when ZoomToFit is finished working, which is why I opened this issue in the first place. If I'm understanding you correctly, this should get you what you're after?

from blazor.diagrams.

@destrugter the issue is that a lot of our diagrams can render off screen as they are quite large, I use the little viewport control to enable people to scroll around the diagram.

This is an example of what they can look like

But I needed to grab the entire diagram in one hit onto a single image.

What I ended up doing was to change the containing div to 5000x5000 pix with JS prior to running Html2Canvas which then generates a large image with the diagram at the top, then I wrote some code to Crop the image to a sensible size by scanning the pixels for whitespace.
Works well (so far!) thanks again for the help

from blazor.diagrams.