Re-position member nodes when dragging/copying to another group

How can we re-position member nodes when dragging/copying to another group so that the member nodes stay inside the group.
Currently they hold their position, can they be re-positioned so that as soon as I release my mouse, they forget their original positions and take up space inside the new group.


That is the responsibility of the Group.layout.

OK, so I saw the page,
I dont want my groups to have organized nodes since position of nodes hold value to my application, I only want to organize them inside the group when dragged or copied to another group.

Presumably you are calling in your code, probably in a event handler.

At that time you can get the area that the group has, either the Group.actualBounds or by calling GraphObject.getDocumentBounds on the Group.placeholder. And you can arrange the node in the Diagram.selection accordingly. Remember that there might not be room if there is no Placeholder, so the nodes might need to overlap each other.

coming a little late on this, I implemented it like below, but I have a couple of queries here ( TODO-1, TODO-2 below ), but I do not have a placeholder in place.

mouseDrop(e, grp) {
          const isGroup = grp.diagram.selection.iterator.any(
            x => x instanceof go.Group

          if (isGroup) {
          else {
            grp["addMembers"](grp.diagram.selection, true);
            grp.diagram.selection.each(a => {
              //**TODO-1**: do this only if node fall inside the boundaries of the group{
       = grp["data"].groupId;
       = go.Point.stringify(grp.getDocumentPoint(go.Spot.TopLeft));
                //**TODO-2**: find available space starting from TopLeft, but do not overlap nodes.
              //TODO-1: }


Calling Group.addMembers will modify the node data object to make them members of the group data object. So there is no need to set groupId if GraphLinksModel.nodeGroupKeyProperty == “groupId”. In fact if you want to be selective about it, you should not call Group.addMembers. You can set Part.containingGroup on each Node if desired.

So there is no Group.layout that is automatically laying out its members? OK, so you need to do it yourself. You can call Diagram.findPartsIn to see if a particular area in document coordinates is empty of Nodes. Remember to ignore the Group itself.

I recall that findPartsIn returns the gojs entities inside the area, how do I return location coordinates of the empty area in the group ?

Secondly, what check can i put to know if the node falls outside the group bounds ?

What “empty area in the group”? There might be none, or there might be many, some of which are too small for your purposes.

I suppose you could check whether group.actualBounds.containsRect(n.actualBounds is false.

Yes, there might be none, or many, some of which may be too small for my purposes.

How do I find place for my dragged node in the empty area after checking for findPartsIn ?

If you are not going to depend on an automatic layout to position nodes to avoid overlaps, then you need to figure out where to put the nodes. I was merely suggesting that if you have a proposed location for a node you could call Diagram.findPartsIn to see if there are already any other Parts (partially) occupying that area.

Maybe we could implement a function that would return all of the empty areas larger than a certain size within a rectangular area. That would make it easier to decide where to locate a node.

“Maybe we could implement a function that would return all of the empty areas larger than a certain size within a rectangular area. That would make it easier to decide where to locate a node.”
– This is exactly what I was expecting.
is there something I could start with ?

No, there isn’t. Most people have an idea of where the node should go, so they keep trying until they find an empty area. In your case you should be aware that there might not be any such place in a fixed area group. In that event I hope you will expand the size of your group, in which case you will know exactly where the extra empty space is.