Selection theming of Links with TextBlocks

[mo]

Hi there,

we use a lot of Links with TextBlocks and Shapes together (see screenshot). How can we style the selection part of the Link, so that text & icons are still readable/visible? Is there a kind of z-index for the shape & text or could the selection line even wrap (go around) the shape?

Thanks in advance
Moritz

[walter]

There are several ways to do that, depending on the appearance and behavior that you want.

The first question is whether or not you need that blue line shown when the Link is selected. If not, then you could set Link.selectionAdorned to false in order to avoid showing a Selection Adornment for a selected Link.

If you do want to show something along the Link.path, then maybe you don’t want to show a selection Adornment, by setting Link.selectionAdorned to false, and you want to change the appearance of the Link.path. Perhaps something like this:

myDiagram.linkTemplate =
  new go.Link({
      . . .,
      selectionAdorned: false
    })
    .add(
      new go.Shape()
        .bindObject("stroke", "isSelected", s => s ? "dodgerblue" : "black")
        .bindObject("strokeWidth", "isSelected", s => s ? 3 : 1),
      new go.Shape({ toArrow: "OpenTriangle" }),
      new go.Panel("Auto")
        .add(
          new go.Shape("RoundedRectangle", { fill: "gray", strokeWidth: 0 }),
          new go.TextBlock({ margin: new go.Margin(8, 8, 6, 8), stroke: "white" })
            .bind("text")
        )
    );