How do I change the link routing pattern?

GoJS
1

How do I achieve the “white link pattern” as shown in below diagram?

Diagram Line
Diagram Line1607×438 36 KB

2

Do you mean instead of the diagonal red or green lines? How are those links defined?

3

I want to change the red line and green line drawings to look like the white line pattern.

Here is the code:

export class BarLink extends go.Link {
  getLinkPoint(node: any, port: any, spot: any, from: any, ortho: any, othernode: any, otherport: any) {
    const r = port.getDocumentBounds();
    const op = otherport.getDocumentPoint(go.Spot.Center);
    const main = node.category === "Line" ? node.findMainElement() : othernode.findMainElement();
    const mainOffY = main.actualBounds.y;
    let y = r.top;
    if (node.category === "Line") {
      y += mainOffY;
      if (op.x < r.left) return new go.Point(r.left, y);
      if (op.x > r.right) return new go.Point(r.right, y);
      return new go.Point(op.x, y);
    } else {
      return new go.Point(r.centerX, r.bottom);
    }
  }
}

//Use BarLink class for below linkTemplate
 this.looDiagram.linkTemplate =
      $(BarLink,  // defined below
        { toShortLength: 4, layerName: "Background", locationSpot: go.Spot.Center, corner: 1 },
        /*new go.Binding("routing", "", (e) => {
          if (e.to === 'timeline')
            return go.Link.None;
          else
            return go.Link.
        }),*/
        new go.Binding("routing", "", (e) => {
          if (e.to === 'timeline')
            return go.Link.None;
          else
            return go.Link.Orthogonal
        }),
        $(go.Shape, { stroke: "#519ABA", strokeWidth: 2 },
          new go.Binding("visible", "type", (e) => {
            if (e === "dp" || e === "cdp" || e === "objective")
              return false;
            else (e === "dd")
            return true;
          }),
          new go.Binding("stroke", "", (e) => {
            if (e.timeline == 0)//only for DDay
              return '#2300FF'
            else
              return e.color
          })
        )
      );
4

This is incorrect – cleaned up it should be:

new go.Binding("routing", "to", t => t === "timeline" ? go.Link.Normal : go.Link.Orthogonal)

Don’t use the empty string source unless you must, as you do in of your “stroke” binding where you use more than one property of the data. And the value for Link.routing should be go.Link.Normal, not None.

But with respect to your question, which way are those red or green links connected with the timeline? If they are pointing “to” the timeline, then you are explicitly saying that the link should be routed “direct” rather than “orthogonal”. Why bother having this Binding at all?

5

The actual node that connected to the timeline is the Rectangle shape node. For the other nodes on the timeline are placing based on the position and not connected at all with the timeline. The red and green links not connected to the timeline. The links only for connecting the star and the first triangle only and the other triangle stacked below it only based on the position and order.

I need to cover two scenarios here:

  1. The link need to be connected back to the timeline after branch out from the timeline.
  2. The link need to be connected to the Circle shape after branch out from the timeline.

There are no problems in connecting back based on the above scenario.i just make the toPort connect to the intended node. For 1st scenario, I create an invisible node and then the red link connected back to it.

6

It sounds like you may want a separate link template, not using BarLink, for the green/red links that connect the triangles to the stars. That link template can use orthogonal routing.

For the links from the triangles back to the timeline, how do you know where on the timeline they’re meant to connect? Maybe you could use some kind of dummy node to easily achieve such routing.