Link Bezier link label not center

GoJS
1

What I did I could not center the link tag

How do I center Label ?

Untitled
Untitled.png883Ă—328 22.5 KB

My linkTemplate :

this.diagram.linkTemplate =
            goMake(go.Link,
                {
                    curve: go.Link.Bezier,
                    toShortLength: 0.5,
                    fromEndSegmentLength: 20, toEndSegmentLength: 50,
                    zOrder: -1
                },
                goMake(go.Shape),
                goMake(go.Shape, { toArrow: "Standard" }),
                goMake(go.Panel, "Auto", { segmentIndex: 1, segmentFraction: 0.5 },
                    goMake(go.Shape, { fill: "yellow", stroke: "gray" }),
                    goMake(go.TextBlock, { margin: 3, text: "Test" },
                        new go.Binding("text", "text"))
                )
            );
2

Don’t set any segment… property on the link label.

3

I removed the segment, but the same situation continues

this.diagram.linkTemplate =
                goMake(go.Link,
                    {
                        curve: go.Link.Bezier,
                        toShortLength: 0.5,
                        fromEndSegmentLength: 20, toEndSegmentLength: 50,
                        zOrder: -1
                    },
                    goMake(go.Shape),
                    goMake(go.Shape, { toArrow: "Standard" }),
                    goMake(go.Panel, "Auto",
                        goMake(go.Shape, { fill: "yellow", stroke: "gray" }),
                        goMake(go.TextBlock, { margin: 3, text: "Test" },
                            new go.Binding("text", "text"))
                    )
                );
4

Screenshot?
Could you please debug it by looking at the label panel in memory to make sure its segment… properties are at their default values?

5

Yeah, I looked at the values. Values ​​are default values.

I couldn’t find what values ​​you made
can you help me?

No problem with this example. But it’s not in my own project.

6

Your link template looks OK, because it doesn’t set any relevant properties on the label (i.e. the “Auto” Panel).

If you are getting exactly the same behavior as before, as you showed in your first post of this topic, then maybe you are not using the updated link template that you think you are using. Or maybe there is some other code that is modifying the link label dynamically.

7

Can you please look at the example now?

I created the non-centering case in the example

This problem occurs after using LinkDrawnEvent

Please look at the example

8

Try always setting fromEndSegmentLength to the same value as toEndSegmentLength. 50 in your case.

9

Isn’t there any chance of solving this otherwise?
Because when you give the same value, the link breaks and creates a bad image

10

Not easily. You could try setting these properties on your label:

{ segmentIndex: 1, segmentFraction: 0.5, segmentOffset: new go.Point(15, 0) },

But that doesn’t have quite the same effect.

Alas, GraphObject.segmentOffset does not affect the positioning of mid labels.

11

I try, but it doesn’t.
how to solve this situation linklabel is not centered
does not center when using these two values

fromEndSegmentLength: 20, toEndSegmentLength: 50,

I’ve tried your suggestion walter is not please can we find a definite solution?

Untitled
Untitled.png1192Ă—422 47.3 KB

12

I think you may need to override Link.computeMidPoint to return what you want.
It takes a Point argument that you should modify and return.

13

We’re currently working on some improvements to the library for positioning of link labels along the link’s route which should be coming out in the next release. Those changes should make it easier to achieve what you want here.

1 Like
14

We just released 2.1.4, which includes improvements to finding points along a link route using segmentIndex and segmentFraction. You can try using segmentIndex: NaN, segmentFraction: .5 to position your labels at the halfway point of the whole link.

15

jhardy Thank you so much.