Link connection points

I have a box which have relations attached to it. It seems like all relations is pointing to an imaginary center point of the box, but i want all relations to attach to the closest point between the node and the top-side of the box ( to get straight lines istead of angled lines ).

From my example i would like the lines from Pump A and Pump B ( as well as other lines ) go vertical down to the System Tank istead of aiming at a center point of the tank. Is this achievable in any way?

Yes – do not specify any GraphObject.fromSpot or GraphObject.toSpot on either the Nodes or the Links. (The spot properties on a Link takes precedence over the properties on the Node port.)

Note that some Layouts, such as TreeLayout and LayeredDigraphLayout, automatically set Link.fromSpot and Link.toSpot to be appropriate for the direction that they are doing the layout. But those layouts have properties to avoid setting them.

I have tried this, removed all from and to spot on both link and node, but still i have all the links pointing towards the center of the box like my example. Something else i need to check?

This is my node template:

$go(go.Node, "Auto",
                   { contextMenu: $go(go.Adornment) },
                   new go.Binding("location", "loc", go.Point.parse),
                   $go(go.Shape, "RoundedRectangle",
                       { name: "SHAPE", fill: "white", portId: "" }
                      ),
                   $go(go.Panel, "Table",
                       $go(go.TextBlock, { row: 0, column: 0, columnSpan: 2 },
                           { font: "Bold 12pt Sans-Serif", textAlign: "center" },
                           new go.Binding("text", "name")),
                       $go(go.TextBlock, { row: 1, column: 0 },
                           { font: "Bold 12pt Sans-Serif", text: "Level", alignment: go.Spot.Left }),
                       $go(go.TextBlock, { row: 1, column: 1 },
                           { font: "Bold 12pt Sans-Serif", desiredSize: new go.Size(150, NaN), margin: 2,  textAlign: "right" },
                           new go.Binding("text", "data", function (d) {
                               return d['Level'];
                           })),
                       $go(go.TextBlock, { row: 2, column: 0 },
                           { font: "Bold 12pt Sans-Serif", text: "Consumption", alignment: go.Spot.Left }),
                       $go(go.TextBlock, { row: 2, column: 1 },
                           { font: "Bold 12pt Sans-Serif", desiredSize: new go.Size(150, NaN), margin: 2,  textAlign: "right" },
                           new go.Binding("text", "data", function (d) {
                               return d['Consumption'];
                           }))) 
                       
            )

And this is my link

$go(go.Link, {
                       contextMenu: $go(go.Adornment), reshapable: true, resegmentable: true, adjusting: go.Link.End, curve: go.Link.JumpGap
                   },
                   new go.Binding("points", "points").makeTwoWay(),
                 
                   $go(go.Shape, {
                           name: "SHAPE", strokeWidth: 2
                       },
                       new go.Binding("stroke", "color")
                       ),
                   $go(go.Shape, {
                           toArrow: "Triangle",
                           scale: 1,
                           segmentOrientation: go.Link.OrientAlong
                       },
                       new go.Binding("stroke", "color"),
                       new go.Binding("fill", "color"),
                       new go.Binding("visible", "toArrow")),
                   $go(go.Shape, {
                           fromArrow: "Triangle",
                           scale: 1,
                           segmentOrientation: go.Link.OrientAlong
                       },
                       new go.Binding("stroke", "color"),
                       new go.Binding("fill", "color"),
                       new go.Binding("visible", "fromArrow")))

I finally managed to partially fix this, but i’m not fully satisfied.

Like in the example Connection Points I get a “port resolution” on the side equal to number of links on that side. A node will link to the “port” which is the closest. In this way i almost fix my issues, but there will still be slightly angled links, especially when i use snap to grid on the nodes.

Is there any way of increasing the resolution of the “virtual ports” on the sides, or - is it possible to not having these “virtual” ports and just connect to the closest point on a node - pixel perfect?

I’m sorry, but I misunderstood your requirements.

Try setting Link.routing to the undocumented enum go.Link.AvoidsNodesStraight. Don’t use separate ports. Instead set the node spots to be:

    $(go.Node, . . .,
        { fromSpot: go.Spot.AllSides, toSpot: go.Spot.AllSides },
        . . .

A post was split to a new topic: Can’t connect ports