How to select the child node at first click in group nodes using JavaScript Diagram?

In the default behavior of a diagram, clicking on a child node within a group result in the selection of the entire group. However, achieving the selection of the child node on the initial click involves leveraging the bounds of the child element. Here’s how you can accomplish this using JavaScript Diagram:

When clicking on the group, the Click event is triggered. Within this event, access the group using args.element. Iterate through all the children within the group nodes and obtain the child element from the DOM. Calculate its bounds using the getBoundingClientRect method or obtain the child Rect bounds.

Utilize args.position to determine the mouse click position within the group. Check whether the mouse click position intersects with the bounds of the child node. If there is an intersection, unselect the group node and select the intersected child node.

//Initialize diagram control
let diagram: Diagram = new Diagram({
 //define diagram click event
 click: click,
});
diagram.appendTo('#diagram');

function click(args) {
 let i = 0;
 // Check if element is node or not
 if (args.element instanceof Node) {
   let node = args.element;
   // Check if it is group node or not
   if (node.children && node.children.length > 0) {
     for (let i = 0; i < node.children.length; i++) {
       // Get the bounds of the child element from DOM
       let rect: Rect = new Rect(args.position.x, args.position.y, 10, 10);
       let childNode: NodeModel = diagram.getObject(node.children[i]);
       // Check if the child node bounds and clicked position is intersect or not
       if (childNode.wrapper.bounds.containsRect(rect)) {
         diagram.unSelect(node);
         //Select the child node
         diagram.select([childNode]);
       }
     }
   }
 }
}

The provided example illustrates the selection of a child node on the initial click within a group.

Sample

Conclusion

I hope you enjoyed learning about how to select the child node at first click in group nodes in JavaScript Diagram.

You can refer to our JavaScript Diagram feature tour page to know about its other groundbreaking feature representations and documentation, 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, Direct-Trac, or feedback portal. We are always happy to assist you!