Positioning ports on grid

Let us say that I am looking for a diagram that has about the same functionality as the dynamic ports sample. But I want to enable a 10x10 grid for the nodes, so I add

diagram.grid.gridCellSize = new go.Size( 10, 10 )
diagram.toolManager.draggingTool.isGridSnapEnabled = true

Now the nodes snap nicely onto the grid. But since my nodes have different number of ports on each node, it is impossible to align the nodes so that horizontal links are exactly just horizontal. The automatic positioning of the ports inside the panels that make up the node almost always put them between grid points, and with different offsets from the grid for each node. So my horizontal lines always have small vertical kinks on them since the ports have different offsets from node to node.

What I would like is a way to make sure that the ports on the node are positioned on a 10x10 grid in the node coordinate system, so that when the node sits on a grid point, the ports will also be exactly on diagram grid points, no matter how many ports the node has on any particular side.

Any tips on how to achieve this?

You could set alignment: go.Spot.TopLeft, on each of the four Panels that hold ports (i.e. that bind Panel.itemArray).

        $(go.Diagram, "myDiagramDiv",
          {
            "grid.visible": true,
            "grid.gridCellSize": new go.Size(10, 10),
            "draggingTool.isGridSnapEnabled": true,
            "undoManager.isEnabled": true
          })

and for example:

          $(go.Panel, "Vertical",
            new go.Binding("itemArray", "leftArray"),
            {
              row: 1, column: 0, alignment: go.Spot.TopLeft,