Link Template with Link Shape

GoJS
1

I’m trying to create a link shape with the following template :

diagram.linkTemplate = $(go.Link, go.Link.Bezier,
            {  
            },

            $(go.Shape,
                    {
                        stroke: "black",
                    },
                new go.Binding("pathPattern", "pp", function(val) {
                    return $(go.Shape,
                            {
                                geomtryString : val,
                                stroke: "red",
                                fill: "transparent",
                                strokeWidth: 10
                            }
                    )}
                )
            )

    );
 var linkDataArray = [
        { from: "1", to: "2",  "pp":"M0 3 L4 0 2 6 6 3"  }];

But it draws a simple line .
I tried to follow the example, but didnt help.
What is wrong with the template ?
Please advise
Tany

2

Typo? “geomtryString”
You should have gotten a console message for that.

3

Oooopppsss,
I saw the console many times but didn’t figure out the typo…thanks
Now, how can i control the color of the shape ?
No binding works, not for the link line, nor for the link shape.

4

I suggest that you pre-allocate some Shapes and have the conversion function return one of them.

5

Do you mean that i cannot bind the shapes, but need to create some PathPatterns set like you did in the example ?

6

Those pathPattern Shapes are not in the visual tree of the Part, so there can be no Binding of any of its properties.

Yes the conversion function could construct and return a new Shape each time. But that seems unnecessarily inefficient for most cases.

7

I found some way :

function changeLinkColor(color) {
        diagram.startTransaction("changeLinkColor");
        var links = diagram.findLinksByExample({ from: "1", to: "2" });
        var it = links.iterator;
        while (it.next()) {
            var item = it.value;
           // console.log(item.data);
            item.elt(0).pathPattern.stroke = color;
            item.isHighlighted = true;
            item.selected = true;
            break;
        }
        diagram.commitTransaction("changeLinkColor");
    }

But i’m not sure it is “legal” and i also have to select one of the nodes in order to see the change

8

This seems to work well enough:

    myDiagram.linkTemplate =
      $(go.Link,
        $(go.Shape,
          new go.Binding("pathPattern", "color",
            function(c, shape) {
              var patt = new go.Shape();
              patt.geometryString = shape.part.data.pp;
              patt.stroke = c;
              return patt;
            }),
          new go.Binding("pathPattern", "pp",
            function(pp, shape) {
              var patt = new go.Shape();
              patt.geometryString = pp;
              patt.stroke = shape.part.data.color || "black";
              return patt;
            })
          ),
        $(go.Shape, { toArrow: "OpenTriangle" })
      );

  myDiagram.model = new go.GraphLinksModel(
    [
      { key: 1, text: "Alpha" },
      { key: 2, text: "Beta" },
      { key: 3, text: "Gamma" },
      { key: 4, text: "Delta" }
    ],
    [
      { from: 1, to: 2, color: "blue", pp: "M0 0 L2 8" },
      { from: 1, to: 3, color: "orange", pp: "M0 8 L2 0" },
      { from: 3, to: 4, pp: "M0 3 L4 0 2 6 6 3" },
      { from: 4, to: 1, color: "green" }
    ]);

  function test() {
    var link = myDiagram.selection.first();
    if (link instanceof go.Link) {
      myDiagram.model.commit(m => m.set(link.data, "color", "green"));
    }
  }
9

Looks good,
Thanks

10

One question,
i see that each time we want to change the link color, the binding create NEW Shape, if we’re talking about network monitoring, it could be resource consuming.
Anyway to avoid NEW shapes on a change, namely create a permanent “PathPattren” shape ?

11

That is why I suggested creating a collection of Shapes, one per color.

12

I see,
It’s ok for now.
Thanks