On-the-fly changing of linkTemplate

GoJS
1

Hi,
I would like to update the graph link template before exporting the graph as a JPG file.
I saw that using a transaction I can set a whole new linkTemplate to the diagram simply using this, do you agree?

myDiagram.startTransaction("update_template");
var oldTemplate = myDiagram.linkTemplate;
myDiagram.linkTemplate = $(go.Link, ...);
myDiagram.makeImage();
myDiagram.linkTemplate = oldTemplate;
myDiagram.commitTransaction("update_template");

But in my case, I need to change only one property of the template (i.e. the line width) and I do not know how to directly access the strokeWidth property of the "Link ==> Shape" structure and set it to a fixed value (i.e. one pixel).
This is my linkTemplate (getLinkColor(), getLinkWidth() and getLinkLabel() are not included for brevity):

myDiagram.linkTemplate = $(go.Link,
    { selectable: false },
    $(go.Shape,
        new go.Binding("stroke", "cabletype", getLinkColor),
        new go.Binding("strokeWidth", "cabletype", getLinkWidth)
    ),
    $(go.Panel, "Auto",
        $(go.TextBlock,
            {
                textAlign: "center",
                font: "13pt helvetica, arial, sans-serif",
                stroke: "black",
                margin: 4
            },
            new go.Binding("text", "", getLinkLabel)
        )
    )
);

Is it possible to do that?

Thanks,
Guido

2

You could replace the template(s), but if you are just wanting to temporarily set Shape.strokeWidth to 1 on all of your links, why not do exactly that?

myDiagram.links.each(function(l) {
    l._saved = l.path.strokeWidth;
    l.path.strokeWidth = 1;
});

var img = myDiagram.makeImage(...);

myDiagram.links.each(function(l) {
    l.path.strokeWidth = l._saved;
});
3

Well, l.path.strokeWidth was the missing piece for me, I did not known how to access that… I will try in a couple of hours, thank you very much, Walter! :)

4

It worked fine! Another question about a similar property… if the following one is the linkTemplate,

myDiagram.linkTemplate = $(go.Link,
    { selectable: false },
    $(go.Shape,
        new go.Binding("stroke", "cabletype", getLinkColor),
        new go.Binding("strokeWidth", "cabletype", getLinkWidth)
    ),
    $(go.TextBlock,
        {
            textAlign: "center",
            font: "13pt helvetica, arial, sans-serif",
            stroke: "black",
            background: "white",
            margin: 4
        },
        new go.Binding("text", "", getLinkLabel)
    )
);

How can I access the background property inside the TextBlock from the loop you suggested?

myDiagram.links.each(function(l) {
    l._saved = l.path.strokeWidth;
    l.path.strokeWidth = 1;
    l.text.background = null; // it does not seem to work...
});
5

Part.text is a string, not a TextBlock. You need to find the TextBlock in each Link. Either give the TextBlock a GraphObject.name and then call Panel.findObject with that name, or assume you know how the Link’s elements are organized in your template: in this case by l.elt(1).

7

So, supposing the linkTemplate is exactly the one in the previous post, would it be enough to write like this?

myDiagram.links.each(function(l) {
    l._saved = l.path.strokeWidth;
    l.path.strokeWidth = 1;
    l.elt(1).background = null;
});

Sorry, I’m a beginner at Javascript and I’m still learning GoJS… :-/

8

Just a little follow-up about this… the previous solution was working fine for backgrounds of link labels, but suppose I have another linkTemplate similar to Dynamic Ports sample with labels on both link ends:

// an orthogonal link template, reshapable and relinkable
myDiagram.linkTemplate =
  $(CustomLink,  // defined below
    {
      routing: go.Link.AvoidsNodes,
      corner: 4,
      curve: go.Link.JumpGap
    },
    //new go.Binding("points").makeTwoWay(),
    $(go.Shape,
      new go.Binding("stroke", "type", getLinkColor),
      new go.Binding("strokeDashArray", "empty", getLinkDash),
      new go.Binding("strokeWidth", "type", getLinkWidth)
      ),
    $(go.TextBlock,  // the "from" label
      {
        textAlign: "center",
        font: "bold 13px sans-serif",
        stroke: "Black",
        background: "white",
        segmentIndex: 0,
        segmentOffset: new go.Point(NaN, 0),
        segmentOrientation: go.Link.OrientUpright
      },
      new go.Binding("text", "label")),
    $(go.TextBlock,  // the "to" label
      {
        textAlign: "center",
        font: "bold 13px sans-serif",
        stroke: "Black",
        background: "white",
        segmentIndex: -1,
        segmentOffset: new go.Point(NaN, 0),
        segmentOrientation: go.Link.OrientUpright
      },
      new go.Binding("text", "label"))
  );

Like before, I would like to dynamically set their background to null, too, I thought that this would work, but it does not…

l.elt(0).background = null;
l.elt(1).background = null;

Do you know how to do that?

Thanks,
Guido

9

Panel.elt takes zero-based integer indexes. elt(0) will return the Shape, not a TextBlock.

10

Ok, that is working, thank you very much!