Adding Ports to Group

GoJS
1

I am trying to create ports for groups, but it looks off. Please help. I want the ports on topcenter, botton, left and right of the group box
image

 dia.groupTemplate =
      $(go.Group, "Vertical",
        { ungroupable: true },     // allow Ctrl-Shift-G to ungroup a selected Group.
        $(go.Panel, 'Auto',

          $(go.TextBlock,
            { font: "bold 12pt sans-serif" },
            new go.Binding("text")),
          $(go.Panel, "Auto",
            $(go.Shape, { fill: "transparent" }),
            $(go.Placeholder, { padding: 10 })
          ),
        ),
        // Ports
        makePort('t', go.Spot.TopCenter),
        makePort('l', go.Spot.Left),
        makePort('r', go.Spot.Right),
        makePort('b', go.Spot.BottomCenter)
      );
2

That’s because you added those four ports to the “Vertical” Panel, so they will appear, with various alignments, below the first element, which happens to be an “Auto” Panel.

Maybe you want to add the ports to the “Auto” Panel. Or maybe you want to add them to a new “Spot” Panel that has the existing “Auto” Panel as its main element.

1 Like