Hi,
I am creating two group with fixed height and width but node inside group is not auto adjust with in group it is showing out of box, even it is having lots of space in group. I tried to set property stretch: go.GraphObject.Fill of Group , but it is not working. Following is the screen shot of the same:
Following is the code :
function init() {
var = go.GraphObject.make;
myDiagram =
(go.Diagram, “myDiagramDiv”,
{
initialContentAlignment: go.Spot.TopCenter,
contentAlignment: go.Spot.TopCenter,
autoScale: go.Diagram.Uniform,
“undoManager.isEnabled”: true
});
myDiagram.nodeTemplate =
$(go.Node, "Auto",
$(go.Shape, "RoundedRectangle",
new go.Binding("fill", "BackColor"),
new go.Binding("stroke", "Stroke"),
new go.Binding("figure", "Figure")
),
$(go.TextBlock,
new go.Binding("text", "Text"),
new go.Binding("stroke", "ForeColor"),
new go.Binding("font", "Font"),
new go.Binding("margin", "Margin")
),
$(go.Picture,
new go.Binding("source", "Image")
)
);
myDiagram.groupTemplate =
$(go.Group, "Auto", {
layout: $(go.TreeLayout,
{
angle: 90,
arrangement: go.TreeLayout.ArrangementVertical,
alignment: go.TreeLayout.AlignmentBus
}),
resizeObjectName: "BODY",
alignment: go.Spot.TopCenter,
isSubGraphExpanded: true,
resizable: false,
ungroupable: true,
stretch: go.GraphObject.Fill,
desiredSize: new go.Size(700, 700),
avoidable: false
}
,
$(go.Shape, {
alignment: go.Spot.TopCenter
},
new go.Binding("fill", "GroupBackColor"),
new go.Binding("figure", "GroupFigure"),
new go.Binding("stroke", "GroupStroke")
),
$(go.Panel, "Table",
{
name: "BODY",
alignment: go.Spot.TopCenter,
padding: 10,
stretch: go.GraphObject.Fill,
},
$(go.TextBlock,
{
row: 0,
stretch: go.GraphObject.Horizontal,
textAlign: "center",
editable: true,
alignment:go.Spot.TopCenter
},
new go.Binding("text", "GroupText"),
new go.Binding("font", "GroupFont"),
new go.Binding("margin", "GroupMargin"),
new go.Binding("stroke", "GroupForeColor")
),
$(go.Placeholder, {
margin: go.Margin.parse("0 20 20 20"),
alignment: go.Spot.TopCenter,
row: 1,
stretch: go.GraphObject.Fill,
}, new go.Binding("row", "NodeRow")
)
)
);
myDiagram.linkTemplate =
$(go.Link,
{
routing: go.Link.AvoidsNodes
},
$(go.Shape,
new go.Binding("strokeWidth", "StrokeWidth"),
new go.Binding("stroke", "LinkColor")
),
$(go.Shape,
{
stroke: null
},
new go.Binding("visible", "ToVisible"),
new go.Binding("toArrow", "ToArrow"),
new go.Binding("fill","ToArrowColor")
),
$(go.Shape,
{
stroke: null
},
new go.Binding("visible","FromVisible"),
new go.Binding("fromArrow", "FromArrow"),
new go.Binding("fill","FromArrowColor")
)
);
load();
}
function load() {
myDiagram.model = go.Model.fromJson(document.getElementById("mySavedModel").value);
// make sure all data have up-to-date "members" collections
// this does not prevent any "cycles" of membership, which would result in undefined behavior
var arr = myDiagram.model.nodeDataArray;
for (var i = 0; i < arr.length; i++) {
var data = arr[i];
var supers = data.supers;
if (supers) {
for (var j = 0; j < supers.length; j++) {
var sdata = myDiagram.model.findNodeDataForKey(supers[j]);
if (sdata) {
// update _supers to be an Array of references to node data
if (!data._supers) {
data._supers = [sdata];
} else {
data._supers.push(sdata);
}
// update _members to be an Array of references to node data
if (!sdata._members) {
sdata._members = [data];
} else {
sdata._members.push(data);
}
}
}
}
}
}
Model:
{
"class": "go.GraphLinksModel",
"nodeDataArray": [
{
"key": "FirstGroup",
"Text": null,
"isGroup": true,
"Image": null,
"BackColor": "#6FAD4A",
"Stroke": null,
"group": "N/A",
"ForeColor": "White",
"Figure": null,
"Font": "bold 16pt Calibri",
"Margin": 8,
"GroupFigure": null,
"GroupBackColor": "#E3EFD9",
"GroupForeColor": "#3A542D",
"GroupStroke": "#748A63",
"GroupText": "First Group Title",
"GroupFont": "bold 20pt Arial",
"GroupMargin": 10,
"GroupMaxSize": null,
"GroupStrokeWidth": 2
},
{
"key": "SecondGroup",
"Text": null,
"isGroup": true,
"Image": null,
"BackColor": "#6FAD4A",
"Stroke": null,
"group": "N/A",
"ForeColor": "White",
"Figure": null,
"Font": "bold 16pt Calibri",
"Margin": 8,
"GroupFigure": null,
"GroupBackColor": "#CBFEFF",
"GroupForeColor": "#3A542D",
"GroupStroke": "#ABCBCC",
"GroupText": "Second Group Title",
"GroupFont": "bold 20pt Arial",
"GroupMargin": 10,
"GroupMaxSize": null,
"GroupStrokeWidth": 2
},
{
"key": "FirstGroupTools",
"Text": null,
"isGroup": false,
"Image": "../images/deliveryTools.jpg",
"BackColor": "#E3EFD9",
"Stroke": "#E3EFD9",
"group": "FirstGroup",
"ForeColor": "White",
"Figure": null,
"Font": "bold 16pt Calibri",
"Margin": 8,
"GroupFigure": null,
"GroupBackColor": null,
"GroupForeColor": "#3A542D",
"GroupStroke": null,
"GroupText": null,
"GroupFont": "bold 20pt Arial",
"GroupMargin": 10,
"GroupMaxSize": null,
"GroupStrokeWidth": 2
},
{
"key": "FirstGroupGatewayManager",
"Text": "Gateway Manager",
"isGroup": false,
"Image": null,
"BackColor": "#6FAD4A",
"Stroke": null,
"group": "FirstGroup",
"ForeColor": "White",
"Figure": null,
"Font": "bold 16pt Calibri",
"Margin": 8,
"GroupFigure": null,
"GroupBackColor": null,
"GroupForeColor": "#3A542D",
"GroupStroke": null,
"GroupText": null,
"GroupFont": "bold 20pt Arial",
"GroupMargin": 10,
"GroupMaxSize": null,
"GroupStrokeWidth": 2
},
{
"key": "FirstGroupmyCORECategory ",
"Text": "CORE Category ",
"isGroup": false,
"Image": null,
"BackColor": "#6FAD4A",
"Stroke": null,
"group": "FirstGroup",
"ForeColor": "White",
"Figure": null,
"Font": "bold 16pt Calibri",
"Margin": 8,
"GroupFigure": null,
"GroupBackColor": null,
"GroupForeColor": "#3A542D",
"GroupStroke": null,
"GroupText": null,
"GroupFont": "bold 20pt Arial",
"GroupMargin": 10,
"GroupMaxSize": null,
"GroupStrokeWidth": 2
},
{
"key": "FirstGroupAiOpsApps",
"Text": "AiOps Apps",
"isGroup": false,
"Image": null,
"BackColor": "#6FAD4A",
"Stroke": null,
"group": "FirstGroup",
"ForeColor": "White",
"Figure": null,
"Font": "bold 16pt Calibri",
"Margin": 8,
"GroupFigure": null,
"GroupBackColor": null,
"GroupForeColor": "#3A542D",
"GroupStroke": null,
"GroupText": null,
"GroupFont": "bold 20pt Arial",
"GroupMargin": 10,
"GroupMaxSize": null,
"GroupStrokeWidth": 2
},
{
"key": "FirstGroupSystemsIntegration-Waterfall",
"Text": "Systems Integration - Waterfall",
"isGroup": false,
"Image": null,
"BackColor": "#6FAD4A",
"Stroke": null,
"group": "FirstGroup",
"ForeColor": "White",
"Figure": null,
"Font": "bold 16pt Calibri",
"Margin": 8,
"GroupFigure": null,
"GroupBackColor": null,
"GroupForeColor": "#3A542D",
"GroupStroke": null,
"GroupText": null,
"GroupFont": "bold 20pt Arial",
"GroupMargin": 10,
"GroupMaxSize": null,
"GroupStrokeWidth": 2
},
{
"key": "FirstGroupSystemsIntegration-Agile",
"Text": "Systems Integration - Agile",
"isGroup": false,
"Image": null,
"BackColor": "#6FAD4A",
"Stroke": null,
"group": "FirstGroup",
"ForeColor": "White",
"Figure": null,
"Font": "bold 16pt Calibri",
"Margin": 8,
"GroupFigure": null,
"GroupBackColor": null,
"GroupForeColor": "#3A542D",
"GroupStroke": null,
"GroupText": null,
"GroupFont": "bold 20pt Arial",
"GroupMargin": 10,
"GroupMaxSize": null,
"GroupStrokeWidth": 2
},
{
"key": "SecondGroupTools",
"Text": null,
"isGroup": false,
"Image": "../images/deliveryTools.jpg",
"BackColor": "#CBFEFF",
"Stroke": "#CBFEFF",
"group": "SecondGroup",
"ForeColor": "White",
"Figure": null,
"Font": "bold 16pt Calibri",
"Margin": 8,
"GroupFigure": null,
"GroupBackColor": null,
"GroupForeColor": "#3A542D",
"GroupStroke": null,
"GroupText": null,
"GroupFont": "bold 20pt Arial",
"GroupMargin": 10,
"GroupMaxSize": null,
"GroupStrokeWidth": 2
},
{
"key": "SecondGroupGatewayManager",
"Text": "Gateway Manager",
"isGroup": false,
"Image": null,
"BackColor": "#6FAD4A",
"Stroke": null,
"group": "SecondGroup",
"ForeColor": "White",
"Figure": null,
"Font": "bold 16pt Calibri",
"Margin": 8,
"GroupFigure": null,
"GroupBackColor": null,
"GroupForeColor": "#3A542D",
"GroupStroke": null,
"GroupText": null,
"GroupFont": "bold 20pt Arial",
"GroupMargin": 10,
"GroupMaxSize": null,
"GroupStrokeWidth": 2
},
{
"key": "SecondGroupmyCORECategory ",
"Text": "CORE Category ",
"isGroup": false,
"Image": null,
"BackColor": "#6FAD4A",
"Stroke": null,
"group": "SecondGroup",
"ForeColor": "White",
"Figure": null,
"Font": "bold 16pt Calibri",
"Margin": 8,
"GroupFigure": null,
"GroupBackColor": null,
"GroupForeColor": "#3A542D",
"GroupStroke": null,
"GroupText": null,
"GroupFont": "bold 20pt Arial",
"GroupMargin": 10,
"GroupMaxSize": null,
"GroupStrokeWidth": 2
},
{
"key": "SecondGroupAiOpsApps",
"Text": "AiOps Apps",
"isGroup": false,
"Image": null,
"BackColor": "#6FAD4A",
"Stroke": null,
"group": "SecondGroup",
"ForeColor": "White",
"Figure": null,
"Font": "bold 16pt Calibri",
"Margin": 8,
"GroupFigure": null,
"GroupBackColor": null,
"GroupForeColor": "#3A542D",
"GroupStroke": null,
"GroupText": null,
"GroupFont": "bold 20pt Arial",
"GroupMargin": 10,
"GroupMaxSize": null,
"GroupStrokeWidth": 2
},
{
"key": "SecondGroupApplicationManagement(AM/AO)",
"Text": "Application Management (AM/AO)",
"isGroup": false,
"Image": null,
"BackColor": "#6FAD4A",
"Stroke": null,
"group": "SecondGroup",
"ForeColor": "White",
"Figure": null,
"Font": "bold 16pt Calibri",
"Margin": 8,
"GroupFigure": null,
"GroupBackColor": null,
"GroupForeColor": "#3A542D",
"GroupStroke": null,
"GroupText": null,
"GroupFont": "bold 20pt Arial",
"GroupMargin": 10,
"GroupMaxSize": null,
"GroupStrokeWidth": 2
},
{
"key": "SecondGroupDevOps",
"Text": "DevOps",
"isGroup": false,
"Image": null,
"BackColor": "#6FAD4A",
"Stroke": null,
"group": "SecondGroup",
"ForeColor": "White",
"Figure": null,
"Font": "bold 16pt Calibri",
"Margin": 8,
"GroupFigure": null,
"GroupBackColor": null,
"GroupForeColor": "#3A542D",
"GroupStroke": null,
"GroupText": null,
"GroupFont": "bold 20pt Arial",
"GroupMargin": 10,
"GroupMaxSize": null,
"GroupStrokeWidth": 2
},
{
"key": "SecondGroupATRConnectors",
"Text": "ATR Connectors",
"isGroup": false,
"Image": null,
"BackColor": "#6FAD4A",
"Stroke": null,
"group": "SecondGroup",
"ForeColor": "White",
"Figure": null,
"Font": "bold 16pt Calibri",
"Margin": 8,
"GroupFigure": null,
"GroupBackColor": null,
"GroupForeColor": "#3A542D",
"GroupStroke": null,
"GroupText": null,
"GroupFont": "bold 20pt Arial",
"GroupMargin": 10,
"GroupMaxSize": null,
"GroupStrokeWidth": 2
},
{
"key": "SecondGroupRPA|BOTS|AutomationScript",
"Text": "RPA | BOTS | AutomationScript",
"isGroup": false,
"Image": null,
"BackColor": "#6FAD4A",
"Stroke": null,
"group": "SecondGroup",
"ForeColor": "White",
"Figure": null,
"Font": "bold 16pt Calibri",
"Margin": 8,
"GroupFigure": null,
"GroupBackColor": null,
"GroupForeColor": "#3A542D",
"GroupStroke": null,
"GroupText": null,
"GroupFont": "bold 20pt Arial",
"GroupMargin": 10,
"GroupMaxSize": null,
"GroupStrokeWidth": 2
},
{
"key": "SecondGroupTargetSystem",
"Text": null,
"isGroup": false,
"Image": "../images/targetSystem.jpg",
"BackColor": "#CBFEFF",
"Stroke": "#CBFEFF",
"group": "SecondGroup",
"ForeColor": "White",
"Figure": null,
"Font": "bold 16pt Calibri",
"Margin": 8,
"GroupFigure": null,
"GroupBackColor": null,
"GroupForeColor": "#3A542D",
"GroupStroke": null,
"GroupText": null,
"GroupFont": "bold 20pt Arial",
"GroupMargin": 10,
"GroupMaxSize": null,
"GroupStrokeWidth": 2
},
{
"key": "SecondGroupSplunkForwarders",
"Text": "Splunk Forwarders",
"isGroup": false,
"Image": null,
"BackColor": "#6FAD4A",
"Stroke": null,
"group": "SecondGroup",
"ForeColor": "White",
"Figure": null,
"Font": "bold 16pt Calibri",
"Margin": 8,
"GroupFigure": null,
"GroupBackColor": null,
"GroupForeColor": "#3A542D",
"GroupStroke": null,
"GroupText": null,
"GroupFont": "bold 20pt Arial",
"GroupMargin": 10,
"GroupMaxSize": null,
"GroupStrokeWidth": 2
},
{
"key": "SecondGroupToolGateway",
"Text": "Tool Gateway",
"isGroup": false,
"Image": null,
"BackColor": "#6FAD4A",
"Stroke": null,
"group": "SecondGroup",
"ForeColor": "White",
"Figure": null,
"Font": "bold 16pt Calibri",
"Margin": 8,
"GroupFigure": null,
"GroupBackColor": null,
"GroupForeColor": "#3A542D",
"GroupStroke": null,
"GroupText": null,
"GroupFont": "bold 20pt Arial",
"GroupMargin": 10,
"GroupMaxSize": null,
"GroupStrokeWidth": 2
}
],
"linkDataArray": [
{
"from": "FirstGroupTools",
"to": "FirstGroupGatewayManager",
"ToVisible": false,
"FromVisible": true,
"StrokeWidth": 1.5,
"LinkColor": "gray",
"ToArrow": "Triangle",
"ToArrowColor": "gray",
"FromArrow": "BackwardTriangle",
"FromArrowColor": "gray"
},
{
"from": "FirstGroupGatewayManager",
"to": "FirstGroupmyCORECategory ",
"ToVisible": true,
"FromVisible": true,
"StrokeWidth": 1.5,
"LinkColor": "gray",
"ToArrow": "Triangle",
"ToArrowColor": "gray",
"FromArrow": "BackwardTriangle",
"FromArrowColor": "gray"
},
{
"from": "FirstGroupGatewayManager",
"to": "FirstGroupmyCORECategory ",
"ToVisible": true,
"FromVisible": true,
"StrokeWidth": 1.5,
"LinkColor": "gray",
"ToArrow": "Triangle",
"ToArrowColor": "gray",
"FromArrow": "BackwardTriangle",
"FromArrowColor": "gray"
},
{
"from": "FirstGroupmyCORECategory ",
"to": "FirstGroupAiOpsApps",
"ToVisible": true,
"FromVisible": true,
"StrokeWidth": 1.5,
"LinkColor": "gray",
"ToArrow": "Triangle",
"ToArrowColor": "gray",
"FromArrow": "BackwardTriangle",
"FromArrowColor": "gray"
},
{
"from": "FirstGroupmyCORECategory ",
"to": "FirstGroupSystemsIntegration-Waterfall",
"ToVisible": true,
"FromVisible": true,
"StrokeWidth": 1.5,
"LinkColor": "gray",
"ToArrow": "Triangle",
"ToArrowColor": "gray",
"FromArrow": "BackwardTriangle",
"FromArrowColor": "gray"
},
{
"from": "FirstGroupmyCORECategory ",
"to": "FirstGroupSystemsIntegration-Agile",
"ToVisible": true,
"FromVisible": true,
"StrokeWidth": 1.5,
"LinkColor": "gray",
"ToArrow": "Triangle",
"ToArrowColor": "gray",
"FromArrow": "BackwardTriangle",
"FromArrowColor": "gray"
},
{
"from": "SecondGroupTools",
"to": "SecondGroupGatewayManager",
"ToVisible": false,
"FromVisible": true,
"StrokeWidth": 1.5,
"LinkColor": "gray",
"ToArrow": "Triangle",
"ToArrowColor": "gray",
"FromArrow": "BackwardTriangle",
"FromArrowColor": "gray"
},
{
"from": "SecondGroupGatewayManager",
"to": "SecondGroupmyCORECategory ",
"ToVisible": true,
"FromVisible": true,
"StrokeWidth": 1.5,
"LinkColor": "gray",
"ToArrow": "Triangle",
"ToArrowColor": "gray",
"FromArrow": "BackwardTriangle",
"FromArrowColor": "gray"
},
{
"from": "SecondGroupGatewayManager",
"to": "SecondGroupmyCORECategory ",
"ToVisible": true,
"FromVisible": true,
"StrokeWidth": 1.5,
"LinkColor": "gray",
"ToArrow": "Triangle",
"ToArrowColor": "gray",
"FromArrow": "BackwardTriangle",
"FromArrowColor": "gray"
},
{
"from": "SecondGroupmyCORECategory ",
"to": "SecondGroupAiOpsApps",
"ToVisible": true,
"FromVisible": true,
"StrokeWidth": 1.5,
"LinkColor": "gray",
"ToArrow": "Triangle",
"ToArrowColor": "gray",
"FromArrow": "BackwardTriangle",
"FromArrowColor": "gray"
},
{
"from": "SecondGroupmyCORECategory ",
"to": "SecondGroupApplicationManagement(AM/AO)",
"ToVisible": true,
"FromVisible": true,
"StrokeWidth": 1.5,
"LinkColor": "gray",
"ToArrow": "Triangle",
"ToArrowColor": "gray",
"FromArrow": "BackwardTriangle",
"FromArrowColor": "gray"
},
{
"from": "SecondGroupmyCORECategory ",
"to": "SecondGroupDevOps",
"ToVisible": true,
"FromVisible": true,
"StrokeWidth": 1.5,
"LinkColor": "gray",
"ToArrow": "Triangle",
"ToArrowColor": "gray",
"FromArrow": "BackwardTriangle",
"FromArrowColor": "gray"
},
{
"from": "SecondGroupTools",
"to": "SecondGroupATRConnectors",
"ToVisible": false,
"FromVisible": true,
"StrokeWidth": 1.5,
"LinkColor": "gray",
"ToArrow": "Triangle",
"ToArrowColor": "gray",
"FromArrow": "BackwardTriangle",
"FromArrowColor": "gray"
},
{
"from": "SecondGroupATRConnectors",
"to": "SecondGroupmyCORECategory ",
"ToVisible": true,
"FromVisible": true,
"StrokeWidth": 1.5,
"LinkColor": "gray",
"ToArrow": "Triangle",
"ToArrowColor": "gray",
"FromArrow": "BackwardTriangle",
"FromArrowColor": "gray"
},
{
"from": "SecondGroupATRConnectors",
"to": "SecondGroupRPA|BOTS|AutomationScript",
"ToVisible": false,
"FromVisible": true,
"StrokeWidth": 1.5,
"LinkColor": "gray",
"ToArrow": "Triangle",
"ToArrowColor": "gray",
"FromArrow": "BackwardTriangle",
"FromArrowColor": "gray"
},
{
"from": "SecondGroupTools",
"to": "SecondGroupRPA|BOTS|AutomationScript",
"ToVisible": false,
"FromVisible": true,
"StrokeWidth": 1.5,
"LinkColor": "gray",
"ToArrow": "Triangle",
"ToArrowColor": "gray",
"FromArrow": "BackwardTriangle",
"FromArrowColor": "gray"
},
{
"from": "SecondGroupRPA|BOTS|AutomationScript",
"to": "SecondGroupTargetSystem",
"ToVisible": true,
"FromVisible": false,
"StrokeWidth": 1.5,
"LinkColor": "gray",
"ToArrow": "Triangle",
"ToArrowColor": "gray",
"FromArrow": "BackwardTriangle",
"FromArrowColor": "gray"
},
{
"from": "SecondGroupAiOpsApps",
"to": "SecondGroupSplunkForwarders",
"ToVisible": false,
"FromVisible": true,
"StrokeWidth": 1.5,
"LinkColor": "gray",
"ToArrow": "Triangle",
"ToArrowColor": "gray",
"FromArrow": "BackwardTriangle",
"FromArrowColor": "gray"
},
{
"from": "SecondGroupSplunkForwarders",
"to": "SecondGroupTargetSystem",
"ToVisible": true,
"FromVisible": false,
"StrokeWidth": 1.5,
"LinkColor": "gray",
"ToArrow": "Triangle",
"ToArrowColor": "gray",
"FromArrow": "BackwardTriangle",
"FromArrowColor": "gray"
},
{
"from": "SecondGroupATRConnectors",
"to": "SecondGroupDevOps",
"ToVisible": true,
"FromVisible": true,
"StrokeWidth": 1.5,
"LinkColor": "gray",
"ToArrow": "Triangle",
"ToArrowColor": "gray",
"FromArrow": "BackwardTriangle",
"FromArrowColor": "gray"
},
{
"from": "SecondGroupTools",
"to": "SecondGroupToolGateway",
"ToVisible": false,
"FromVisible": true,
"StrokeWidth": 1.5,
"LinkColor": "gray",
"ToArrow": "Triangle",
"ToArrowColor": "gray",
"FromArrow": "BackwardTriangle",
"FromArrowColor": "gray"
},
{
"from": "SecondGroupToolGateway",
"to": "SecondGroupGatewayManager",
"ToVisible": true,
"FromVisible": true,
"StrokeWidth": 1.5,
"LinkColor": "gray",
"ToArrow": "Triangle",
"ToArrowColor": "gray",
"FromArrow": "BackwardTriangle",
"FromArrowColor": "gray"
},
{
"from": "FirstGroupGatewayManager",
"to": "SecondGroupGatewayManager",
"ToVisible": true,
"FromVisible": true,
"StrokeWidth": 1.5,
"LinkColor": "gray",
"ToArrow": "Triangle",
"ToArrowColor": "gray",
"FromArrow": "BackwardTriangle",
"FromArrowColor": "gray"
}
]
}