Drag and drop Groups

GoJS
1

I have a diagram where nodes/groups can be dragged and dropped from a palette. The diagram initially has a group which in turn consists of groups/nodes. i.e group inside a group.

I am trying to drag and drop a new group from the palette into a group present in the diagram.

I am using the following code for implementation:

myDiagram.addDiagramListener("ExternalObjectsDropped", function(e) {
    console.log(myDiagram.selection.first().data)

    var newNode = myDiagram.selection.first();

   
        myDiagram.commandHandler.deleteSelection();

    var ev = event || window.event;
    var point = getPointForEvent(ev)

    if (newNode.data.category === "product")
        addNode(newNode, point);
    else if (newNode.data.isGroup) {
        addGroup(newNode, point);
    }
    console.log(myDiagram.model.toJson())
});

function addGroup(newNode, point) {
    var label = prompt("please enter a label for the Group", "xyz")
    
    var containerkey;
    var node = myDiagram.findPartAt(point, false);
    
    if(node instanceof go.Group) // if a user drops on a group
    {
        containerkey = node.data.key;
    } else if(node instanceof go.Node) // if user drops on a node
    {
        var group = node.containingGroup;;
        if(group != null) containerkey = group.data.key;
    }
    myDiagram.startTransaction('new group');
    console.log('adding to '+ containerkey);
    
    myDiagram.model.addNodeData({
        key: newNode.data.key,
        isGroup : true,
        group: containerkey,
        name : label
    });
    myDiagram.commitTransaction('new group');
}   
 
function addNode(newNode, point) {

    var containerkey = undefined;
    var node = myDiagram.findPartAt(point, false);
    if (node instanceof go.Group) {
        containerkey = node.data.key;
    } else if (node instanceof go.Node) {
        var group = node.containingGroup;
        if (group !== null) containerkey = group.data.key;
    }
    myDiagram.startTransaction('new node');
    console.log("adding to " + containerkey)
    myDiagram.model.addNodeData({
        key: newNode.data.key,
        img: newNode.data.img,
        loc: newNode.data.loc,
        category: newNode.data.category,
        group: containerkey
    });
    
    
    myDiagram.commitTransaction('new node');

}`

This not getting rendered properly. I am not able to select / move the newly inserted group.Also when I move other nodes/groups already present in the ‘external’ group after adding a new group, they escape the boundaries of the external group. Why is that?

2

Maybe the problem is in getPointForEvent. Read Drop at Mouse Point

Have you checked that findPart is returning the expected Node?

Are all of the property values of newNode what you expect?

3

I am now using the code given in the topic you mentioned. But I am still facing the same problem. Now by even adding simple nodes to the external group, its children escape its boundaries when I move them.

The findPart function is returning the expected node.

Yes. I am just using its location and the key to create a new group.

However , After seeing the modelJson after insertion, I noticed that the new group is present in the nodeDataArray
two times. The group data is added twice in the model. How is this possible?

{"key":"Site", "isGroup":true, "loc":"344.08488063660434 -300.61405835543485"}, {"key":"Site2", "isGroup":true, "group":"58172fe9388acd001e590511", "loc":"343.2015915119364 -300.6339522546418", "name":"xyz"}

The first object is the data of the group inside the pallete.
The second object is the one which is added by the addGroup function and this is what I want to be inserted.

4

I can’t explain that – when I try defining an “ExternalObjectsDropped” DiagramEvent listener that calls e.diagram.commandHandler.deleteSelection() and then adds some node data to the model, whatever I drag-and-drop is in fact deleted and only what I programmatically added to the model stays there.

It sounds as if there is some other code executing.

5

yes I am having a dragging tool to implement connectivity.This is similar to the one in the pipes sample.The logs show that snapping tool functions are getting called on dropping the nodes/groups. is this happening because of that? How do I make it to ignore the nodes/groups when I’m dropping from the pallete

6

Yes, during normal dragging, whether internal or external, one would expect snapping to happen if it were enabled.

You can tell whether the dragging is happening internally or caused by external drag-and-drop by checking myDiagram.currentTool instanceof go.DraggingTool.