Arranging variable number of ports into multiple rows

GoJS
1

Hi Walter
here I am also looking for dynamic creation of ports.

  • I don’t have a fix numbers of ports and its data for each of node.

  • a number of port for each node can be vary from 2 to 60 may be more.

  • in node I want to make a raw of ports dynamically base on its quantity. suppose single raw can contain 8 ports. so base on count it will increase number of raw.

  • ports should be start with center of node.

image

here I am able to create all the ports in single raw. how can I achieve multiple raw with it?

if I am increasing ports it looks like this

image

I hope you understand my point.

here I am able to create all the ports in single raw. **

how can I achieve multiple raw of ports with it?

**

2

In what kind of Panel are those ports? It appears as if they are in a “Horizontal” Panel. That kind of panel only arranges its elements in a single horizontal row.

I suggest that you change that to be a “Table” Panel. On each element set or bind its GraphObject.row and column.

3

Hi
I use Table Panel.

 $(go.Panel, 'Table',
      {
        stretch: go.GraphObject.Fill
      },
        new go.Binding('itemArray', 'ports'),
        {
          itemTemplate:
            $(go.Panel, {
              row: 1,
              fromLinkable: true, toLinkable: true, cursor: 'pointer',
              toMaxLinks: 1,
              fromMaxLinks: 1,
              _side: 'center',
            },
              new go.Binding('portId', 'portId'),
              $(go.Shape, 'Rectangle',
                {
                  stroke: null, strokeWidth: 0,
                  desiredSize: new go.Size(15, 15),
                  margin: new go.Margin(0, 5)
                },
              )
            )
        }
      )

and port JSON array is

{ "ports": [
{
  "portId": "BD1",
  "port_order": "1"
},
{
  "portId": "BD2",
  "port_order": "2"
},
{
  "portId": "3",
  "port_order": "3"
},
{
  "portId": "4",
  "port_order": "4"
},
{
  "portId": "PS1",
  "port_order": "5"
},
{
  "portId": "PS2",
  "port_order": "6"
}  ]}

using this panels I get single port on node.

image

instead of six port consider there is 48 ports how can i divide ports in number of raw.

4

You specified that every port is in row 1 and column 0. (The default row and the default column are each zero.) So that is why all of your ports are in the same cell in the Table Panel.

I suspect you want to have a Binding on “row” and a Binding on “column”, each with a conversion function that converts the “port_order” property to a row value or to a column value, respectively.

  new go.Binding("row", "port_order", function(i) { return Math.floor(i / 8); }),
  new go.Binding("column", "port_order", function(i) { return i % 8; }),

Why do you have the “port_order” data property be a string rather than a number? In the code above I assumed the value would be a zero-based number.

Read more about “Table” Panels at GoJS Table Panels -- Northwoods Software.

5

Hi Walter,
Thanks for response.
yes you are correct with raw and column binding it works for me. Thanks a lot.

6

A post was split to a new topic: Positioning ports without using Spots

7

Hi
can we add/ remove a ports on node resizing?
when we resize a node so base on node height and width number of port will be updated.

Thanks

8

Yes, you could add/remove items to/from a data Array in a “PartResized” DiagramEvent listener.

9

Thanks @walter.