How to perform clipboard operation with custom context menu on left click using Angular Diagram?

In the Angular Diagram, the context menu can be utilized to customize the style of nodes and connectors, as well as perform operations like clipboard operations. Typically, the context menu appears upon a right-click of the mouse.

However, the diagram’s context menu currently lacks the ability to open menu options on a left-click. To overcome this limitation, a separate context menu control needs to be rendered, and the menu options should be opened based on the mouse click event.

To render context menu:

We must define the context menu control as follows.

<ejs-contextmenu #cmenu id="contextmenu" [items]="menuItems" (select)="menuClick($event)"></ejs-contextmenu>

We can define menu items as follows:

 public menuItems: MenuItemModel[] = [
   {
     text: 'Cut',
   },
   {
     text: 'Copy',
   },
   {
     text: 'Paste',
   },
   {
     text: 'Clone',
   },
 ];

To render diagram:

To render the context menu on a left click, it is necessary to determine whether it is a right or left mouse click. This determination can be achieved by utilizing the click event of the diagram.

<div class="control-section">
 <ejs-diagram
   #diagram
   id="diagram"
   width="100%"
   height="469px"
   [nodes]="nodes"
   [connectors]="connectors"
   (click)="click($event)"
 >
 </ejs-diagram>
</div>

Click event to manage the opening of the context menu.

 public click(args: any): void {
   if (
     args &&
     args.which === 1 &&
     this.diagram.selectedItems.nodes.length > 0
   ) {
     this.cMenuObj.open(args.pageY, args.pageX);
   }
 }

To activate the context menu, you can employ the open method associated with the context menu control. This method is called to display the menu and options. Upon selecting a menu option, you can execute clipboard operations such as cut, copy, paste, and clone. Refer to the code snippet below.

 // To hanlde context menu click
 public menuClick(args: MenuEventArgs) {
   switch (args.item.text) {
     case 'Cut':
       this.diagram.cut();
       break;
     case 'Copy':
       this.diagram.copy();
       break;
     case 'Paste':
       this.diagram.paste();
       break;
     case 'Clone':
       this.diagram.copy();
       this.diagram.paste();
       break;
   }
 }

Sample:

Click here for sample

Conclusion

I hope you enjoyed learning about how to perform clipboard operation with custom context menu on left click using 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, Direct-Trac, or feedback portal. We are always happy to assist you!