Adornment for link with a label panel

GoJS
1

Hello,

How would you make a link adornment that outlines link and it’s label?

By default link looks like this:

The closest I came to is:

selectionAdornmentTemplate: $(go.Adornment, 'Auto', $(go.Shape, {
	fill: null,
	stroke: 'dodgerblue',
	strokeWidth: 3
}, new go.Binding('geometry', '', (data, part) => {
		let diagram = part.diagram;
		let geometry;
		if (diagram && diagram.selection) {
			diagram.selection.each((selection) => {
				if (selection.data === data) {
					geometry = selection.geometry.copy();
					selection.elements.each((el) => {
						combineFigures(el, geometry);
					})
				}
			})
		}
		return geometry;
	})
))

And

function combineFigures(el, geometry) {
	
	if (el.geometry) {
		el.geometry.figures.each((fig) => {
			geometry.add(fig)
		})
	}
	else if (el.panel) {
		combineFigures(el.panel, geometry);
	}
}

But it seems that link label is passes by and I got almost same arrow.

2

The Adornment will always be of Panel.type “Link”, so that you can arrange labels in it just as with the labels on the Link itself.

    myDiagram.linkTemplate =
      $(go.Link,
        $(go.Shape),
        $(go.Shape, { toArrow: "OpenTriangle" }),
        $(go.Panel, "Auto",
          $(go.Shape, "RoundedRectangle", { fill: "lightgray" }),
          $(go.TextBlock, { margin: 3 },
            new go.Binding("text", "to", function(t) { return t[0]; }))
        ),
        {
          selectionAdornmentTemplate:
            $(go.Adornment, "Link",
              $(go.Shape, { isPanelMain: true, stroke: "dodgerblue", strokeWidth: 2 }),
              $(go.Panel, "Auto",
                $(go.Shape, "RoundedRectangle", { fill: "lightgray", stroke: "dodgerblue", strokeWidth: 2 }),
                $(go.TextBlock, { margin: 3, stroke: "dodgerblue" },
                  new go.Binding("text", "to", function(t) { return t[0]; }))
              )
            )
        }
      );

Results:

3

So I have to duplicate everything that determines width and position of my label in adornment template? Label is editable so I have to move editor to the adornment as well.

I thought, Isn’t it possible to combine objects?

4

In that case, why use a Part.selectionAdornmentTemplate at all? Set Part.selectionAdorned to false and change the appearance of the objects in the Link when it Part.isSelected.

You can do that either with a Binding like:

    new go.Binding(...someProperty..., "isSelected",
                   function(sel) { return sel ? valueWhenSelected : normalValue; })
             .ofObject()

or with a Part.selectionChanged event handler.