HI , Im trying to expand and collapse the Group inside the network which is working as expected. Below is my code for groupTemplate
myDiagram.groupTemplate =
(go.Group, "Vertical",
{
selectionObjectName: "BODY",
layout: (go.CircularLayout)…
How can i arrange the node inside the group such that group node should be in center of the cricle. please refer the image
can you please help me out to achieve this.
Is there a reason you did not provide your group template?
Does your group template use a “Circle” Shape as a border around a Placeholder (in an “Auto” Panel)?
Do you have a copy of the visuals of your regular node template positioned in the middle of your group template? It should have portId set to the empty string, so that all of those links will connect to that green node-like object in the middle of the group.
This is my groupTemplate
myDiagram.groupTemplate =
$(go.Group, “Vertical”,
//{ layout: null }, // Group does not position its member Nodes
{
selectionObjectName: "BODY",
// layout: $(go.CircularLayout),
layout: $(RadialLayout, {
maxLayers: 2,
rotateNode: function (node, angle, sweep, radius) {
// rotate the nodes and make sure the text is not upside-down
node.angle = angle;
var label = node.findObject("TEXTBLOCK");
if (label !== null) {
label.angle = ((angle > 90 && angle < 270 || angle < -90) ? 180 : 0);
}
}
}),
isSubGraphExpanded: false,
// replace the standard adornment with a dark blue one
selectionAdornmentTemplate: $(go.Adornment, go.Panel.Auto,
$(go.Shape, "RoundedRectangle", {
fill: null,
stroke: "darkblue",
strokeWidth: 2
}),
$(go.Placeholder))
},
$(go.Panel, "Auto", {
name: "BODY"
},
// clicking on the group's body collapses or expands the group
{
click: function (e, obj) {
var grp = obj.part;
if (grp.isSubGraphExpanded) {
grp.diagram.commandHandler.collapseSubGraph(grp);
} else {
grp.diagram.commandHandler.expandSubGraph(grp);
}
}
},
// the background shape for the Group is either a Rectangle or an Ellipse, depending on data.round
$(go.Shape, {
fill: "lavender",
stroke: "red"
},
new go.Binding("figure", "round", function (b) {
return b ? "Circle" : "Rectangle";
})),
$(go.Panel,
// this occupies the area covered by the subgraph Parts
$(go.Placeholder, {
padding: new go.Margin(0, 0, 0, 0)
}),
// this substitute Shape is only shown when the Group is not expanded
$(go.Shape, "Ethernet", {
width: 50,
height: 50
},
new go.Binding("visible", "isSubGraphExpanded", function (b) {
return !b;
}).ofObject()))),
$(go.TextBlock,
new go.Binding("text", "key")))
Yes Group template uses circle shape as a border around a placeholder.
okay let me try with the portId. Do have any sample based on the visual which i posted.
<!DOCTYPE html>
<html>
<head>
<title>Minimal GoJS Sample</title>
<!-- Copyright 1998-2020 by Northwoods Software Corporation. -->
<meta charset="UTF-8">
<script src="go.js"></script>
<script id="code">
function CircularLayout2() {
go.CircularLayout.call(this);
}
go.Diagram.inherit(CircularLayout2, go.CircularLayout);
CircularLayout2.prototype.commitNodes = function() {
go.CircularLayout.prototype.commitNodes.call(this);
if (this.network.vertexes.count === 1) {
// need to handle just one node specially, but how?
this.group.placeholder.padding = new go.Margin(0, 0, 0, 100);
} else {
var c = this.diagram.computePartsBounds(this.group.memberParts).center;
this.group.placeholder.padding = new go.Margin(0, -c.x*2, 0, 0);
}
}
function init() {
var $ = go.GraphObject.make;
myDiagram =
$(go.Diagram, "myDiagramDiv");
myDiagram.nodeTemplate =
$(go.Node, "Auto",
{ width: 30, height: 30 },
$(go.Shape, "Circle",
{ fill: "lightgray", portId: "" }),
$(go.TextBlock,
new go.Binding("text", "key"))
);
myDiagram.groupTemplate =
$(go.Group, "Auto",
{
layout: $(CircularLayout2, { radius: 50 }),
minSize: new go.Size(180, 180)
},
$(go.Shape, "Circle",
{ fill: "lightgreen" }),
$(go.Placeholder),
$(go.Panel, "Auto",
{ width: 30, height: 30 },
$(go.Shape, "Circle",
{ fill: "lightgray", portId: "" }),
$(go.TextBlock,
new go.Binding("text", "key"))
)
);
myDiagram.model = new go.GraphLinksModel(
[
{ key: 11, group: -1 },
{ key: -1, isGroup: true },
{ key: 21, group: -2 },
{ key: 22, group: -2 },
{ key: -2, isGroup: true },
{ key: 31, group: -3 },
{ key: 32, group: -3 },
{ key: 33, group: -3 },
{ key: -3, isGroup: true },
{ key: 41, group: -4 },
{ key: 42, group: -4 },
{ key: 43, group: -4 },
{ key: 44, group: -4 },
{ key: -4, isGroup: true },
{ key: 51, group: -5 },
{ key: 52, group: -5 },
{ key: 53, group: -5 },
{ key: 54, group: -5 },
{ key: 55, group: -5 },
{ key: -5, isGroup: true },
],
[
{ from: 11, to: -1 },
{ from: 21, to: -2 },
{ from: 22, to: -2 },
{ from: 31, to: -3 },
{ from: 32, to: -3 },
{ from: 33, to: -3 },
{ from: 41, to: -4 },
{ from: 42, to: -4 },
{ from: 43, to: -4 },
{ from: 44, to: -4 },
{ from: 51, to: -5 },
{ from: 52, to: -5 },
{ from: 53, to: -5 },
{ from: 54, to: -5 },
{ from: 55, to: -5 },
]);
}
</script>
</head>
<body onload="init()">
<div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:600px"></div>
</body>
</html>
Thank you Walter. I really appreciate your response. i will check with it.