Flowchart nodes gets disorder

After dragging and dropping node on any link , my flowchart nodes gets disorder .Please see the image

Diagram Layout - LayeredDigraphLayout
GroupLayout - TreeLayout

Drop Code on link -

            var diagram = e.diagram;
            var tool = diagram.toolManager.linkingTool;
            var newnode = diagram.selection.first();
            var link = obj.part;
            var fromnode = link.fromNode;
            var fromport = link.fromPort;
            var tonode = link.toNode;
            var toport = link.toPort;
 diagram.remove(link);
            tool.insertLink(fromnode, fromport, newnode, newnode.port);
            tool.insertLink(newnode, newnode.port, tonode, toport);

That white node starts off not being a member of any group, and it remains that way. That is why it is positioned outside of the group.

Don’t you want to add the dropped node to be a member of the group, if the link that it was dropped on is a member of a group?

You are correct . I do want that dropped node to be a group member . How to do it ? I cannot give group id to white node before as it can be dropped to any group (In case of multiple group).

Code for white node drop

var model = $scope.myDiagram.model;
var data = node.original;
model.startTransaction(“drop”);
model.addNodeData({
text: text,
figure: “RoundedRectangle”,
color: getNodeColor(data.type),
loc: go.Point.stringify(q),
});
model.commitTransaction(“drop”);

Call Group.addMembers or CommandHandler.addTopLevelParts. This is what many of the samples do, such as the Regrouping Demo: Regrouping Demo.

Or just set Part.containingGroup.