In this small example links not support nested groups. Please move one topLevelElement after creating diagram(Links point to nowhere).
After expand all groups links are working correctly.
Thanks in advice.
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" })
)
)
);
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"});
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: 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: 9, text: "Node9", color: "lightblue", isGroup:false, group: 11 });
myDiagram.model.addNodeData({ key: 10, text: "Node10", color: "gray", isGroup:false, group: 12 });
myDiagram.commitTransaction("addNode");
myDiagram.startTransaction("addLinkContents");
myDiagram.model.addLinkData({ from: 7, to: 9 });
myDiagram.model.addLinkData({ from: 10, to: 8 });
myDiagram.commitTransaction("addLinkContents");
}