Binding value to geometryString in link template

GoJS
1

Hi,
I’m trying to bind value to geometryString in link template but it does not bind.
Here is the code,
Please advise.

var linkDataArray = [
{ from: “4”, to: “1”, xx: “M0 0 L1 0” },
{ from: “4”, to: “3”, xx: “M0 0 M3 0 L6 0 M3 3 L6 3” },
{ from: “4”, to: “2”, xx: “M0 3 L1 0 3 6 4 3” }
];

diagram.linkTemplate = $(go.Link,
{
routing: go.Link.Normal,
corner: 5
},
$(go.Shape,
{
isPanelMain: true, stroke: “transparent”, strokeWidth: 3,
pathPattern :
$(go.Shape, new go.Binding(“geometryString”, “xx”), { stroke: “red” })
}
) // the link shape
);

2

The Shape.pathPattern object, Shape | GoJS API, may be shared by many Shapes and thus that GraphObject does not support data binding.

But as Custom Relationships demonstrates, you could data bind Shape.pathPattern itself to your “xx” property by using a conversion function that returns one of a limited set of Shapes.

3

OK,
So i made the changes :

var linkDataArray = [
{ from: “4”, to: “1”, xx: “DASH” },
{ from: “4”, to: “3”, xx: “DASH” },
{ from: “4”, to: “2”, xx: “DASH” }
];

diagram.linkTemplate = $(go.Link,
{
routing: go.Link.Normal,
corner: 5
},
$(go.Shape, // the link’s path shape
{ isPanelMain: true, stroke: “transparent” },
new go.Binding(“geometryString”, “xx”, linkShape)
)
);

function linkShape(name) {
if (name === “DASH”)
return $(go.Shape,
{
geometryString: “M0 0 M3 0 L6 0”,
fill: “transparent”,
stroke: “red”,
strokeWidth: 1,
// strokeCap: cap
}
);
}

and it complains :
property set error: Error: Geometry.parse:str value is not an instance of string: Shape(None)#1267

4

Your Binding is trying to set Shape.geometryString to an instance of Shape, which is clearly wrong.

diagram.linkTemplate =
  $(go.Link,
    { . . . },
    $(go.Shape,
      { stroke: "transparent", strokeWidth: 3 },
      new go.Binding("pathPattern", "xx", linkShape))
  );
5

Oooopppsss,
This is what happens after 12 hours of programming. Even copy/paste fails.
Thanks

6

Now that i control the link shape, i would like to control the link color, by binding to “stroke” attribute.
Here is the Link template and the code :

diagram.linkTemplate = $(go.Link,
{
routing: go.Link.Normal,
corner: 5
},

        $(go.Shape, // the link's path shape
                { stroke: "transparent", strokeWidth: 3,
                  pathPattern:
                    $(go.Shape,
                            {
                                geometryString:  "M0 4 L2 0 6 8 8 4",
                                //fill: "red",
                                stroke: "red",
                            },
                            new go.Binding("stroke", "color")
                    )}
        )
);

function changeLinkColor() {
diagram.startTransaction(“changeLinkColor”);
var links = diagram.findLinksByExample({ from: “4”, to: “1”});
var it = links.iterator;
while (it.next()) {
var item = it.value;
diagram.model.setDataProperty(item.data, “color”, “black”);
}
diagram.commitTransaction(“changeLinkColor”);
}

As seen, i’m trying to change on of the link color to black, but it does not work.
Please advise.
Tany

7

As Walter mentioned in his first post, Shape.pathPattern does not support data binding.

8

OK,
Thanks

9

Can i bind to attributes to pathPattern?
I want to control the shape of the link and its color depending on user input.

10

two attributes…

11

As I said, you won’t be able to use bindings with the path pattern. What you could do instead is set a new path pattern with the stroke you want. The drawback is that the more you do this, the worse performance could become since there would need to be more path patterns in memory.

12

OK,
Thanks

13

Managed to change the color by :

item.elt(0).pathPattern.stroke = “black”;

Thanks

14

Note that that will change the color of all links using that pathPattern Shape, not just the one link’s path.

15

Strange,
it changed only the link that was found, the one that was searched by example.