Link connection point with irregular shapes

GoJS
1

Hi,
I’m continuing doing experiments with Tree/ForceDirected switching layout and I have a question regarding the link connection point on nodes using irregular shapes like a star.

I read the introduction to connections and in my graph with ForceDirectedLayout everything works as expected, since when I move the star node, the connection correctly stay attached to the closest point on the star.

Conversely, when I switch to TreeLayout, the connection starts from the bounding box of the star, regardless of its position when I drag it.

star2.jpg431×516 19.3 KB

Is this an intended behavior or is there a way to make it work like in ForceDirectedLayout?

This is my linkTemplate:

myDiagram.linkTemplate = $(go.Link,        
    {
        selectable: false,
    },
    $(go.Shape,
        new go.Binding("stroke", "cabletype", cableType2Color),
        new go.Binding("strokeWidth", "cabletype", cableType2Width)
    ),
    $(go.Panel, "Auto",
        $(go.Shape, {
            fill: $(go.Brush, "Radial", {
                0: "rgb(240, 240, 240)",
                0.5: "rgb(240, 240, 240)",
                1: "rgba(240, 240, 240, 0)"
            }),
            stroke: null
        }),
        $(go.TextBlock,
            {
                textAlign: "center",
                font: "13pt helvetica, arial, sans-serif",
                stroke: "black",
                margin: 4
            },
            new go.Binding("text", "", createLinkLabel)
        )
    )
);

Thanks,
Guido

2

That is the intended behavior, because for “layered” Layouts, the assumption is that there is a natural direction for links to go. In your case, the TreeLayout.angle is zero, so links should go from left to right. Thus TreeLayout is setting the Link.fromSpot to go.Spot.Right and Link.toSpot to go.Spot.Left.

But you can prevent that behavior by setting TreeLayout.setsPortSpot and/or TreeLayout.setsChildPortSpot to false. Depending on the behavior that you want, you might consider leaving setsChildPortSpot to true – it depends on if you want routing when there are a lot of children to avoid having links cross over nodes.

Note that ForceDirectedLayout has the similar property ForceDirectedLayout.setsPortSpot which by default is true, but the default behavior happens to be what you want.

3

Ok, thanks for the explanation!