Why links between nested nodes do not change the linking side, as it is in direct links between “main” nodes ?
In this small example, take one element and move it, the links remain on the side on which it was located from the beginning.
After that, uncomment the last line of adding a link between the “main” elements and this problem disappears.
Thanks in advice.
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" })
)
)
);
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: 92, text: "GridIn91", color: "lightblue", isGroup: true, category: "Grid", group: 11});
myDiagram.model.addNodeData({key: 93, text: "GridIn90", color: "lightblue", isGroup: true, category: "Grid", group: 12});
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: 92 });
myDiagram.model.addNodeData({ key: 10, text: "Node10", color: "gray", isGroup:false, group: 93 });
myDiagram.commitTransaction("addNode");
myDiagram.startTransaction("addLinkContents");
myDiagram.model.addLinkData({ from: 7, to: 9 });
myDiagram.model.addLinkData({ from: 10, to: 8 });
//myDiagram.model.addLinkData({ from: 91, to: 90 });
myDiagram.commitTransaction("addLinkContents");
}