TwoWay binding on link's "points" not updated with value when drawing a link

GoJS
1

Hello,

I have a two-way binding on the points property of a go.Link:

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

It works perfectly well when I reshape the links.

However, when I draw a new link using the linking tool, the value I get in goPoints is undefined. Only when I reshape the link do I get a proper value.

Any idea?

Thanks,
Marc.

2

Are you using Model.toJson and Model.fromJson? Those require the link data property name to be “points”.

But if you are not using GoJS serialization to/from JSON-formatted text, I would think it should work. I’ll check.

3

I just tried a sample using exactly the same Binding as your link template uses, and the newly drawn link data’s data.goPoints property got set to a List of Points, exactly as it should.

Of course I am unable to call Model.toJson on this model, since it cannot know how to serialize List values in model data. Model.toJson only handles Lists of Points when the property name is “points”.

4

Thanks Walter.

I’m not using Model.toJson or Model.fromJson.

In my case I have ports being used. Could this be why? --Otherwise, I’ll try to create a test case.

5

No, I do not see how the use of separate ports would affect the binding of Link.points.

<!DOCTYPE html>
<html>
<head>
<title>Minimal GoJS Sample</title>
<!-- Copyright 1998-2019 by Northwoods Software Corporation. -->
<meta charset="UTF-8">
<script src="go.js"></script>
<script id="code">
  function init() {
    var $ = go.GraphObject.make;

    myDiagram =
      $(go.Diagram, "myDiagramDiv",
          { "undoManager.isEnabled": true });

    myDiagram.nodeTemplate =
      $(go.Node, "Auto",
        { resizable: true, rotatable: true },
        new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify),
        new go.Binding("angle").makeTwoWay(),
        $(go.Shape,
          { fill: "white", portId: "", fromLinkable: true, toLinkable: true, cursor: "pointer" },
          new go.Binding("fill", "color")),
        $(go.TextBlock,
          { margin: 8, editable: true },
          new go.Binding("text").makeTwoWay())
      );

    myDiagram.linkTemplate =
      $(go.Link,
        {
          relinkableFrom: true, relinkableTo: true,
          reshapable: true, resegmentable: true
        },
        new go.Binding("points", "goPoints").makeTwoWay(),
        $(go.Shape),
        $(go.Shape, { toArrow: "OpenTriangle" })
      );

    myDiagram.model = new go.GraphLinksModel(
    [
      { key: 1, text: "Alpha", color: "lightblue" },
      { key: 2, text: "Beta", color: "orange" }
    ],
    [
      { from: 1, to: 2 }
    ]);
  }

  function test() {
    document.getElementById("mySavedModel").textContent = JSON.stringify(myDiagram.links.first().data);
  }
</script>
</head>
<body onload="init()">
  <div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:600px"></div>
  <button onclick="test()">Test</button>
  <textarea id="mySavedModel" style="width:100%;height:250px"></textarea>
</body>
</html>
6

My problem was actually that my goPoints setter was using the link’s from which may not yet be set at the time the link is drawn: the binding is executed a first time when the link is drawn (before it was even connected to any node-- points is undefined at that time) and a second time when the route of that link was determined (points has a proper value).