segmentFraction not working

GoJS
1

Following the docs here, the blue circle should’ve been towards the “to” node. However, it’s sticking to the “from” node:

Here’s my link template:

myDiagram.linkTemplate =
    $$(go.Link,
        {routing: go.Link.AvoidsNodes, corner: 5},
        $$(go.Shape, {strokeWidth: 1, stroke: colours.light_gray}),
        $$(go.Shape, {toArrow: "Standard", fill: colours.light_gray, stroke: colours.light_gray}),
        $$(go.Shape, "Ellipse", {
            segmentIndex: 0,
            segmentFraction: 0.8,
            width: 30,
            height: 30,
            fill: "rgb(82, 172, 248)",
            strokeWidth: 0
        })
    );

What am I doing wrong?

2

AvoidsNodes routed links typically have many points, and thus many segments, in them. You specified that the segmentIndex be 0, which means the first segment. A segmentFraction of 0.8 means eight-tenths of the way on that short first segment.

Probably you want to set segmentIndex to -2 for the next-to-last segment, but I’m not sure exactly what you want.

3

@walter, what Id like to have is the blue disc towards the end of the link, not the start. Let me quickly try the -2 solution and check.

4

Hey @walter, so -2 did the trick. However, the disc still moves around if the segment becomes big (moves away from the “to” node). It’s because I’m specifying 0.2 as the fragmentFraction.

If I set the fragmentFraction to 0, then it sticks to the “to” node. Now, I’d like to keep a fixed distance from the “to” node, so I thought of adding a margin to the disc as follows:

margin: new go.Margin(0, 0, 20, 0)

However, the disc still sticks to the “to” node - it doesn’t keep a fixed 20 pixels from the “to” node.

I’d like to have the disc always 20 pixels away from the “to” node, so that the arrow is visible, and it doesn’t move depending on the length of the link.

5

Specify something like:

  { segmentIndex: -2, segmentOffset: new go.Point(-20, 0) }
6

Perfect! Thanks a ton @walter!