Several link labels in link center

GoJS
1

Hi,
I got two questions:

a) Is there a way to have several textblocks on the center of a link but without a panel to put them together?
b) I’m playing around with segmentOrientation, is there a way to set a threshold for the rotation of the text? I mean, like do not rotate the text unless the perpendicular segment length is not at least y px

2

You can have a single label that consists of a Panel holding multiple TextBlocks (or anything else). Or you can have multiple labels, each of which is a TextBlock (or anything else). Whatever you want. This discusses how to arrange labels on a link: GoJS Link Labels -- Northwoods Software. It has some examples of multiple labels. I guess you have already read this.

No, the behavior of each of the enumerated segmentOrientation values is fixed. There is no easy way to extend or customize the behavior. Sorry. But you can probably implement your own code to set the segmentOrientation depending on the angle of the link.

3

Thanks for the answer! I have read the intro about labels, however can I put them all in the middle? like:

          txt1  txt2  txt3

--------------------------------->

I understand this can be done with a panel, but can it be done without it? (I just want to rotate the middle text)

4

I’m sorry, but I don’t understand what you want to do. Could you show a screenshot or sketch of what would happen when the link goes at 45 degrees or 90 degrees or 135 degrees?

5

Hi, something like this:
The idea would be to have T1 and T3 with segmentOrientation = Link.OrientUpright and T2 would be with Link.None (or OrientAlong?)

6

Well, it would be easiest to implement those as three separate labels. T1 and T3 would have segmentOrientation == go.Link.OrientAlong, and you wouldn’t bother setting segmentOrientation on T2, since None means it stays the way it is normally.

You’ll need to set segmentOffset to get the labels not to be centered on the link.

You’ll need to set segmentFraction on T1 and T3 to make them be a distance from the middle.

7

is there any way to make sure that T3 does not overlap with T2?

8

If you can guess the size of the labels, it’s easy:

    myDiagram.linkTemplate =
      $(go.Link,
        $(go.Shape),
        $(go.Shape, { toArrow: "OpenTriangle" }),
        $(go.TextBlock, "T1", { segmentOffset: new go.Point(-20, 12), segmentOrientation: go.Link.OrientAlong }),
        $(go.TextBlock, "T2", { segmentOffset: new go.Point(0, 12), stroke: "orange" }),
        $(go.TextBlock, "T3", { segmentOffset: new go.Point(20, 12), segmentOrientation: go.Link.OrientAlong })
      );

which produces:

9

Cool, but can I like refer to the width (or calculate it somehow based on what its contents it) of T2?

10

Sure, just look at the actualBounds of that TextBlock.

11

great! so piecing everything together I would have the below?

let T1 = $(go.TextBlock, "T1", {segmentOffset: new go.Point(0, 12), segmentOrientation: go.Link.OrientAlong })
let T2 = $(go.TextBlock, "T2", {segmentOffset: new go.Point(T1.actualBounds.right,12),stroke: Orange, margin: new Margin(0,5,0,5)  }) //Added a margin to prevent overlappings and stuff
let T3 = $(go.TextBlock, "T3", {segmentOffset: new go.Point(T2.actualBounds.right, 12), segmentOrientation: go.Link.OrientAlong })
myDiagram.linkTemplate =
      $(go.Link,
        $(go.Shape),
        $(go.Shape, { toArrow: "OpenTriangle" }),
T1,T2,T3      );
12

That’s not going to work because the naturalBounds, measuredBounds, and actualBounds aren’t computed until after the Link is routed and measured and arranged. Those properties certainly won’t be known when you are building the template.

If those strings really are constant, I suggest that you get the size from an instance in your diagram and then plug that number into your template.

If those strings will be of varying size, it would be best to do it much later, perhaps in an “InitialLayoutCompleted” DiagramEvent listener.