Interactive Link Label On Path

GoJS
1

I’m building a diagram which is similar to the Link Label On Path example

example
example835×535 16 KB

Here’s what it’s looking like so far.
I need to be able to click on the link labels update the colour and width of the link line and also the box around the numbers.

My link template is

this.diagram.linkTemplate = $(
    go.Link,
    {
        selectable: false,
        curve: go.Link.Bezier
    },
    $(
        go.Shape,
        { stroke: '#636363', strokeWidth: 1} // Want the stroke colour and width to change when the below Panel is clicked.
    $(
        go.Panel, 'Auto',
        {
            click: this.linkCountClicked.bind(this)
        },
        $(go.Shape, 'RoundedRectangle', { fill: '#ffffff', stroke: '#636363', strokeWidth: 1}), // Want the stroke colour and width to change when Panel is clicked.

        // Panel to hold each link label
        $(go.Panel, 'Auto',
            $(go.TextBlock, 'Relationships', new go.Binding('text', 'relationships'))
        )
    )
);
// Part of my links data
this.modelData.linkDataArray = [
	{ from: 0, to: 1, relationships: 3, selected: false },
	{ from: 0, to: 2, relationships: 7, selected: false },
	{ from: 0, to: 3, relationships: 1, selected: false }
];
// Click fucntion/
public linkCountClicked(e: any, node: any) {
	node.part.data.selected = true;
}

Am I on the right track?

2

Presumably there’s nothing stopping users from clicking on the link labels. What did you want to happen then? Or did you mean context click (or long press on touch devices)? How did you want users to specify the color and stroke width of the link path?