Display link label on the side of orthogonal link

GoJS
1

I want my link label to be displayed on the side of the link and not cutting through it. I am able to see the example for normal links , How can i do the same for ORTHOGONAL links in flowchart example ?

myDiagram.linkTemplate =
fg(go.Link, {
routing: go.Link.AvoidsNodes,
adjusting: go.Link.End,
curve: go.Link.JumpOver,
corner: 5,
toShortLength: 4,
relinkableFrom: true,
relinkableTo: true,
reshapable: true,
resegmentable: true,
doubleClick: linkDetails,
mouseEnter: function(e, link) {
link.findObject(“HIGHLIGHT”).stroke = “rgba(30,144,255,0.2)”; //NO I18n
},
mouseLeave: function(e, link) {
link.findObject(“HIGHLIGHT”).stroke = “transparent”; //NO I18n
}
},
new go.Binding(“points”).makeTwoWay(), //NO I18n
fg(go.Shape, {
isPanelMain: true,
strokeWidth: 8,
stroke: “transparent”, //NO I18n
name: “HIGHLIGHT” //NO I18n
}),
fg(go.Shape, {
isPanelMain: true,
stroke: “gray”, //NO I18n
strokeWidth: 2
},
new go.Binding(“stroke”, “color”).makeTwoWay() //NO I18n
),
fg(go.Shape, {
toArrow: “standard”, //NO I18n
stroke: null,
fill: “gray” //NO I18n
}),
fg(go.Panel, “Auto”, { //NO I18n
visible: true,
name: “LABEL”, //NO I18n
segmentFraction: 0.5,
segmentOffset: new go.Point(0, -20),
segmentOrientation: go.Link.OrientUpright
},
new go.Binding(“visible”, “visible”).makeTwoWay(), //NO I18n
fg(go.Shape, “RoundedRectangle”, { //NO I18n
fill: “#FFF”, //NO I18n
stroke: null
}),
fg(go.TextBlock, {
textAlign: “center”, //NO I18n
font: “10pt helvetica, arial, sans-serif”, //NO I18n
stroke: “black”, //NO I18n
background: “#FFF”, //NO I18n
editable: false
},
new go.Binding(“text”, “text”).makeTwoWay() //NO I18n
)
)

2

It is difficult for me to understand what you have done and what and how you want something different.

I assume you have read GoJS Link Labels -- Northwoods Software.

3

I want the link to not cut through the link label as in

while the link cuts throught the link label when nodes are moved around

I am using segmentOffset: new go.Point(0, -20),

this works correctly if the links are not orthogonal as given in GoJS Link Labels -- Northwoods Software

4

I’m not sure there’s an easy solution for all such cases. I’ll need to investigate.

5

Thanks. Please do investigate and get back to me . It would be helpfull if i can place the linklabel parallel to 2nd segment of the link.

6

If you set { alignmentFocus: go.Spot.TopLeft }, it generally avoids crossing over its own link path except in certain circumstances. Or you can use a different corner spot. Or a slightly offset spot.

There isn’t an easy way to make it smarter for those few cases where the label might cross over. Note that in such cases it actually isn’t crossing over the segment to which it is attached, but over a different segment.

Since the route might be arbitrarily contorted and crossing over itself, guaranteeing that a label would not overlap the route, while still being “close” to it, would require some smarter computations.