Hello,
I’m encountering an issue after updating GoJS to version 3. In our functional React component, which uses ReactDiagram, nodes added after the diagram has been created are no longer displayed.
The component looks like this:
<ReactDiagram
ref={diagramRef}
divClassName={style.diagram}
initDiagram={initDiagram}
nodeDataArray={props.nodeDataArray}
linkDataArray={props.linkDataArray}
modelData={props.modelData}
onModelChange={onModelChange}
skipsDiagramUpdate={props.skipsDiagramUpdate}
/>
Initially, when props.nodeDataArray has values, the nodes render correctly. However, if props.nodeDataArray is updated later, the diagram does not reflect those changes. Also, the onModelChange is not triggered.
I have tested a sample from the GoJS React examples, and everything seems to work as expected there.
Given that props.nodeDataArray is being updated (I’ve confirmed that through debugging), I’m not sure why ReactDiagram isn’t updating to display the new nodes.
Could you advise on how I could debug this further or if there are any changes in v3 that might be causing this issue?
We are using
"gojs": "3.0.11",
"gojs-react": "1.1.2",
"react": "18.2.0",
This is the complete component:
import * as go from "gojs";
import { DiagramProps, ReactDiagram, ReactOverview } from "gojs-react";
import { useInjection } from "inversify-react";
import React, { useEffect, useRef } from "react";
import { ReviewDiagramAdornmentTemplate } from "./ReviewDiagramAdornmentTemplate";
import { ReviewDiagramNodeTemplate } from "./ReviewDiagramNodeTemplate";
import style from "./ReviewDiagramWrapper.module.css";
interface ReviewDiagramWrapperProps
extends Pick<DiagramProps, "nodeDataArray" | "linkDataArray" | "modelData" | "skipsDiagramUpdate"> {
/** Diagram background image */
background?: Blob;
/**
* Function that is called when the model has changed.
*
* @param e The changed data
* @param nodeDataArray The updated nodeDataArray
*/
onModelChange: (e: go.IncrementalData, nodeDataArray: go.ObjectData[]) => void;
}
export const ReviewDiagramWrapper: React.FC<ReviewDiagramWrapperProps> = (props) => {
const nodeTemplate = useInjection(ReviewDiagramNodeTemplate);
const adornmentTemplate = useInjection(ReviewDiagramAdornmentTemplate);
const diagramRef = useRef<ReactDiagram>(null);
const getDiagram = () => diagramRef.current?.getDiagram();
useEffect(() => {
console.log("ReviewDiagramWrapper props changed", props.nodeDataArray, props.skipsDiagramUpdate);
}, [props.nodeDataArray, props.skipsDiagramUpdate]);
const initDiagram = () => {
const diagram = new go.Diagram({
"undoManager.isEnabled": true, // must be set to allow for model change listening
"undoManager.maxHistoryLength": 0, // disable undo/redo functionality
model: new go.GraphLinksModel({
linkKeyProperty: "key", // Must be defined for merges and data sync when using GraphLinksModel
}),
"animationManager.isEnabled": false,
// allowMove: false,
});
diagram.nodeTemplate = nodeTemplate.create();
diagram.nodeSelectionAdornmentTemplate = adornmentTemplate.create();
return diagram;
};
const initOverview = () => {
return new go.Overview({ contentAlignment: go.Spot.Center });
};
const onModelChange = (e: go.IncrementalData) => {
console.log("Model changed", e, getDiagram()?.model.nodeDataArray);
props.onModelChange(e, getDiagram()?.model.nodeDataArray ?? []);
};
return (
<div style={{ position: "relative", display: "flex", flex: 1 }}>
<ReactDiagram
ref={diagramRef}
divClassName={style.diagram}
initDiagram={initDiagram}
nodeDataArray={props.nodeDataArray}
linkDataArray={props.linkDataArray}
modelData={props.modelData}
onModelChange={onModelChange}
skipsDiagramUpdate={props.skipsDiagramUpdate}
/>
<ReactOverview
initOverview={initOverview}
divClassName={style.overviewComponent}
style={props.background == null ? { display: "none" } : undefined}
observedDiagram={getDiagram() ?? null}
/>
</div>
);
};
ReviewDiagramWrapper.displayName = "DiagramWrapper";
export default ReviewDiagramWrapper;
