How to Connect Two Nodes in an Angular 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 Angular Diagram feature tour. The pathData property is used to define the path data of the user handle.

<ejs-diagram
   #diagram
   id="diagram"
   width="100%"
   height="645px"
   [selectedItems]="selectedItems"
>
</ejs-diagram>

public handles: UserHandleModel[] = [
   {
     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 },
   },
 ];

 public selectedItems: SelectorModel = {
   userHandles: this.handles,
 }; 

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 to the code below 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.

<ejs-diagram
   #diagram
   id="diagram"
   width="100%"
   height="645px"
   [getCustomTool]="getCustomTool"
 >
</ejs-diagram>  

public getCustomTool: Function = this.getTool.bind(this);

public getTool(action: string) {
   if (action == 'Delete') {
     this.diagram.remove();
   } else if (action == 'Clone') {
     this.diagram.paste(this.diagram.selectedItems.selectedObjects);
   } else if (action == 'Draw') {
     this.diagram.tool = DiagramTools.DrawOnce;
     this.diagram.drawingObject.shape = {};
     (this.diagram.drawingObject as any).type = (
       this.diagram.drawingObject as any
     ).type
       ? (this.diagram.drawingObject as any).type
       : 'Orthogonal';
     (this.diagram.drawingObject as any).sourceID =
       this.diagram.selectedItems.nodes[0].id;
     this.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 constraints to hide the user handles.

<ejs-diagram
   #diagram
   id="diagram"
   width="100%"
   height="645px"
   (selectionChange)="selectionChange($event)"
 >
</ejs-diagram> 


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

Conclusion

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

You can refer to our Angular Diagram feature tour page to learn about its other groundbreaking feature representations and documentation on how to quickly get started with configuration specifications.

You can also explore our Angular Diagram example to understand how to create and manipulate data. For current customers, you can check out our components on 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!