How to add custom actions to user handles in Angular Diagram?

This article explains how to add custom actions to user handles in Angular Diagram. User handles are interactive elements that allow users to perform specific actions on diagram elements. In Syncfusion® Angular Diagram, we can render user handles for the nodes and connectors and perform custom actions by clicking the user handle.

To create user handles, we need to define user handles and add them to the userHandles collection of the selectedItems property. The name property of the user handle is used to define the name of the user handle, and it is further used to find the user handle at runtime for performing any customization.

To Render Userhandles:

First, we define user handles by specifying the path to the pathData property, which renders an icon. We can also set a tooltip to provide users with information when they hover over the handle. Additionally, we can position the user handle using the side and offset properties.

Here’s a simplified version of the code snippet:

public handles: UserHandleModel[] = [
       {
         name: 'Clone',
         pathData:
           'M0,2.4879999 L0.986,2.4879999 0.986,9.0139999 6.9950027,9.0139999 6.9950027,10 0.986,10 C0.70400238,10 0.47000122,9.9060001 0.28100207,9.7180004 0.09400177,9.5300007 0,9.2959995 0,9.0139999 z M3.0050011,0 L9.0140038,0 C9.2960014,0 9.5300026,0.093999863 9.7190018,0.28199956 9.906002,0.47000027 10,0.70399952 10,0.986 L10,6.9949989 C10,7.2770004 9.906002,7.5160007 9.7190018,7.7110004 9.5300026,7.9069996 9.2960014,8.0049992 9.0140038,8.0049992 L3.0050011,8.0049992 C2.7070007,8.0049992 2.4650002,7.9069996 2.2770004,7.7110004 2.0890007,7.5160007 1.9950027,7.2770004 1.9950027,6.9949989 L1.9950027,0.986 C1.9950027,0.70399952 2.0890007,0.47000027 2.2770004,0.28199956 2.4650002,0.093999863 2.7070007,0 3.0050011,0 z',
         tooltip: { content: 'Clone' },
         visible: true,
         offset: 1,
         side: 'Bottom',
         margin: { top: 0, bottom: 0, left: 0, right: 0 },
       },
       {
         name: 'Delete',
         pathData:
           'M0.54700077,2.2130003 L7.2129992,2.2130003 7.2129992,8.8800011 C7.2129992,9.1920013 7.1049975,9.4570007 6.8879985,9.6739998 6.6709994,9.8910007 6.406,10 6.0939997,10 L1.6659999,10 C1.3539997,10 1.0890004,9.8910007 0.87200136,9.6739998 0.65500242,9.4570007 0.54700071,9.1920013 0.54700077,8.8800011 z M2.4999992,0 L5.2600006,0 5.8329986,0.54600048 7.7599996,0.54600048 7.7599996,1.6660004 0,1.6660004 0,0.54600048 1.9270014,0.54600048 z',
         tooltip: { content: 'Delete' },
         visible: true,
         offset: 0,
         side: 'Bottom',
         margin: { top: 0, bottom: 0, left: 0, right: 0 },
       },
 ]; 

Perform Custom Actions With User Handles:

When a user clicks on the user handles, it triggers the onUserHandleMouseDown event of the diagram. This event provides details about which user handle was clicked. We can leverage this information to perform various interactions or customizations based on our specific requirements.

 public onUserHandleMouseDown(args: any) {
   switch (args.element.name) {
     case 'Delete':
       this.diagram.remove();
       break;
     case 'Clone':
       this.diagram.paste(this.diagram.selectedItems.selectedObjects);
       break;
     case 'Edit':
       this.dialog.show();
       let textBox: any = document.getElementById('inVal');
       let node = this.diagram.selectedItems.nodes[0];
       textBox.value = node.annotations[0].content;
       break;
     case 'Cut':
       this.diagram.cut();
       break;
   }
 }

In this code snippet, we’re handling user interactions with different user handles within a diagram. Each handle corresponds to a specific action when clicked. For example, if the user clicks on the “Delete” handle, it triggers the removal of the corresponding diagram element from the canvas using the diagram.remove() method. Similarly, clicking on the “Clone” handle initiates the cloning of selected diagram objects onto the canvas using diagram.paste().

When the “Edit” handle is clicked, a dialog box appears, displaying the content of the selected node’s annotation in a text box. Users can then edit this annotation content, and upon clicking the apply button, the edited text is set as the new annotation content for the node. Lastly, clicking on the “Cut” handle results in the removal of selected diagram elements by cutting them from the canvas using diagram.cut().

Similarly, a wide range of actions and behaviors can be facilitated through custom user handles, providing flexibility and enhancing the overall user experience in diagram applications.

Sample:

Refer to the working sample for additional details and implementation: Click here for sample

Conclusion

We hope you enjoyed learning about how to add custom actions to user handles in Angular Diagram.

You can refer to our Angular 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 Angular 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!