Link Point's not binding to model json in draggableLink Sample

GoJS
1

Hi,
In this sample Draggable Link, I have added a some lines to get the json after link is drawn.

  myDiagram.addDiagramListener("LinkDrawn", function(e){
console.log("-> LinkDrawn :"+e.diagram.model.toJson());

});

I have noticed that, after link drawn the points is not binded to linkDataArray?
Debugged output
-------------------------
“linkDataArray”: [ {“from”:-3, “fromPort”:“R”, “toPort”:“”} ]}

Can you explain me why the point is not binded in linkdataArray.

But If I drawn second link, then first link points is binded in linkdataarray:
Debugged output
-------------------------
**“linkDataArray”: [ **
{“from”:-4, “fromPort”:“B”, “toPort”:“”, “points”:[120,72.6,120,82.6,120,168.8000030517578,190.9499969482422,168.8000030517578,261.8999938964844,168.8000030517578,271.8999938964844,168.8000030517578]},
{“from”:-4, “fromPort”:“R”, “toPort”:“”}

2

OK, so you do have a TwoWay Binding of the Link.points property.

But at the time that the LinkingTool raises the “LinkDrawn” DiagramEvent, the link route (i.e. the Link.points property) has not yet been computed. Depending on your app, that might happen just via the default routing that is controlled by the properties of the link and its connected ports, and/or by the layout that is responsible for routing the link. That happens later in the transaction.

Instead implementing that listener, implement a Model Changed listener that looks for a ChangedEvent.isTransactionFinished event, and see if the Transaction’s Transaction.changes List includes an Insert ChangedEvent with ChangedEvent.modelChange == “linkDataArray”. The ChangedEvent.object will be the new link data object with a List of Points as the value of the “points” property.

3

Yes I have used two way binding. I am using same program as this Draggable Link.
And,
I have tried like this:
myDiagram.addModelChangedListener(function (e) {
if (e.change === go.ChangedEvent.Insert && e.propertyName === “linkDataArray”) {
console.log(e.object) // Here I am able to see the lindataArray with link point’s in it.
console.log(e.model.toJson()) // Here that link points not reflected to model json.
}
});

Actually I need to store the diagram json in database after link as drawn with link points. But that Link Points is not reflecting in model json.

In addModelChangedListener also, If used e.object then while debugging that object in console I am able to see that points in it.

But If used e.model.toJson(), then points are not reflecting to json.

4

In that listener, e.newValue.points should be a List of Points.

If that is the case, I do not understand how e.model.toJson() cannot be including the route for that link.

5

e.newValue returns => {__gohashid: 1546, from: -3, to: undefined, fromPort: “R”, toPort: “”}

Here points is not added to link data.

Linktemplate:

myDiagram.linkTemplate =
(go.Link, // the whole link panel { selectable: true, selectionAdornmentTemplate: linkSelectionAdornmentTemplate }, { relinkableFrom: true, relinkableTo: true, reshapable: true }, { routing: go.Link.AvoidsNodes, curve: go.Link.JumpOver, corner: 5, toShortLength: 4 }, new go.Binding("points").makeTwoWay(), **//Here Points is two way binded** (go.Shape, // the link path shape
{ isPanelMain: true, strokeWidth: 2 }),
(go.Shape, // the arrowhead { toArrow: "Standard", stroke: null }), (go.Panel, “Auto”,
new go.Binding(“visible”, “isSelected”).ofObject(),
(go.Shape, "RoundedRectangle", // the link shape { fill: "#F8F8F8", stroke: null }), (go.TextBlock,
{
textAlign: “center”,
font: “10pt helvetica, arial, sans-serif”,
stroke: “#919191”,
margin: 2,
minSize: new go.Size(10, NaN),
editable: true
},
new go.Binding(“text”).makeTwoWay())
)
);

In addModelChangeListener:
e.object prints:

Pasted image463×573 22.2 KB

6

If your link data’s to property is undefined, the new link is not connecting to any “to” node, so there will not be any default routing of the link. Instead the route is determined later in the transaction, so you can only check in a Transaction ChangedEvent (ChangedEvent.isTransactionFinished) by scanning the Transaction.changes list.

7

I have use like this:

    myDiagram.addModelChangedListener(function (e) {
        if (e.change === go.ChangedEvent.Property && e.propertyName === "points") {
            console.log(e.model.toJson())
        }
    });

Now the points are added to model Json. Is this ok?

8

Yes, but it will be called many times other than after drawing a new link.

9

Thanks for that information. Now I tried like this:
var linkDrawn = false;
myDiagram.addModelChangedListener(function (e) {
if (e.change === go.ChangedEvent.Property && e.propertyName === “points”) {
linkDrawn = true;
}
if (e.isTransactionFinished) {
if (linkDrawn) {
console.log(e.model.toJson()) // Updated to database
linkDrawn = false;
}
}
}

10

Please read GoJS Changed Events -- Northwoods Software.

    myDiagram.addModelChangedListener(function (e) {
      // only at end of transaction or undo or redo
      if (!e.isTransactionFinished) return;
      // only when have added a new link
      if (!e.object.changes.any(function(c) {
        return (c.change === go.ChangedEvent.Insert && c.propertyName === "linkDataArray");
      })) return;
      // log link's new route
      e.object.changes.each(function(c) {
        if (c.model !== null && c.change === go.ChangedEvent.Property && c.propertyName === "points") {
          console.log(c.object.points);
        }
      });
    });