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

In the JavaScript 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.

 <div class="contextmenu-control">
       <ul id="contextmenu"></ul>
     </div>

//ContextMenu model definition
var menuOptions = {
 items: menuItems,
 select: menuClick
};

var menuObj = new ej.navigations.ContextMenu(menuOptions, '#contextmenu');

We can define menu items as follows:

//ContextMenu items definition
var menuItems = [
 {
   text: 'Cut',
   iconCss: 'e-cm-icons e-cut',
 },
 {
   text: 'Copy',
   iconCss: 'e-cm-icons e-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.

//Initialize the diagram
diagram = new ej.diagrams.Diagram({
 width: '100%',
 height: '645px',
 nodes: nodes,
 connectors: connections,
 click: function (args) {
   if (
     args &&
     args.button === 'Left' &&
     diagram.selectedItems.nodes.length > 0
   ) {
     let nodeId = diagram.selectedItems.nodes[0].id;
     bounds = document
       .getElementById(nodeId + '_content_groupElement')
       .getBoundingClientRect();
     let x = bounds.x + bounds.width / 2;
     let y = bounds.y + bounds.height / 2;
     menuObj.open(y, x);
   }
 },
});
diagram.appendTo('#diagram');

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.

function menuClick(args) {
 switch (args.item.text) {
   case 'Cut':
     diagram.cut();
     break;
   case 'Copy':
     diagram.copy();
     break;
   case 'Paste':
     diagram.paste();
     break;
   case 'Clone':
     diagram.copy();
     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 JavaScript Diagram.

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