I’m rewriting some old code using the react diagram and redux, and I’m seeing weird behavior with initialAutoScale Uniform. I have my nodes/links being parsed and then stored in redux. The modelData is being set when I init the diagram, as it’s properties never have to change in my use case.
<ReactDiagram
initDiagram={initDiagram}
divClassName="diagram-component"
nodeDataArray={nodes}
linkDataArray={links}
onModelChange={() => {
console.log("model changed");
zoomToFit();
}}
skipsDiagramUpdate={false}
/>
function initDiagram(): go.Diagram {
return GO(go.Diagram, {
...,
initialAutoScale: go.Diagram.Uniform,
...,
model: GO(go.GraphLinksModel, {
nodeKeyProperty: 'id',
nodeGroupKeyProperty: 'parent',
linkKeyProperty: 'id',
linkFromPortIdProperty: 'fromPort',
linkToPortIdProperty: 'toPort',
}),
});
The issue is that I’m thinking the way redux works breaks the initialAutoScale property. Because the model is set when the diagram first renders, and then it’s not until my rest apis come back and my parse finishes that the node/link data arrays are being constructed and sent. However, by then the model is already set and won’t change, so the scale never fires.
If I have autoScale set to Uniform, everything is sized as I expect. If I weren’t using the react diagram I could do something like diagram.model = new go.GraphLinksModel(nodes, links), but because the react diagram abstracts away that stuff behind it’s properties I can’t get to it there.
Is there a nice way to fix this? I’m thinking I might just have to redo my stuff to do something more like what your wrapper does, but it would make my other code more complex. I currently have some stuff that updates various states on the nodes, and those are all done using data moving from redux -> gojs, rather than gojs getting updated first, and then it updating redux, which I think is what I’d need to do if I used the wrapper.
