How to Connect Two Nodes in a JavaScript Diagram?

This article describes how to establish connections between nodes using user handles. To create user handles, define and add them to the userHandles collection of the selectedItems property. The name property of userHandles is used to define the name of the user handle, which can then be used at runtime for identification and customization in JavaScript Diagram feature tour. The pathData property is used to define the path data of userhandle.

let handles = [
 {
   name: 'Draw',
   pathData:
     'M3.9730001,0 L8.9730001,5.0000007 3.9730001,10.000001 3.9730001,7.0090005 0,7.0090005 0,2.9910006 3.9730001,2.9910006 z',
   tooltip: { content: 'Draw' },
   visible: true,
   offset: 0.5,
   side: 'Right',
   margin: { top: 0, bottom: 0, left: 0, right: 0 },
 },
];

//Initialize the diagram
diagram = new ej.diagrams.Diagram({
 width: '100%',
 height: '645px',
 nodes: nodes,
 selectedItems: {
   userHandles: handles,
 },
});
diagram.appendTo('#diagram'); 

We have utilized the ‘getCustomTool’ method of the diagram. The getCustomTool method allows you to define and return a tool based on your custom logic. The tool could be a drawing tool, a selection tool, or any interactive tool that extends the diagram’s capabilities. The method typically accepts a parameter, which can be a string representing the tool name or any custom identifier that helps the method determine which tool to return.Refer the below code to establish the connection using the getCustomTool.

This method is designed to configure the diagram tool for drawing a connector from a selected node when the ‘Draw’ action is triggered. It prepares the tool to draw an orthogonal connector, starting from the selected node, and ensures the diagram updates accordingly.

getCustomTool(action) {
   if (action == 'Draw') {
     diagram.tool = ej.diagrams.DiagramTools.DrawOnce;
     diagram.drawingObject.shape = {};
     diagram.drawingObject.type = diagram.drawingObject.type ? 
                  diagram.drawingObject.type  : 'Orthogonal';
     diagram.drawingObject.sourceID = diagram.selectedItems.nodes[0].id;
     diagram.dataBind();
   }
 }, 

We have utilized the selectionChange event of the diagram to customize the visibility of the user handles based on the selected items. Specifically, we apply the user handle constraints when a node is selected, enabling the user handles. Conversely, when a connector is selected, we remove the user handle constraint to hide the user handles.

selectionChange: function (args) {
   if (args.state === 'Changed') {
     if (
       args.newValue.length > 0 &&
       args.newValue[0] instanceof ej.diagrams.Node
     ) {
       diagram.selectedItems = {
         constraints:
           ej.diagrams.SelectorConstraints.All |
           ej.diagrams.SelectorConstraints.UserHandle,
         userHandles: handles,
       };
     } else {
       diagram.selectedItems = {
         constraints:
           ej.diagrams.SelectorConstraints.All &
           ~ej.diagrams.SelectorConstraints.UserHandle,
       };
     }
   }
 }, 

Conclusion

I hope you have enjoyed learning about how to establish connection between two nodes in JavaScript Diagram.

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