Binding points to an array of objects

GoJS
#1

Hello,

I’ve got a problem binding points to save them into DB and parse them back into diagram.

Here is my binding for my link:

this.diagram.linkTemplateMap.add('ToApproval',
      $(go.Link,
        {
          routing: go.Link.Normal,
          curve: go.Link.Bezier,
          reshapable: true,
          resegmentable: true,
          selectionAdorned: false,
          selectable: true,
          isLayoutPositioned: false,
          isTreeLink: false,
          curviness: -15,
          cursor: 'pointer',
        },
        new go.Binding('points', 'points').makeTwoWay(),
        $(go.Shape,
          {
            stroke: 'grey',
            strokeWidth: 3,
            strokeDashArray: [5, 5],
          })));

My array looks like this:

image

Any idea what could i possibly doing wrong?

P.S. go-debug seems to not identify an error.

#2

What is the problem? The value of the “points” property appears to be an Array of Points, although it should be a List of Points. It is the responsibility of the serialization to convert that List of Points (or Array of Points) into whatever representation you are serializing into so that deserialization can properly recover a List or Array of the correct coordinate values.

That is done automatically for you in the Model.toJson method and Model.fromJson static function. But you can implement your own serialization if you like.

#3

Problem is that this array is not visualising into diagram. So I probably have to use some method to make them a List of Points, not an Array of Points as you just typed. But I didn’t find the method, could you please tell me if there is some? @walter

Thanks a lot!

#4

Just to be clear – are you doing your own persistence of the model? You are not using Model.toJson or Model.fromJson, are you?

If you are doing your own persistence implementation, then you should be able to handle the “points” property value being whatever types you want to handle.

By the way, as you can read at https://gojs.net/latest/api/symbols/Link.html#points, the Link.points property setter will accept more than just a List of Points – it also handles Arrays of Points and even-length Arrays of numbers.

#5

As you said, I use my own persistence of the model.
I would like to know how can I bind points in my link object, which look like this:

image

To a link in diagram, which should now look like this:

image

But after i move eaither the grey or green node, the link goes back to its inital form/shape.

P.S. Implemented as shown in 1st post.

Any ideas what could I possibly doing wrong?

#6

Two issues:

  1. The form of your link data “points” property. The value of the Link.points property is a List of Points. So a simple TwoWay Binding of the “points” property will result in the link data.points property being a List, not an Array. If you really want it to be an Array, you need to provide a back-conversion function. Although I think it would be inefficient to do this – it would be more efficient to only do the conversion to Array when you serialize the data.

  2. When you move a node all of the connected links will be rerouted – otherwise the link paths will appear disconnected. But you have some control over how rerouting works. Try setting Link.adjusting to some value.

#7

Thanks a lot @walter. After a few days I just get back to this project and my solution is to take my Array and make List of Points, then bind it to the ‘points’ property as shown below:

   new go.Binding('points', 'points', (data) => {
      let list = new go.List();

      list.add(new go.Point(data[1].x, data[1].y));
      list.add(new go.Point(data[0].x, data[0].y));
      list.add(new go.Point(data[2].x, data[2].y));
      list.add(new go.Point(data[3].x, data[3].y));

      console.log(list);

      return list;
    }),