How to prevent opening context menu in Ubuntu OS in Angular Diagram

In the Syncfusion® Angular Diagram component, Diagram provides some default context menu items to ease the execution of some frequently used commands.

In a graphical user interface (GUI), a context menu is a type of menu that appears when you perform a right-click operation.

The Diagram feature provides built-in context menu items and allows users to define custom menu items through the contextMenuSettings property. The show property enables or disables the context menu.

To restrict the opening of the context menu, you can handle conditions within the contextMenuOpen event. This event is triggered when the context menu is about to open. You can show or hide specific context menu items based on certain conditions in this event.

However, on Ubuntu OS, due to the operating system’s behavior, restricting the context menu opening is not straightforward. To address this, you can use the condition args.event?.type === ‘click’ in the event handler. This condition prevents the Diagram context menu from opening when a click event occurs.

app.component.html

<ejs-diagram #diagram id="diagram" width="100%" height="580px [contextMenuSettings]="contextMenuSettings"  (contextMenuOpen)="contextMenuOpen($event)" (contextMenuClick)="contextMenuClick($event)"> </ejs-diagram> 

app.component.ts

public contextMenuOpen(args: any): void {
   if (args.event === null || args.event?.type == 'contextmenu' || args.event?.button === 2 || args.event?.button === 'Right' || args.event?.type === 'click') {
     args.cancel = true;
   }
 } 

Sample: https://stackblitz.com/edit/github-zy8zr3-tvxsdg?file=src%2Fapp.component.ts

Conclusion

I hope you enjoyed learning about how to prevent context menu 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, Direct-Trac, or feedback portal. We are always happy to assist you!