State of Node/Link data in a React Stateful Diagram

GoJS
1

Hi there, I have whats seems like a simple enough question but for some reason couldn’t find any previous posts in this forum or documentation on any methods to access that state of the diagrams node/link data.

For context, my code is functionally identical to the stateful and wrapper implementation on GoJs’s React tutorial page (GoJS and React -- Northwoods Software) with the minor difference being I have implemented the Pallete diagram (GoJS Palette -- Northwoods Software) and have the “clickCreatingTool.archetypeNodeData” option set so that I can add nodes into the graph by dragging or double clicking. I have no problem accessing the state of the wrapper and viewing nodes that I have added manually, however I can’t seem to find where to access any of the nodes/links created while using the diagrams node creating tools. They aren’t stored in the wrapper state nor, from what it seems, in the object reference of the diagram. I can only access the “handle…” methods from the wrapper. I looked through the object (const diagram = this.diagramRef.current.getDiagram();) but couldn’t find anything.

In short, How do I access the diagrams node/link data arrays and better yet, from the wrapper?

Thanks so much in advance, any help is greatly appreciated.

2

It’s unclear what you need the state for and when you are trying to check it. You should be able to get to the arrays via this.diagramRef.current.getDiagram().model.nodeDataArray/linkDataArray, but that’s usually unnecessary.

Typically your app’s state should be in sync with the GoJS model so long as you are properly handling changes in an onModelChange handler. Hopefully you’ve seen gojs-react-basic, which is an example that keeps the app state’s arrays in sync with the GoJS model. It allows for double-click node creation, so it should cover your scenario.

3

Thank you so much! I essentially just wanted to read the models node/link data and persist it when the user wants to save the diagram. I did consider making a second state of the diagram in the app using the onModelChange handlers but thought it would be best to simply read the diagrams state than to replicate it and create two sources of truth.

However, after looking at the implementation in the gojs-react-basic that seems like the best course of action, Thanks again.