When I add a node to the group for the first time, the group will shift to the right. However, I will add nodes to the group. The group will not shift to the right again. What should I do to be able to send groups to the group at any time? Add nodes in the group, the group will not be offset
Thanks
function init() {
var $$ = go.GraphObject.make;
myDiagram = $$(go.Diagram, "resourceDiagramDiv", {
"commandHandler.copiesTree": false,
allowDrop: true,
initialContentAlignment: go.Spot.Center,
initialScale: 0.74,
"animationManager.isEnabled": false,
"undoManager.isEnabled": true，
grid: $$(go.Panel, "Grid",
{
background: "white",
visible:false
},
$$(go.Shape, "LineH", {stroke: "#F2F2F2"}),
$$(go.Shape, "LineV", {stroke: "#F2F2F2"})
),
mouseDrop: function (e, obj) {
var nodeType = e.diagram.selection.Th.value.data.nodeType;
if (nodeType >= 0 && nodeType <= 7) {
myDiagram.commandHandler.deleteSelection();
}
}
});
myDiagram.groupTemplateMap.add("OfGroups",
$$(go.Group, "Auto",
{
name: "Groups",
background: "#fff",
movable: false,
computesBoundsAfterDrag: true,
mouseDrop: function (e, obj) {
finishDrop(e, obj);
},
doubleClick: groupDoubleClick,
mouseDragEnter: function (e, grp) {
var nodeType = dragNode.nodeType;
var groupType = grp.part.data.groupType;
if (dragNode.nodeType !== groupType) {
document.querySelector('#resourceDiagramDiv canvas').style.cursor = "not-allowed";
}
},
mouseDragLeave: function (e, obj) {
document.querySelector('#resourceDiagramDiv canvas').style.cursor = "copy";
},
click: function (e, graphObject) {
unSelectAllNode();
graphObject.part.isSelected = true;
},
layout: $$(go.GridLayout,
{
alignment: go.GridLayout.Position,
wrappingColumn: 10,
cellSize: new go.Size(1, 1),
spacing: new go.Size(6, 6),
sorting: go.GridLayout.Forward
}),
},
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
nodeStyle(),
$$(go.Shape, "RoundedRectangle",
{
fill: null,
stroke: "#3e93d9",
strokeWidth: 1,
cursor: "pointer",
fromLinkable: true,
toLinkable: true,
fromLinkableSelfNode: true,
toLinkableSelfNode: true,
fromLinkableDuplicates: true,
toLinkableDuplicates: true
},
new go.Binding("strokeWidth", "strokeWidth")
),
$$(go.Picture,
{
name: "Picture",
},
new go.Binding("width", "imgWidth"),
new go.Binding("height", "imgHeight"),
new go.Binding("source", "bgImage"),
new go.Binding("alignment", "imgAlign"),
new go.Binding("margin", "pictrueMargin")
),
$$(go.TextBlock,
{
margin: new go.Margin(0, 0, 0, 0),
alignment: go.Spot.BottomCenter,
isMultiline: false,
font: "12px sans-serif"
},
new go.Binding("text", "contentText").makeTwoWay()
),
$$(go.Panel, "Vertical",
{
name: "PanelVertical",
minSize: new go.Size(50, 50)
},
new go.Binding("minSize", "minSize").makeTwoWay(),
$$(go.Panel, "Table",
{
stretch: go.GraphObject.Horizontal,
visible: true,
},
new go.Binding("visible", "showTitle"),
$$(go.TextBlock,
{
alignment: go.Spot.Center,
margin: 5,
isMultiline: false,
font: "14px sans-serif",
opacity: 0.75,
stroke: "#333"
},
new go.Binding("text", "titleText").makeTwoWay(),
new go.Binding("font", "font").makeTwoWay()
)
),
$$(go.Placeholder, {padding: 5, alignment: go.Spot.TopLeft})//设置标题顶部位置
)
));
function finishDrop(e, grp) {
if (grp !== null) {
var ok = null;
var groupType = grp.part.data.groupType;
var nodeType = e.diagram.selection.Th.value.data.nodeType;
if (nodeType === groupType) {
ok = grp.addMembers(e.diagram.selection, true);
if(e.diagram.selection.Th.value.memberParts != null && e.diagram.selection.Th.value.memberParts.count == 0)
{
if(groupType == 0)
{
showRdsClusterForm(1);
}
if(groupType ==1)
{
showRdsClusterForm(2);
}
if(groupType == 2 )
{
showRdsStorageForm();
}
}
}
if (!ok) {
e.diagram.currentTool.doCancel();
}
}
else
{
if (!ok) e.diagram.currentTool.doCancel();
}
}
function nodeStyle() {
return [
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
{
mouseEnter: function (e, graphObject) {
dragNode = graphObject.part.data;
showPorts(graphObject.part, true);
},
mouseLeave: function (e, graphObject) {
showPorts(graphObject.part, false);
}
}
];
}