Port linking bad wire orientation

GoJS
1

Hi there,

I try to links two nodes, but the result wire is not in the correct orientation :

The right (green) node has this properties :

panel.fromSpot = go.Spot.Right;
panel.fromLinkable = true;
panel.alignment = go.Spot.Right;

And the left node this properties :

panel.toSpot = go.Spot.Left;
panel.toLinkable = true;
panel.alignment = go.Spot.Left;

I have double check my code but I dont understand where is the issue.

Jerome

2

So for both ports you have set the toSpot, but you have not set the fromSpot or other “from…” properties that you want.

3

Sorry it’s a typo in my initial text. The first node use “from” the second use “to”. I have updated my initial question.

4

And the Link goes from the port on the right side of the left node and goes to the port on the left side of the right node?

If so that would explain at least one problem – you have “to” and “from” exchanged.

5

I’m sorry walter it’s another typo in my initial question. The “right” is the “from” and the “left” is the “to”. You can see the arrow in the first image. In fact when I start to drag the link the direction is correct, but when the nodes are linked the port seem to be on the bad direction :

6

So I don’t understand what the question is and what the problem is.

Basically, what I’ve said above is to make sure you have set all of the “from…” and “to…” properties that you need on each port.

7

Ok I have the issue and it was a normal behavior :

layout: this.go(go.TreeLayout, { angle: 90, layerSpacing: 35 })

8

The layered Layouts, such as TreeLayout and LayeredDigraphLayout, by default set the Link.fromSpot and Link.toSpot of each Link to match the general direction that the layout is going. So in your case, where TreeLayout.angle == 90, Link.fromSpot will be set to go.Spot.Bottom and Link.toSpot will be set to go.Spot.Top.

For most apps, that works well, but it appears that your nodes do not have their ports at the top and at the bottom of the node. So you can tell the TreeLayout not to set the spot properties on the Links by setting two properties on the TreeLayout:

layout: $(go.TreeLayout,
    { angle: 90,
      layerSpacing: 35,
      setsPortSpot: false,
      setsChildPortSpot: false })
9

Thanks Walter !