Orthogonal Routing crossing the nodes

GoJS
1

Hi Walter,

I have used groups. I have three columns basically, left, middle and right where Middle nodes are either connected to left nodes or right nodes or both. Left nodes and right nodes can never by connected through links. Also, Left section and Right section can interchange its poistion means Left can be moved to right and right can be moved to left but middle section will always be static.

For the link template, I have used orthogonal routing. It works fine but the problem is that if the node of left or right section is below the middle node then the link crosses the node of middle section to make the link. I want to avoid these vertial lines and want the lines only left and right using this link template. Can we avoid this crossing?

Please check the screen and suggest accordignly.

Pasted image947×573 41 KB

My link template is

var connectorLinkTemplate =
graphObj(go.Link,
{ routing: go.Link.Orthogonal, corner: 1 ,layerName : ‘Foreground’},
{ relinkableFrom: false, relinkableTo: false,
mouseEnter: function(e, link) { highlightLink(link, true); },
mouseLeave: function(e, link) { highlightLink(link, false); }
},
graphObj(go.Shape, { stroke: “gray”, strokeWidth : 0.2, cursor : “pointer”},
new go.Binding(“stroke”, “isHighlighted”,function(h, shape) { return h ? highlightColor : “gray” }).ofObject(),
new go.Binding(“strokeWidth”, “isHighlighted”, function(h) { return h ? 0.2 : 0.2; }).ofObject()
),
graphObj(go.Shape, { stroke: “gray”, toArrow: “Standard”, fill: “gray”, scale:1 },
new go.Binding(“stroke”, “isHighlighted”, function(h) { return h ? highlightColor : “gray”; }).ofObject(),
new go.Binding(“fill”, “isHighlighted”, function(h) { return h ? highlightColor : “gray”; }).ofObject()
),
graphObj(go.Shape, { stroke: “gray”, fromArrow: “backward”, fill: “gray”, scale:1 },
new go.Binding(“stroke”, “isHighlighted”, function(h) { return h ? highlightColor : “gray”; }).ofObject(),
new go.Binding(“fill”, “isHighlighted”, function(h) { return h ? highlightColor : “gray”; }).ofObject()
)
);

Please suggest, how I can achieve the same.

Thank you.

2

Is your whole Node is acting as if it has only one port? If so, on your Node template set these properties:

        fromSpot: go.Spot.LeftRightSides,
        toSpot: go.Spot.LeftRightSides,

You may also want to set:

        portSpreading: SpreadingNone,

Read more about port spots at GoJS Link Connection Points on Nodes -- Northwoods Software

3

Thanks Walter for your reponse.

I did the same as you have mentioned but I am still getting the same result as described above.

4

Make sure you put those fromSpot/toSpot assignments on whatever Node element is acting as the Node’s only port.

If your node has two ports, then you need to set those properties appropriately. For the port on the left, use go.Spot.Left, and similarly for the port on the right side of the node. And then you also have to make sure your links are correctly identifying which port they should connect with.

This demonstrates the behavior that I think you want: Mapping Selectable Fields of Records. However in that sample there are varying numbers of ports in each node, rather than separate nodes within a group.