How to copy paste nodes on current mouse position using context menu

In Syncfusion® JavaScript Diagram, you can utilize context menus to perform various operations on diagram elements. Context menus are triggered by right-clicking on diagram elements and can contain both default and custom menu items. You can configure these menu items through the contextMenuSettings property.

Initializing the Context Menu:

The following code illustrates how to enable the default context menu items.

   // Initialize the diagram
diagram = new ej.diagrams.Diagram({
 width: '100%',
 height: '645px',
 nodes: nodes,
 // Sets the default values of a nodes
 getNodeDefaults: function (obj) {
   obj.width = 100;
   obj.height = 100;
   return obj;
 },
 contextMenuSettings: {
  // Enables the context menu
   show: true,
 
 },
 });

This code sets the show property to true, enabling the default context menu items.

Initializing a Custom Context Menu:

To define a custom context menu, specify the menu items within the contextMenuSettings property. You can enable or disable default context menu items by setting the showCustomMenuOnly property to true.

 contextMenuSettings: {
   show: true,
   items: [
     {
       text: 'cut',
       id: 'cut',
       target: '.e-diagramcontent',
     },
     {
       text: 'copy',
       id: 'copy',
       target: '.e-diagramcontent',
     },
     {
       text: 'Paste',
       id: 'Paste',
       target: '.e-diagramcontent',
     },
   ],
   showCustomMenuOnly: true,
 },

Multiple nodes copy-paste:

When a user right-clicks on a node in the diagram, the contextMenuOpen event is triggered. This event provides information about the selected object, allowing you to customize context menu item visibility. Interaction with context menu items is managed through the contextMenuClick event, enabling you to respond to user actions.

The code below handles the contextMenuClick event, managing cut, copy, and paste operations:

    contextMenuClick: function (args) {
   debugger;
   switch (args.item.id) {
     case 'cut':
     case 'copy':
       copyNodes = [];
       if (
         diagram.selectedItems.nodes &&
         diagram.selectedItems.nodes.length > 0
       ) {
         for (let i = 0; i < diagram.selectedItems.nodes.length; i++) {
           copyNodes.push(diagram.selectedItems.nodes[i]);
           if (args.item.id == 'cut') {
             // Remove nodes individually only for 'cut' operation
             diagram.remove(diagram.selectedItems.nodes[i]);
             i--;
           }
         }
       }
       break;
     case 'Paste':
       if (copyNodes.length > 0) {
         for (let i = 0; i < copyNodes.length; i++) {
           let pasteNode = [
             {
               id: ej.diagrams.randomId() + i,
               width: copyNodes[i].width,
               height: copyNodes[i].height,
               shape: copyNodes[i].shape,
               offsetX: args.event.pageX,
               offsetY: args.event.pageY,
             },
           ];
           if (i > 0) {
             pasteNode[0].offsetX =
               args.event.pageX +
               (copyNodes[i].offsetX - copyNodes[0].offsetX);
             pasteNode[0].offsetY =
               args.event.pageY +
               (copyNodes[i].offsetY - copyNodes[0].offsetY);
           }
           diagram.add(pasteNode[0]);
         }
       }
       break;
   }
 }

The code maintains an array named copyNodes to store copied objects when the ‘cut’ or 'copy’ items are clicked. Additionally, it removes the selected object if the action is ‘cut’.

When the ‘paste’ item is clicked, the code iterates through the copyNodes collection and creates new nodes with properties such as height, width, and shape similar to those in the copyNode collection. The new nodes are positioned at the mouse point using the pageX and pageY properties of the contextMenuClick event arguments.

In scenarios where multiple items are copied, the code ensures proper separation between them by calculating new offsetX and offsetY values for each node. These values are derived by subtracting the pageX and pageY coordinates of the first node from subsequent nodes.

For a detailed implementation example, please refer to the sample provided below:

Sample:

Click here for sample

Conclusion

I hope you enjoyed learning about how to copy and paste nodes at the current mouse position using the context menu in JavaScript Diagram.
You can refer to our JavaScript Diagram feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started with 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!