Different link templates for horizontal segment, and vertical segment

GoJS
1

This is what my link template looks like:

myDiagram.linkTemplate =
    $$(go.Link,
        {routing: go.Link.AvoidsNodes, corner: 10},
        $$(go.Shape, {strokeWidth: 2, stroke: colours.light_gray}),
        $$(go.Shape, {toArrow: "Standard", fill: colours.light_gray, stroke: colours.light_gray})
        ...

Now, I am able to place items in the center of the link.

However, how can I specify different link templates depending on how the link is being drawn (i.e. horizontally vs vertically)?

Here is what I want to achieve:

Note the placement of the text when the link is drawn vertically vs horizontally.

2

This can be accomplished. But what do you want to happen when the links connect at the top and the right sides? Or some other combination of sides?

Do you have any Layout operating on the nodes and links? Probably your Diagram.layout.

3

The links that connect to the top and bottom will have the text to the right of the icon, and the links that connect to the right and left will have the text to the bottom of the icon.

I’m using the default layout right now (haven’t explicitly set one).

4

Please read my question again.

Or what should happen when there are links on all four sides?

5

Here’s what the expected behaviour should be:

6

OK, apparently I misunderstood your situation – I thought that those purple things were nodes. But you mean for them to be labels on links, yes?

Assuming that’s the case, then I assume you don’t have any trouble defining that purple circle as a mid label on the link. GoJS Link Labels -- Northwoods Software

And presumably you know how to define the TextBlock as a separate label either to the side or underneath by setting GraphObject.segmentOffset, but not dynamically depending on the orientation of the link. So all you need to know is that you could define a subclass of Link that overrides the Link.computePoints method. Call the super method and remember the result. If the result is true, you can look at the Link.midAngle and decide which of the two GraphObject.segmentOffset values to set. Finally return the result of the super call.

7

Yes, I have already got the link decoration done.

Could you please give me a small example on subclassing Link?

8

There are many examples of classes inheriting from Link. Look for go.Diagram.inherit(, the custom class, followed by , go.Link);

9

Thanks a lot @walter!

I didn’t end up using midAngle, as my link routing is Orthogonal. Instead, I calculated the slope between the last two points, and placed the text accordingly. I also set toEndSegmentLength to ensure that the link is not segmented in the middle of my link decoration.