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?