Changing Link Label's Offset Based on the Orientation of the Segment it's On

GoJS
1

Hello,

I’m just starting out with GoJS and perhaps missing something fundamental.

Here’s the problem:

As you can see, when the segment is horizontal, the links labels appear fine. However, when the segment is vertical, they overlap.

I’m trying to find a way to check link segment’s orientation to adjust segmentOffset on the labels.

Perhaps there’s a better approach to achieving this?

Link Template:

linksDiagram.linkTemplate = $(go.Link, { routing: go.Link.Orthogonal, corner: 10 }, new go.Binding('flowDirection', 'flowDirection'), $(go.Shape, { isPanelMain: true, stroke: "black", strokeWidth: 5 }), $(go.Shape, { isPanelMain: true, stroke: "gray", strokeWidth: 3 }), $(go.Shape, { isPanelMain: true, stroke: "white", strokeWidth: 2, name: "PIPE", strokeDashArray: [10, 10] }), $(go.Shape, { toArrow: "Triangle", fill: "black", stroke: null, segmentOffset: new go.Point(5, 0), scale: 1.5 }, new go.Binding('visible', 'flowDirection', function(flowDirection) { return flowDirection == 'natural' ? true : false; }) ), $(go.Shape, { fromArrow: "Triangle", fill: "black", stroke: null, segmentOrientation: go.Link.OrientOpposite, segmentOffset: new go.Point(-5, 0), scale: 1.5 }, new go.Binding('visible', 'flowDirection', function(flowDirection) { return flowDirection == 'reverse' ? true : false; }) ), $(go.TextBlock, { segmentIndex: 0, segmentOffset: new go.Point(30, -12) }, new go.Binding('text', 'fromLabels', function(fromLabels) { return _.isEmpty(fromLabels) ? '' : fromLabels.voltage })), $(go.TextBlock, { segmentIndex: 0, segmentOffset: new go.Point(30, 12) }, new go.Binding('text', 'fromLabels', function(fromLabels) { return _.isEmpty(fromLabels) ? '' : fromLabels.current })), );

Thanks!

2

I don’t know of an easy and general way to accomplish that. If I were you I would increase the 12 to 15 or 18 or whatever.

3

Thanks, Walter!

I’ve done some fiddling and it looks like I can access the fromPortId and toPortId properties of the link when I set the Binding().ofModel().

From there I was able to figure out which direction the links come in/out of the nodes.

Yes, it’s hack’ish, but I was able to get the behavior I wanted.