Customizing link adornment

GoJS
1

Hi,
Im trying to customize link’s adornment.
As I want to show a small rectangle on a link, when link selection happens.

In the adornment im trying to place it after 20px, but its always showing it in the middle of the link.
I tried using alignment property with different values.

Below is my link template
myDiagram.linkTemplate =
$(go.Link,
{
<span =“apple-tab-span”="" style=“white-space:pre”> routing: go.Link.Orthogonal, corner: 5, adjusting: go.Link.End},
$(go.Shape,
{ stroke: “gray”, strokeWidth: 1.5 }),
<span =“apple-tab-span”="" style=“white-space:pre”>
<span =“apple-tab-span”="" style=“white-space:pre”> {
selectionAdornmentTemplate:
$(go.Adornment,“Spot”,
$(go.Shape,“Rectangle”,
{ <span =“apple-tab-span”="" style=“white-space:pre”> width : 20,
height : 10,
//isPanelMain : true,
fill : “lightBlue”,
stroke : “blue”,
strokeWidth : 2,
alignment : go.Spot.Left
<span =“apple-tab-span”="" style=“white-space:pre”> }
<span =“apple-tab-span”="" style=“white-space:pre”> )
<span =“apple-tab-span”="" style=“white-space:pre”> ) // end Adornment
}
);

How to place the rectangular shape on the proper place ?

2

I think you really want your Adornment to be of type “Link”, not “Spot”. That way you can use all of the standard “segment…” and “alignment” properties that would apply to non-path elements of a Link.

Have you read http://gojs.net/latest/intro/linklabels.html? That will give you the background you need to do what you want. It isn’t clear to me what you mean by “place it after 20px”. The nature of the segments (i.e. number of segments and the routing of the link) depends on various properties of the Link, so that will affect which “segment…” properties you use and what values you give them.

3

Hi, Im able to change the adornment position using segmentIndex and segmentFraction.
But one problem here I’m facing is, When I change the adornment of one link its effecting all the link’s.

Below is my code added in commitlinks

<span =“apple-tab-span”="" style=“white-space:pre”> var linkAdornment = link.selectionAdornmentTemplate.findObject(“select”);
<span =“apple-tab-span”="" style=“white-space:pre”> linkAdornment.segmentIndex = 0;
<span =“apple-tab-span”="" style=“white-space:pre”> linkAdornment.segmentFraction = 0.5;

and links adornment template

    selectionAdornmentTemplate:
      $(go.Adornment,"Link",
        $(go.Shape,"Rectangle", 
          { <span ="apple-tab-span"="" style="white-space:pre">	</span>

<span =“apple-tab-span”="" style=“white-space:pre”> name : “select”,
<span =“apple-tab-span”="" style=“white-space:pre”> width : 20,
height : 10,
//isPanelMain : true,
fill : “lightBlue”,
stroke : “blue”,
strokeWidth : 2
<span =“apple-tab-span”="" style=“white-space:pre”> }
<span =“apple-tab-span”="" style=“white-space:pre”> )
<span =“apple-tab-span”="" style=“white-space:pre”> )

How it can be avoided, and can reflect only on particular links ?

4

By their nature templates are shared. I suggest that you data bind the two “segment…” properties on your Adornment’s Shape to properties on your link data.