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

This article explains how to drag a node from the palette and drop it into a group node in a TypeScript Diagram.

To add the dropped node as a child to the existing group node in Syncfusion® TypeScript Diagram, we handle it in the collectionChange and drop events of the diagram. In these events, we retrieve the bounds value for the dropped node and the existing nodes, then compare the bounds values of the nodes. If the target node has children, we drop the node as a child to the 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.

function collectionChange(args: ICollectionChangeEventArgs) {
 if (args.state === 'Changed') {
   dropElement(args);
 }
}
function drop(args: IDropEventArgs) {
 if ((args.source as any).nodes !== undefined) {
   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.

function dropElement(args: any) {
 let target: any;
 for (let i: number = 0; i < diagram.nodes.length; i++) {
   let node = args.element;
   let r1 = node.wrapper.bounds;
   let r2 = diagram.nodes[i].wrapper.bounds;
   if (
     !(
       r2.left >= r1.right ||
       r2.right <= r1.left ||
       r2.top >= r1.bottom ||
       r2.bottom <= r1.top
     )
   ) {
     if (diagram.nodes[i].children !== undefined) {
       target = diagram.nodes[i];
     }
   }
 }
 if (target && (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
     ) {
       diagram.addChild(target as NodeModel, (args.element as NodeModel).id);
     }
   }
 }
}

Refer to the working sample for additional details and implementation: Sample

Conclusion

We hope you enjoyed learning about how to drag a node from the palette and drop it into a group node in the TypeScript Diagram.

You can refer to our JavaScript Diagram feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started with configuration specifications. You can also explore our JavaScript Diagram example to understand how to create and manipulate data.

For current customers, you can check out our 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 other controls.

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, BoldDesk Support, or feedback portal. We are always happy to assist you!