Group from spot to spot not consistent

GoJS
1

I have rectangular groups and i want links to them to connect to the top of the rectangle group, and links from them to exit the rectangle from the bottom.

Here is my group code:

myDiagram.groupTemplate =
            $(go.Group, "Auto",
                { layout: $(go.GridLayout, { wrappingColumn: 1 }) },
                $(go.Shape, "Rectangle",  // surrounds the Vertical panel
                    {
                        fill: "rgba(128,128,128,0.33)",
                        fromSpot: go.Spot.Top,
                        toSpot: go.Spot.Bottom
                    }
                ),
                $(go.Panel, "Vertical",
                    $(go.TextBlock,         // group title
                        { font: "Bold 12pt Sans-Serif", margin: 10 },
                        new go.Binding("text", "label")
                    ),
                    $(go.Placeholder,    // represents the area of all member parts,
                        { padding: 5 }       // with some extra padding around them
                    )
                )
            );

The link connections are consistent. Here is an example of what they produce:

group input output.png775×545 13.5 KB

How do i change the group configuration so the links consistently enter the top and exit the bottom?

Thanks
Chris

2

By default the only port of a Node is the whole Node. If you want some GraphObject within the Node to be the port, you need to mark it by setting its portId: "".

You’ve set GraphObject.fromSpot and toSpot on a Shape, so I think that’s where you want to set GraphObject.portId to the default port name, the empty string.

http://gojs.net/latest/intro/ports.html
http://gojs.net/latest/intro/connectionPoints.html

3

Thanks walter that was the issue,

 myDiagram.groupTemplate =
            $(go.Group, "Auto",
                { layout: $(go.GridLayout, { wrappingColumn: 1 }) },
                $(go.Shape, "Rectangle",  // surrounds the Vertical panel
                    {
                        fill: "rgba(128,128,128,0.33)",
                        fromSpot: go.Spot.Bottom,
                        toSpot: go.Spot.Top,
                        portId: ""
                    }
                ),
                $(go.Panel, "Vertical",
                    $(go.TextBlock,         // group title
                        { font: "Bold 12pt Sans-Serif", margin: 10 },
                        new go.Binding("text", "label")
                    ),
                    $(go.Placeholder,    // represents the area of all member parts,
                        { padding: 5 }       // with some extra padding around them
                    )
                )
        );