Grouping Links after node is moved within a group

Hi,
As soon as nodes are grouped into group, all links between the group are grouped to one link, as expected.
My project allows to move ports around the nodes and ofcourse move the node itself. . When a node is moved, an algorithm is fired to relocate the links and the ports around the node.
But when the moved node is in a group, after moving the node and collapsing its group, the link is no longer grouped to a single “thick” group.
See attach pic.
Please advise.
Tany

Does the Group only have a single (or default) port? What fromSpot and toSpot does it have? Do the Links have any fromSpot or toSpot values?

When a link connects with a node that becomes unseen because it is a member of a collapsed group, the links will route to the default port of the group.

The group node has no ports. It has its default port, like you wrote (I don’t know what is “default port”).
Its member nodes do have ports and they are interconnected via links to ports on nodes in other groups.
The links have the toSpot and fromSpot values to avoid connecting to port from the “wrong” side.

By “default port” I meant the object whose GraphObject.portId is the empty string, or else the whole Node if there is no such object. GoJS Ports in Nodes-- Northwoods Software

I believe the values of Link.fromSpot and Link.toSpot is what is causing those links to connect to the group that way.

I have to set the Link.fromSpot and Link.toSpot.
If i set the GraphObject.portId, will it help ?

Yes, if that port object had minimal height and were positioned in the middle of that right side or left side of the group. Hmmm, assuming you want links to connect with the group at either the left side or the right side, you could have the default port be a transparent Shape that extends the width of the group and whose height is zero, and whose center is positioned in the center of the group.

I have tried to add a shape like that :
GO(go.Shape, “Circle”,
{
fill :“transparent”,
width: 120,
height:0,
portId: “”
}
Behind the picture of the Group (i have put the shape and the picture in a “Spot” Panel)
And i still get multiple links between the groups.

It seems to work in the case I tried:

  function init() {
    var $ = go.GraphObject.make;

    myDiagram =
      $(go.Diagram, "myDiagramDiv",
          {
            initialContentAlignment: go.Spot.Center,  // for v1.*
            "undoManager.isEnabled": true
          });

    myDiagram.nodeTemplate =
      $(go.Node, "Auto",
        $(go.Shape,
          { fill: "white" },
          new go.Binding("fill", "color")),
        $(go.TextBlock,
          { margin: 8 },
          new go.Binding("text"))
      );

    myDiagram.groupTemplate =
      $(go.Group, "Table",
        $(go.Panel, "Auto",
          $(go.Shape, { fill: "lightgray", minSize: new go.Size(40, 40) }),
          $(go.Placeholder, { padding: 5 })
        ),
        $(go.Shape, { portId: "", height: 1, stretch: go.GraphObject.Horizontal }),
        $("SubGraphExpanderButton", { alignment: go.Spot.TopLeft })
      );

    myDiagram.linkTemplate =
      $(go.Link,
        new go.Binding("fromSpot"),
        new go.Binding("toSpot"),
        $(go.Shape),
        $(go.Shape, { toArrow: "Standard"})
      )

    myDiagram.model = new go.GraphLinksModel(
    [
      { key: 1, text: "Alpha", color: "lightblue" },
      { key: 2, text: "Beta", color: "orange", group: 4 },
      { key: 3, text: "Gamma", color: "lightgreen", group: 4 },
      { key: 4, text: "Delta", color: "pink", isGroup: true }
    ],
    [
      { from: 1, to: 2, fromSpot: new go.Spot(1, 0.234), toSpot: new go.Spot(0, 0.333) },
      { from: 1, to: 3, fromSpot: go.Spot.Right, toSpot: new go.Spot(0, 0.667) }
    ]);
  }

I have left the height and stroke of that Group.port at 1 so that you can see it in this screenshot, after moving the two member nodes to make the link connection spots clearer:

After collapsing:

You’ll probably want to make that port Shape have opacity: 0. (Not visible: false!)

OK,
tested it with ports, looks fine.
Only one thing, when the group is collapsed, the end of the link appears in frony of the group and not behind the group.
How can i push it behind ?

Put Links in the “Background” Layer?