How to persists Link segmentations on diagram reload?

GoJS
1

In my link template, I have 2 options enabled. (1) reshapable: true (2) resegmentable : true.
So users are able to create a link and then modify the link route/path which they feel looks best/better.
I want to store the same route/path in my database so that when the user comes back to the same diagram it looks exactly the same.

I have started capturing “points” property and made it two-way binding. So I started getting the values of x & y coordinates in the database. Now when I am reloading the diagram I have observed that it’s not showing all the segments as it is.

Can you share what could be going wrong here?

Let me know if you need any more information. If you have any example that would be great.

Thanks.

2

Yes, for most cases just adding a binding to the Link:

    new go.Binding("points").makeTwoWay()

is sufficient if they are using the Model.toJson method and the Model.fromJson function for saving and loading their diagram models.

So, yes, we’ll need more information. Might you be doing something afterwards that would change the size and/or position of any of the nodes? That would cause connected links to get their routes invalidated and then recomputed.

Or do your nodes include Pictures whose size change asynchronously as images are loaded? We suggest that you follow our recommendation of setting the Picture.width and height (or just Picture.desiredSize) so that they do not change size when the image is loaded.

3

Picture is included in the Node Template, but width and height both are already provided.

Searched for invalidateLayout function, couldn’t find any. Also searched for layoutDiagram function usage but couldn’t find any.

We are using Diagram Transactions to store diagram related updates in the diagram (realtime). So Mode.toJson wont work, so i had to write custom functions. Not sure if thats the correct way to do it.

new go.Binding('points','Points',(x)=>{ return this.convertToPointList(x); }).makeTwoWay(x=>{ return JSON.stringify(x.toArray()); }),

This stores values in the database as per following:

[{"x":278.8349609375,"y":151.7415283203125},{"x":288.8349609375,"y":151.7415283203125},{"x":292,"y":151.7415283203125},{"x":292,"y":197},{"x":305,"y":197},{"x":305,"y":-231},{"x":412,"y":-231},{"x":412,"y":105.2245849609375},{"x":455,"y":105.2245849609375},{"x":465,"y":105.2245849609375}]

To re-bind those values i am using ConvertToPointList function as per following:

convertToPointList(str){
        var points = new go.List<go.Point>();

        let strPoints = JSON.parse(str);
        _.forEach(strPoints,point=>{
            points.add(new go.Point(point.x,point.y));
        });

        return points;
    }
4

My first question was asking whether any changes were happening that would cause nodes to change size. Yes, the methods you mention would probably cause the loss-of-routing-problem that you have, but other happenings would be more likely to be the cause of the problem. So, for example, changes to the text in TextBlocks might cause nodes to change size.

But since you aren’t using Model.fromJson, I suspect that the problem is in how and when you are restoring the link routes.

First, I assume you have confirmed that the desired routes are properly stored in your database and that that information is properly sent to the browser and that the Array of Points you construct with convertToPointList is correct.

How are you actually doing the loading?

5

We are setting it up directly using setting the diagram.model property.
e.g.

this.diagram.model = serverReceivedGraphlinkModelObject;

6

I think that should be OK. But I think we need more information about how to reproduce the problem, since what you show is basically what using Model.fromJson returns.

7

I think if we assign the model directly without using Model.fromJson function it doesn’t work.

Following doesn’t work.

this.diagram.model = serverReceivedGraphlinkModelObject;

As soon as we change it to the following it started working. Not sure why different behaviours.

Following works.

this.diagram.model = go.Model.fromJson(serverReceivedGraphlinkModelObject)

8

The Diagram.model property value must be an instance of the Model class or (more likely) a subclass of Model.

I don’t know what serverReceivedGraphlinkModelObject is, but I’m guessing that it’s not an instance of GraphLinksModel but just a plain JavaScript Object.