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

In the React 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 className="contextmenu-section">
       <ContextMenuComponent
         id="contextMenu"
         items={menuItems}
         select={menuClick}
         ref={(contextMenu) => (contextMenuInstance = contextMenu)}
       />
     </div> 

We can define menu items as follows:

 //ContextMenu items definition
 let menuItems = [
   {
     text: 'Cut',
     iconCss: 'e-cm-icons e-cut',
   },
   {
     text: 'Copy',
     iconCss: 'e-cm-icons e-cm-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 className="content-wrapper" style={{ width: '100%' }}>
       <DiagramComponent
         id="diagram"
         ref={(diagram) => (diagramInstance = diagram)}
         width={'100%'}
         height={'645px'}
         nodes={nodes}
         connectors={connections}
         click={click}
       >
         <Inject services={[UndoRedo]} />
       </DiagramComponent>
     </div>

Click event to manage the opening of the context menu.

//Diagram click event
function click(args) {
 if (
   args &&
   args.button === 'Left' &&
   diagramInstance.selectedItems.nodes.length > 0
 ) {
   let nodeId = diagramInstance.selectedItems.nodes[0].id;
   let bounds = document
     .getElementById(nodeId + '_content_groupElement')
     .getBoundingClientRect();
   let x = bounds.x + bounds.width / 2;
   let y = bounds.y + bounds.height / 2;
   contextMenuInstance.open(y, x);
 }
}

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':
     diagramInstance.cut();
     break;
   case 'Copy':
     diagramInstance.copy();
     break;
   case 'Paste':
     diagramInstance.paste();
     break;
   case 'Clone':
     diagramInstance.copy();
     diagramInstance.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 React Diagram.

You can refer to our React Diagram feature tour page to know about its other groundbreaking feature representations and documentations. You can also explore our React Diagram example to understand how to present 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 React Diagram and other components.

If you have any queries or require clarifications, please let us know in comments below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!