I am trying to extend our current implementation of a GoJS diagram so that it can be exported to SVG.
We implemented the diagram in React the way you explain in your sample project here: GitHub - NorthwoodsSoftware/gojs-react-basic: An example project demonstrating usage of GoJS and React together
And then we wanted to add a button to export to SVG like the sample here: https://github.com/NorthwoodsSoftware/GoJS/blob/master/samples/minimalSVG.html
Underneath part of the code that is relevant for this issue. The issue I seem to have is that diagramRef is always undefined. I might be missing something really basic here, but any pointers into the right direction are more than welcome ;-)
makeSvg(): void {
if (this.diagramRef.current) {
const diagram = this.diagramRef.current;
if (diagram instanceof go.Diagram) {
console.log("Found diagram, creating SVG now");
const svg = diagram?.makeSvg({ scale: 1, background: "white" });
const svgstr = new XMLSerializer().serializeToString(svg);
const blob = new Blob([svgstr], { type: "image/svg+xml" });
this.myCallback(blob);
}
}
}
render(): ReactNode {
return this.state.nodeDataArray.length > 0 && this.state.config !== null ? (
// the parent div of the ReactDiagram need to have position: relative for the zoomSlider to be displayed as mentioned on their documentation https://gojs.net/latest/api/symbols/ZoomSlider.html
<div style={{ position: "relative" }}>
<button id="svgButton" onClick={this.makeSvg}>
Export to SVG
</button>
<ReactDiagram
// we set the reference to this diagram to be able to refer to it in the code
ref={this.diagramRef}