Links between collapsed nested group merge to one link

[Kharchuk]

Whether nested links can be grouped into one link in a case when the group is collapsed and nodeFrom and nodeTo are not visible?
When the element to which the linkі goes is invisible, since it is in a group that has not yet been opened, is it possible to make the links into one line, as in the photo ?

Code :

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", angle: 90 },

      new go.Binding("fill", "color")),

    $(go.TextBlock,

      { margin: 8 },

      new go.Binding("text"))

  );

myDiagram.groupTemplateMap.add("GridCellHorizontall", $(go.Group, "Auto", {

  layout: $(go.GridLayout),

  selectable: true

},

$(go.Shape, "Rectangle", {

    fill: "#00FF00",

    stretch: go.GraphObject.Fill,

    opacity: 0.3

  },

  new go.Binding("fill", "fill")

),

$(go.Placeholder, {

  padding: 10

}),

new go.Binding("column", "col"),

new go.Binding("row", "row"),

)

);

myDiagram.groupTemplateMap.add("Grid", 

  $(go.Group, "Auto",    

  { layout: $(TableLayout),

    isSubGraphExpanded: false,

    portId:"",

    fromSpot: go.Spot.AllSides,  

    toSpot: go.Spot.AllSides

  },

    $(go.Shape, "RoundedRectangle", // surrounds everything

    { parameter1: 10, fill: "rgba(128,128,128,0.33)" }),

    $(go.Panel, "Vertical",  // position header above the subgraph

    { defaultAlignment: go.Spot.Left },

      $(go.Panel, "Horizontal",  // the header

      { defaultAlignment: go.Spot.Top },

      $("SubGraphExpanderButton"),  // this Panel acts as a Button

      $(go.TextBlock,     // group title near top, next to button

        { font: "Bold 12pt Sans-Serif" },

        new go.Binding("text", "key"))

      ),

      $(go.Placeholder,     // represents area for all member parts

      { padding: new go.Margin(0, 10), background: "white" })

    ),

    new go.Binding("isSubGraphExpanded", "expanded")

  )

);

myDiagram.linkTemplate =

  $(go.Link,

    {routing: go.Link.Orthogonal},

    $(go.Shape)

  )

  getGroup();    

}

function getGroup(group) {

// all modification to the diagram is within this transaction  

myDiagram.startTransaction("addNode");

myDiagram.model.addNodeData({ key: 91, text: "Grid2", color: "lightyellow", isGroup: true, category: "Grid", expanded: true});

myDiagram.model.addNodeData({ key: 11, text: "11", color: "orange", isGroup:true, group: 91, "col":0, "row": 0, category: "GridCellHorizontall" });

myDiagram.model.addNodeData({ key: 12, text: "12", color: "orange", isGroup:true, group: 91, "col":0, "row": 1, category: "GridCellHorizontall" });

myDiagram.model.addNodeData({ key: 90, text: "Grid1", color: "lightblue", isGroup: true, category: "Grid" });

myDiagram.model.addNodeData({ key: 1, text: "1", color: "orange", isGroup:true, group: 90, "col":0, "row": 0, category: "GridCellHorizontall" });

myDiagram.model.addNodeData({  key: 2, text: "2", color: "lightgreen", isGroup:true, group: 90, "col":1, "row": 0, category: "GridCellHorizontall" });

myDiagram.model.addNodeData({  key: 3, text: "3", color: "pink", isGroup:true, isGroup: true, group: 90 , "col":0, "row": 1, category: "GridCellHorizontall"});

myDiagram.model.addNodeData({ key: 4, text: "4", color: "orange", isGroup:true, group: 4, group: 90, "col":1, "row": 1, category: "GridCellHorizontall" });

myDiagram.model.addNodeData({  key: 5, text: "5", color: "lightgreen", isGroup:true, group: 4, group: 90, "col":0, "row": 2, category: "GridCellHorizontall" });

myDiagram.model.addNodeData({  key: 6, text: "6", color: "pink", isGroup:true, isGroup: true, group: 90, "col":1, "row": 2, category: "GridCellHorizontall" });

myDiagram.model.addNodeData({key: 92, text: "GridIn11", color: "lightblue", isGroup: true, category: "Grid", group: 11});



myDiagram.model.addNodeData({key: 93, text: "GridIn12", color: "lightblue", isGroup: true, category: "Grid", group: 12});

myDiagram.model.addNodeData({key: 94, text: "GridIn11", color: "lightblue", isGroup: true, category: "Grid", group: 11});

myDiagram.model.addNodeData({  key: 7, text: "Node7", color: "pink", isGroup:false, group: 2 });

myDiagram.model.addNodeData({  key: 8, text: "Node8", color: "green", isGroup: false, group: 5 });

myDiagram.model.addNodeData({ key: 921, text: "Grid2", color: "orange", isGroup:true, group: 92, "col":0, "row": 0, category: "GridCellHorizontall" });



myDiagram.model.addNodeData({  key: 922, text: "Port1", color: "lightblue", isGroup:false, group: 921 });



myDiagram.model.addNodeData({  key: 923, text: "Port2", color: "lightblue", isGroup:false, group: 921 });

myDiagram.model.addNodeData({  key: 924, text: "Port3", color: "lightblue", isGroup:false, group: 921 });

myDiagram.model.addNodeData({ key: 931, text: "Grid2", color: "orange", isGroup:true, group: 93, "col":0, "row": 0, category: "GridCellHorizontall" });



myDiagram.model.addNodeData({  key: 932, text: "Port4", color: "lightblue", isGroup:false, group: 931 });



myDiagram.model.addNodeData({  key: 933, text: "Port5", color: "lightblue", isGroup:false, group: 931 });

myDiagram.model.addNodeData({  key: 934, text: "Port6", color: "lightblue", isGroup:false, group: 931 });

myDiagram.model.addNodeData({  key: 932, text: "Port7", color: "lightblue", isGroup:false, group: 931 });



myDiagram.model.addNodeData({  key: 933, text: "Port8", color: "lightblue", isGroup:false, group: 931 });

myDiagram.model.addNodeData({  key: 934, text: "Port9", color: "lightblue", isGroup:false, group: 931 });

myDiagram.model.addNodeData({ key: 941, text: "Grid2", color: "orange", isGroup:true, group: 94, "col":0, "row": 0, category: "GridCellHorizontall" });



myDiagram.model.addNodeData({  key: 942, text: "Port10", color: "lightblue", isGroup:false, group: 941 });



myDiagram.model.addNodeData({  key: 943, text: "Port11", color: "lightblue", isGroup:false, group: 941 });

myDiagram.model.addNodeData({  key: 944, text: "Port12", color: "lightblue", isGroup:false, group: 941 });

myDiagram.commitTransaction("addNode");

myDiagram.startTransaction("addLinkContents");

//myDiagram.model.addLinkData({ from: 7, to: 92 });

myDiagram.model.addLinkData({ from: 91, to: 90 });

myDiagram.model.addLinkData({ from: 922, to: 932 });

myDiagram.model.addLinkData({ from: 923, to: 933 });

myDiagram.model.addLinkData({ from: 924, to: 934 });

myDiagram.model.addLinkData({ from: 932, to: 942 });

myDiagram.model.addLinkData({ from: 933, to: 943 });

myDiagram.model.addLinkData({ from: 934, to: 944 });



myDiagram.commitTransaction("addLinkContents");

}

[Kharchuk]

Maybe this is the answer to the question Links between nested nodes do not change the binding side ? Because here I am asking about the solution for this example or is it still a bug?
Thanks in advice.

[walter]

Oops, yes, I somehow must have posted that as a reply in the wrong topic.

I think you can implement the behavior that you want in several ways. You could choose one Link of a bunch of duplicate links to keep seen while hiding the rest of them. Or you could hide all of the duplicate links and add a new “summary” link connecting the groups.

You could implement your policy in “SubGraphExpanded” and “SubGraphCollapsed” DiagramEvent listeners. The Group.findExternalLinksConnected or Node.findVisibleNode methods might be useful to you.

[Kharchuk]

In my case, there are no duplicate links, each of them goes to its own node, but when the group collapses, then they are really repeated.
The question is how to find duplicate links when a group is collapsed? Since Link “from” and Link “to” are the same in both cases.
Expanded

Collapsed

[walter]

For any Group you can call Group.findExternalLinksConnected to find all of the links that connect with a node outside of the group. Then you can choose whether to show them or hide them or to show something else.