Set Group on Drag and Drop Copied Node

When I drag and drop a node within a group while holding control, it copies the node but doesn’t assign it to the group which messes up the diagram. How do I set the group when dragging and dropping copied nodes?

I refer this , got my answer, how about you.

This does not work if you are dropping the node into a placeholder node within a group. I am looking to assign a group to the new node which is NOT dropped directly into a group but into a node within a group


In this scenario i am unable to assign the dropped node with the group name and hence the dropped node is going outside the group. Can someone plz help on this

If I understand you correctly, you do not want a node dropped onto a non-group node that is a member of a group to be added to that group, but that it be added somewhere else? It isn’t clear to me what you mean.

In the case that the dropped-onto node is an instance of a group, then it would normally be added as a member of that group, as you can observe in that Regrouping sample (referenced above).

You’ll need to implement the GraphObject.drop event handler appropriately for such nodes.

There is a node within a group which acts as a placeholder. when dropped the new node i am replacing it with the placeholder node. in this process apparently the new node is not acquiring the group.

    mouseDrop(e: any, node: go.GraphObject) {
          const newNode = e.diagram.selection.first();
          if (newNode !== null) {
            // a new node was dropped
            const existingNode = node.part;
            ctxt.diagram.replaceNode(existingNode, newNode);
          }
        },

replaceNode = (existingNode: any, newNode: go.Part): void => {
if (existingNode !== null) {
// found an existing node?
// could ask if it’s OK to replace the old node . . .

  // disconnect existing links from old node and reconnect with new node
  // newNode.setProperties({ ...newNode.data, group: existingNode.data.key });
  this.dia.startTransaction('replace the node');
  const links = new go.List().addAll(existingNode.linksConnected);
  links.each(function (link: any) {
    if (link.fromNode === existingNode) link.fromNode = newNode;
    if (link.toNode === existingNode) link.toNode = newNode;
  });

  // remove old node
  const node: go.Node | null = this.dia.findNodeForKey(newNode.data.key);
  this.dia.model.setDataProperty(node?.data, 'group', existingNode.data.group);
  this.dia.remove(existingNode);
  this.dia.commitTransaction('replace the node');
}

};

some hack i did to get it working. but the layout is not re-aligning. How can i trigger only the group to recalculate the group layout. As seen below with the above code the layout is messed up

I just tried:

      mouseDrop: (e, oldnode) => {
        const newnode = e.diagram.selection.first();
        if (!(newnode instanceof go.Node)) return;
        // displace the oldnode with the newnode
        newnode.containingGroup = oldnode.containingGroup;
        new go.List(oldnode.findLinksConnected()).each(link => {
          if (link.fromNode === oldnode) link.fromNode = newnode;
          if (link.toNode === oldnode) link.toNode = newnode;
        });
        // now delete the oldnode
        e.diagram.remove(oldnode);
      }

And it seems to get the behavior the way that I would have expected. At least, the structural changes appear to be as expected. But I gather that there’s some problem with layout invalidation that you do or don’t want to happen? Could you explain that more precisely please?

Regarding controlling layout invalidation: GoJS Layouts -- Northwoods Software

Thanks this worked. newnode.containingGroup = oldnode.containingGroup; this line did the trick