Link reshaped points not loading when using gojs-react

GoJS
21

So after some testing most things seems to be working great, I can reshape and save and reload as much as I want.

But I have a remaining issue: I have a couple of features that modify the data model from the surrounding HTML page. In which case I need to do set_skipsDiagramUpdate( false ), and then there is a new modelChange event triggered, where all links are modified and all reshapes are lost :-(

22

OK, so the nodes and links already exist in the diagram, and their data is being updated in state. Are any node locations connected with reshaped links being changed? It sounds like maybe some change you are making could be triggering a layout, which invalidates the links, even if they weren’t the data that was originally updated. What sort of data model updates are being made?

23

Change to a text label on a single link. Somehow it triggers a layout of the entire diagram. node state is not changed.

24

Maybe you want to change the conditions which trigger a relayout of the diagram: GoJS Layouts -- Northwoods Software

25

Ok, so I try

	let diagram =
		goObject( go.Diagram,
			{
				hoverDelay: 250,
				LinkDrawn( e ) {
					_outletLinkHandler( e )
				},
				LinkRelinked( e ) {
					_outletLinkHandler( e )
				},
				SelectionDeleted( e ) {
					_outletLinkHandler( e )
				},
				'undoManager.isEnabled': true,  // Must be set to allow for model change listening
				model: goObject( go.GraphLinksModel, {
					linkFromPortIdProperty: "fromPort",  // Required information:
					linkToPortIdProperty: "toPort",      // Identifies data property name
					linkKeyProperty: 'id',  // IMPORTANT! Must be defined for merges and data sync when using GraphLinksModel
					nodeKeyProperty: 'id'
				} ),
				layout: goObject( go.Layout, {
					isOngoing: false
				} )
			} )

…but that does not fix the problem.

27

So finally the solution is to stop using the gojs-react component. It introduces too much unpredictability when implemented in a production environment with things like SSR, asynchronous DB APIs and HTML interaction events.

I re-factored to use the standard JS API of GoJS and React Hooks. With this I now have:

  • Less code
  • Better performance (fewer re-renders)
  • No issues with async events of any kind
  • No issues with unwanted layout updates
1 Like
28

Ok, thanks for letting us know. It is of course the case that using GoJS directly is going to give you much finer grain control. The tradeoff is you’ll have to set up any interaction between state and the GoJS model yourself. In case you’re curious about how change listeners and model updates are done, there’s an implementation page on the gojs-react repo. If you need those features, you could adjust the implementation to suit your needs.