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