Questions about resizing the group

Hi,
The effect before dragging the text:

The effect after dragging the text:

The pink highlighted area should be the actual size of the group.The black box is the boundary of the group, and I want the black boundary of the group to change with the actual size of the group.

Before the change:

After the change

When I change the size of the group,the drawings show no nodes in the group.And the nodes in the group appear to be disconnected from the group.
When I drag a node into the group:

The pink area and the black frame area are not the actual area of the group on the drawing.
I hope that the group can change the size according to the node contained in it, and the user can also change the size of the node itself, and the node can also drag and drop in and out of the group.But how do I deal with the problem shown in the picture?

The typical design, shown in most of the samples, is to use a Placeholder and surround it with a Shape by using an “Auto” Panel.
https://gojs.net/latest/intro/groups.html#GroupTemplates

However then it does not make sense to have it be resizable by the user, because that would immediately break the invariant that the Shape surround the area occupied by the member nodes.

Yet it is still possible to have resizable groups – it just requires work to limit the movement of the member nodes and limit the resizing of the shape surrounding the member nodes, according to whatever principles you want to follow. GoJS Sized Groups -- Northwoods Software