Question regarding link routing

GoJS
1

Hi there,
We have a question regarding the drawing of links.
The following situation occors:

gojsticket
gojsticket1461×561 27.7 KB

The thing we want to change here is the drawing of the link at the place of the arrow. You can see the link is overlapping with the text, so what we want is move the overlapping links a bit down so it ‘makes a turn’ after te text.

We tried playing around with toEndSegmentLength, but it seems that value is kind of a minimal distance and not a maximum. Is there any way to do this?

Here is our link configuration:

const $ = go.GraphObject.make;

    return $(go.Link,
      {
        routing: go.Link.AvoidsNodes,
        curve: go.Link.JumpOver,
        corner: 5,
        toShortLength: 3,
        relinkableFrom: false,
        relinkableTo: false,
        reshapable: false,
        resegmentable: false,
        fromEndSegmentLength: 40,
        toEndSegmentLength: 20,
      },
      {
        // mouse-overs subtly highlight links:
        mouseEnter: (_e: any, link: any) => link.findObject(Highlight).stroke = 'rgba(30,144,255,0.2)',
        mouseLeave: (_e: any, link: any) => link.findObject(Highlight).stroke = 'transparent',
        selectionAdorned: false,
      },
      $(go.Shape,  // the highlight shape, normally transparent
        { isPanelMain: true, strokeWidth: 8, stroke: 'transparent', name: Highlight }),
      $(go.Shape,  // the link path shape
        { isPanelMain: true, stroke: 'gray', strokeWidth: 2 },
        new go.Binding('stroke', 'isSelected', (sel: any) => sel ? 'dodgerblue' : 'gray').ofObject()),
      $(go.Shape,  // the arrowhead
        { toArrow: 'standard', strokeWidth: 0, fill: 'gray' }),
      $(go.TextBlock,
        new TextStyle(),
        {
          stroke: Constants.ColorBlack,
          wrap: go.TextBlock.WrapFit,
          editable: false,
          textAlign: 'left',
          background: 'white',
          minSize: new go.Size(100, 0),
          maxSize: new go.Size(Constants.StepWidth - 15, Constants.StepHeight),
          visible: false,
          segmentIndex: 0,
          overflow: go.TextBlock.OverflowEllipsis,
          maxLines: 2,
        },
        new go.Binding('text', 'title', (val: any) => val[this.translate.currentLang]),
        new go.Binding('visible', 'title', (title: any) => title ? true : false),
        new go.Binding('segmentOrientation', 'fromPort', (val: any) => val === Constants.PortRight ? go.Link.OrientUpright : undefined),
        new go.Binding('segmentOffset', 'fromPort', (val: any) => val === Constants.PortRight ? new go.Point(55, NaN) : new go.Point(15, 0)),
        new go.Binding('textAlign', 'fromPort', (val: any) => val === Constants.PortRight ? 'left' : 'center')
      )
    );

I created a desired situation screenshot:

gojsdesiredsituation
gojsdesiredsituation1538×596 28.4 KB

Thanks in advance!

2

The problem is that AvoidsNodes routing doesn’t know about that “Approve purchase” label that is on an unrelated Link. I think you need to increase the Node.avoidableMargin of the Node from which the Link with the label comes from. (fromEndSegmentLength would only affect the routing of the Link at its Link.fromNode, not how the route would avoid unrelated nodes.)

As the simplest, most expedient, experiment, try setting avoidableMargin: new go.Margin(2, 2, 30, 2) on the node template for the “To approve by purchase…” Node. You will probably need to fiddle with the actual numbers.

The more sophisticated solution would be to compute the needed avoidableMargin, either in a Binding on that Node or in an override of Node.getAvoidableRect.

BTW, I don’t think you need to set or bind segmentOrientation at all. I’m not sure about minSize either.

3

Thanks a lot for the advice, that indeed helps us and fixes the problem!
Marked as answered.