Forcing Orthogonal link pattern to take a particular fasio

gojs%20link%20question1

I want to create a link between my nodes, like the above picture.

I tried Orthogonal, but I am not able to set the default length of the first part of the outgoing link (link part 1 in screenshot), or the ending part (link part 2), to a number.
The fromEndSegment, and toEndSegment, if I set to 0, I get a link which travels from the bottom of the top node, to the center of the bottom node, with one 90 degree break. If I set it to 20, 25, then the link part 1, and link part 2, are slanted.

How can I force this link pattern in my link template ?

Thanks!

Maybe you just want to bind Link.curviness to a number? In this situation the default is zero: the horizontal segment would be at the vertical middle between the two penultimate points.

Hi Walter,

Thanks for your prompt reply. I set the linking to Orthogonal, and set the curviness to 20, 90 etc. and I wasable to get this result only (screenshot)curviness

My settings on the link template is:

 $(go.Link, go.Link.Orthogonal,
    // when using fromSpot/toSpot:
     { fromSpot: new go.Spot(0, 1, 6, 0), toSpot: new go.Spot(0, 0, 6, 0)},
    new go.Binding("fromEndSegmentLength", "segment"),
    new go.Binding("toEndSegmentLength", "segment"),
    new go.Binding('curviness', 'curviness'),
    new go.Binding('corner', 'corner'),
    //new go.Binding("curviness", "curviness"),
    $(go.Shape,  // the link shape
      { stroke: "black", strokeWidth: 1}),
    $(go.Shape,  // the arrowhead, at the mid point of the link
      { toArrow: "" })
  );

fromEndSegment, toEndSegment is 0, curviness is any value like 90, even 1000, and corner is 5

From your example list, I found an example for curviness, but they suggest to use it only if there is no from and to Spot definitions.

When I remove the fromSpot and toSpot definitions, I get the desired link shape. However I want the from and to Spot also to be enforced. Is this not possible to do ?

Thanks!

OK, here is a simple complete sample demonstrating binding Link.curviness on Orthogonal routing Links:

  function init() {
    var $ = go.GraphObject.make;

    myDiagram =
      $(go.Diagram, "myDiagramDiv",
          {
            initialContentAlignment: go.Spot.Center,  // for v1.*
            layout: $(go.GridLayout, { wrappingColumn: 1, spacing: new go.Size(60, 60) })
          });

    myDiagram.nodeTemplate =
      $(go.Node, "Auto",
        { width: 80, height: 50, fromSpot: go.Spot.TopBottomSides, toSpot: go.Spot.TopBottomSides },
        $(go.Shape,
          { fill: "white" },
          new go.Binding("fill", "color")),
        $(go.TextBlock,
          new go.Binding("text"))
      );

    myDiagram.linkTemplate =
      $(go.Link,
        { routing: go.Link.Orthogonal },
        new go.Binding("curviness"),
        $(go.Shape),
        $(go.Shape, { toArrow: "Standard" }),
        $(go.TextBlock, { stroke: "red", background: "white" },
          new go.Binding("text", "curviness"))
      );

    myDiagram.model = new go.GraphLinksModel(
    [
      { key: 1, text: "Alpha", color: "lightblue" },
      { key: 2, text: "Beta", color: "orange" },
      { key: 3, text: "Gamma", color: "lightgreen" },
      { key: 4, text: "Delta", color: "pink" },
      { key: 5, text: "Epsilon", color: "coral" }
    ],
    [
      { from: 1, to: 2, curviness: 0 },
      { from: 2, to: 3, curviness: 10 },
      { from: 3, to: 4, curviness: -20 },
      { from: 4, to: 5, curviness: 20 }
    ]);
  }

Here are the results after I manually drag Beta and Delta towards the right:

You can see how each Link’s routing has the middle (horizontal) segment at larger or smaller Y coordinate values depending on the value of Link.curviness.

Thanks for the sample. Will the above work if I set a custom fromSpot and toSpot in node template ?

function init() {
var $ = go.GraphObject.make;

myDiagram =
$(go.Diagram, “myDiagramDiv”,
{
initialContentAlignment: go.Spot.Center, // for v1.*
layout: $(go.GridLayout, { wrappingColumn: 1, spacing: new go.Size(60, 60) })
});

myDiagram.nodeTemplate =
$(go.Node, “Auto”,
{ width: 80, height: 50, fromSpot: new go.Spot(0, 1, 6, 0), toSpot: new go.Spot(0, 0, 6, 0) },
$(go.Shape,
{ fill: “white” },
new go.Binding(“fill”, “color”)),
$(go.TextBlock,
new go.Binding(“text”))
);

myDiagram.linkTemplate =
$(go.Link,
{ routing: go.Link.Orthogonal },
new go.Binding(“curviness”),
$(go.Shape),
$(go.Shape, { toArrow: “Standard” }),
$(go.TextBlock, { stroke: “red”, background: “white” },
new go.Binding(“text”, “curviness”))
);

myDiagram.model = new go.GraphLinksModel(
[
{ key: 1, text: “Alpha”, color: “lightblue” },
{ key: 2, text: “Beta”, color: “orange” },
{ key: 3, text: “Gamma”, color: “lightgreen” },
{ key: 4, text: “Delta”, color: “pink” },
{ key: 5, text: “Epsilon”, color: “coral” }
],
[
{ from: 1, to: 2, curviness: 0 },
{ from: 2, to: 3, curviness: 10 },
{ from: 3, to: 4, curviness: -20 },
{ from: 4, to: 5, curviness: 20 }
]);
}

I tried it … its slanting the first and last part of the link, but the breaks are good. Why does the slant occur ?

By default the angle of the end segment for the corner Spots (0,0), (1,0), (0,1), and (1,1) are at 225, 315, 45, and 135 degrees. So don’t use Spots with those x and y values.