How to drag a node from palette and drop it into a group node in Angular Diagram?

To add the dropped node as a child to the existing group node in Syncfusion Angular Diagram, we handled in collectionChange and drop event of diagram. In this event, we get the bounds value for the dropped node and existing nodes, then we compare the bounds value of the nodes, if the target node has the children then drop the node as the child to group node.

In order to add the dropped node as a child to an existing group node , we utilize the collectionChange and drop events of the diagram. These events allow us to handle the process effectively. The collectionChange event is triggered whenever there is a change in the diagram’s nodes or connectors collection.

public collectionChange(args:ICollectionChangeEventArgs){
   if(args.state === 'Changed'){
     this.dropElement(args);
   }
 }

public drop(args:IDropEventArgs){
   if((args.source as DiagramComponent).nodes !==undefined){
   this.dropElement(args);
   }
}

When a node or connector is dropped onto the diagram, the drop event is triggered. Within this event, we retrieve the bounds value, which includes the position and size, for both the dropped node and the potential group node that may serve as its parent.

Next, we compare the bounds value of the nodes to determine the appropriate course of action. Specifically, we check if the target node already has children. If it does, this indicates that it is a group node. In such a case, we proceed to add the dropped node as a child to the group node.

 public dropElement(args:any){
   let target:any;
   for(let i:number = 0;i<this.diagram.nodes.length;i++){ let="" node="args.element;" r1="node.wrapper.bounds;" r2="this.diagram.nodes[i].wrapper.bounds;" if(!(r2.left="">= r1.right || r2.right <= r1.left ||
           r2.top &gt;= r1.bottom || r2.bottom &lt;= r1.top)){
             if(this.diagram.nodes[i].children !== undefined){
               target = this.diagram.nodes[i];
             }
           }
   }
   if(target &amp;&amp; (target as NodeModel).children  !== undefined ){
       if((args.element as NodeModel).id !== (target as NodeModel).id){
           if((target as NodeModel).children.indexOf((args.element as NodeModel).id)===-1){
             this.diagram.addChild((target as NodeModel),(args.element as NodeModel).id);
           
           }
       }
   }
 }

Sample</this.diagram.nodes.length;i++){>

Conclusion

Hope you enjoyed learning about how to drag a node from palette and drop it into a group node in Angular Diagram.

You can refer to our Angular Diagram feature tour page to learn about its other groundbreaking feature representations. You can explore our Angular Diagram documentation to understand how to present and manipulate data.

For current customers, you can check out our Angular components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our Angular Diagram and other Angular components.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!