How to create link tool using user-handle in React Diagram?

User handles are used to add frequently used commands around the selector. To create user handles, define and add them to the userHandles collection within the selectedItems property. To create a link tool using user handles, use the drawingObject property with the type set to Orthogonal in the onUserHandleMouseDown event. This enables the creation of an orthogonal connector when a node is selected, and the user handle is clicked. To restrict the link tool to apply only to nodes, handle the selectionChange event to display user handles only when nodes are selected. If connectors or other elements are selected, the user handles will be hidden, ensuring the tool works exclusively with nodes.

The following code snippet demonstrates how to configure these settings and create link tool using user-handle

//Create link tool for nodes
const handleUserHandleMouseDown = (args) => {
   const diagram = diagramInstance;
   if (diagram.selectedItems.nodes && diagram.selectedItems.nodes.length > 0) {
     const selectedNode = diagram.selectedItems.nodes[0];
     if (args.element.name == 'Draw') {
       diagram.drawingObject = {
         sourceID: selectedNode.id,
         type: 'Orthogonal',
       };
       diagram.dataBind();
     }
   }
 };

//Restrict create tool to only apply  for nodes
const onSelectionChange = (args) => {
 if (args.state === 'Changed') {
   const diagram = diagramInstance;
   const isNodeSelected = diagram.selectedItems.nodes[0];

   if (isNodeSelected) {
     diagram.selectedItems.constraints =
       SelectorConstraints.All | SelectorConstraints.UserHandle;
     diagram.selectedItems.userHandles = userHandles;
   } else {
     diagram.selectedItems.constraints =
       SelectorConstraints.All & ~SelectorConstraints.UserHandle;
     diagram.selectedItems.userHandles = [];
   }
   diagram.dataBind();
 }
}; 

Sample : Click here for sample

Conclusion

I hope you enjoyed about how to create link tool using user-handle in React Diagram

You can refer to our React Diagram feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our React 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, Direct-Trac, or feedback portal. We are always happy to assist you!