Display button on link hover at fixed position

GoJS
1

I want a button to appear over a graph link when hovered on. The location of button should be at a fixed distance from the “to” node ( say 10 units ).
I am able to get the button rendered only on hover with the help of this sample. However, I am struggling to get it appear at the exact position from the “to” node, its coming only at the center of the link.
I tried using segment fraction and segment index, but, they aren’t functioning in the hover adornment.
Code for the hover adornment :-

 const linkHoverAdornment = $(go.Adornment, 'Spot',
        {
            background: 'transparent',
            mouseLeave(e, graphObject) {
                const ad = graphObject.part;
                ad.adornedPart.removeAdornment('mouseHover');
            }
        },
        $(go.Placeholder,
            {
                background: 'transparent',
                isActionable: true, 
                click(e, graphObject) {
                    const node = graphObject.part.adornedPart;
                    node.diagram.select(node);
                }
            }),
        $('Button', {
            click: addSpec,
            'ButtonBorder.figure': 'Circle',
            width: 20,
            'ButtonBorder.stroke': 'cyan',
            'ButtonBorder.strokeWidth': 1
        },
        $(go.Shape, 'PlusLine', {
            fill: 'cyan',
            stroke: 'darkcyan',
            width: 12,
            height: 12
        })
        ),
    );

Code for the link template of part where the adornment is linked:-

 const linkTemplate = $(go.Link, …. ,
{
            mouseHover(e, object) {
                const graphObject = object.part;
                linkHoverAdornment.adornedObject = graphObject;
                graphObject.addAdornment('mouseHover', linkHoverAdornment);
            }
        }
);

This is what I am getting as of now
image

This is how I want it to be:

image
image861×473 29.3 KB

2

I think this does something like what you are asking for:

    myDiagram.linkTemplate =
      $(go.Link,
        {
          routing: go.Link.Orthogonal,
          mouseHover: (e, link) => {
            linkHoverAdornment.adornedObject = link;
            link.addAdornment('mouseHover', linkHoverAdornment);
          },
          mouseLeave: (e, link) => {
            link.removeAdornment('mouseHover');
          }
        },
        $(go.Shape, { isPanelMain: true, strokeWidth: 4, stroke: "transparent" }),
        $(go.Shape, { isPanelMain: true, strokeWidth: 1.5 }),
        $(go.Shape, { toArrow: "Standard" })
      );

    const linkHoverAdornment = 
      $(go.Adornment, "Link",
        {
          mouseLeave: (e, ad) => {
            ad.adornedPart.removeAdornment('mouseHover');
          }
        },
        $(go.Shape, "Circle",
          {
            width: 10, height: 10, fill: "lime",
            segmentIndex: -2, segmentOffset: new go.Point(-20, 0)
          })
    );