northwoodssoftware / gojs-react-basic Goto Github PK

Is this possible to get model data after the diagram is changed? What I try to do is handle onModelChange event for ReactDiagram component. It returns data of go.IncrementalData type which should return me modelData but I never receive it. I receive all other properties like insertedNodeKeys, modifiedNodeData etc. I could build up an updated model using those data but I assume that model should be already available using modelData property, am I right?

this.state = {
nodeDataArray: [
{ key: 0, text: "Alpha", color: "lightblue", loc: "0 0", strokeDashArray: [10, 20] },
{ key: 1, text: "Beta", color: "orange", loc: "150 0", strokeDashArray: [10, 20] },
{ key: 2, text: "Gamma", color: "lightgreen", loc: "0 150", strokeDashArray: [10, 20] },
{ key: 3, text: "Delta", color: "pink", loc: "150 150", strokeDashArray: [10, 20] },
],
linkDataArray: [
{ key: -1, from: 0, to: 1 },
{ key: -2, from: 0, to: 2 },
{ key: -3, from: 1, to: 1 },
{ key: -4, from: 2, to: 3 },
{ key: -5, from: 3, to: 0 },
],
modelData: {
canRelink: true,
},
selectedData: null,
skipsDiagramUpdate: false,
};

Error description

Error when making any changes in the inspector or toggling relink input and then interacting with the diagram canvas again.

Steps to reproduce

Took the liberty of using this repo as a template in codesandbox - https://codesandbox.io/s/github/NorthwoodsSoftware/gojs-react-basic

If the undoManager is not enabled, the onModelChange callback does not work anymore.

I notice that the undoManager is enabled in every example (https://gojs.net/latest/intro/react.html
Is there a reason or is it a bug?

According to:

https://github.com/NorthwoodsSoftware/gojs-react/blob/master/IMPLEMENTATION.md#componentdidupdate

This method is responsible for updating the gojs state based on the react state. However, in this example I do see any call to this method. How does the gojs state gets updated based on the react state?

`new go.Binding("strokeDashArray", "strokeDashArray").makeTwoWay()

\\\\\
{ key: 0, text: "Alpha", color: "lightblue", loc: "0 0", strokeDashArray: [10, 20] },

`