Port side alignment

[g.bartoli]

Hi,
Happy New Year to Northwoods Software! :)

I have a small question about if it’s possible to obtain a specific behavior for port placement.
Using the Dynamic Ports sample as a starting point, I succesfully created a custom graph where model and links are loaded from files and editing is disabled.
I understood how the ports are placed on node sides (tables with panel arrays), but I cannot figure out if its possible to start placing ports from an edge avoiding the default centered placement.

To better explain, this is the current drawing:

And this is a graphical mockup of the desired one (consider the top side of the “PD2” node and the left side of the “24ui” node):

For reference, this is the nodeTemplate of the top side of a node, the same as your sample:

// the Panel holding the left port elements, which are themselves Panels,
// created for each item in the itemArray, bound to data.leftArray
$(go.Panel, "Vertical",
  new go.Binding("itemArray", "leftArray"),
  { row: 1, column: 0,
    itemTemplate:
      $(go.Panel,
        { _side: "left",  // internal property to make it easier to tell which side it's on
          fromSpot: go.Spot.Left, toSpot: go.Spot.Left,
          fromLinkable: true, toLinkable: true, cursor: "pointer"
        },
        new go.Binding("portId", "portId"),
        $(go.Shape, "Rectangle",
          { stroke: null, strokeWidth: 0,
            desiredSize: portSize,
            margin: new go.Margin(1,0) },
          new go.Binding("fill", "portColor"))
      )  // end itemTemplate
  }
),  // end Vertical Panel

It would be handy to have a property specifying the alignment of the itemArray (in the illustrated case, it would be “RIGHT” for the PD2 node and “TOP” for the 24ui node.

I thought about filling each side of the node with dummy ports, but sincerely I do not know how to do that… :(

Thanks,
Guido

[walter]

Just set the alignment the way you want on each of those Panels holding port elements. For example, with the quoted “Vertical” Panel on the left side, I suggest you set alignment: go.Spot.Top.

[g.bartoli]

Wow… it was really that simple! It works, thank you Walter :)