Drag and drop Groups

@abhijith wrote:

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?

Posts: 6

Participants: 2

Read full topic