Hello there. So, I’m having this weird issue with the reloading of the model. I’m basically using GoJS with React (gojs-react) in a NextJS app.
Following is the page.tsx file, that contains the node & link data arrays for the initial load,
constructor(props: object) {
super(props);
let urlDiagram = "";
if (typeof window !== "undefined") {
urlDiagram = window.location.search.split("diagram=")[1];
}
this.state = DiagramProvidor(urlDiagram) as AppState;
// init maps
this.mapNodeKeyIdx = new Map<go.Key, number>();
this.mapLinkKeyIdx = new Map<go.Key, number>();
this.refreshNodeIndex(this.state.nodeDataArray);
this.refreshLinkIndex(this.state.linkDataArray);
// bind handler methods
this.handleDiagramEvent = this.handleDiagramEvent.bind(this);
this.handleModelChange = this.handleModelChange.bind(this);
this.handleInputChange = this.handleInputChange.bind(this);
}
In the above code snippet, “this.state” is being set through a different file which I call the “DiagramProvider.ts”, based on the URL (that’s a whole different story). For example,
let Default: Diagram = {
nodeDataArray: [
{
text: "NodeText",
color: "#000000",
key: 1,
loc: "315 25",
scale: 1.1544933012125682,
fill: "#ffffff",
},
],
linkDataArray: [],
modelData: {
canRelink: true,
},
selectedData: null,
skipsDiagramUpdate: false,
};
Now, I’ve done some binding in the “DiagramWrapper.tsx” file for the TextBlock of a specific node, example (loaded using Model.fromJson)
as you can see, the node with the text “Process” has its textblock aligned to the Top-Left (I’ve bound this one using new go.Binding(“alignment”, “alignTL”)), where as the other node with text “New Node” has its textblock in center (this one is by default set in the TextBlock’s properties), here
$(
go.TextBlock,
{
textAlign: "center",
isMultiline: true,
overflow: go.TextOverflow.Ellipsis,
margin: 6,
cursor: "default",
editable: true,
isUnderline: false,
font: "400 1.2rem Arial, sans-serif",
stroke: "black",
},
new go.Binding("alignment", "alignTL").makeTwoWay(), //here
new go.Binding("alignmentFocus", "alignTL").makeTwoWay(), // here
new go.Binding("text", "text").makeTwoWay(),
new go.Binding("stroke", "color"),
new go.Binding("font", "fontType"),
new go.Binding("isUnderline", "setUnderline")
)
And this is the nodeDataArray for the specific shape with the text “Process”,
{
key: "2",
fill: "white",
text: "Process",
alignTL: new go.Spot(0, 0), // here you can see what I bound it to
shape: "Process",
size: "100 44.791867065429685",
},
Now, the problem is that, if I save this JSON data of the diagram using Model.toJson & load it using Model.fromJson, it works fine, I get the same result as the image above.
But, if I add the same binding to the DiagramProvider.ts File, that sets the initial node & link Data Arrays in the page.tsx file against “this.state”, for example
let Default: Diagram = {
nodeDataArray: [
{
text: "NodeText",
color: "#000000",
key: 1,
alignTL: new go.Spot(0, 0), // The Binding added here, gets set to "this.state" in page.tsx when the page reloads
loc: "315 25",
scale: 1.1544933012125682,
fill: "#ffffff",
},
],
linkDataArray: [],
modelData: {
canRelink: true,
},
selectedData: null,
skipsDiagramUpdate: false,
};
I’m getting this result, (without using Model.fromJson, instead setting the Node & Link Data Arrays against this.state in page.tsx)
Both the TextBlocks reset to the center, whereas, loading using Model.fromJson isn’t the same case.
For reference, this is the result of Model.toJson,
{ "class": "GraphLinksModel",
"linkKeyProperty": "key",
"linkFromPortIdProperty": "fromPort",
"linkToPortIdProperty": "toPort",
"modelData": {"canRelink":true},
"nodeDataArray": [
{"text":"New Node","fill":"white","stroke":"black","strokeWidth":"2","key":-2,"loc":"-415.4167378719398 -95","color":"#000000"},
{"key":2,"fill":"white","text":"Process","alignTL":{"class":"go.Spot","x":0,"y":0,"offsetX":0,"offsetY":0},"shape":"Process","size":"100 44.791867065429685","loc":"-560 -180","color":"#000000"}
],
"linkDataArray": []}
Again, loading this same JSON using Model.fromJson gives me accurate result, but using the same values against “this.state” doesn’t.
Also,
I’ve found the same behaviour with one of the samples, Reference to The Sample
Diagram before load, (different links used),
Diagram after reloading the model using the button below on the sample page, (resets all the links to the Normal Routing)
Any help would be appreciated! Thank you for reading.
