Panel overflow

GoJS
1

I have made a template using gojs elements like that :

Node
  Panel "Auto"
    Shape "RoundedRectangle"
    Panel "Table"
      Panel "Auto" (row 1, column 1) // Center
        Shape "RoundedRectangle"
        TextBlock
      Panel "Auto" (row 1, column 0) // Left
	Panel "Vertical"
          TextBlock
          Shape "Circle"
	Panel "Vertical"
          TextBlock
          Shape "Circle"
      Panel "Auto" (row 1, column 2) // Right
	Panel "Vertical"
          TextBlock
          Shape "Circle"
      Panel "Auto" (row 2, column 1) // Bottom
	Panel "Horizontal"
          TextBlock
          Shape "Circle"
	Panel "Horizontal"
          TextBlock
          Shape "Circle"
	Panel "Horizontal"
          TextBlock
          Shape "Circle"

The result is :

But I want each port to be shifted on the border of the first RoundedRectangle OR eventually hidden by the RoundedRectangle like that :

It’s seem difficult to make the second solution. For the first each time I tried to use negative margin on each port the panel overflow is hidden :

How to do this ?

2

Because you have an “Auto” Panel surrounding a “Table” Panel, the “Auto” Panel’s main element, a “RoundedRectangle” Shape will definitely be around or bordering the Table Panel body.

Instead you might want to try putting that “RoundedRectangle” Shape as the first element in the “Table” Panel, spanning all of the rows and all of the columns of the table. If you add a margin to that Shape that is half the width or height of those circular ports, they will appear to half-overlap the Shape.

3

Walter, in this case, the “RoundedRectangle” is not resize to the table content (I have set the stretch property to go.GraphObject.fill) and columnSpan to 3 (I have now only one row) :

4 
    myDiagram.nodeTemplate =
      $(go.Node, "Table",
        $(go.Shape, "RoundedRectangle",
          {
            margin: new go.Margin(0, 5, 0, 5),
            rowSpan: 999,
            columnSpan: 999,
            stretch: go.GraphObject.Fill,
            fill: "white"
          }),
        $(go.Panel, "Vertical",
          new go.Binding("itemArray", "left"),
          {
            column: 0,
            defaultAlignment: go.Spot.Left,
            itemTemplate: 
              $(go.Panel, "Horizontal",
                $(go.Shape, "Circle", { width: 10, height: 10 }, new go.Binding("fill")),
                $(go.TextBlock, new go.Binding("text"))
              )
          }),
        $(go.Panel, "Vertical",
          new go.Binding("itemArray", "right"),
          {
            column: 2,
            defaultAlignment: go.Spot.Right,
            itemTemplate: 
              $(go.Panel, "Horizontal",
                $(go.TextBlock, new go.Binding("text")),
                $(go.Shape, "Circle", { width: 10, height: 10 }, new go.Binding("fill"))
              )
          }),
        $(go.Panel, "Auto",
          { column: 1, stretch: go.GraphObject.Fill, minSize: new go.Size(NaN, 40) },
          $(go.Shape, { fill: "lightgray" }),
          $(go.TextBlock,
            { margin: 4 },
            new go.Binding("text"))
        )
      );

    myDiagram.model = $(go.GraphLinksModel,
      {
        linkFromPortIdProperty: "fromPort",
        linkToPortIdProperty: "toPort",
        nodeDataArray: [
          {
            key: 1, text: "Node 1",
            left: [
              { fill: "red", text: "re" },
              { fill: "orange", text: "or" },
              { fill: "green", text: "gr" },
              { fill: "blue", text: "bl" }
            ],
            right: [{ fill: "green", text: "green" }]
          }
        ]
      })

5

Good way. Just a little question, why your node as a default width/height. In case where you have no right ports and a little text (just one letter) the display is corrupted with this default size. I dont no if you understand :)

6

You might need to adjust the margin on the Shape to be zero for each of the four sides where there are no ports.